ng-select - npm Package Compare versions

Comparing version 1.0.0-beta.5 to 1.0.0-beta.6

CHANGELOG.md

 # Changelog
 
+
+
+<a name="1.0.0-beta.6"></a>
+## [1.0.0-beta.6](https://github.com/basvandenberg/ng-select/compare/1.0.0-beta.5...1.0.0-beta.6) (2017-07-05)
+
+### Features
+- New ng-select web site.
+- Blur and focus output events (#170).
+- Option template for customizing option layout/styling (#92).
+
+### Bug fixes
+- Stop clearing the (single select) filter input in the drop down (#162).
+- Enable/disable filter (based on noFilter) if list of options changes (#146).
+- Skip disabled options when navigating option list with up/down keys (#182).
+- Set value, also if there is no option with this value present yet, this
+  prevents having to use setTimeout when setting a value directly after
+  setting/updating options (#169, #130).
+- Call the onChange only for user (de)select actions (#176).
+- Fix missing placeholder (multiple select) if filter is hidden (#110).
+- Prevent drop down to close when clicking disabled option (#156).
+- Update filter input width when closing drop down (#198).
+- Show pointer instead of text cursor when hovering placeholder in multiple 
+  select (#199).
+- Added change detection for placeholder property (#192).
+- Fixed placeholder initially not visible in multi select (#193).
+
+
+
 <a name="1.0.0-beta.5"></a>
@@ -149,3 +177,3 @@ ## [1.0.0-beta.5](https://github.com/basvandenberg/ng-select/compare/1.0.0-beta.4...1.0.0-beta.5) (2017-03-29)
 
-- Set ViewEncapsulation to None to enable style override ([#16] (https://github.com/basvandenberg/ng-select/issues/16)). 
+- Set ViewEncapsulation to None to enable style override ([#16] (https://github.com/basvandenberg/ng-select/issues/16)).
 
@@ -179,2 +207,1 @@
 - Prevent javascript error when clicking the 'No results found' option ([#8] (https://github.com/basvandenberg/ng-select/issues/8)).
-

dist/option-list.d.ts

@@ -7,2 +7,5 @@ import { Option } from './option';
     private _hasShown;
+    private _hasSelected;
+    readonly hasShown: boolean;
+    readonly hasSelected: boolean;
     constructor(options: Array<IOption>);
@@ -19,4 +22,6 @@ /** Options. **/
     clearSelection(): void;
+    private updateHasSelected();
     /** Filter. **/
     readonly filtered: Array<Option>;
+    readonly filteredEnabled: Array<Option>;
     filter(term: string): boolean;
@@ -34,4 +39,2 @@ private resetFilter();
     /** Util. **/
-    readonly hasShown: boolean;
-    hasSelected(): boolean;
     hasShownSelected(): boolean;
@@ -38,0 +41,0 @@ private getFirstShown();

dist/option-list.js

@@ -25,2 +25,16 @@ "use strict";
     }
+    Object.defineProperty(OptionList.prototype, "hasShown", {
+        get: function () {
+            return this._hasShown;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(OptionList.prototype, "hasSelected", {
+        get: function () {
+            return this._hasSelected;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(OptionList.prototype, "options", {
@@ -42,5 +56,3 @@ /** Options. **/
         get: function () {
-            return this.selection.map(function (selectedOption) {
-                return selectedOption.value;
-            });
+            return this.selection.map(function (option) { return option.value; });
         },
@@ -52,2 +64,3 @@ set: function (v) {
             });
+            this.updateHasSelected();
         },
@@ -60,5 +73,3 @@ enumerable: true,
         get: function () {
-            return this.options.filter(function (option) {
-                return option.selected;
-            });
+            return this.options.filter(function (option) { return option.selected; });
         },
@@ -73,5 +84,7 @@ enumerable: true,
         option.selected = true;
+        this.updateHasSelected();
     };
     OptionList.prototype.deselect = function (option) {
         option.selected = false;
+        this.updateHasSelected();
     };
@@ -82,9 +95,11 @@ OptionList.prototype.clearSelection = function () {
         });
+        this._hasSelected = false;
     };
+    OptionList.prototype.updateHasSelected = function () {
+        this._hasSelected = this.options.some(function (option) { return option.selected; });
+    };
     Object.defineProperty(OptionList.prototype, "filtered", {
         /** Filter. **/
         get: function () {
-            return this.options.filter(function (option) {
-                return option.shown;
-            });
+            return this.options.filter(function (option) { return option.shown; });
         },
@@ -94,2 +109,9 @@ enumerable: true,
     });
+    Object.defineProperty(OptionList.prototype, "filteredEnabled", {
+        get: function () {
+            return this.options.filter(function (option) { return option.shown && !option.disabled; });
+        },
+        enumerable: true,
+        configurable: true
+    });
     OptionList.prototype.filter = function (term) {
@@ -141,13 +163,13 @@ var anyShown = false;
     OptionList.prototype.highlightNextOption = function () {
-        var shownOptions = this.filtered;
-        var index = this.getHighlightedIndexFromList(shownOptions);
-        if (index > -1 && index < shownOptions.length - 1) {
-            this.highlightOption(shownOptions[index + 1]);
+        var shownEnabledOptions = this.filteredEnabled;
+        var index = this.getHighlightedIndexFromList(shownEnabledOptions);
+        if (index > -1 && index < shownEnabledOptions.length - 1) {
+            this.highlightOption(shownEnabledOptions[index + 1]);
         }
     };
     OptionList.prototype.highlightPreviousOption = function () {
-        var shownOptions = this.filtered;
-        var index = this.getHighlightedIndexFromList(shownOptions);
+        var shownEnabledOptions = this.filteredEnabled;
+        var index = this.getHighlightedIndexFromList(shownEnabledOptions);
         if (index > 0) {
-            this.highlightOption(shownOptions[index - 1]);
+            this.highlightOption(shownEnabledOptions[index - 1]);
         }
@@ -172,15 +194,3 @@ };
     };
-    Object.defineProperty(OptionList.prototype, "hasShown", {
-        /** Util. **/
-        get: function () {
-            return this._hasShown;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    OptionList.prototype.hasSelected = function () {
-        return this.options.some(function (option) {
-            return option.selected;
-        });
-    };
+    /** Util. **/
     OptionList.prototype.hasShownSelected = function () {
@@ -187,0 +197,0 @@ return this.options.some(function (option) {

dist/option-list.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"OptionList":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"./option.interface","name":"IOption"}]}]}],"getOptionsByValue":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"deselect":[{"__symbolic":"method"}],"clearSelection":[{"__symbolic":"method"}],"filter":[{"__symbolic":"method"}],"resetFilter":[{"__symbolic":"method"}],"highlight":[{"__symbolic":"method"}],"highlightOption":[{"__symbolic":"method"}],"highlightNextOption":[{"__symbolic":"method"}],"highlightPreviousOption":[{"__symbolic":"method"}],"clearHighlightedOption":[{"__symbolic":"method"}],"getHighlightedIndexFromList":[{"__symbolic":"method"}],"getHighlightedIndex":[{"__symbolic":"method"}],"hasSelected":[{"__symbolic":"method"}],"hasShownSelected":[{"__symbolic":"method"}],"getFirstShown":[{"__symbolic":"method"}],"getFirstShownSelected":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"OptionList":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"./option.interface","name":"IOption"}]}]}],"getOptionsByValue":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"deselect":[{"__symbolic":"method"}],"clearSelection":[{"__symbolic":"method"}],"filter":[{"__symbolic":"method"}],"resetFilter":[{"__symbolic":"method"}],"highlight":[{"__symbolic":"method"}],"highlightOption":[{"__symbolic":"method"}],"highlightNextOption":[{"__symbolic":"method"}],"highlightPreviousOption":[{"__symbolic":"method"}],"clearHighlightedOption":[{"__symbolic":"method"}],"getHighlightedIndexFromList":[{"__symbolic":"method"}],"getHighlightedIndex":[{"__symbolic":"method"}],"hasSelected":[{"__symbolic":"method"}],"hasShownSelected":[{"__symbolic":"method"}],"getFirstShown":[{"__symbolic":"method"}],"getFirstShownSelected":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"OptionList":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"./option.interface","name":"IOption"}]}]}],"getOptionsByValue":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"deselect":[{"__symbolic":"method"}],"clearSelection":[{"__symbolic":"method"}],"updateHasSelected":[{"__symbolic":"method"}],"filter":[{"__symbolic":"method"}],"resetFilter":[{"__symbolic":"method"}],"highlight":[{"__symbolic":"method"}],"highlightOption":[{"__symbolic":"method"}],"highlightNextOption":[{"__symbolic":"method"}],"highlightPreviousOption":[{"__symbolic":"method"}],"clearHighlightedOption":[{"__symbolic":"method"}],"getHighlightedIndexFromList":[{"__symbolic":"method"}],"getHighlightedIndex":[{"__symbolic":"method"}],"hasShownSelected":[{"__symbolic":"method"}],"getFirstShown":[{"__symbolic":"method"}],"getFirstShownSelected":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"OptionList":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"./option.interface","name":"IOption"}]}]}],"getOptionsByValue":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"deselect":[{"__symbolic":"method"}],"clearSelection":[{"__symbolic":"method"}],"updateHasSelected":[{"__symbolic":"method"}],"filter":[{"__symbolic":"method"}],"resetFilter":[{"__symbolic":"method"}],"highlight":[{"__symbolic":"method"}],"highlightOption":[{"__symbolic":"method"}],"highlightNextOption":[{"__symbolic":"method"}],"highlightPreviousOption":[{"__symbolic":"method"}],"clearHighlightedOption":[{"__symbolic":"method"}],"getHighlightedIndexFromList":[{"__symbolic":"method"}],"getHighlightedIndex":[{"__symbolic":"method"}],"hasShownSelected":[{"__symbolic":"method"}],"getFirstShown":[{"__symbolic":"method"}],"getFirstShownSelected":[{"__symbolic":"method"}]}}}}]

dist/select-dropdown.component.d.ts

@@ -1,2 +0,2 @@
-import { AfterViewInit, EventEmitter, OnChanges, OnInit } from '@angular/core';
+import { AfterViewInit, EventEmitter, OnChanges, OnInit, TemplateRef } from '@angular/core';
 import { Option } from './option';
@@ -15,5 +15,7 @@ import { OptionList } from './option-list';
     placeholder: string;
-    close: EventEmitter<boolean>;
+    optionTemplate: TemplateRef<any>;
     optionClicked: EventEmitter<Option>;
+    optionsListClick: EventEmitter<null>;
     singleFilterClick: EventEmitter<null>;
+    singleFilterFocus: EventEmitter<null>;
     singleFilterInput: EventEmitter<string>;
@@ -29,5 +31,7 @@ singleFilterKeydown: EventEmitter<any>;
     ngAfterViewInit(): void;
-    onSingleFilterClick(event: any): void;
+    onOptionsListClick(): void;
+    onSingleFilterClick(): void;
     onSingleFilterInput(event: any): void;
     onSingleFilterKeydown(event: any): void;
+    onSingleFilterFocus(): void;
     onOptionsWheel(event: any): void;
@@ -40,5 +44,4 @@ onOptionMouseover(option: Option): void;
     getOptionStyle(option: Option): any;
-    clearFilterInput(): void;
     moveHighlightedIntoView(): void;
     private handleOptionsWheel(e);
 }

