Merge pull request #21 from edcarroll/develop

v0.4.6 into master

Author: edcarroll

components/message/message.ts

@@ -1,6 +1,6 @@
 import {Component, Input, Output, EventEmitter, ElementRef, Renderer, AfterViewInit} from '@angular/core';
 import {SuiTransition} from "../transition/transition";
-import {ViewChild} from "@angular/core/src/metadata/di";
+import {ViewChild} from "@angular/core";
 
 @Component({
     selector: 'sui-message',

components/select/multi-select.ts

@@ -10,7 +10,7 @@ import {SuiSelectOption} from "./select-option";
 import {KeyCode} from '../../components/dropdown/dropdown.service';
 import {Subscription} from "rxjs";
 import {SuiDropdownService} from "../dropdown/dropdown.service";
-import {Input, Output} from "@angular/core/src/metadata/directives";
+import {Input, Output} from "@angular/core";
 import {SuiSearchService} from "../search/search.service";
 import {SuiSelectMultiLabel} from "./multi-select-label";
 
@@ -78,12 +78,20 @@ export class SuiMultiSelect implements AfterContentInit, AfterViewInit {
     public placeholder:string = "Select...";
 
     @Input()
-    public get options():any {
+    public get options():any[] {
         return this._searchService.options;
     }
 
-    public set options(value:any) {
+    public set options(value:any[]) {
         this._searchService.options = value;
+        if (this.options.length > 0 && this.selectedOptions) {
+            this.selectedOptions = this.selectedOptions.map(so => {
+                if (!this.options.find(o => o == so)) {
+                    return this.options.find(o => so == this._searchService.deepValue(o, this.keyField));
+                }
+                return so;
+            });
+        }
     }
 
     @Input()
@@ -257,8 +265,7 @@ export class SuiMultiSelect implements AfterContentInit, AfterViewInit {
             this.selectedOptions = value;
             if (this.options.length > 0) {
                 this.selectedOptions = this.selectedOptions.map(so => {
-                    let compareValue = this._searchService.deepValue(so, this.keyField);
-                    return this.options.find( (o:any) => compareValue == o);
+                    return this.options.find(o => so == this._searchService.deepValue(o, this.keyField));
                 });
             }
         }

components/select/select.ts

@@ -10,7 +10,7 @@ import {SuiSelectOption} from "./select-option";
 import {KeyCode} from '../../components/dropdown/dropdown.service';
 import {Subscription} from "rxjs";
 import {SuiDropdownService} from "../dropdown/dropdown.service";
-import {Input, Output} from "@angular/core/src/metadata/directives";
+import {Input, Output} from "@angular/core";
 import {SuiSearchService} from "../search/search.service";
 import {SuiMultiSelect, SuiMultiSelectValueAccessor} from "./multi-select";
 import {SuiSelectMultiLabel} from "./multi-select-label";
@@ -73,12 +73,15 @@ export class SuiSelect implements AfterContentInit, AfterViewInit {
     public placeholder:string = "Select one";
 
     @Input()
-    public get options():any {
+    public get options():any[] {
         return this._searchService.options;
     }
 
-    public set options(value:any) {
+    public set options(value:any[]) {
         this._searchService.options = value;
+        if (this.options.length > 0 && !this.options.find(o => o == this.selectedOption)) {
+            this.selectedOption = this.options.find(o => this.selectedOption == this._searchService.deepValue(o, this.keyField));
+        }
     }
 
     @Input()

demo/app/pages/select/select.page.ts

@@ -106,7 +106,7 @@ export class SelectPage {
                     description: "Fires whenever the select's selected item is changed. <code>[(ngModel)]</code> syntax is supported."
                 },
                 {
-                    name: "selectedOptionChange",
+                    name: "selectedOptionsChange",
                     description: "Fires whenever the select's selected item is changed. The selected value is passed as <code>$event</code>."
                 }
             ]
@@ -141,7 +141,7 @@ export class SelectPage {
 `;
     public exampleSearchTemplate:string = `
 <p>You can also use the keyboard to navigate.</p>
-<sui-select [(ngModel)]="selectedOption" [options]="options" displayField="name" [isSearchable]="true" #searchSelect>
+<sui-select [(ngModel)]="selectedOption" [options]="options" displayField="name" keyField="id" [isSearchable]="true" #searchSelect>
     <sui-select-option *ngFor="let option of searchSelect.availableOptions" [value]="option"></sui-select-option>
 </sui-select>
 <div class="ui segment">
@@ -217,7 +217,7 @@ export class SelectExampleOptions {
     template: new SelectPage().exampleSearchTemplate
 })
 export class SelectExampleSearch {
-    public options:Array<any> = [{ name: "Example" }, { name: "Test"}, { name: "What"}, { name: "No"}, { name: "Benefit"}, { name: "Oranges"}, { name: "Artemis"}, { name: "Another"}];
+    public options:Array<any> = [{ name: "Example" }, { name: "Test" }, { name: "What" }, { name: "No" }, { name: "Benefit" }, { name: "Oranges" }, { name: "Artemis" }, { name: "Another" }];
 }
 
 @Component({

package.json

@@ -2,7 +2,7 @@
   "name": "ng2-semantic-ui",
   "main": "ng2-semantic-ui.js",
   "typings": "ng2-semantic-ui.d.ts",
-  "version": "0.4.2",
+  "version": "0.4.6",
   "description": "Angular 2 Semantic UI Components",
   "repository": {
     "type": "git",