Exported select directives

Author: edcarroll

components/select.ts

@@ -0,0 +1,7 @@
+import {Select, SelectValueAccessor} from './select/select.component';
+import {SelectOption} from './select/select-option.component';
+
+export {Select, SelectValueAccessor} from './select/select.component';
+export {SelectOption} from './select/select-option.component';
+
+export const SELECT_DIRECTIVES:Array<any> = [Select, SelectOption, SelectValueAccessor];

components/select/select-option.component.ts

@@ -0,0 +1,22 @@
+import {Component, Input, HostBinding, ElementRef, HostListener} from 'angular2/core';
+import {Select} from '../select';
+
+@Component({
+    selector: 'sui-select-option',
+    template: `<ng-content></ng-content>`
+})
+export class SelectOption {
+    @HostBinding('class.item') itemClass = true;
+
+    @Input()
+    public value:any;
+
+    constructor(private host:Select, private el:ElementRef) { }
+
+    @HostListener('click', ['$event'])
+    public click(event):boolean {
+        event.stopPropagation();
+        this.host.selectOption(this.value, this.el.nativeElement.innerHTML);
+        return false;
+    }
+}

components/select/select.component.ts

@@ -1,4 +1,4 @@
-import {Component, Directive, Provider, Input, ViewChild, HostBinding, ElementRef, HostListener, forwardRef} from 'angular2/core';
+import {Component, Directive, Provider, ViewChild, HostBinding, ElementRef, HostListener, forwardRef} from 'angular2/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from 'angular2/common';
 import {Search, SearchValueAccessor} from '../search';
 import {DropdownMenu} from '../dropdown';
@@ -128,6 +128,10 @@ export class Select extends Search {
         this.selectedOptions.splice(index, 1);
         this.selectedOptionsHTML.splice(index, 1);
         this.selectedOptionChange.emit(this.selectedOptions);
+
+        if (this.isSearchable) {
+            this.focusFirstItem();
+        }
     }
 
     //noinspection JSMethodCanBeStatic
@@ -181,31 +185,12 @@ export class Select extends Search {
             var lastSelectedOption = selectedOptions[selectedOptions.length - 1];
             if (lastSelectedOption) {
                 this.deselectOption(lastSelectedOption);
+
             }
         }
     }
 }
 
-@Component({
-    selector: 'sui-select-option',
-    template: `<ng-content></ng-content>`
-})
-export class SelectOption {
-    @HostBinding('class.item') itemClass = true;
-
-    @Input()
-    public value:any;
-
-    constructor(private host:Select, private el:ElementRef) { }
-
-    @HostListener('click', ['$event'])
-    public click(event):boolean {
-        event.stopPropagation();
-        this.host.selectOption(this.value, this.el.nativeElement.innerHTML);
-        return false;
-    }
-}
-
 const CUSTOM_VALUE_ACCESSOR = new Provider(NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => SelectValueAccessor), multi: true});
 
 @Directive({

demo/app/components/test.page.ts

@@ -3,12 +3,12 @@ import {Component} from 'angular2/core';
 import {PageTitle} from "../internal/page-title.component";
 
 import {CHECKBOX_DIRECTIVES} from '../../../components/checkbox';
-import {Select, SelectValueAccessor, SelectOption} from "../../../components/select/select.component";
+import {SELECT_DIRECTIVES} from "../../../components/select";
 import {TEMPLATE_DIRECTIVES} from "../../../components/template";
 
 @Component({
     selector: 'test-component-page',
-    directives: [PageTitle, CHECKBOX_DIRECTIVES, TEMPLATE_DIRECTIVES, Select, SelectValueAccessor, SelectOption],
+    directives: [PageTitle, CHECKBOX_DIRECTIVES, TEMPLATE_DIRECTIVES, SELECT_DIRECTIVES],
     template: `
 <page-title>
     <div header>Test</div>
@@ -28,7 +28,7 @@ import {TEMPLATE_DIRECTIVES} from "../../../components/template";
         <p>Selected option: {{ selected | json }}</p>
     </div>
     <div class="ui segment">
-        <sui-select class="fluid" [options]="options" optionsField="test" [(ngModel)]="selectedItems" [isSearchable]="false" [allowMultiple]="true" #multiSelect>
+        <sui-select class="fluid" [options]="optionsSearch" optionsField="test" [(ngModel)]="selectedItems" [isSearchable]="true" [allowMultiple]="true" #multiSelect>
             <sui-select-option *ngFor="#result of multiSelect.results" [value]="result"><i class="af flag"></i>{{ result.test }}</sui-select-option>
         </sui-select>
     </div>

ng2-semantic-ui.ts

@@ -8,6 +8,7 @@ import {PROGRESS_DIRECTIVES} from './components/progress';
 import {MESSAGE_DIRECTIVES} from './components/message';
 import {RATING_DIRECTIVES} from './components/rating';
 import {SEARCH_DIRECTIVES} from './components/search';
+import {SELECT_DIRECTIVES} from './components/select';
 import {TAB_DIRECTIVES} from './components/tab';
 import {TEMPLATE_DIRECTIVES} from './components/template';
 
@@ -21,6 +22,7 @@ export * from './components/progress';
 export * from './components/message';
 export * from './components/rating';
 export * from './components/search';
+export * from './components/select';
 export * from './components/tab';
 export * from './components/template';
 
@@ -35,6 +37,7 @@ export const DIRECTIVES: any[] = [
     MESSAGE_DIRECTIVES,
     RATING_DIRECTIVES,
     SEARCH_DIRECTIVES,
+    SELECT_DIRECTIVES,
     TAB_DIRECTIVES,
     TEMPLATE_DIRECTIVES
 ];