dist/select-dropdown.component.html.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TEMPLATE = "<div\n    [ngStyle]=\"{'top.px': top, 'left.px': left, 'width.px': width}\">\n\n    <div class=\"filter\"\n        *ngIf=\"!multiple && filterEnabled\">\n        <input\n            #filterInput\n            autocomplete=\"off\"\n            [placeholder]=\"placeholder\"\n            (click)=\"onSingleFilterClick($event)\"\n            (input)=\"onSingleFilterInput($event)\"\n            (keydown)=\"onSingleFilterKeydown($event)\">\n    </div>\n\n    <div class=\"options\"\n        #optionsList>\n        <ul\n            (wheel)=\"onOptionsWheel($event)\">\n            <li *ngFor=\"let option of optionList.filtered\"\n                [ngClass]=\"{'highlighted': option.highlighted, 'selected': option.selected, 'disabled': option.disabled}\"\n                [ngStyle]=\"getOptionStyle(option)\"\n                (click)=\"onOptionClick(option)\"\n                (mouseover)=\"onOptionMouseover(option)\">\n                {{option.label}}\n            </li>\n            <li\n                *ngIf=\"!optionList.hasShown\"\n                class=\"message\">\n                {{notFoundMsg}}\n            </li>\n        </ul>\n    </div>\n</div>\n";
+exports.TEMPLATE = "<div\n    [ngStyle]=\"{'top.px': top, 'left.px': left, 'width.px': width}\">\n\n    <div class=\"filter\"\n        *ngIf=\"!multiple && filterEnabled\">\n        <input\n            #filterInput\n            autocomplete=\"off\"\n            [placeholder]=\"placeholder\"\n            (click)=\"onSingleFilterClick()\"\n            (input)=\"onSingleFilterInput($event)\"\n            (keydown)=\"onSingleFilterKeydown($event)\"\n            (focus)=\"onSingleFilterFocus()\">\n    </div>\n\n    <div class=\"options\"\n        (click)=\"onOptionsListClick()\"\n        #optionsList>\n        <ul\n            (wheel)=\"onOptionsWheel($event)\">\n            <li *ngFor=\"let option of optionList.filtered\"\n                [ngClass]=\"{'highlighted': option.highlighted, 'selected': option.selected, 'disabled': option.disabled}\"\n                [ngStyle]=\"getOptionStyle(option)\"\n                (click)=\"onOptionClick(option)\"\n                (mouseover)=\"onOptionMouseover(option)\">\n                <ng-template [ngOutletContext]=\"{option: option.wrappedOption}\" [ngTemplateOutlet]=\"optionTemplate\"></ng-template>\n                <span *ngIf=\"!optionTemplate\">{{option.label}}</span>\n            </li>\n            <li\n                *ngIf=\"!optionList.hasShown\"\n                class=\"message\">\n                {{notFoundMsg}}\n            </li>\n        </ul>\n    </div>\n</div>\n";

dist/select-dropdown.component.html.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"TEMPLATE":"<div\n    [ngStyle]=\"{'top.px': top, 'left.px': left, 'width.px': width}\">\n\n    <div class=\"filter\"\n        *ngIf=\"!multiple && filterEnabled\">\n        <input\n            #filterInput\n            autocomplete=\"off\"\n            [placeholder]=\"placeholder\"\n            (click)=\"onSingleFilterClick($event)\"\n            (input)=\"onSingleFilterInput($event)\"\n            (keydown)=\"onSingleFilterKeydown($event)\">\n    </div>\n\n    <div class=\"options\"\n        #optionsList>\n        <ul\n            (wheel)=\"onOptionsWheel($event)\">\n            <li *ngFor=\"let option of optionList.filtered\"\n                [ngClass]=\"{'highlighted': option.highlighted, 'selected': option.selected, 'disabled': option.disabled}\"\n                [ngStyle]=\"getOptionStyle(option)\"\n                (click)=\"onOptionClick(option)\"\n                (mouseover)=\"onOptionMouseover(option)\">\n                {{option.label}}\n            </li>\n            <li\n                *ngIf=\"!optionList.hasShown\"\n                class=\"message\">\n                {{notFoundMsg}}\n            </li>\n        </ul>\n    </div>\n</div>\n"}},{"__symbolic":"module","version":1,"metadata":{"TEMPLATE":"<div\n    [ngStyle]=\"{'top.px': top, 'left.px': left, 'width.px': width}\">\n\n    <div class=\"filter\"\n        *ngIf=\"!multiple && filterEnabled\">\n        <input\n            #filterInput\n            autocomplete=\"off\"\n            [placeholder]=\"placeholder\"\n            (click)=\"onSingleFilterClick($event)\"\n            (input)=\"onSingleFilterInput($event)\"\n            (keydown)=\"onSingleFilterKeydown($event)\">\n    </div>\n\n    <div class=\"options\"\n        #optionsList>\n        <ul\n            (wheel)=\"onOptionsWheel($event)\">\n            <li *ngFor=\"let option of optionList.filtered\"\n                [ngClass]=\"{'highlighted': option.highlighted, 'selected': option.selected, 'disabled': option.disabled}\"\n                [ngStyle]=\"getOptionStyle(option)\"\n                (click)=\"onOptionClick(option)\"\n                (mouseover)=\"onOptionMouseover(option)\">\n                {{option.label}}\n            </li>\n            <li\n                *ngIf=\"!optionList.hasShown\"\n                class=\"message\">\n                {{notFoundMsg}}\n            </li>\n        </ul>\n    </div>\n</div>\n"}}]
+[{"__symbolic":"module","version":3,"metadata":{"TEMPLATE":"<div\n    [ngStyle]=\"{'top.px': top, 'left.px': left, 'width.px': width}\">\n\n    <div class=\"filter\"\n        *ngIf=\"!multiple && filterEnabled\">\n        <input\n            #filterInput\n            autocomplete=\"off\"\n            [placeholder]=\"placeholder\"\n            (click)=\"onSingleFilterClick()\"\n            (input)=\"onSingleFilterInput($event)\"\n            (keydown)=\"onSingleFilterKeydown($event)\"\n            (focus)=\"onSingleFilterFocus()\">\n    </div>\n\n    <div class=\"options\"\n        (click)=\"onOptionsListClick()\"\n        #optionsList>\n        <ul\n            (wheel)=\"onOptionsWheel($event)\">\n            <li *ngFor=\"let option of optionList.filtered\"\n                [ngClass]=\"{'highlighted': option.highlighted, 'selected': option.selected, 'disabled': option.disabled}\"\n                [ngStyle]=\"getOptionStyle(option)\"\n                (click)=\"onOptionClick(option)\"\n                (mouseover)=\"onOptionMouseover(option)\">\n                <ng-template [ngOutletContext]=\"{option: option.wrappedOption}\" [ngTemplateOutlet]=\"optionTemplate\"></ng-template>\n                <span *ngIf=\"!optionTemplate\">{{option.label}}</span>\n            </li>\n            <li\n                *ngIf=\"!optionList.hasShown\"\n                class=\"message\">\n                {{notFoundMsg}}\n            </li>\n        </ul>\n    </div>\n</div>\n"}},{"__symbolic":"module","version":1,"metadata":{"TEMPLATE":"<div\n    [ngStyle]=\"{'top.px': top, 'left.px': left, 'width.px': width}\">\n\n    <div class=\"filter\"\n        *ngIf=\"!multiple && filterEnabled\">\n        <input\n            #filterInput\n            autocomplete=\"off\"\n            [placeholder]=\"placeholder\"\n            (click)=\"onSingleFilterClick()\"\n            (input)=\"onSingleFilterInput($event)\"\n            (keydown)=\"onSingleFilterKeydown($event)\"\n            (focus)=\"onSingleFilterFocus()\">\n    </div>\n\n    <div class=\"options\"\n        (click)=\"onOptionsListClick()\"\n        #optionsList>\n        <ul\n            (wheel)=\"onOptionsWheel($event)\">\n            <li *ngFor=\"let option of optionList.filtered\"\n                [ngClass]=\"{'highlighted': option.highlighted, 'selected': option.selected, 'disabled': option.disabled}\"\n                [ngStyle]=\"getOptionStyle(option)\"\n                (click)=\"onOptionClick(option)\"\n                (mouseover)=\"onOptionMouseover(option)\">\n                <ng-template [ngOutletContext]=\"{option: option.wrappedOption}\" [ngTemplateOutlet]=\"optionTemplate\"></ng-template>\n                <span *ngIf=\"!optionTemplate\">{{option.label}}</span>\n            </li>\n            <li\n                *ngIf=\"!optionList.hasShown\"\n                class=\"message\">\n                {{notFoundMsg}}\n            </li>\n        </ul>\n    </div>\n</div>\n"}}]

dist/select-dropdown.component.js

@@ -8,5 +8,6 @@ "use strict";
     function SelectDropdownComponent() {
-        this.close = new core_1.EventEmitter();
         this.optionClicked = new core_1.EventEmitter();
+        this.optionsListClick = new core_1.EventEmitter();
         this.singleFilterClick = new core_1.EventEmitter();
+        this.singleFilterFocus = new core_1.EventEmitter();
         this.singleFilterInput = new core_1.EventEmitter();
@@ -18,3 +19,2 @@ this.singleFilterKeydown = new core_1.EventEmitter();
     /** Event handlers. **/
-    // Angular life cycle hooks.
     SelectDropdownComponent.prototype.ngOnInit = function () {
@@ -34,4 +34,6 @@ this.optionsReset();
     };
-    // Filter input (single select).
-    SelectDropdownComponent.prototype.onSingleFilterClick = function (event) {
+    SelectDropdownComponent.prototype.onOptionsListClick = function () {
+        this.optionsListClick.emit(null);
+    };
+    SelectDropdownComponent.prototype.onSingleFilterClick = function () {
         this.singleFilterClick.emit(null);
@@ -45,3 +47,5 @@ };
     };
-    // Options list.
+    SelectDropdownComponent.prototype.onSingleFilterFocus = function () {
+        this.singleFilterFocus.emit(null);
+    };
     SelectDropdownComponent.prototype.onOptionsWheel = function (event) {
@@ -77,7 +81,2 @@ this.handleOptionsWheel(event);
     };
-    SelectDropdownComponent.prototype.clearFilterInput = function () {
-        if (this.filterEnabled) {
-            this.filterInput.nativeElement.value = '';
-        }
-    };
     SelectDropdownComponent.prototype.moveHighlightedIntoView = function () {
@@ -136,5 +135,7 @@ var list = this.optionsList.nativeElement;
     'placeholder': [{ type: core_1.Input },],
-    'close': [{ type: core_1.Output },],
+    'optionTemplate': [{ type: core_1.Input },],
     'optionClicked': [{ type: core_1.Output },],
+    'optionsListClick': [{ type: core_1.Output },],
     'singleFilterClick': [{ type: core_1.Output },],
+    'singleFilterFocus': [{ type: core_1.Output },],
     'singleFilterInput': [{ type: core_1.Output },],
@@ -141,0 +142,0 @@ 'singleFilterKeydown': [{ type: core_1.Output },],

dist/select-dropdown.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"SelectDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"select-dropdown","template":{"__symbolic":"reference","module":"./select-dropdown.component.html","name":"TEMPLATE"},"styles":[{"__symbolic":"reference","module":"./select-dropdown.component.css","name":"STYLE"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"filterEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightTextColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"left":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"notFoundMsg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"optionList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"top":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"optionClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"singleFilterClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"singleFilterInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"singleFilterKeydown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"filterInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["filterInput"]}]}],"optionsList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["optionsList"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onSingleFilterClick":[{"__symbolic":"method"}],"onSingleFilterInput":[{"__symbolic":"method"}],"onSingleFilterKeydown":[{"__symbolic":"method"}],"onOptionsWheel":[{"__symbolic":"method"}],"onOptionMouseover":[{"__symbolic":"method"}],"onOptionClick":[{"__symbolic":"method"}],"optionsReset":[{"__symbolic":"method"}],"getOptionStyle":[{"__symbolic":"method"}],"clearFilterInput":[{"__symbolic":"method"}],"moveHighlightedIntoView":[{"__symbolic":"method"}],"handleOptionsWheel":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SelectDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"select-dropdown","template":{"__symbolic":"reference","module":"./select-dropdown.component.html","name":"TEMPLATE"},"styles":[{"__symbolic":"reference","module":"./select-dropdown.component.css","name":"STYLE"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"filterEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightTextColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"left":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"notFoundMsg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"optionList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"top":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"optionClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"singleFilterClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"singleFilterInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"singleFilterKeydown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"filterInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["filterInput"]}]}],"optionsList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["optionsList"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onSingleFilterClick":[{"__symbolic":"method"}],"onSingleFilterInput":[{"__symbolic":"method"}],"onSingleFilterKeydown":[{"__symbolic":"method"}],"onOptionsWheel":[{"__symbolic":"method"}],"onOptionMouseover":[{"__symbolic":"method"}],"onOptionClick":[{"__symbolic":"method"}],"optionsReset":[{"__symbolic":"method"}],"getOptionStyle":[{"__symbolic":"method"}],"clearFilterInput":[{"__symbolic":"method"}],"moveHighlightedIntoView":[{"__symbolic":"method"}],"handleOptionsWheel":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"SelectDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"select-dropdown","template":{"__symbolic":"reference","module":"./select-dropdown.component.html","name":"TEMPLATE"},"styles":[{"__symbolic":"reference","module":"./select-dropdown.component.css","name":"STYLE"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"filterEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightTextColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"left":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"notFoundMsg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"optionList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"top":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"optionTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"optionClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"optionsListClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"singleFilterClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"singleFilterFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"singleFilterInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"singleFilterKeydown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"filterInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["filterInput"]}]}],"optionsList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["optionsList"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onOptionsListClick":[{"__symbolic":"method"}],"onSingleFilterClick":[{"__symbolic":"method"}],"onSingleFilterInput":[{"__symbolic":"method"}],"onSingleFilterKeydown":[{"__symbolic":"method"}],"onSingleFilterFocus":[{"__symbolic":"method"}],"onOptionsWheel":[{"__symbolic":"method"}],"onOptionMouseover":[{"__symbolic":"method"}],"onOptionClick":[{"__symbolic":"method"}],"optionsReset":[{"__symbolic":"method"}],"getOptionStyle":[{"__symbolic":"method"}],"moveHighlightedIntoView":[{"__symbolic":"method"}],"handleOptionsWheel":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SelectDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"select-dropdown","template":{"__symbolic":"reference","module":"./select-dropdown.component.html","name":"TEMPLATE"},"styles":[{"__symbolic":"reference","module":"./select-dropdown.component.css","name":"STYLE"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"filterEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightTextColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"left":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"notFoundMsg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"optionList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"top":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"optionTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"optionClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"optionsListClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"singleFilterClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"singleFilterFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"singleFilterInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"singleFilterKeydown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"filterInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["filterInput"]}]}],"optionsList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["optionsList"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onOptionsListClick":[{"__symbolic":"method"}],"onSingleFilterClick":[{"__symbolic":"method"}],"onSingleFilterInput":[{"__symbolic":"method"}],"onSingleFilterKeydown":[{"__symbolic":"method"}],"onSingleFilterFocus":[{"__symbolic":"method"}],"onOptionsWheel":[{"__symbolic":"method"}],"onOptionMouseover":[{"__symbolic":"method"}],"onOptionClick":[{"__symbolic":"method"}],"optionsReset":[{"__symbolic":"method"}],"getOptionStyle":[{"__symbolic":"method"}],"moveHighlightedIntoView":[{"__symbolic":"method"}],"handleOptionsWheel":[{"__symbolic":"method"}]}}}}]

