angular2-select - npm Package Compare versions

Comparing version 1.0.0-beta.2 to 1.0.0-beta.3

CHANGELOG.md

 # Changelog
 
+
+<a name="1.0.0-beta.3"></a>
+## [1.0.0-beta.3](https://github.com/basvandenberg/angular2-select/compare/1.0.0-beta.2...1.0.0-beta.3) (2017-02-11)
+
+### Breaking changes
+
+- Empty multi-select returns empty array as value instead of empty string (#104).
+
+### Features
+
+- Trigger `noOptionsFound` event if no options found after filter (#73).
+
+### Bug fixes
+
+- Same placeholder styling single and multiple select (#67).
+- Prevent selecting option if filter shows 'No results found' (#74).
+- Update value after deselecting options that are not present in updated list
+  of options (#75).
+- Fixed test if new value is different from current value (#76).
+- Fixed key handlers, prevent selecting multi-select option when pressing space
+  key (#78).
+- Hide clear button when nothing is selected (#90).
+- Remove padding above option list if filter is disabled (#98).
+
+### Improvements
+
+- Throw `TypeError` when trying to set a non-string or non-Array value.
+- For empty multiselect, return empty array instead of empty string (#104).
+- Don't force color/highlight styles when not directly set (#97).
+
+
+
 <a name="1.0.0-beta.2"></a>
@@ -11,2 +43,3 @@ ## [1.0.0-beta.2](https://github.com/basvandenberg/angular2-select/compare/1.0.0-beta.1...1.0.0-beta.2) (2017-01-12)
 
+
 <a name="1.0.0-beta.1"></a>
@@ -20,2 +53,3 @@ ## [1.0.0-beta.1](https://github.com/basvandenberg/angular2-select/compare/1.0.0-beta.0...1.0.0-beta.1) (2017-01-08)
 
+
 <a name="1.0.0-beta.0"></a>
@@ -22,0 +56,0 @@ ## [1.0.0-beta.0](https://github.com/basvandenberg/angular2-select/compare/1.0.0-alpha.12...1.0.0-beta.0) (2017-01-07)

dist/option-list.d.ts

 import { Option } from './option';
 export declare class OptionList {
     private _options;
-    private _selection;
-    private _filtered;
-    private _value;
     private _highlightedOption;
+    private _hasShown;
     constructor(options: Array<any>);
-    /**************************************************************************
-     * Options.
-     *************************************************************************/
+    /** Options. **/
     readonly options: Array<Option>;
     getOptionsByValue(value: string): Array<Option>;
-    /**************************************************************************
-     * Value.
-     *************************************************************************/
+    /** Value. **/
     value: Array<string>;
-    /**************************************************************************
-     * Selection.
-     *************************************************************************/
+    /** Selection. **/
     readonly selection: Array<Option>;
@@ -25,11 +17,7 @@ select(option: Option, multiple: boolean): void;
     clearSelection(): void;
-    /**************************************************************************
-     * Filter.
-     *************************************************************************/
+    /** Filter. **/
     readonly filtered: Array<Option>;
-    filter(term: string): void;
-    resetFilter(): void;
-    /**************************************************************************
-     * Highlight.
-     *************************************************************************/
+    filter(term: string): boolean;
+    private resetFilter();
+    /** Highlight. **/
     readonly highlightedOption: Option;
@@ -43,6 +31,4 @@ highlight(): void;
     getHighlightedIndex(): number;
-    /**************************************************************************
-     * Util.
-     *************************************************************************/
-    hasShown(): boolean;
+    /** Util. **/
+    readonly hasShown: boolean;
     hasSelected(): boolean;
@@ -52,2 +38,3 @@ hasShownSelected(): boolean;
     private getFirstShownSelected();
+    static equalValues(v0: Array<string>, v1: Array<string>): boolean;
 }

dist/option-list.js

@@ -6,11 +6,10 @@ "use strict";
     function OptionList(options) {
-        // Array<{ value: string; label: string;>) {
+        /* Consider using these for performance improvement. */
+        // private _selection: Array<Option>;
+        // private _filtered: Array<Option>;
+        // private _value: Array<string>;
         this._highlightedOption = null;
-        // Inject diacritics service.
-        // let inj = ReflectiveInjector.resolveAndCreate([DiacriticsService]);
-        // this.diacriticsService = inj.get(DiacriticsService);
         if (typeof options === 'undefined' || options === null) {
             options = [];
         }
-        // Initialize array of option objects.
         this._options = options.map(function (option) {
@@ -23,8 +22,7 @@ var o = new option_1.Option(option.value, option.label);
         });
+        this._hasShown = this._options.length > 0;
         this.highlight();
     }
     Object.defineProperty(OptionList.prototype, "options", {
-        /**************************************************************************
-         * Options.
-         *************************************************************************/
+        /** Options. **/
         get: function () {
@@ -42,5 +40,3 @@ return this._options;
     Object.defineProperty(OptionList.prototype, "value", {
-        /**************************************************************************
-         * Value.
-         *************************************************************************/
+        /** Value. **/
         get: function () {
@@ -61,5 +57,3 @@ return this.selection.map(function (selectedOption) {
     Object.defineProperty(OptionList.prototype, "selection", {
-        /**************************************************************************
-         * Selection.
-         *************************************************************************/
+        /** Selection. **/
         get: function () {
@@ -88,5 +82,3 @@ return this.options.filter(function (option) {
     Object.defineProperty(OptionList.prototype, "filtered", {
-        /**************************************************************************
-         * Filter.
-         *************************************************************************/
+        /** Filter. **/
         get: function () {
@@ -101,16 +93,21 @@ return this.options.filter(function (option) {
     OptionList.prototype.filter = function (term) {
+        var anyShown = false;
         if (term.trim() === '') {
             this.resetFilter();
+            anyShown = this.options.length > 0;
         }
         else {
             this.options.forEach(function (option) {
-                // let strip: any = this.diacriticsService.stripDiacritics;
-                // let l: string = strip.call(null, option.label).toUpperCase();
-                // let t: string = strip.call(null, term).toUpperCase();
                 var l = diacritics_1.Diacritics.strip(option.label).toUpperCase();
                 var t = diacritics_1.Diacritics.strip(term).toUpperCase();
                 option.shown = l.indexOf(t) > -1;
+                if (option.shown) {
+                    anyShown = true;
+                }
             });
         }
+        var toEmpty = this.hasShown && !anyShown;
         this.highlight();
+        this._hasShown = anyShown;
+        return toEmpty;
     };
@@ -123,5 +120,3 @@ OptionList.prototype.resetFilter = function () {
     Object.defineProperty(OptionList.prototype, "highlightedOption", {
-        /**************************************************************************
-         * Highlight.
-         *************************************************************************/
+        /** Highlight. **/
         get: function () {
@@ -136,10 +131,10 @@ return this._highlightedOption;
             this.getFirstShownSelected() : this.getFirstShown();
-        if (option !== null) {
-            this.highlightOption(option);
-        }
+        this.highlightOption(option);
     };
     OptionList.prototype.highlightOption = function (option) {
         this.clearHighlightedOption();
-        option.highlighted = true;
-        this._highlightedOption = option;
+        if (option !== null) {
+            option.highlighted = true;
+            this._highlightedOption = option;
+        }
     };
@@ -162,3 +157,3 @@ OptionList.prototype.highlightNextOption = function () {
         if (this.highlightedOption !== null) {
-            this._highlightedOption.highlighted = false;
+            this.highlightedOption.highlighted = false;
             this._highlightedOption = null;
@@ -178,10 +173,10 @@ }
     };
-    /**************************************************************************
-     * Util.
-     *************************************************************************/
-    OptionList.prototype.hasShown = function () {
-        return this.options.some(function (option) {
-            return option.shown;
-        });
-    };
+    Object.defineProperty(OptionList.prototype, "hasShown", {
+        /** Util. **/
+        get: function () {
+            return this._hasShown;
+        },
+        enumerable: true,
+        configurable: true
+    });
     OptionList.prototype.hasSelected = function () {
@@ -198,3 +193,3 @@ return this.options.some(function (option) {
     OptionList.prototype.getFirstShown = function () {
-        for (var _i = 0, _a = this._options; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.options; _i < _a.length; _i++) {
             var option = _a[_i];
@@ -208,3 +203,3 @@ if (option.shown) {
     OptionList.prototype.getFirstShownSelected = function () {
-        for (var _i = 0, _a = this._options; _i < _a.length; _i++) {
+        for (var _i = 0, _a = this.options; _i < _a.length; _i++) {
             var option = _a[_i];
@@ -217,4 +212,15 @@ if (option.shown && option.selected) {
     };
+    // v0 and v1 are assumed not to be undefined or null.
+    OptionList.equalValues = function (v0, v1) {
+        if (v0.length !== v1.length) {
+            return false;
+        }
+        var a = v0.slice().sort();
+        var b = v1.slice().sort();
+        return a.every(function (v, i) {
+            return v === b[i];
+        });
+    };
     return OptionList;
 }());
 exports.OptionList = OptionList;

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","name":"any"}]}]}],"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"}],"hasShown":[{"__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","name":"any"}]}]}],"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"}],"hasShown":[{"__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","name":"any"}]}]}],"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","name":"any"}]}]}],"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"}]}}}}]

dist/select-dropdown.component.html.js

 "use strict";
-exports.TEMPLATE = "<div\n    [ngStyle]=\"{'top.px': top, 'left.px': left, 'width.px': width}\">\n\n    <div class=\"filter\"\n        *ngIf=\"!multiple\">\n        <input\n            *ngIf=\"filterEnabled\"\n            #filterInput\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            (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";

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\">\n        <input\n            *ngIf=\"filterEnabled\"\n            #filterInput\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\">\n        <input\n            *ngIf=\"filterEnabled\"\n            #filterInput\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            (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            (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"}}]

dist/select-dropdown.component.js

@@ -53,3 +53,3 @@ "use strict";
     SelectDropdownComponent.prototype.optionsReset = function () {
-        this.optionList.resetFilter();
+        this.optionList.filter('');
         this.optionList.highlight();
@@ -60,6 +60,10 @@ };
         if (option.highlighted) {
-            return {
-                'background-color': this.highlightColor,
-                'color': this.highlightTextColor
-            };
+            var style = {};
+            if (typeof this.highlightColor !== 'undefined') {
+                style['background-color'] = this.highlightColor;
+            }
+            if (typeof this.highlightTextColor !== 'undefined') {
+                style['color'] = this.highlightTextColor;
+            }
+            return style;
         }
@@ -66,0 +70,0 @@ else {

dist/select.component.css.js

 "use strict";
-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: #aaa; }\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 > div.placeholder {\n        color: #aaa;\n        line-height: 30px; }\n      ng-select > div > div.multiple input {\n        background-color: transparent;\n        border: none;\n        font-size: 15px;\n        height: 30px;\n        line-height: 30px;\n        padding: 0; }\n        ng-select > div > div.multiple input:focus {\n          outline: none; }\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: #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";

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: #aaa; }\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 > div.placeholder {\n        color: #aaa;\n        line-height: 30px; }\n      ng-select > div > div.multiple input {\n        background-color: transparent;\n        border: none;\n        font-size: 15px;\n        height: 30px;\n        line-height: 30px;\n        padding: 0; }\n        ng-select > div > div.multiple input:focus {\n          outline: none; }\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: #aaa; }\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 > div.placeholder {\n        color: #aaa;\n        line-height: 30px; }\n      ng-select > div > div.multiple input {\n        background-color: transparent;\n        border: none;\n        font-size: 15px;\n        height: 30px;\n        line-height: 30px;\n        padding: 0; }\n        ng-select > div > div.multiple input:focus {\n          outline: none; }\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: #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"}},{"__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"}}]

dist/select.component.d.ts

@@ -8,6 +8,3 @@ import { AfterViewInit, OnChanges, OnInit, EventEmitter, ExistingProvider } from '@angular/core';
 export declare class SelectComponent implements AfterViewInit, ControlValueAccessor, OnChanges, OnInit {
-    options: Array<{
-        value: string;
-        label: string;
-    }>;
+    options: Array<any>;
     allowClear: boolean;
@@ -25,2 +22,3 @@ disabled: boolean;
     deselected: EventEmitter<any>;
+    noOptionsFound: EventEmitter<null>;
     selectionSpan: any;
@@ -76,2 +74,3 @@ dropdown: SelectDropdownComponent;
     value: any;
+    private valueChanged();
     /** Initialization. **/
@@ -78,0 +77,0 @@ private updateOptionsList(firstTime);

dist/select.component.html.js

 "use strict";
-exports.TEMPLATE = "<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\"\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            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    [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 = "<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            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    [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";

dist/select.component.html.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"TEMPLATE":"<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\"\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            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    [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":"<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\"\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            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    [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":"<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            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    [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":"<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            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    [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"}}]

dist/select.component.js

@@ -16,4 +16,2 @@ "use strict";
         this.disabled = false;
-        this.highlightColor = '#2196f3';
-        this.highlightTextColor = '#fff';
         this.multiple = false;
@@ -27,2 +25,3 @@ this.noFilter = 0;
         this.deselected = new core_1.EventEmitter();
+        this.noOptionsFound = new core_1.EventEmitter();
         this._value = [];
@@ -109,3 +108,6 @@ // Selection state variables.
     SelectComponent.prototype.onSingleFilterInput = function (term) {
-        this.optionList.filter(term);
+        var toEmpty = this.optionList.filter(term);
+        if (toEmpty) {
+            this.noOptionsFound.emit(null);
+        }
     };
@@ -123,3 +125,6 @@ SelectComponent.prototype.onSingleFilterKeydown = function (event) {
         setTimeout(function () {
-            _this.optionList.filter(event.target.value);
+            var toEmpty = _this.optionList.filter(event.target.value);
+            if (toEmpty) {
+                _this.noOptionsFound.emit(null);
+            }
         });
@@ -174,8 +179,3 @@ };
         get: function () {
-            if (this._value.length === 0) {
-                return '';
-            }
-            else {
-                return this.multiple ? this._value : this._value[0];
-            }
+            return this.multiple ? this._value : this._value[0];
         },
@@ -189,10 +189,8 @@ set: function (v) {
             }
-            // TODO throw TypeError if v is not an Array.
-            if (v !== this._value) {
-                this._value = v;
+            else if (!Array.isArray(v)) {
+                throw new TypeError('Value must be a string or an array.');
+            }
+            if (!option_list_1.OptionList.equalValues(v, this._value)) {
                 this.optionList.value = v;
-                this.hasSelected = v.length > 0;
-                this.placeholderView = this.hasSelected ? '' : this.placeholder;
-                this.updateFilterWidth();
-                this.onChange(this.value);
+                this.valueChanged();
             }
@@ -203,2 +201,9 @@ },
     });
+    SelectComponent.prototype.valueChanged = function () {
+        this._value = this.optionList.value;
+        this.hasSelected = this._value.length > 0;
+        this.placeholderView = this.hasSelected ? '' : this.placeholder;
+        this.updateFilterWidth();
+        this.onChange(this.value);
+    };
     /** Initialization. **/
@@ -213,2 +218,3 @@ SelectComponent.prototype.updateOptionsList = function (firstTime) {
             this.optionList.value = v;
+            this.valueChanged();
         }
@@ -246,12 +252,6 @@ };
     SelectComponent.prototype.selectOption = function (option) {
-        var _this = this;
         if (!option.selected) {
             this.optionList.select(option, this.multiple);
-            this.value = this.optionList.value;
+            this.valueChanged();
             this.selected.emit(option.undecoratedCopy());
-            setTimeout(function () {
-                if (_this.multiple) {
-                    _this.updateFilterWidth();
-                }
-            });
         }
@@ -263,7 +263,6 @@ };
             this.optionList.deselect(option);
-            this.value = this.optionList.value;
+            this.valueChanged();
             this.deselected.emit(option.undecoratedCopy());
             setTimeout(function () {
                 if (_this.multiple) {
-                    _this.updateFilterWidth();
                     _this.updatePosition();
@@ -282,3 +281,3 @@ _this.optionList.highlight();
             this.optionList.clearSelection();
-            this.value = this.optionList.value;
+            this.valueChanged();
             if (selection.length === 1) {
@@ -299,4 +298,7 @@ this.deselected.emit(selection[0].undecoratedCopy());
     SelectComponent.prototype.selectHighlightedOption = function () {
-        this.selectOption(this.optionList.highlightedOption);
-        this.closeDropdown(true);
+        var option = this.optionList.highlightedOption;
+        if (option !== null) {
+            this.selectOption(option);
+            this.closeDropdown(true);
+        }
     };
@@ -328,21 +330,14 @@ SelectComponent.prototype.deselectLast = function () {
         var key = event.which;
-        if (key === this.KEYS.ESC || (key === this.KEYS.UP && event.altKey)) {
-            this.closeDropdown(true);
-        }
-        else if (key === this.KEYS.TAB) {
-            this.closeDropdown();
-        }
-        else if (key === this.KEYS.ENTER || key === this.KEYS.SPACE ||
-            (key === this.KEYS.DOWN && event.altKey)) {
-            /* FIREFOX HACK:
-             *
-             * The setTimeout is added to prevent the enter keydown event
-             * to be triggered for the filter input field, which causes
-             * the dropdown to be closed again.
-             */
-            this.isOpen ? this.selectHighlightedOption() :
-                setTimeout(function () { _this.openDropdown(); });
-        }
-        else if (key === this.KEYS.UP) {
-            if (this.isOpen) {
+        if (this.isOpen) {
+            if (key === this.KEYS.ESC ||
+                (key === this.KEYS.UP && event.altKey)) {
+                this.closeDropdown(true);
+            }
+            else if (key === this.KEYS.TAB) {
+                this.closeDropdown();
+            }
+            else if (key === this.KEYS.ENTER) {
+                this.selectHighlightedOption();
+            }
+            else if (key === this.KEYS.UP) {
                 this.optionList.highlightPreviousOption();
@@ -354,5 +349,3 @@ this.dropdown.moveHighlightedIntoView();
             }
-        }
-        else if (key === this.KEYS.DOWN) {
-            if (this.isOpen) {
+            else if (key === this.KEYS.DOWN) {
                 this.optionList.highlightNextOption();
@@ -365,2 +358,14 @@ this.dropdown.moveHighlightedIntoView();
         }
+        else {
+            if (key === this.KEYS.ENTER || key === this.KEYS.SPACE ||
+                (key === this.KEYS.DOWN && event.altKey)) {
+                /* FIREFOX HACK:
+                 *
+                 * The setTimeout is added to prevent the enter keydown event
+                 * to be triggered for the filter input field, which causes
+                 * the dropdown to be closed again.
+                 */
+                setTimeout(function () { _this.openDropdown(); });
+            }
+        }
     };
@@ -438,2 +443,3 @@ SelectComponent.prototype.handleMultipleFilterKeydown = function (event) {
         'deselected': [{ type: core_1.Output },],
+        'noOptionsFound': [{ type: core_1.Output },],
         'selectionSpan': [{ type: core_1.ViewChild, args: ['selection',] },],
@@ -440,0 +446,0 @@ 'dropdown': [{ type: core_1.ViewChild, args: ['dropdown',] },],

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"}}]}],"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"}}]}],"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"}],"ngAfterViewInit":[{"__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"}],"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"}}]}],"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"}}]}],"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"}],"ngAfterViewInit":[{"__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"}],"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"}}]}],"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"}}]}],"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"}],"ngAfterViewInit":[{"__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"}}]}],"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"}],"ngAfterViewInit":[{"__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"}]}}}}]

package.json

 {
   "name": "angular2-select",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "description": "Select component for Angular2.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # Angular 2 select component
+[![npm version](https://badge.fury.io/js/angular2-select.svg)](https://badge.fury.io/js/angular2-select)
+[![Build Status](https://travis-ci.org/basvandenberg/angular2-select.svg?branch=master)](https://travis-ci.org/basvandenberg/angular2-select)
 
@@ -107,2 +109,3 @@ A native select component for angular 2, based on the select2 JQuery plugin.
 | deselected    | `option`\* or `[option]`\* | If one or more options are deselected, returning the selected option(s). |
+| noOptionsFound| `null`                     | When the filter result changes to 'no results found'.                    |
 
@@ -109,0 +112,0 @@ \* `option` is an object with value and label (`{value: string, label: string}`)

New alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

159414

increased by0.3%

Number of package files

38

increased by2.7%

Lines of code

2779

increased by0.07%

Number of lines in readme file

148

increased by2.07%

Worsened metrics

Number of medium maintenance alerts

1

increased byInfinity%

No dependency changes