Updated docs for select element

Author: edcarroll

components/select/multi-select-label.ts

@@ -0,0 +1,55 @@
+import {Component, HostBinding, ElementRef, Renderer, HostListener, Input, ViewContainerRef, EventEmitter, ViewChild} from "@angular/core";
+import {SuiTransition} from "../transition/transition";
+
+@Component({
+    selector: 'sui-select-multi-label',
+    template: `
+<span #optionRenderTarget></span>
+<span *ngIf="!useTemplate">{{ readValue(value) }}</span>
+<i class="delete icon" (click)="deselectOption()"></i>
+`
+})
+export class SuiSelectMultiLabel {
+    @HostBinding('class.ui')
+    @HostBinding('class.label') classes = true;
+
+    private _transition:SuiTransition;
+    constructor(private el:ElementRef, private renderer:Renderer) {
+        this._transition = new SuiTransition(el, renderer);
+        this._transition.animate({
+            name: "scale",
+            direction: "in",
+            display: "inline-block",
+            duration: 100
+        });
+    }
+
+    public useTemplate:boolean = false;
+
+    @HostListener('click', ['$event'])
+    public click(event:MouseEvent):boolean {
+        event.stopPropagation();
+        return false;
+    }
+
+    public readValue = (value:any) => "";
+
+    @Input()
+    public value:any;
+
+    public selected:EventEmitter<any> = new EventEmitter<any>();
+
+    @ViewChild('optionRenderTarget', { read: ViewContainerRef })
+    public viewContainerRef:ViewContainerRef;
+
+    public deselectOption() {
+        event.stopPropagation();
+        this._transition.animate({
+            name: "scale",
+            direction: "out",
+            duration: 100,
+            callback: () => this.selected.emit(this.value)
+        });
+        return false;
+    }
+}

components/select/multi-select.ts

@@ -6,12 +6,13 @@ import {
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 
 import {SuiDropdownMenu} from "../dropdown/dropdown-menu";
-import {SuiSelectOption, SuiSelectMultiLabel} from "./select-option";
+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 {SuiSearchService} from "../search/search.service";
+import {SuiSelectMultiLabel} from "./multi-select-label";
 
 @Component({
     selector: 'sui-multi-select',

components/select/select-option.ts

@@ -1,8 +1,6 @@
 import {
     Component, Input, HostBinding, HostListener, EventEmitter, ViewContainerRef, ViewChild,
-    ElementRef, Renderer
 } from '@angular/core';
-import {SuiTransition} from "../transition/transition";
 
 @Component({
     selector: 'sui-select-option',
@@ -35,56 +33,3 @@ export class SuiSelectOption {
         return false;
     }
 }
-
-@Component({
-    selector: 'sui-select-multi-label',
-    template: `
-<span #optionRenderTarget></span>
-<span *ngIf="!useTemplate">{{ readValue(value) }}</span>
-<i class="delete icon" (click)="deselectOption()"></i>
-`
-})
-export class SuiSelectMultiLabel {
-    @HostBinding('class.ui')
-    @HostBinding('class.label') classes = true;
-
-    private _transition:SuiTransition;
-    constructor(private el:ElementRef, private renderer:Renderer) {
-        this._transition = new SuiTransition(el, renderer);
-        this._transition.animate({
-            name: "scale",
-            direction: "in",
-            display: "inline-block",
-            duration: 100
-        });
-    }
-
-    public useTemplate:boolean = false;
-
-    @HostListener('click', ['$event'])
-    public click(event:MouseEvent):boolean {
-        event.stopPropagation();
-        return false;
-    }
-
-    public readValue = (value:any) => "";
-
-    @Input()
-    public value:any;
-
-    public selected:EventEmitter<any> = new EventEmitter<any>();
-
-    @ViewChild('optionRenderTarget', { read: ViewContainerRef })
-    public viewContainerRef:ViewContainerRef;
-
-    public deselectOption() {
-        event.stopPropagation();
-        this._transition.animate({
-            name: "scale",
-            direction: "out",
-            duration: 100,
-            callback: () => this.selected.emit(this.value)
-        });
-        return false;
-    }
-}

components/select/select.ts

@@ -6,13 +6,14 @@ import {
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 
 import {SuiDropdownMenu} from "../dropdown/dropdown-menu";
-import {SuiSelectOption, SuiSelectMultiLabel} from "./select-option";
+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 {SuiSearchService} from "../search/search.service";
 import {SuiMultiSelect, SuiMultiSelectValueAccessor} from "./multi-select";
+import {SuiSelectMultiLabel} from "./multi-select-label";
 
 @Component({
     selector: 'sui-select',
@@ -209,6 +210,7 @@ export class SuiSelect implements AfterContentInit, AfterViewInit {
         this._searchService.updateQuery(this._searchService.readValue(option), false);
         this._dropdownService.isOpen = false;
         this.renderSelectedItem();
+
         this._searchService.updateQuery("");
     }
 

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

@@ -20,9 +20,13 @@ export class SelectPage {
                     description: "Sets the options available to the select component."
                 },
                 {
-                    name: "optionsField",
+                    name: "displayField",
                     description: "Sets the property name that the select element uses to display each option. Supports dot notation for nested properties."
                 },
+                {
+                    name: "keyField",
+                    description: "Sets the property name that the select element uses to bind to ngModel. Leaving this blank uses the entire object. Supports dot notation for nested properties."
+                },
                 {
                     name: "isDisabled",
                     description: "Sets whether or not the select is disabled",
@@ -66,9 +70,13 @@ export class SelectPage {
                     description: "Sets the options available to the select component."
                 },
                 {
-                    name: "optionsField",
+                    name: "displayField",
                     description: "Sets the property name that the select element uses to display each option. Supports dot notation for nested properties."
                 },
+                {
+                    name: "keyField",
+                    description: "Sets the property name that the select element uses to bind to ngModel. Leaving this blank uses the entire object. Supports dot notation for nested properties."
+                },
                 {
                     name: "isDisabled",
                     description: "Sets whether or not the select is disabled",
@@ -189,7 +197,7 @@ export class SelectPage {
     template: new SelectPage().exampleStandardTemplate
 })
 export class SelectExampleStandard {
-    public selectedGender = "Female";
+
 }
 
 @Component({