dist/select.component.css.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.STYLE = "ng-select {\n  display: inline-block;\n  margin: 0;\n  position: relative;\n  vertical-align: middle;\n  width: 100%; }\n  ng-select * {\n    box-sizing: border-box;\n    font-family: Sans-Serif; }\n  ng-select > div {\n    border: 1px solid #ddd;\n    box-sizing: border-box;\n    cursor: pointer;\n    user-select: none;\n    width: 100%; }\n    ng-select > div.disabled {\n      background-color: #eee;\n      color: #aaa;\n      cursor: default;\n      pointer-events: none; }\n    ng-select > div > div.single {\n      display: flex;\n      height: 30px;\n      width: 100%; }\n      ng-select > div > div.single > div.value,\n      ng-select > div > div.single > div.placeholder {\n        flex: 1;\n        line-height: 30px;\n        overflow: hidden;\n        padding: 0 10px;\n        white-space: nowrap; }\n      ng-select > div > div.single > div.placeholder {\n        color: #a9a9a9; }\n      ng-select > div > div.single > div.clear,\n      ng-select > div > div.single > div.toggle {\n        color: #aaa;\n        line-height: 30px;\n        text-align: center;\n        width: 30px; }\n        ng-select > div > div.single > div.clear:hover,\n        ng-select > div > div.single > div.toggle:hover {\n          background-color: #ececec; }\n      ng-select > div > div.single > div.clear {\n        font-size: 18px; }\n      ng-select > div > div.single > div.toggle {\n        font-size: 14px; }\n    ng-select > div > div.multiple {\n      display: flex;\n      flex-flow: row wrap;\n      height: 100%;\n      min-height: 30px;\n      padding: 0 10px;\n      width: 100%; }\n      ng-select > div > div.multiple > div.option {\n        background-color: #eee;\n        border: 1px solid #aaa;\n        border-radius: 4px;\n        color: #333;\n        cursor: default;\n        display: inline-block;\n        flex-shrink: 0;\n        font-size: 14px;\n        line-height: 22px;\n        margin: 3px 5px 3px 0;\n        padding: 0 4px; }\n        ng-select > div > div.multiple > div.option span.deselect-option {\n          color: #aaa;\n          cursor: pointer;\n          font-size: 14px;\n          height: 20px;\n          line-height: 20px; }\n          ng-select > div > div.multiple > div.option span.deselect-option:hover {\n            color: #555; }\n      ng-select > div > div.multiple input {\n        background-color: transparent;\n        border: none;\n        height: 30px;\n        line-height: 30px;\n        padding: 0; }\n        ng-select > div > div.multiple input:focus {\n          outline: none; }\n  ng-select label {\n    color: rgba(0, 0, 0, 0.38);\n    display: block;\n    font-size: 13px;\n    padding: 4px 0; }\n";
+exports.STYLE = "ng-select {\n  display: inline-block;\n  margin: 0;\n  position: relative;\n  vertical-align: middle;\n  width: 100%; }\n  ng-select * {\n    box-sizing: border-box;\n    font-family: Sans-Serif; }\n  ng-select > div {\n    border: 1px solid #ddd;\n    box-sizing: border-box;\n    cursor: pointer;\n    user-select: none;\n    width: 100%; }\n    ng-select > div.disabled {\n      background-color: #eee;\n      color: #aaa;\n      cursor: default;\n      pointer-events: none; }\n    ng-select > div > div.single {\n      display: flex;\n      height: 30px;\n      width: 100%; }\n      ng-select > div > div.single > div.value,\n      ng-select > div > div.single > div.placeholder {\n        flex: 1;\n        line-height: 30px;\n        overflow: hidden;\n        padding: 0 10px;\n        white-space: nowrap; }\n      ng-select > div > div.single > div.placeholder {\n        color: #757575; }\n      ng-select > div > div.single > div.clear,\n      ng-select > div > div.single > div.toggle {\n        color: #aaa;\n        line-height: 30px;\n        text-align: center;\n        width: 30px; }\n        ng-select > div > div.single > div.clear:hover,\n        ng-select > div > div.single > div.toggle:hover {\n          background-color: #ececec; }\n      ng-select > div > div.single > div.clear {\n        font-size: 18px; }\n      ng-select > div > div.single > div.toggle {\n        font-size: 14px; }\n    ng-select > div > div.multiple {\n      display: flex;\n      flex-flow: row wrap;\n      height: 100%;\n      min-height: 30px;\n      padding: 0 10px;\n      width: 100%; }\n      ng-select > div > div.multiple > div.option {\n        background-color: #eee;\n        border: 1px solid #aaa;\n        border-radius: 4px;\n        color: #333;\n        cursor: default;\n        display: inline-block;\n        flex-shrink: 0;\n        font-size: 14px;\n        line-height: 22px;\n        margin: 3px 5px 3px 0;\n        padding: 0 4px; }\n        ng-select > div > div.multiple > div.option span.deselect-option {\n          color: #aaa;\n          cursor: pointer;\n          font-size: 14px;\n          height: 20px;\n          line-height: 20px; }\n          ng-select > div > div.multiple > div.option span.deselect-option:hover {\n            color: #555; }\n      ng-select > div > div.multiple input {\n        background-color: transparent;\n        border: none;\n        cursor: pointer;\n        height: 30px;\n        line-height: 30px;\n        padding: 0; }\n        ng-select > div > div.multiple input:focus {\n          outline: none; }\n  ng-select label {\n    color: rgba(0, 0, 0, 0.38);\n    display: block;\n    font-size: 13px;\n    padding: 4px 0; }\n";

dist/select.component.css.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"STYLE":"ng-select {\n  display: inline-block;\n  margin: 0;\n  position: relative;\n  vertical-align: middle;\n  width: 100%; }\n  ng-select * {\n    box-sizing: border-box;\n    font-family: Sans-Serif; }\n  ng-select > div {\n    border: 1px solid #ddd;\n    box-sizing: border-box;\n    cursor: pointer;\n    user-select: none;\n    width: 100%; }\n    ng-select > div.disabled {\n      background-color: #eee;\n      color: #aaa;\n      cursor: default;\n      pointer-events: none; }\n    ng-select > div > div.single {\n      display: flex;\n      height: 30px;\n      width: 100%; }\n      ng-select > div > div.single > div.value,\n      ng-select > div > div.single > div.placeholder {\n        flex: 1;\n        line-height: 30px;\n        overflow: hidden;\n        padding: 0 10px;\n        white-space: nowrap; }\n      ng-select > div > div.single > div.placeholder {\n        color: #a9a9a9; }\n      ng-select > div > div.single > div.clear,\n      ng-select > div > div.single > div.toggle {\n        color: #aaa;\n        line-height: 30px;\n        text-align: center;\n        width: 30px; }\n        ng-select > div > div.single > div.clear:hover,\n        ng-select > div > div.single > div.toggle:hover {\n          background-color: #ececec; }\n      ng-select > div > div.single > div.clear {\n        font-size: 18px; }\n      ng-select > div > div.single > div.toggle {\n        font-size: 14px; }\n    ng-select > div > div.multiple {\n      display: flex;\n      flex-flow: row wrap;\n      height: 100%;\n      min-height: 30px;\n      padding: 0 10px;\n      width: 100%; }\n      ng-select > div > div.multiple > div.option {\n        background-color: #eee;\n        border: 1px solid #aaa;\n        border-radius: 4px;\n        color: #333;\n        cursor: default;\n        display: inline-block;\n        flex-shrink: 0;\n        font-size: 14px;\n        line-height: 22px;\n        margin: 3px 5px 3px 0;\n        padding: 0 4px; }\n        ng-select > div > div.multiple > div.option span.deselect-option {\n          color: #aaa;\n          cursor: pointer;\n          font-size: 14px;\n          height: 20px;\n          line-height: 20px; }\n          ng-select > div > div.multiple > div.option span.deselect-option:hover {\n            color: #555; }\n      ng-select > div > div.multiple input {\n        background-color: transparent;\n        border: none;\n        height: 30px;\n        line-height: 30px;\n        padding: 0; }\n        ng-select > div > div.multiple input:focus {\n          outline: none; }\n  ng-select label {\n    color: rgba(0, 0, 0, 0.38);\n    display: block;\n    font-size: 13px;\n    padding: 4px 0; }\n"}},{"__symbolic":"module","version":1,"metadata":{"STYLE":"ng-select {\n  display: inline-block;\n  margin: 0;\n  position: relative;\n  vertical-align: middle;\n  width: 100%; }\n  ng-select * {\n    box-sizing: border-box;\n    font-family: Sans-Serif; }\n  ng-select > div {\n    border: 1px solid #ddd;\n    box-sizing: border-box;\n    cursor: pointer;\n    user-select: none;\n    width: 100%; }\n    ng-select > div.disabled {\n      background-color: #eee;\n      color: #aaa;\n      cursor: default;\n      pointer-events: none; }\n    ng-select > div > div.single {\n      display: flex;\n      height: 30px;\n      width: 100%; }\n      ng-select > div > div.single > div.value,\n      ng-select > div > div.single > div.placeholder {\n        flex: 1;\n        line-height: 30px;\n        overflow: hidden;\n        padding: 0 10px;\n        white-space: nowrap; }\n      ng-select > div > div.single > div.placeholder {\n        color: #a9a9a9; }\n      ng-select > div > div.single > div.clear,\n      ng-select > div > div.single > div.toggle {\n        color: #aaa;\n        line-height: 30px;\n        text-align: center;\n        width: 30px; }\n        ng-select > div > div.single > div.clear:hover,\n        ng-select > div > div.single > div.toggle:hover {\n          background-color: #ececec; }\n      ng-select > div > div.single > div.clear {\n        font-size: 18px; }\n      ng-select > div > div.single > div.toggle {\n        font-size: 14px; }\n    ng-select > div > div.multiple {\n      display: flex;\n      flex-flow: row wrap;\n      height: 100%;\n      min-height: 30px;\n      padding: 0 10px;\n      width: 100%; }\n      ng-select > div > div.multiple > div.option {\n        background-color: #eee;\n        border: 1px solid #aaa;\n        border-radius: 4px;\n        color: #333;\n        cursor: default;\n        display: inline-block;\n        flex-shrink: 0;\n        font-size: 14px;\n        line-height: 22px;\n        margin: 3px 5px 3px 0;\n        padding: 0 4px; }\n        ng-select > div > div.multiple > div.option span.deselect-option {\n          color: #aaa;\n          cursor: pointer;\n          font-size: 14px;\n          height: 20px;\n          line-height: 20px; }\n          ng-select > div > div.multiple > div.option span.deselect-option:hover {\n            color: #555; }\n      ng-select > div > div.multiple input {\n        background-color: transparent;\n        border: none;\n        height: 30px;\n        line-height: 30px;\n        padding: 0; }\n        ng-select > div > div.multiple input:focus {\n          outline: none; }\n  ng-select label {\n    color: rgba(0, 0, 0, 0.38);\n    display: block;\n    font-size: 13px;\n    padding: 4px 0; }\n"}}]
+[{"__symbolic":"module","version":3,"metadata":{"STYLE":"ng-select {\n  display: inline-block;\n  margin: 0;\n  position: relative;\n  vertical-align: middle;\n  width: 100%; }\n  ng-select * {\n    box-sizing: border-box;\n    font-family: Sans-Serif; }\n  ng-select > div {\n    border: 1px solid #ddd;\n    box-sizing: border-box;\n    cursor: pointer;\n    user-select: none;\n    width: 100%; }\n    ng-select > div.disabled {\n      background-color: #eee;\n      color: #aaa;\n      cursor: default;\n      pointer-events: none; }\n    ng-select > div > div.single {\n      display: flex;\n      height: 30px;\n      width: 100%; }\n      ng-select > div > div.single > div.value,\n      ng-select > div > div.single > div.placeholder {\n        flex: 1;\n        line-height: 30px;\n        overflow: hidden;\n        padding: 0 10px;\n        white-space: nowrap; }\n      ng-select > div > div.single > div.placeholder {\n        color: #757575; }\n      ng-select > div > div.single > div.clear,\n      ng-select > div > div.single > div.toggle {\n        color: #aaa;\n        line-height: 30px;\n        text-align: center;\n        width: 30px; }\n        ng-select > div > div.single > div.clear:hover,\n        ng-select > div > div.single > div.toggle:hover {\n          background-color: #ececec; }\n      ng-select > div > div.single > div.clear {\n        font-size: 18px; }\n      ng-select > div > div.single > div.toggle {\n        font-size: 14px; }\n    ng-select > div > div.multiple {\n      display: flex;\n      flex-flow: row wrap;\n      height: 100%;\n      min-height: 30px;\n      padding: 0 10px;\n      width: 100%; }\n      ng-select > div > div.multiple > div.option {\n        background-color: #eee;\n        border: 1px solid #aaa;\n        border-radius: 4px;\n        color: #333;\n        cursor: default;\n        display: inline-block;\n        flex-shrink: 0;\n        font-size: 14px;\n        line-height: 22px;\n        margin: 3px 5px 3px 0;\n        padding: 0 4px; }\n        ng-select > div > div.multiple > div.option span.deselect-option {\n          color: #aaa;\n          cursor: pointer;\n          font-size: 14px;\n          height: 20px;\n          line-height: 20px; }\n          ng-select > div > div.multiple > div.option span.deselect-option:hover {\n            color: #555; }\n      ng-select > div > div.multiple input {\n        background-color: transparent;\n        border: none;\n        cursor: pointer;\n        height: 30px;\n        line-height: 30px;\n        padding: 0; }\n        ng-select > div > div.multiple input:focus {\n          outline: none; }\n  ng-select label {\n    color: rgba(0, 0, 0, 0.38);\n    display: block;\n    font-size: 13px;\n    padding: 4px 0; }\n"}},{"__symbolic":"module","version":1,"metadata":{"STYLE":"ng-select {\n  display: inline-block;\n  margin: 0;\n  position: relative;\n  vertical-align: middle;\n  width: 100%; }\n  ng-select * {\n    box-sizing: border-box;\n    font-family: Sans-Serif; }\n  ng-select > div {\n    border: 1px solid #ddd;\n    box-sizing: border-box;\n    cursor: pointer;\n    user-select: none;\n    width: 100%; }\n    ng-select > div.disabled {\n      background-color: #eee;\n      color: #aaa;\n      cursor: default;\n      pointer-events: none; }\n    ng-select > div > div.single {\n      display: flex;\n      height: 30px;\n      width: 100%; }\n      ng-select > div > div.single > div.value,\n      ng-select > div > div.single > div.placeholder {\n        flex: 1;\n        line-height: 30px;\n        overflow: hidden;\n        padding: 0 10px;\n        white-space: nowrap; }\n      ng-select > div > div.single > div.placeholder {\n        color: #757575; }\n      ng-select > div > div.single > div.clear,\n      ng-select > div > div.single > div.toggle {\n        color: #aaa;\n        line-height: 30px;\n        text-align: center;\n        width: 30px; }\n        ng-select > div > div.single > div.clear:hover,\n        ng-select > div > div.single > div.toggle:hover {\n          background-color: #ececec; }\n      ng-select > div > div.single > div.clear {\n        font-size: 18px; }\n      ng-select > div > div.single > div.toggle {\n        font-size: 14px; }\n    ng-select > div > div.multiple {\n      display: flex;\n      flex-flow: row wrap;\n      height: 100%;\n      min-height: 30px;\n      padding: 0 10px;\n      width: 100%; }\n      ng-select > div > div.multiple > div.option {\n        background-color: #eee;\n        border: 1px solid #aaa;\n        border-radius: 4px;\n        color: #333;\n        cursor: default;\n        display: inline-block;\n        flex-shrink: 0;\n        font-size: 14px;\n        line-height: 22px;\n        margin: 3px 5px 3px 0;\n        padding: 0 4px; }\n        ng-select > div > div.multiple > div.option span.deselect-option {\n          color: #aaa;\n          cursor: pointer;\n          font-size: 14px;\n          height: 20px;\n          line-height: 20px; }\n          ng-select > div > div.multiple > div.option span.deselect-option:hover {\n            color: #555; }\n      ng-select > div > div.multiple input {\n        background-color: transparent;\n        border: none;\n        cursor: pointer;\n        height: 30px;\n        line-height: 30px;\n        padding: 0; }\n        ng-select > div > div.multiple input:focus {\n          outline: none; }\n  ng-select label {\n    color: rgba(0, 0, 0, 0.38);\n    display: block;\n    font-size: 13px;\n    padding: 4px 0; }\n"}}]

dist/select.component.d.ts

@@ -1,2 +0,2 @@
-import { OnChanges, OnInit, EventEmitter, ExistingProvider } from '@angular/core';
+import { OnChanges, OnInit, EventEmitter, ExistingProvider, ElementRef, SimpleChanges, TemplateRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
@@ -8,9 +8,10 @@ import { SelectDropdownComponent } from './select-dropdown.component';
 export declare class SelectComponent implements ControlValueAccessor, OnChanges, OnInit {
+    private hostElement;
     options: Array<IOption>;
     allowClear: boolean;
     disabled: boolean;
+    multiple: boolean;
+    noFilter: number;
     highlightColor: string;
     highlightTextColor: string;
-    multiple: boolean;
-    noFilter: number;
     notFoundMsg: string;
@@ -24,9 +25,11 @@ placeholder: string;
     deselected: EventEmitter<IOption | IOption[]>;
+    focus: EventEmitter<null>;
+    blur: EventEmitter<null>;
     noOptionsFound: EventEmitter<string>;
-    selectionSpan: any;
+    selectionSpan: ElementRef;
     dropdown: SelectDropdownComponent;
-    filterInput: any;
+    filterInput: ElementRef;
+    optionTemplate: TemplateRef<any>;
     private _value;
     private optionList;
-    hasSelected: boolean;
     hasFocus: boolean;
@@ -41,2 +44,4 @@ isOpen: boolean;
     private selectContainerClicked;
+    private optionListClicked;
+    private optionClicked;
     private width;
@@ -47,5 +52,8 @@ private top;
     private onTouched;
+    constructor(hostElement: ElementRef);
     /** Event handlers. **/
     ngOnInit(): void;
-    ngOnChanges(changes: any): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    onWindowBlur(): void;
     onWindowClick(): void;
@@ -56,9 +64,10 @@ onWindowResize(): void;
     onSelectContainerKeydown(event: any): void;
+    onOptionsListClick(): void;
     onDropdownOptionClicked(option: Option): void;
-    onDropdownClose(focus: any): void;
     onSingleFilterClick(): void;
-    onSingleFilterInput(term: string): void;
+    onSingleFilterFocus(): void;
+    onFilterInput(term: string): void;
     onSingleFilterKeydown(event: any): void;
-    onMultipleFilterInput(event: any): void;
     onMultipleFilterKeydown(event: any): void;
+    onMultipleFilterFocus(): void;
     onClearSelectionClick(event: any): void;
@@ -70,3 +79,3 @@ onDeselectOptionClick(option: Option): void;
     clear(): void;
-    select(value: string): void;
+    select(value: string | Array<string>): void;
     /** ControlValueAccessor interface methods. **/
@@ -77,11 +86,10 @@ writeValue(value: any): void;
     setDisabledState(isDisabled: boolean): void;
+    /** Input change handling. **/
+    private handleInputChanges(changes);
+    private updateOptionList(options);
+    private updateFilterEnabled();
     /** Value. **/
     value: string | string[];
     private valueChanged();
-    /** Initialization. **/
-    private updateOptionsList(firstTime);
-    /** Dropdown. **/
-    private toggleDropdown();
-    private openDropdown();
-    private closeDropdown(focus?);
+    private updateState();
     /** Select. **/
@@ -94,3 +102,8 @@ private selectOption(option);
     private deselectLast();
+    /** Dropdown. **/
+    private toggleDropdown();
+    private openDropdown();
+    private closeDropdown(focus);
     /** Filter. **/
+    private filter(term);
     private clearFilterInput();
@@ -104,4 +117,5 @@ private setMultipleFilterInput(value);
     /** View. **/
-    focus(): void;
-    blur(): void;
+    _blur(): void;
+    _focus(): void;
+    _focusSelectContainer(): void;
     private updateWidth();
@@ -108,0 +122,0 @@ private updatePosition();

dist/select.component.html.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TEMPLATE = "<label\n    *ngIf=\"label !== ''\">\n    {{label}}\n</label>\n<div\n    #selection\n    [attr.tabindex]=\"disabled ? null : 0\"\n    [ngClass]=\"{'open': isOpen, 'focus': hasFocus, 'below': isBelow, 'disabled': disabled}\"\n    (click)=\"onSelectContainerClick($event)\"\n    (focus)=\"onSelectContainerFocus()\"\n    (keydown)=\"onSelectContainerKeydown($event)\"\n    (window:click)=\"onWindowClick()\"\n    (window:resize)=\"onWindowResize()\">\n\n    <div class=\"single\"\n        *ngIf=\"!multiple\">\n        <div class=\"value\"\n            *ngIf=\"optionList.hasSelected()\">\n            {{optionList.selection[0].label}}\n        </div>\n        <div class=\"placeholder\"\n            *ngIf=\"!optionList.hasSelected()\">\n            {{placeholderView}}\n        </div>\n        <div class=\"clear\"\n            *ngIf=\"allowClear && hasSelected\"\n            (click)=\"onClearSelectionClick($event)\">\n            &#x2715;\n        </div>\n        <div class=\"toggle\"\n            *ngIf=\"isOpen\">\n            &#x25B2;\n        </div>\n        <div class=\"toggle\"\n            *ngIf=\"!isOpen\">\n            &#x25BC;\n        </div>\n    </div>\n\n    <div class=\"multiple\"\n        *ngIf=\"multiple\">\n        <div class=\"option\"\n            *ngFor=\"let option of optionList.selection\">\n            <span class=\"deselect-option\"\n                (click)=onDeselectOptionClick(option)>\n                &#x2715;\n            </span>\n            {{option.label}}\n        </div>\n        <input\n            *ngIf=\"filterEnabled\"\n            #filterInput\n            autocomplete=\"off\"\n            tabindex=\"-1\"\n            [placeholder]=\"placeholderView\"\n            [ngStyle]=\"{'width.px': filterInputWidth}\"\n            (input)=\"onMultipleFilterInput($event)\"\n            (keydown)=\"onMultipleFilterKeydown($event)\"/>\n    </div>\n\n</div>\n<select-dropdown\n    *ngIf=\"isOpen\"\n    #dropdown\n    [multiple]=\"multiple\"\n    [optionList]=\"optionList\"\n    [notFoundMsg]=\"notFoundMsg\"\n    [highlightColor]=\"highlightColor\"\n    [highlightTextColor]=\"highlightTextColor\"\n    [filterEnabled]=\"filterEnabled\"\n    [placeholder]=\"filterPlaceholder\"\n    [width]=\"width\"\n    [top]=\"top\"\n    [left]=\"left\"\n    (close)=\"onDropdownClose($event)\"\n    (optionClicked)=\"onDropdownOptionClicked($event)\"\n    (singleFilterClick)=\"onSingleFilterClick()\"\n    (singleFilterInput)=\"onSingleFilterInput($event)\"\n    (singleFilterKeydown)=\"onSingleFilterKeydown($event)\">\n</select-dropdown>\n";
+exports.TEMPLATE = "<label\n    *ngIf=\"label !== ''\">\n    {{label}}\n</label>\n<div\n    #selection\n    [attr.tabindex]=\"disabled ? null : 0\"\n    [ngClass]=\"{'open': isOpen, 'focus': hasFocus, 'below': isBelow, 'disabled': disabled}\"\n    (click)=\"onSelectContainerClick($event)\"\n    (focus)=\"onSelectContainerFocus()\"\n    (keydown)=\"onSelectContainerKeydown($event)\">\n\n    <div class=\"single\"\n        *ngIf=\"!multiple\">\n        <div class=\"value\"\n            *ngIf=\"optionList.hasSelected\">\n            <ng-template [ngOutletContext]=\"{option: optionList.selection[0], onDeselectOptionClick: onDeselectOptionClick}\" [ngTemplateOutlet]=\"optionTemplate\"></ng-template>\n            <span *ngIf=\"!optionTemplate\">{{optionList.selection[0].label}}</span>\n        </div>\n        <div class=\"placeholder\"\n            *ngIf=\"!optionList.hasSelected\">\n            {{placeholderView}}\n        </div>\n        <div class=\"clear\"\n            *ngIf=\"allowClear && optionList.hasSelected\"\n            (click)=\"onClearSelectionClick($event)\">\n            &#x2715;\n        </div>\n        <div class=\"toggle\"\n            *ngIf=\"isOpen\">\n            &#x25B2;\n        </div>\n        <div class=\"toggle\"\n            *ngIf=\"!isOpen\">\n            &#x25BC;\n        </div>\n    </div>\n\n    <div class=\"multiple\"\n        *ngIf=\"multiple\">\n        <div class=\"option\"\n            *ngFor=\"let option of optionList.selection\">\n            <span class=\"deselect-option\"\n                (click)=onDeselectOptionClick(option)>\n                &#x2715;\n            </span>\n            {{option.label}}\n        </div>\n        <div class=\"placeholder\"\n            *ngIf=\"!filterEnabled && !optionList.hasSelected\">\n            {{placeholderView}}\n        </div>\n        <input\n            *ngIf=\"filterEnabled\"\n            #filterInput\n            autocomplete=\"off\"\n            tabindex=\"-1\"\n            [placeholder]=\"placeholderView\"\n            [ngStyle]=\"{'width.px': filterInputWidth}\"\n            (input)=\"onFilterInput($event.target.value)\"\n            (keydown)=\"onMultipleFilterKeydown($event)\"\n            (focus)=\"onMultipleFilterFocus()\"/>\n    </div>\n\n</div>\n<select-dropdown\n    *ngIf=\"isOpen\"\n    #dropdown\n    [multiple]=\"multiple\"\n    [optionList]=\"optionList\"\n    [notFoundMsg]=\"notFoundMsg\"\n    [highlightColor]=\"highlightColor\"\n    [highlightTextColor]=\"highlightTextColor\"\n    [filterEnabled]=\"filterEnabled\"\n    [placeholder]=\"filterPlaceholder\"\n    [width]=\"width\"\n    [top]=\"top\"\n    [left]=\"left\"\n    [optionTemplate]=\"optionTemplate\"\n    (optionClicked)=\"onDropdownOptionClicked($event)\"\n    (optionsListClick)=\"onOptionsListClick()\"\n    (singleFilterClick)=\"onSingleFilterClick()\"\n    (singleFilterFocus)=\"onSingleFilterFocus()\"\n    (singleFilterInput)=\"onFilterInput($event)\"\n    (singleFilterKeydown)=\"onSingleFilterKeydown($event)\">\n</select-dropdown>\n";

dist/select.component.html.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"TEMPLATE":"<label\n    *ngIf=\"label !== ''\">\n    {{label}}\n</label>\n<div\n    #selection\n    [attr.tabindex]=\"disabled ? null : 0\"\n    [ngClass]=\"{'open': isOpen, 'focus': hasFocus, 'below': isBelow, 'disabled': disabled}\"\n    (click)=\"onSelectContainerClick($event)\"\n    (focus)=\"onSelectContainerFocus()\"\n    (keydown)=\"onSelectContainerKeydown($event)\"\n    (window:click)=\"onWindowClick()\"\n    (window:resize)=\"onWindowResize()\">\n\n    <div class=\"single\"\n        *ngIf=\"!multiple\">\n        <div class=\"value\"\n            *ngIf=\"optionList.hasSelected()\">\n            {{optionList.selection[0].label}}\n        </div>\n        <div class=\"placeholder\"\n            *ngIf=\"!optionList.hasSelected()\">\n            {{placeholderView}}\n        </div>\n        <div class=\"clear\"\n            *ngIf=\"allowClear && hasSelected\"\n            (click)=\"onClearSelectionClick($event)\">\n            &#x2715;\n        </div>\n        <div class=\"toggle\"\n            *ngIf=\"isOpen\">\n            &#x25B2;\n        </div>\n        <div class=\"toggle\"\n            *ngIf=\"!isOpen\">\n            &#x25BC;\n        </div>\n    </div>\n\n    <div class=\"multiple\"\n        *ngIf=\"multiple\">\n        <div class=\"option\"\n            *ngFor=\"let option of optionList.selection\">\n            <span class=\"deselect-option\"\n                (click)=onDeselectOptionClick(option)>\n                &#x2715;\n            </span>\n            {{option.label}}\n        </div>\n        <input\n            *ngIf=\"filterEnabled\"\n            #filterInput\n            autocomplete=\"off\"\n            tabindex=\"-1\"\n            [placeholder]=\"placeholderView\"\n            [ngStyle]=\"{'width.px': filterInputWidth}\"\n            (input)=\"onMultipleFilterInput($event)\"\n            (keydown)=\"onMultipleFilterKeydown($event)\"/>\n    </div>\n\n</div>\n<select-dropdown\n    *ngIf=\"isOpen\"\n    #dropdown\n    [multiple]=\"multiple\"\n    [optionList]=\"optionList\"\n    [notFoundMsg]=\"notFoundMsg\"\n    [highlightColor]=\"highlightColor\"\n    [highlightTextColor]=\"highlightTextColor\"\n    [filterEnabled]=\"filterEnabled\"\n    [placeholder]=\"filterPlaceholder\"\n    [width]=\"width\"\n    [top]=\"top\"\n    [left]=\"left\"\n    (close)=\"onDropdownClose($event)\"\n    (optionClicked)=\"onDropdownOptionClicked($event)\"\n    (singleFilterClick)=\"onSingleFilterClick()\"\n    (singleFilterInput)=\"onSingleFilterInput($event)\"\n    (singleFilterKeydown)=\"onSingleFilterKeydown($event)\">\n</select-dropdown>\n"}},{"__symbolic":"module","version":1,"metadata":{"TEMPLATE":"<label\n    *ngIf=\"label !== ''\">\n    {{label}}\n</label>\n<div\n    #selection\n    [attr.tabindex]=\"disabled ? null : 0\"\n    [ngClass]=\"{'open': isOpen, 'focus': hasFocus, 'below': isBelow, 'disabled': disabled}\"\n    (click)=\"onSelectContainerClick($event)\"\n    (focus)=\"onSelectContainerFocus()\"\n    (keydown)=\"onSelectContainerKeydown($event)\"\n    (window:click)=\"onWindowClick()\"\n    (window:resize)=\"onWindowResize()\">\n\n    <div class=\"single\"\n        *ngIf=\"!multiple\">\n        <div class=\"value\"\n            *ngIf=\"optionList.hasSelected()\">\n            {{optionList.selection[0].label}}\n        </div>\n        <div class=\"placeholder\"\n            *ngIf=\"!optionList.hasSelected()\">\n            {{placeholderView}}\n        </div>\n        <div class=\"clear\"\n            *ngIf=\"allowClear && hasSelected\"\n            (click)=\"onClearSelectionClick($event)\">\n            &#x2715;\n        </div>\n        <div class=\"toggle\"\n            *ngIf=\"isOpen\">\n            &#x25B2;\n        </div>\n        <div class=\"toggle\"\n            *ngIf=\"!isOpen\">\n            &#x25BC;\n        </div>\n    </div>\n\n    <div class=\"multiple\"\n        *ngIf=\"multiple\">\n        <div class=\"option\"\n            *ngFor=\"let option of optionList.selection\">\n            <span class=\"deselect-option\"\n                (click)=onDeselectOptionClick(option)>\n                &#x2715;\n            </span>\n            {{option.label}}\n        </div>\n        <input\n            *ngIf=\"filterEnabled\"\n            #filterInput\n            autocomplete=\"off\"\n            tabindex=\"-1\"\n            [placeholder]=\"placeholderView\"\n            [ngStyle]=\"{'width.px': filterInputWidth}\"\n            (input)=\"onMultipleFilterInput($event)\"\n            (keydown)=\"onMultipleFilterKeydown($event)\"/>\n    </div>\n\n</div>\n<select-dropdown\n    *ngIf=\"isOpen\"\n    #dropdown\n    [multiple]=\"multiple\"\n    [optionList]=\"optionList\"\n    [notFoundMsg]=\"notFoundMsg\"\n    [highlightColor]=\"highlightColor\"\n    [highlightTextColor]=\"highlightTextColor\"\n    [filterEnabled]=\"filterEnabled\"\n    [placeholder]=\"filterPlaceholder\"\n    [width]=\"width\"\n    [top]=\"top\"\n    [left]=\"left\"\n    (close)=\"onDropdownClose($event)\"\n    (optionClicked)=\"onDropdownOptionClicked($event)\"\n    (singleFilterClick)=\"onSingleFilterClick()\"\n    (singleFilterInput)=\"onSingleFilterInput($event)\"\n    (singleFilterKeydown)=\"onSingleFilterKeydown($event)\">\n</select-dropdown>\n"}}]
+[{"__symbolic":"module","version":3,"metadata":{"TEMPLATE":"<label\n    *ngIf=\"label !== ''\">\n    {{label}}\n</label>\n<div\n    #selection\n    [attr.tabindex]=\"disabled ? null : 0\"\n    [ngClass]=\"{'open': isOpen, 'focus': hasFocus, 'below': isBelow, 'disabled': disabled}\"\n    (click)=\"onSelectContainerClick($event)\"\n    (focus)=\"onSelectContainerFocus()\"\n    (keydown)=\"onSelectContainerKeydown($event)\">\n\n    <div class=\"single\"\n        *ngIf=\"!multiple\">\n        <div class=\"value\"\n            *ngIf=\"optionList.hasSelected\">\n            <ng-template [ngOutletContext]=\"{option: optionList.selection[0], onDeselectOptionClick: onDeselectOptionClick}\" [ngTemplateOutlet]=\"optionTemplate\"></ng-template>\n            <span *ngIf=\"!optionTemplate\">{{optionList.selection[0].label}}</span>\n        </div>\n        <div class=\"placeholder\"\n            *ngIf=\"!optionList.hasSelected\">\n            {{placeholderView}}\n        </div>\n        <div class=\"clear\"\n            *ngIf=\"allowClear && optionList.hasSelected\"\n            (click)=\"onClearSelectionClick($event)\">\n            &#x2715;\n        </div>\n        <div class=\"toggle\"\n            *ngIf=\"isOpen\">\n            &#x25B2;\n        </div>\n        <div class=\"toggle\"\n            *ngIf=\"!isOpen\">\n            &#x25BC;\n        </div>\n    </div>\n\n    <div class=\"multiple\"\n        *ngIf=\"multiple\">\n        <div class=\"option\"\n            *ngFor=\"let option of optionList.selection\">\n            <span class=\"deselect-option\"\n                (click)=onDeselectOptionClick(option)>\n                &#x2715;\n            </span>\n            {{option.label}}\n        </div>\n        <div class=\"placeholder\"\n            *ngIf=\"!filterEnabled && !optionList.hasSelected\">\n            {{placeholderView}}\n        </div>\n        <input\n            *ngIf=\"filterEnabled\"\n            #filterInput\n            autocomplete=\"off\"\n            tabindex=\"-1\"\n            [placeholder]=\"placeholderView\"\n            [ngStyle]=\"{'width.px': filterInputWidth}\"\n            (input)=\"onFilterInput($event.target.value)\"\n            (keydown)=\"onMultipleFilterKeydown($event)\"\n            (focus)=\"onMultipleFilterFocus()\"/>\n    </div>\n\n</div>\n<select-dropdown\n    *ngIf=\"isOpen\"\n    #dropdown\n    [multiple]=\"multiple\"\n    [optionList]=\"optionList\"\n    [notFoundMsg]=\"notFoundMsg\"\n    [highlightColor]=\"highlightColor\"\n    [highlightTextColor]=\"highlightTextColor\"\n    [filterEnabled]=\"filterEnabled\"\n    [placeholder]=\"filterPlaceholder\"\n    [width]=\"width\"\n    [top]=\"top\"\n    [left]=\"left\"\n    [optionTemplate]=\"optionTemplate\"\n    (optionClicked)=\"onDropdownOptionClicked($event)\"\n    (optionsListClick)=\"onOptionsListClick()\"\n    (singleFilterClick)=\"onSingleFilterClick()\"\n    (singleFilterFocus)=\"onSingleFilterFocus()\"\n    (singleFilterInput)=\"onFilterInput($event)\"\n    (singleFilterKeydown)=\"onSingleFilterKeydown($event)\">\n</select-dropdown>\n"}},{"__symbolic":"module","version":1,"metadata":{"TEMPLATE":"<label\n    *ngIf=\"label !== ''\">\n    {{label}}\n</label>\n<div\n    #selection\n    [attr.tabindex]=\"disabled ? null : 0\"\n    [ngClass]=\"{'open': isOpen, 'focus': hasFocus, 'below': isBelow, 'disabled': disabled}\"\n    (click)=\"onSelectContainerClick($event)\"\n    (focus)=\"onSelectContainerFocus()\"\n    (keydown)=\"onSelectContainerKeydown($event)\">\n\n    <div class=\"single\"\n        *ngIf=\"!multiple\">\n        <div class=\"value\"\n            *ngIf=\"optionList.hasSelected\">\n            <ng-template [ngOutletContext]=\"{option: optionList.selection[0], onDeselectOptionClick: onDeselectOptionClick}\" [ngTemplateOutlet]=\"optionTemplate\"></ng-template>\n            <span *ngIf=\"!optionTemplate\">{{optionList.selection[0].label}}</span>\n        </div>\n        <div class=\"placeholder\"\n            *ngIf=\"!optionList.hasSelected\">\n            {{placeholderView}}\n        </div>\n        <div class=\"clear\"\n            *ngIf=\"allowClear && optionList.hasSelected\"\n            (click)=\"onClearSelectionClick($event)\">\n            &#x2715;\n        </div>\n        <div class=\"toggle\"\n            *ngIf=\"isOpen\">\n            &#x25B2;\n        </div>\n        <div class=\"toggle\"\n            *ngIf=\"!isOpen\">\n            &#x25BC;\n        </div>\n    </div>\n\n    <div class=\"multiple\"\n        *ngIf=\"multiple\">\n        <div class=\"option\"\n            *ngFor=\"let option of optionList.selection\">\n            <span class=\"deselect-option\"\n                (click)=onDeselectOptionClick(option)>\n                &#x2715;\n            </span>\n            {{option.label}}\n        </div>\n        <div class=\"placeholder\"\n            *ngIf=\"!filterEnabled && !optionList.hasSelected\">\n            {{placeholderView}}\n        </div>\n        <input\n            *ngIf=\"filterEnabled\"\n            #filterInput\n            autocomplete=\"off\"\n            tabindex=\"-1\"\n            [placeholder]=\"placeholderView\"\n            [ngStyle]=\"{'width.px': filterInputWidth}\"\n            (input)=\"onFilterInput($event.target.value)\"\n            (keydown)=\"onMultipleFilterKeydown($event)\"\n            (focus)=\"onMultipleFilterFocus()\"/>\n    </div>\n\n</div>\n<select-dropdown\n    *ngIf=\"isOpen\"\n    #dropdown\n    [multiple]=\"multiple\"\n    [optionList]=\"optionList\"\n    [notFoundMsg]=\"notFoundMsg\"\n    [highlightColor]=\"highlightColor\"\n    [highlightTextColor]=\"highlightTextColor\"\n    [filterEnabled]=\"filterEnabled\"\n    [placeholder]=\"filterPlaceholder\"\n    [width]=\"width\"\n    [top]=\"top\"\n    [left]=\"left\"\n    [optionTemplate]=\"optionTemplate\"\n    (optionClicked)=\"onDropdownOptionClicked($event)\"\n    (optionsListClick)=\"onOptionsListClick()\"\n    (singleFilterClick)=\"onSingleFilterClick()\"\n    (singleFilterFocus)=\"onSingleFilterFocus()\"\n    (singleFilterInput)=\"onFilterInput($event)\"\n    (singleFilterKeydown)=\"onSingleFilterKeydown($event)\">\n</select-dropdown>\n"}}]

dist/select.component.js

@@ -14,3 +14,7 @@ "use strict";
 var SelectComponent = (function () {
-    function SelectComponent() {
+    function SelectComponent(hostElement) {
+        this.hostElement = hostElement;
+        // Data input.
+        this.options = [];
+        // Functionality settings.
         this.allowClear = false;
@@ -20,2 +24,3 @@ this.disabled = false;
         this.noFilter = 0;
+        // Text settings.
         this.notFoundMsg = 'No results found';
@@ -25,2 +30,3 @@ this.placeholder = '';
         this.label = '';
+        // Output events.
         this.opened = new core_1.EventEmitter();
@@ -30,6 +36,7 @@ this.closed = new core_1.EventEmitter();
         this.deselected = new core_1.EventEmitter();
+        this.focus = new core_1.EventEmitter();
+        this.blur = new core_1.EventEmitter();
         this.noOptionsFound = new core_1.EventEmitter();
         this._value = [];
-        // Selection state variables.
-        this.hasSelected = false;
+        this.optionList = new option_list_1.OptionList([]);
         // View state variables.
@@ -45,2 +52,4 @@ this.hasFocus = false;
         this.selectContainerClicked = false;
+        this.optionListClicked = false;
+        this.optionClicked = false;
         this.onChange = function (_) { };
@@ -60,3 +69,2 @@ this.onTouched = function () { };
     /** Event handlers. **/
-    // Angular lifecycle hooks.
     SelectComponent.prototype.ngOnInit = function () {
@@ -66,18 +74,22 @@ this.placeholderView = this.placeholder;
     SelectComponent.prototype.ngOnChanges = function (changes) {
-        if (changes.hasOwnProperty('options')) {
-            this.updateOptionsList(changes['options'].isFirstChange());
-        }
-        if (changes.hasOwnProperty('noFilter')) {
-            var numOptions = this.optionList.options.length;
-            var minNumOptions = changes['noFilter'].currentValue;
-            this.filterEnabled = numOptions >= minNumOptions;
-        }
+        this.handleInputChanges(changes);
     };
-    // Window.
+    SelectComponent.prototype.ngAfterViewInit = function () {
+        this.updateState();
+    };
+    SelectComponent.prototype.onWindowBlur = function () {
+        this._blur();
+    };
     SelectComponent.prototype.onWindowClick = function () {
-        if (!this.selectContainerClicked) {
-            this.closeDropdown();
+        if (!this.selectContainerClicked &&
+            (!this.optionListClicked || (this.optionListClicked && this.optionClicked))) {
+            this.closeDropdown(this.optionClicked);
+            if (!this.optionClicked) {
+                this._blur();
+            }
         }
         this.clearClicked = false;
         this.selectContainerClicked = false;
+        this.optionListClicked = false;
+        this.optionClicked = false;
     };
@@ -87,3 +99,2 @@ SelectComponent.prototype.onWindowResize = function () {
     };
-    // Select container.
     SelectComponent.prototype.onSelectContainerClick = function (event) {
@@ -96,3 +107,3 @@ this.selectContainerClicked = true;
     SelectComponent.prototype.onSelectContainerFocus = function () {
-        this.onTouched();
+        this._focus();
     };
@@ -102,42 +113,27 @@ SelectComponent.prototype.onSelectContainerKeydown = function (event) {
     };
-    // Dropdown container.
+    SelectComponent.prototype.onOptionsListClick = function () {
+        this.optionListClicked = true;
+    };
     SelectComponent.prototype.onDropdownOptionClicked = function (option) {
-        this.multiple ?
-            this.toggleSelectOption(option) : this.selectOption(option);
+        this.optionClicked = true;
+        this.multiple ? this.toggleSelectOption(option) : this.selectOption(option);
     };
-    SelectComponent.prototype.onDropdownClose = function (focus) {
-        this.closeDropdown(focus);
-    };
-    // Single filter input.
     SelectComponent.prototype.onSingleFilterClick = function () {
         this.selectContainerClicked = true;
     };
-    SelectComponent.prototype.onSingleFilterInput = function (term) {
-        var hasShown = this.optionList.filter(term);
-        if (!hasShown) {
-            this.noOptionsFound.emit(term);
-        }
+    SelectComponent.prototype.onSingleFilterFocus = function () {
+        this._focus();
     };
+    SelectComponent.prototype.onFilterInput = function (term) {
+        this.filter(term);
+    };
     SelectComponent.prototype.onSingleFilterKeydown = function (event) {
         this.handleSingleFilterKeydown(event);
     };
-    // Multiple filter input.
-    SelectComponent.prototype.onMultipleFilterInput = function (event) {
-        var _this = this;
-        if (!this.isOpen) {
-            this.openDropdown();
-        }
-        this.updateFilterWidth();
-        setTimeout(function () {
-            var term = event.target.value;
-            var hasShown = _this.optionList.filter(term);
-            if (!hasShown) {
-                _this.noOptionsFound.emit(term);
-            }
-        });
-    };
     SelectComponent.prototype.onMultipleFilterKeydown = function (event) {
         this.handleMultipleFilterKeydown(event);
     };
-    // Single clear select.
+    SelectComponent.prototype.onMultipleFilterFocus = function () {
+        this._focus();
+    };
     SelectComponent.prototype.onClearSelectionClick = function (event) {
@@ -148,3 +144,2 @@ this.clearClicked = true;
     };
-    // Multiple deselect option.
     SelectComponent.prototype.onDeselectOptionClick = function (option) {
@@ -160,3 +155,3 @@ this.clearClicked = true;
     SelectComponent.prototype.close = function () {
-        this.closeDropdown();
+        this.closeDropdown(false);
     };
@@ -167,6 +162,3 @@ SelectComponent.prototype.clear = function () {
     SelectComponent.prototype.select = function (value) {
-        var _this = this;
-        this.optionList.getOptionsByValue(value).forEach(function (option) {
-            _this.selectOption(option);
-        });
+        this.writeValue(value);
     };
@@ -186,2 +178,24 @@ /** ControlValueAccessor interface methods. **/
     };
+    /** Input change handling. **/
+    SelectComponent.prototype.handleInputChanges = function (changes) {
+        var optionsChanged = changes.hasOwnProperty('options');
+        var noFilterChanged = changes.hasOwnProperty('noFilter');
+        var placeholderChanged = changes.hasOwnProperty('placeholder');
+        if (optionsChanged) {
+            this.updateOptionList(changes.options.currentValue);
+        }
+        if (optionsChanged || noFilterChanged) {
+            this.updateFilterEnabled();
+        }
+        if (placeholderChanged) {
+            this.updateState();
+        }
+    };
+    SelectComponent.prototype.updateOptionList = function (options) {
+        this.optionList = new option_list_1.OptionList(options);
+        this.optionList.value = this._value;
+    };
+    SelectComponent.prototype.updateFilterEnabled = function () {
+        this.filterEnabled = this.optionList.options.length >= this.noFilter;
+    };
     Object.defineProperty(SelectComponent.prototype, "value", {
@@ -202,6 +216,5 @@ /** Value. **/
             }
-            if (!option_list_1.OptionList.equalValues(v, this._value)) {
-                this.optionList.value = v;
-                this.valueChanged();
-            }
+            this.optionList.value = v;
+            this._value = v;
+            this.updateState();
         },
@@ -213,50 +226,12 @@ enumerable: true,
         this._value = this.optionList.value;
-        this.hasSelected = this._value.length > 0;
-        this.placeholderView = this.hasSelected ? '' : this.placeholder;
-        this.updateFilterWidth();
+        this.updateState();
         this.onChange(this.value);
     };
-    /** Initialization. **/
-    SelectComponent.prototype.updateOptionsList = function (firstTime) {
-        var v;
-        if (!firstTime) {
-            v = this.optionList.value;
-        }
-        this.optionList = new option_list_1.OptionList(this.options);
-        if (!firstTime) {
-            this.optionList.value = v;
-            this.valueChanged();
-        }
+    SelectComponent.prototype.updateState = function () {
+        this.placeholderView = this.optionList.hasSelected ? '' : this.placeholder;
+        this.updateFilterWidth();
     };
-    /** Dropdown. **/
-    SelectComponent.prototype.toggleDropdown = function () {
-        if (!this.isDisabled) {
-            this.isOpen ? this.closeDropdown(true) : this.openDropdown();
-        }
-    };
-    SelectComponent.prototype.openDropdown = function () {
-        if (!this.isOpen) {
-            this.updateWidth();
-            this.updatePosition();
-            this.isOpen = true;
-            if (this.multiple && this.filterEnabled) {
-                this.filterInput.nativeElement.focus();
-            }
-            this.opened.emit(null);
-        }
-    };
-    SelectComponent.prototype.closeDropdown = function (focus) {
-        if (focus === void 0) { focus = false; }
-        if (this.isOpen) {
-            this.clearFilterInput();
-            this.isOpen = false;
-            if (focus) {
-                this.focus();
-            }
-            this.closed.emit(null);
-        }
-    };
     /** Select. **/
     SelectComponent.prototype.selectOption = function (option) {
-        if (!option.selected) {
+        if (!option.selected && !option.disabled) {
             this.optionList.select(option, this.multiple);
@@ -293,5 +268,3 @@ this.valueChanged();
             else {
-                this.deselected.emit(selection.map(function (option) {
-                    return option.wrappedOption;
-                }));
+                this.deselected.emit(selection.map(function (option) { return option.wrappedOption; }));
             }
@@ -301,4 +274,3 @@ }
     SelectComponent.prototype.toggleSelectOption = function (option) {
-        option.selected ?
-            this.deselectOption(option) : this.selectOption(option);
+        option.selected ? this.deselectOption(option) : this.selectOption(option);
     };
@@ -320,3 +292,46 @@ SelectComponent.prototype.selectHighlightedOption = function () {
     };
+    /** Dropdown. **/
+    SelectComponent.prototype.toggleDropdown = function () {
+        if (!this.isDisabled) {
+            this.isOpen ? this.closeDropdown(true) : this.openDropdown();
+        }
+    };
+    SelectComponent.prototype.openDropdown = function () {
+        if (!this.isOpen) {
+            this.updateWidth();
+            this.updatePosition();
+            this.isOpen = true;
+            if (this.multiple && this.filterEnabled) {
+                this.filterInput.nativeElement.focus();
+            }
+            this.opened.emit(null);
+        }
+    };
+    SelectComponent.prototype.closeDropdown = function (focus) {
+        if (this.isOpen) {
+            this.clearFilterInput();
+            this.updateFilterWidth();
+            this.isOpen = false;
+            if (focus) {
+                this._focusSelectContainer();
+            }
+            this.closed.emit(null);
+        }
+    };
     /** Filter. **/
+    SelectComponent.prototype.filter = function (term) {
+        var _this = this;
+        if (this.multiple) {
+            if (!this.isOpen) {
+                this.openDropdown();
+            }
+            this.updateFilterWidth();
+        }
+        setTimeout(function () {
+            var hasShown = _this.optionList.filter(term);
+            if (!hasShown) {
+                _this.noOptionsFound.emit(term);
+            }
+        });
+    };
     SelectComponent.prototype.clearFilterInput = function () {
@@ -326,5 +341,2 @@ if (this.multiple && this.filterEnabled) {
         }
-        else {
-            this.dropdown.clearFilterInput();
-        }
     };
@@ -340,8 +352,8 @@ SelectComponent.prototype.setMultipleFilterInput = function (value) {
         if (this.isOpen) {
-            if (key === this.KEYS.ESC ||
-                (key === this.KEYS.UP && event.altKey)) {
+            if (key === this.KEYS.ESC || (key === this.KEYS.UP && event.altKey)) {
                 this.closeDropdown(true);
             }
             else if (key === this.KEYS.TAB) {
-                this.closeDropdown();
+                this.closeDropdown(event.shiftKey);
+                this._blur();
             }
@@ -367,2 +379,3 @@ else if (key === this.KEYS.ENTER) {
         else {
+            // DEPRICATED --> SPACE
             if (key === this.KEYS.ENTER || key === this.KEYS.SPACE ||
@@ -378,2 +391,5 @@ (key === this.KEYS.DOWN && event.altKey)) {
             }
+            else if (key === this.KEYS.TAB) {
+                this._blur();
+            }
         }
@@ -384,3 +400,3 @@ };
         if (key === this.KEYS.BACKSPACE) {
-            if (this.hasSelected && this.filterEnabled &&
+            if (this.optionList.hasSelected && this.filterEnabled &&
                 this.filterInput.nativeElement.value === '') {
@@ -400,22 +416,26 @@ this.deselectLast();
     /** View. **/
-    SelectComponent.prototype.focus = function () {
-        this.hasFocus = true;
-        if (this.multiple && this.filterEnabled) {
-            this.filterInput.nativeElement.focus();
+    SelectComponent.prototype._blur = function () {
+        if (this.hasFocus) {
+            this.hasFocus = false;
+            this.onTouched();
+            this.blur.emit(null);
         }
-        else {
-            this.selectionSpan.nativeElement.focus();
+    };
+    SelectComponent.prototype._focus = function () {
+        if (!this.hasFocus) {
+            this.hasFocus = true;
+            this.focus.emit(null);
         }
     };
-    SelectComponent.prototype.blur = function () {
-        this.hasFocus = false;
-        this.selectionSpan.nativeElement.blur();
+    SelectComponent.prototype._focusSelectContainer = function () {
+        this.selectionSpan.nativeElement.focus();
     };
     SelectComponent.prototype.updateWidth = function () {
-        this.width = this.selectionSpan.nativeElement.offsetWidth;
+        this.width = this.selectionSpan.nativeElement.getBoundingClientRect().width;
     };
     SelectComponent.prototype.updatePosition = function () {
-        var e = this.selectionSpan.nativeElement;
-        this.left = e.offsetLeft;
-        this.top = e.offsetTop + e.offsetHeight;
+        var hostRect = this.hostElement.nativeElement.getBoundingClientRect();
+        var spanRect = this.selectionSpan.nativeElement.getBoundingClientRect();
+        this.left = spanRect.left - hostRect.left;
+        this.top = (spanRect.top - hostRect.top) + spanRect.height;
     };
@@ -441,3 +461,5 @@ SelectComponent.prototype.updateFilterWidth = function () {
 /** @nocollapse */
-SelectComponent.ctorParameters = function () { return []; };
+SelectComponent.ctorParameters = function () { return [
+    { type: core_1.ElementRef, },
+]; };
 SelectComponent.propDecorators = {
@@ -447,6 +469,6 @@ 'options': [{ type: core_1.Input },],
     'disabled': [{ type: core_1.Input },],
+    'multiple': [{ type: core_1.Input },],
+    'noFilter': [{ type: core_1.Input },],
     'highlightColor': [{ type: core_1.Input },],
     'highlightTextColor': [{ type: core_1.Input },],
-    'multiple': [{ type: core_1.Input },],
-    'noFilter': [{ type: core_1.Input },],
     'notFoundMsg': [{ type: core_1.Input },],
@@ -460,2 +482,4 @@ 'placeholder': [{ type: core_1.Input },],
     'deselected': [{ type: core_1.Output },],
+    'focus': [{ type: core_1.Output },],
+    'blur': [{ type: core_1.Output },],
     'noOptionsFound': [{ type: core_1.Output },],
@@ -465,3 +489,7 @@ 'selectionSpan': [{ type: core_1.ViewChild, args: ['selection',] },],
     'filterInput': [{ type: core_1.ViewChild, args: ['filterInput',] },],
+    'optionTemplate': [{ type: core_1.ContentChild, args: ['optionTemplate',] },],
+    'onWindowBlur': [{ type: core_1.HostListener, args: ['window:blur',] },],
+    'onWindowClick': [{ type: core_1.HostListener, args: ['window:click',] },],
+    'onWindowResize': [{ type: core_1.HostListener, args: ['window:resize',] },],
 };
 exports.SelectComponent = SelectComponent;

dist/select.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"SELECT_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"SelectComponent"},"multi":true},"SelectComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-select","template":{"__symbolic":"reference","module":"./select.component.html","name":"TEMPLATE"},"styles":[{"__symbolic":"reference","module":"./select.component.css","name":"STYLE"}],"providers":[{"__symbolic":"reference","name":"SELECT_VALUE_ACCESSOR"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allowClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightTextColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"noFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"notFoundMsg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"filterPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"opened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"closed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"deselected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"noOptionsFound":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selectionSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["selection"]}]}],"dropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dropdown"]}]}],"filterInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["filterInput"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"onWindowClick":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method"}],"onSelectContainerClick":[{"__symbolic":"method"}],"onSelectContainerFocus":[{"__symbolic":"method"}],"onSelectContainerKeydown":[{"__symbolic":"method"}],"onDropdownOptionClicked":[{"__symbolic":"method"}],"onDropdownClose":[{"__symbolic":"method"}],"onSingleFilterClick":[{"__symbolic":"method"}],"onSingleFilterInput":[{"__symbolic":"method"}],"onSingleFilterKeydown":[{"__symbolic":"method"}],"onMultipleFilterInput":[{"__symbolic":"method"}],"onMultipleFilterKeydown":[{"__symbolic":"method"}],"onClearSelectionClick":[{"__symbolic":"method"}],"onDeselectOptionClick":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"updateOptionsList":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"selectOption":[{"__symbolic":"method"}],"deselectOption":[{"__symbolic":"method"}],"clearSelection":[{"__symbolic":"method"}],"toggleSelectOption":[{"__symbolic":"method"}],"selectHighlightedOption":[{"__symbolic":"method"}],"deselectLast":[{"__symbolic":"method"}],"clearFilterInput":[{"__symbolic":"method"}],"setMultipleFilterInput":[{"__symbolic":"method"}],"handleSelectContainerKeydown":[{"__symbolic":"method"}],"handleMultipleFilterKeydown":[{"__symbolic":"method"}],"handleSingleFilterKeydown":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"blur":[{"__symbolic":"method"}],"updateWidth":[{"__symbolic":"method"}],"updatePosition":[{"__symbolic":"method"}],"updateFilterWidth":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SELECT_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"SelectComponent"},"multi":true},"SelectComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-select","template":{"__symbolic":"reference","module":"./select.component.html","name":"TEMPLATE"},"styles":[{"__symbolic":"reference","module":"./select.component.css","name":"STYLE"}],"providers":[{"__symbolic":"reference","name":"SELECT_VALUE_ACCESSOR"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allowClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightTextColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"noFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"notFoundMsg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"filterPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"opened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"closed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"deselected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"noOptionsFound":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selectionSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["selection"]}]}],"dropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dropdown"]}]}],"filterInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["filterInput"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"onWindowClick":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method"}],"onSelectContainerClick":[{"__symbolic":"method"}],"onSelectContainerFocus":[{"__symbolic":"method"}],"onSelectContainerKeydown":[{"__symbolic":"method"}],"onDropdownOptionClicked":[{"__symbolic":"method"}],"onDropdownClose":[{"__symbolic":"method"}],"onSingleFilterClick":[{"__symbolic":"method"}],"onSingleFilterInput":[{"__symbolic":"method"}],"onSingleFilterKeydown":[{"__symbolic":"method"}],"onMultipleFilterInput":[{"__symbolic":"method"}],"onMultipleFilterKeydown":[{"__symbolic":"method"}],"onClearSelectionClick":[{"__symbolic":"method"}],"onDeselectOptionClick":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"updateOptionsList":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"selectOption":[{"__symbolic":"method"}],"deselectOption":[{"__symbolic":"method"}],"clearSelection":[{"__symbolic":"method"}],"toggleSelectOption":[{"__symbolic":"method"}],"selectHighlightedOption":[{"__symbolic":"method"}],"deselectLast":[{"__symbolic":"method"}],"clearFilterInput":[{"__symbolic":"method"}],"setMultipleFilterInput":[{"__symbolic":"method"}],"handleSelectContainerKeydown":[{"__symbolic":"method"}],"handleMultipleFilterKeydown":[{"__symbolic":"method"}],"handleSingleFilterKeydown":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"blur":[{"__symbolic":"method"}],"updateWidth":[{"__symbolic":"method"}],"updatePosition":[{"__symbolic":"method"}],"updateFilterWidth":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"SELECT_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"SelectComponent"},"multi":true},"SelectComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-select","template":{"__symbolic":"reference","module":"./select.component.html","name":"TEMPLATE"},"styles":[{"__symbolic":"reference","module":"./select.component.css","name":"STYLE"}],"providers":[{"__symbolic":"reference","name":"SELECT_VALUE_ACCESSOR"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allowClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"noFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightTextColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"notFoundMsg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"filterPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"opened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"closed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"deselected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"noOptionsFound":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selectionSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["selection"]}]}],"dropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dropdown"]}]}],"filterInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["filterInput"]}]}],"optionTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["optionTemplate"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onWindowBlur":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:blur"]}]}],"onWindowClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:click"]}]}],"onWindowResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:resize"]}]}],"onSelectContainerClick":[{"__symbolic":"method"}],"onSelectContainerFocus":[{"__symbolic":"method"}],"onSelectContainerKeydown":[{"__symbolic":"method"}],"onOptionsListClick":[{"__symbolic":"method"}],"onDropdownOptionClicked":[{"__symbolic":"method"}],"onSingleFilterClick":[{"__symbolic":"method"}],"onSingleFilterFocus":[{"__symbolic":"method"}],"onFilterInput":[{"__symbolic":"method"}],"onSingleFilterKeydown":[{"__symbolic":"method"}],"onMultipleFilterKeydown":[{"__symbolic":"method"}],"onMultipleFilterFocus":[{"__symbolic":"method"}],"onClearSelectionClick":[{"__symbolic":"method"}],"onDeselectOptionClick":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"handleInputChanges":[{"__symbolic":"method"}],"updateOptionList":[{"__symbolic":"method"}],"updateFilterEnabled":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"updateState":[{"__symbolic":"method"}],"selectOption":[{"__symbolic":"method"}],"deselectOption":[{"__symbolic":"method"}],"clearSelection":[{"__symbolic":"method"}],"toggleSelectOption":[{"__symbolic":"method"}],"selectHighlightedOption":[{"__symbolic":"method"}],"deselectLast":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"filter":[{"__symbolic":"method"}],"clearFilterInput":[{"__symbolic":"method"}],"setMultipleFilterInput":[{"__symbolic":"method"}],"handleSelectContainerKeydown":[{"__symbolic":"method"}],"handleMultipleFilterKeydown":[{"__symbolic":"method"}],"handleSingleFilterKeydown":[{"__symbolic":"method"}],"_blur":[{"__symbolic":"method"}],"_focus":[{"__symbolic":"method"}],"_focusSelectContainer":[{"__symbolic":"method"}],"updateWidth":[{"__symbolic":"method"}],"updatePosition":[{"__symbolic":"method"}],"updateFilterWidth":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SELECT_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"SelectComponent"},"multi":true},"SelectComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-select","template":{"__symbolic":"reference","module":"./select.component.html","name":"TEMPLATE"},"styles":[{"__symbolic":"reference","module":"./select.component.css","name":"STYLE"}],"providers":[{"__symbolic":"reference","name":"SELECT_VALUE_ACCESSOR"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"allowClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"noFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"highlightTextColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"notFoundMsg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"filterPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"opened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"closed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"deselected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"noOptionsFound":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selectionSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["selection"]}]}],"dropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["dropdown"]}]}],"filterInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["filterInput"]}]}],"optionTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["optionTemplate"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onWindowBlur":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:blur"]}]}],"onWindowClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:click"]}]}],"onWindowResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:resize"]}]}],"onSelectContainerClick":[{"__symbolic":"method"}],"onSelectContainerFocus":[{"__symbolic":"method"}],"onSelectContainerKeydown":[{"__symbolic":"method"}],"onOptionsListClick":[{"__symbolic":"method"}],"onDropdownOptionClicked":[{"__symbolic":"method"}],"onSingleFilterClick":[{"__symbolic":"method"}],"onSingleFilterFocus":[{"__symbolic":"method"}],"onFilterInput":[{"__symbolic":"method"}],"onSingleFilterKeydown":[{"__symbolic":"method"}],"onMultipleFilterKeydown":[{"__symbolic":"method"}],"onMultipleFilterFocus":[{"__symbolic":"method"}],"onClearSelectionClick":[{"__symbolic":"method"}],"onDeselectOptionClick":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"handleInputChanges":[{"__symbolic":"method"}],"updateOptionList":[{"__symbolic":"method"}],"updateFilterEnabled":[{"__symbolic":"method"}],"valueChanged":[{"__symbolic":"method"}],"updateState":[{"__symbolic":"method"}],"selectOption":[{"__symbolic":"method"}],"deselectOption":[{"__symbolic":"method"}],"clearSelection":[{"__symbolic":"method"}],"toggleSelectOption":[{"__symbolic":"method"}],"selectHighlightedOption":[{"__symbolic":"method"}],"deselectLast":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"filter":[{"__symbolic":"method"}],"clearFilterInput":[{"__symbolic":"method"}],"setMultipleFilterInput":[{"__symbolic":"method"}],"handleSelectContainerKeydown":[{"__symbolic":"method"}],"handleMultipleFilterKeydown":[{"__symbolic":"method"}],"handleSingleFilterKeydown":[{"__symbolic":"method"}],"_blur":[{"__symbolic":"method"}],"_focus":[{"__symbolic":"method"}],"_focusSelectContainer":[{"__symbolic":"method"}],"updateWidth":[{"__symbolic":"method"}],"updatePosition":[{"__symbolic":"method"}],"updateFilterWidth":[{"__symbolic":"method"}]}}}}]

LICENSE.txt

 ISC License
 
-Copyright (c) 2016, B.A. van den Berg
+Copyright (c) 2017, B.A. van den Berg
 
@@ -5,0 +5,0 @@ Permission to use, copy, modify, and/or distribute this software for any

package.json

 {
   "name": "ng-select",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.6",
   "description": "Select component for angular.",
@@ -22,14 +22,15 @@ "main": "index.js",
   "devDependencies": {
-    "@angular/common": "^4.0.0",
-    "@angular/compiler": "^4.0.0",
-    "@angular/compiler-cli": "^4.0.0",
-    "@angular/core": "^4.0.0",
-    "@angular/forms": "^4.0.0",
-    "@angular/platform-browser": "^4.0.0",
-    "@angular/platform-browser-dynamic": "^4.0.0",
-    "@angular/platform-server": "^4.0.0",
-    "@types/jasmine": "2.5.46",
-    "@types/node": "^7.0.12",
+    "@angular/animations": "^4.2.5",
+    "@angular/common": "^4.2.5",
+    "@angular/compiler": "^4.2.5",
+    "@angular/compiler-cli": "^4.2.5",
+    "@angular/core": "^4.2.5",
+    "@angular/forms": "^4.2.5",
+    "@angular/platform-browser": "^4.2.5",
+    "@angular/platform-browser-dynamic": "^4.2.5",
+    "@angular/platform-server": "^4.2.5",
+    "@types/jasmine": "^2.5.53",
+    "@types/node": "^8.0.7",
     "core-js": "^2.4.1",
-    "del": "^2.2.2",
+    "del": "^3.0.0",
     "fs": "^0.0.1-security",
@@ -39,9 +40,9 @@ "gulp": "^3.9.1",
     "gulp-sass": "^3.0.0",
-    "gulp-tslint": "^7.0.1",
+    "gulp-tslint": "^8.1.1",
     "reflect-metadata": "^0.1.9",
     "rxjs": "^5.0.2",
-    "tslint": "^4.2.0",
-    "typescript": "^2.2.0",
-    "zone.js": "^0.8.5"
+    "tslint": "^5.4.3",
+    "typescript": "~2.2.0",
+    "zone.js": "^0.8.12"
   }
 }

README.md

@@ -5,163 +5,29 @@ # Select component for angular
 
-A select component for angular, based on the select2 JQuery plugin. See the
-[ng-select] page for example uses or try it with this [plunker].
+A select component for angular, based on the [select2] JQuery plugin. See the
+[ng-select] web site for documentation and examples, or try it with this [plunker].
 
-*Disclaimer*: This is a beta version, not yet intended for production release.
+## Develop
 
--------------------------------------------------------------------------------
-***IMPORTANT NOTICE***
+Make sure that `gulp` and `yarn` are installed.
 
-*The angular [press kit](https://angular.io/presskit.html) states that 3rd
-party projects should avoid the use of version numbers in their names. The name
-of this project is therefore changed from angular2-select to ng-select (since
-angular-select was not available on npm anymore).*
-
-*The npm package `angular2-select` will be deprecated, the upcoming beta.4
-version will only be available as `ng-select`. Therefore, for upgrading to
-beta.4 (which is not yet released) you will need to reinstall the npm package:*
+Clone the repository and run:
+```bash
+$ yarn install
+$ gulp build
 ```
-npm uninstall --save angular2-select
-npm install --save ng-select
-```
-*And your module import needs to be changed to:*
-```
-import {SelectModule} from 'ng-select';
-```
--------------------------------------------------------------------------------
 
-- [Getting started](#getting-started)
-- [Input properties](#input-properties)
-- [Output events](#output-events)
-- [Methods](#methods)
-- [Limitations](#limitations)
-- [Develop](#develop)
-
-## Getting started
-
-### Install
-
-For npm users:
+To install and run the ng-select web site on your local machine, run the following in the demo
+folder:
+```bash
+$ yarn install
+$ ng serve
 ```
-npm install --save ng-select
-```
-For yarn users:
-```
-yarn add ng-select
-```
 
-### Configuration
-
-#### Angular cli
-
-After installation, no additional configuration is needed. Import the
-`SelectModule` and define it as one of the imports of your application module:
-
-```typescript
-import {NgModule} from '@angular/core';
-import {BrowserModule} from '@angular/platform-browser';
-import {SelectModule} from 'ng-select';
-
-import {AppComponent} from './app.component';
-
-@NgModule({
-    declarations: [
-        AppComponent
-    ],
-    imports: [
-        BrowserModule
-        SelectModule
-    ],
-    bootstrap: [
-        AppComponent
-    ]
-})
-export class AppModule {}
+For manual testing, pack and install a modified version of the ng-select component to ng-select web 
+site with the script:
+```bash
+$ ./copy_to_demo.sh
 ```
-
-#### Systemjs
-
-In `systemjs.config.js` add `ng-select` to map and package:
-
-```javascript
-var map = {
-	'ng-select': 'node_modules/ng-select'
-};
-
-var packages = {
-	'ng-select': {
-		main: 'index.js',
-		defaultExtension: 'js'
-	}
-};
-```
-
-## Input properties
-
-| Name               | Type              | Default               | Description                                                                                |
-| ------------------ | ----------------- | --------------------- | ------------------------------------------------------------------------------------------ |
-| options            | `Array<IOption>`\* |                      | List of select option.                                                                     |
-| multiple           | `boolean`         | `false`               | If set to true, the select component is multi-select, otherwise single select.             |
-| allowClear         | `boolean`         | `false`               | Only applies to single select. If set to true, a clickable clear selection cross is shown. |
-| disabled           | `boolean`         | `false`               | If set to true, the select component is disabled.                                          |
-| highlightColor     | `string`          | `#2196f3`             | Background color of highlighted option.                                                    |
-| highlightTextColor | `string`          | `#fff`                | Text color of highlighted option.                                                          |
-| label              | `string`          | ''                    | Label above select container. |
-| noFilter           | `number`          | `0`                   | Filter is hidden if the number of options is less than the given number.                   |
-| notFoundMsg        | `string`          | `"No results found"`  | The message shown if no options are found for the current filter input value.              |
-| placeholder        | `string`          | `""`                  | Placeholder text that is shown if no options are selected.
-| filterPlaceholder  | `string`          | `""`                  | Placeholder text that is shown on the filter input (**single select only**).
-
-\* Object that implements the IOption interface (`{value: string, label: string}`)
-
-## Output events
-
-| Name          | Value                       | Description                                                              |
-| ------------- | --------------------------- | ------------------------------------------------------------------------ |
-| opened        | `null`                      | If the select drop down is opened.                                       |
-| closed        | `null`                      | If the select drop down is closed.                                       |
-| selected      | `IOption`\*                 | Returns selected option object.                                          |
-| deselected    | `IOption`\* or `[IOption]`\*| Returns deselected option object(s).                                     |
-| noOptionsFound| `string`                    | Returns search term if filter does not return any results.               |
-
-\* Object that implements the IOption interface (`{value: string, label: string}`)
-
-## Methods
-
-| Name          | Parameters            | Description                             |
-| ------------- | --------------------- | --------------------------------------- |
-| open          | -                     | Open the select drop down.              |
-| close         | -                     | Close the select drop down.             |
-| clear         | -                     | Deselect all selected options.          |
-| select        | `value: string`       | Select the option with the given value. |
-
-## Limitations
-
-This component has limitations, which will be handled in future versions.
-Currently the goal is to work towards a stable 1.0 release version.
-
-### Scalability
-
-The component is currently not suitable for large numbers of options. If the
-dropdown is opened, all options are added to the DOM, which will cause browser
-performance issues for large numbers of options. Therefore, if you have more
-that a few hundred options, then you will be better of with another solution.
-
-### Custom option view (using an option template)
-
-In version 1.0 it will only be possible to define an option label that will be
-shown in the select dropdown. Customizing the option's view (adding an icon for
-example) is not possible. Also grouping of options is not supported.
-
-## Develop
-
-Global installations of `gulp` and `yarn` are required for development. Clone
-or fork the repository and run:
-
-```
-yarn install
-gulp build
-```
-
 [ng-select]: https://basvandenberg.github.io/ng-select
+[select2]: https://select2.github.io
 [plunker]: https://plnkr.co/edit/vxwV6zxEwZGVUVR5V6tg?p=preview
-[changelog]: https://github.com/basvandenberg/ng-select/releases

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

164055

increased by2.47%

Lines of code

2857

increased by2.22%

Worsened metrics

Dev dependency count

23

increased by4.55%

Number of lines in readme file

33

decreased by-80.24%

No dependency changes