@progress/kendo-angular-dropdowns - npm Package Compare versions

Comparing version 0.16.0 to 0.16.10

dist/npm/js/combobox.component.d.ts

@@ -19,3 +19,3 @@ import '@telerik/kendo-theme-default/styles/packages/dropdowns';
  * @example
- * ```ts-preview
+ * ```ts
  * @@Component({
@@ -45,3 +45,3 @@ * selector: 'my-app',
      *
-     * > The `open` property determines whether the ComboBox's popup list is visible or not.
+     * > The `open` property determines whether the popup list of the ComboBox is visible or not.
      */
@@ -63,3 +63,3 @@ open: boolean;
      *
-     * > Selected values that are not present in the source will be considered as custom values.
+     * > Selected values that are not present in the source are considered custom values.
      */
@@ -70,3 +70,3 @@ value: any;
      *
-     * Do not define it if the data contains only primitive values.
+     * If the data contains only primitive values, do not define it.
      */
@@ -77,3 +77,3 @@ textField: string;
      *
-     * Do not define it if the data contains only primitive values.
+     * If the data contains only primitive values, do not define it.
      */
@@ -91,3 +91,2 @@ valueField: string;
      * Typically used when the data items are not of type `string`.
-     * @hidden
      * @param { Any } value - The custom value defined by the user.
@@ -124,3 +123,3 @@ * @returns { Any }
     /**
-     * Enables filter functionality. If this option is set to `true` the component will emit the `filterChange` event.
+     * Enables the filter functionality. If set to `true`, the component emits the `filterChange` event.
      */
@@ -171,2 +170,3 @@ filterable: boolean;
     private enterSubscription;
+    private escSubscription;
     private openSubscribtion;
@@ -215,6 +215,2 @@ private closeSubscription;
      */
-    handleSearchBarChange(text: string): void;
-    /**
-     * @hidden
-     */
     handleFilter(text: string): void;
@@ -229,3 +225,5 @@ /**
     handleBlur(): void;
-    protected change(newValue: any, isCustom?: boolean): void;
+    protected change(candidate: any, isCustom?: boolean): void;
+    protected handleCustomValue(candidate: any, currentValue: any): boolean;
+    protected handleValue(candidate: any, currentValue: any): boolean;
     /**
@@ -232,0 +230,0 @@ * @hidden

dist/npm/js/combobox.component.js

@@ -67,15 +67,15 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 	__webpack_require__(2);
-	var core_1 = __webpack_require__(7);
-	var forms_1 = __webpack_require__(8);
-	var searchbar_component_1 = __webpack_require__(9);
-	var kendo_dropdowns_common_1 = __webpack_require__(10);
-	var item_template_directive_1 = __webpack_require__(11);
-	var header_template_directive_1 = __webpack_require__(12);
-	var footer_template_directive_1 = __webpack_require__(13);
-	var selection_service_1 = __webpack_require__(14);
-	var navigation_service_1 = __webpack_require__(15);
-	var navigation_config_1 = __webpack_require__(16);
-	var util_1 = __webpack_require__(17);
-	var navigation_action_1 = __webpack_require__(18);
-	var keys_1 = __webpack_require__(19);
+	var core_1 = __webpack_require__(6);
+	var forms_1 = __webpack_require__(7);
+	var searchbar_component_1 = __webpack_require__(8);
+	var kendo_dropdowns_common_1 = __webpack_require__(9);
+	var item_template_directive_1 = __webpack_require__(10);
+	var header_template_directive_1 = __webpack_require__(11);
+	var footer_template_directive_1 = __webpack_require__(12);
+	var selection_service_1 = __webpack_require__(13);
+	var navigation_service_1 = __webpack_require__(14);
+	var navigation_config_1 = __webpack_require__(15);
+	var util_1 = __webpack_require__(16);
+	var navigation_action_1 = __webpack_require__(17);
+	var keys_1 = __webpack_require__(18);
 	/**
@@ -100,3 +100,3 @@ * @hidden
 	 * @example
-	 * ```ts-preview
+	 * ```ts
 	 * @@Component({
@@ -128,3 +128,2 @@ * selector: 'my-app',
 	         * Typically used when the data items are not of type `string`.
-	         * @hidden
 	         * @param { Any } value - The custom value defined by the user.
@@ -137,2 +136,7 @@ * @returns { Any }
 	        /**
+	         * The hint displayed when the component is empty.
+	         *
+	         */
+	        this.placeholder = "";
+	        /**
 	         * Configures the popup of the DropDownList. The available options of the `IPopupSettings` are:
@@ -149,3 +153,3 @@ *
 	        /**
-	         * Enables filter functionality. If this option is set to `true` the component will emit the `filterChange` event.
+	         * Enables the filter functionality. If set to `true`, the component emits the `filterChange` event.
 	         */
@@ -183,2 +187,3 @@ this.filterable = false;
 	        this.wrapper = wrapper.nativeElement;
+	        this.data = [];
 	        this.subscribeEvents();
@@ -193,3 +198,3 @@ }
 	         *
-	         * > The `open` property determines whether the ComboBox's popup list is visible or not.
+	         * > The `open` property determines whether the popup list of the ComboBox is visible or not.
 	         */
@@ -231,3 +236,3 @@ set: function (open) {
 	         *
-	         * > Selected values that are not present in the source will be considered as custom values.
+	         * > Selected values that are not present in the source are considered custom values.
 	         */
@@ -325,2 +330,3 @@ set: function (newValue) {
 	        this.enterSubscription = this.navigationService.enter.subscribe(this.handleEnter.bind(this));
+	        this.escSubscription = this.navigationService.esc.subscribe(this.handleBlur.bind(this));
 	    };
@@ -337,2 +343,3 @@ ComboBoxComponent.prototype.unsubscribeEvents = function () {
 	        this.enterSubscription.unsubscribe();
+	        this.escSubscription.unsubscribe();
 	    };
@@ -344,4 +351,3 @@ ComboBoxComponent.prototype.handleItemChange = function (event) {
 	        }
-	        this.text = kendo_dropdowns_common_1.DropDownsUtil.getter(this.data[index], this.textField);
-	        this.selectionChange.emit(kendo_dropdowns_common_1.DropDownsUtil.getter(this.data[index], this.valueField));
+	        this.selectionChange.emit(this.data[index]);
 	        this.change(this.data[index]);
@@ -354,3 +360,3 @@ };
 	        }
-	        this.selectionChange.emit(kendo_dropdowns_common_1.DropDownsUtil.getter(this.data[index], this.valueField));
+	        this.selectionChange.emit(this.data[index]);
 	        if (!this.open) {
@@ -373,3 +379,2 @@ this.change(this.data[index]);
 	    ComboBoxComponent.prototype.writeValue = function (value) {
-	        value = kendo_dropdowns_common_1.DropDownsUtil.getter(value, this.valueField) || value;
 	        this.text = undefined;
@@ -402,6 +407,2 @@ this.setState(value);
 	    ComboBoxComponent.prototype.setState = function (value) {
-	        //TODO: replace valueField check with valuePrimitive as we already inferred it!
-	        if (this._previousValue && this._previousValue === this.value) {
-	            return;
-	        }
 	        var newValue = kendo_dropdowns_common_1.DropDownsUtil.getter(value, this.valueField) || value;
@@ -442,4 +443,5 @@ var valueCandidate;
 	        var index = this.data.findIndex(function (item) {
-	            var itemText = kendo_dropdowns_common_1.DropDownsUtil.getter(item, _this.textField) || "";
-	            return itemText.toLowerCase().startsWith(text.toLowerCase());
+	            var itemText = kendo_dropdowns_common_1.DropDownsUtil.getter(item, _this.textField);
+	            itemText = itemText === undefined ? "" : itemText.toString().toLowerCase();
+	            return itemText.startsWith(text.toLowerCase());
 	        });
@@ -498,3 +500,3 @@ this.selectionService.focused = index;
 	        }
-	        this.change(this.data[focused] || this.searchbar.text, isCustom);
+	        this.change(this.data[focused] || this.text, isCustom);
 	    };
@@ -504,9 +506,4 @@ /**
 	     */
-	    ComboBoxComponent.prototype.handleSearchBarChange = function (text) {
+	    ComboBoxComponent.prototype.handleFilter = function (text) {
 	        this.text = text;
-	    };
-	    /**
-	     * @hidden
-	     */
-	    ComboBoxComponent.prototype.handleFilter = function (text) {
 	        //Reset the selection prior filter. It will be resolved if there is a match and we don't need it if there isn't one
@@ -538,6 +535,12 @@ this.selectionService.resetSelection([]);
 	        }
-	        var dataItem = this.data[this.selectionService.selected[0]];
-	        if (kendo_dropdowns_common_1.DropDownsUtil.getter(dataItem, this.textField) === this.searchbar.text) {
-	            this.change(dataItem || this.value);
+	        var focused = this.selectionService.focused;
+	        var dataItem;
+	        var text;
+	        if (focused !== -1) {
+	            dataItem = this.data[focused];
+	            text = kendo_dropdowns_common_1.DropDownsUtil.getter(dataItem, this.textField) || "";
 	        }
+	        if (text && text.toLowerCase() === this.text.toLowerCase()) {
+	            this.selectionService.change(focused);
+	        }
 	        else {
@@ -549,25 +552,44 @@ this.change(this.text, true);
 	    };
-	    ComboBoxComponent.prototype.change = function (newValue, isCustom) {
+	    ComboBoxComponent.prototype.change = function (candidate, isCustom) {
 	        if (isCustom === void 0) { isCustom = false; }
-	        var primitiveValue = kendo_dropdowns_common_1.DropDownsUtil.getter(newValue, this.valueField) || newValue;
+	        var currentValue = kendo_dropdowns_common_1.DropDownsUtil.getter(this.value, this.valueField);
+	        var hasChange = false;
 	        this.open = false;
 	        if (isCustom) {
-	            this.dataItem = undefined;
-	            if (this.allowCustom) {
-	                this.value = this.normalizeValue(newValue);
-	            }
-	            else {
-	                this.text = undefined;
-	                this.value = undefined;
-	            }
+	            hasChange = this.handleCustomValue(candidate, currentValue);
 	        }
 	        else {
-	            this.dataItem = newValue;
-	            this.value = this.valuePrimitive ? primitiveValue : newValue;
-	            this.text = this.valuePrimitive ? primitiveValue : kendo_dropdowns_common_1.DropDownsUtil.getter(newValue, this.textField);
+	            hasChange = this.handleValue(candidate, currentValue);
 	        }
-	        this._previousValue = this.value;
-	        this.onChangeCallback(this.value);
-	        this.valueChange.emit(this.value);
+	        if (hasChange) {
+	            this._previousValue = this.value;
+	            this.onChangeCallback(this.value);
+	            this.valueChange.emit(this.value);
+	        }
 	    };
+	    ComboBoxComponent.prototype.handleCustomValue = function (candidate, currentValue) {
+	        this.dataItem = undefined;
+	        if (!this.allowCustom) {
+	            this.text = undefined;
+	            this.value = undefined;
+	            return true;
+	        }
+	        var normalizedValue = this.normalizeValue(candidate);
+	        if (kendo_dropdowns_common_1.DropDownsUtil.getter(normalizedValue, this.valueField) === currentValue) {
+	            return false;
+	        }
+	        this.value = normalizedValue;
+	        return true;
+	    };
+	    ComboBoxComponent.prototype.handleValue = function (candidate, currentValue) {
+	        var newValue = kendo_dropdowns_common_1.DropDownsUtil.getter(candidate, this.valueField);
+	        var newText = kendo_dropdowns_common_1.DropDownsUtil.getter(candidate, this.textField);
+	        if (currentValue === newValue && this.text === newText) {
+	            return false;
+	        }
+	        this.dataItem = candidate;
+	        this.value = this.valuePrimitive ? newValue : candidate;
+	        this.text = newText;
+	        return true;
+	    };
 	    /**
@@ -727,3 +749,3 @@ * @hidden
 	            selector: 'kendo-combobox',
-	            template: "\n        <span #anchor [ngClass]=\"setHeaderClasses()\" unselectable=\"on\">\n            <kendo-searchbar #searchbar\n                [value]=\"text\"\n                [disabled]=\"disabled\"\n                [placeholder]=\"placeholder\"\n                (onNavigate)=\"handleNavigate($event)\"\n                (valueChange)=\"handleSearchBarChange($event)\"\n                (onFilter)=\"handleFilter($event)\"\n                (onBlur)=\"handleBlur()\"\n                (onFocus)=\"handleFocus()\"\n            ></kendo-searchbar>\n            <span\n                 [ngClass]=\"{ 'k-select': true }\"\n                 (click)=\"iconClick()\"\n                 (mousedown)=\"$event.preventDefault()\"\n                 unselectable=\"on\">\n                 <span [ngClass]=\"{\n                     'k-icon': true,\n                     'k-i-arrow-s': true\n                 }\"></span>\n        </span>\n        <kendo-popup *ngIf=\"open\" [anchor]=\"anchor\" [popupClass]=\"setListContainerClasses()\" [style.width]=\"popupWidth\" (mousedown)=\"$event.preventDefault()\">\n            <!--header template-->\n            <template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </template>\n            <!--list-->\n            <kendo-list\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [template]=\"template\"\n                [height]=\"getHeight()\"\n                [show]=\"open\"\n            >\n            </kendo-list>\n            <!--footer template-->\n            <template *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate.templateRef\n                }\">\n            </template>\n        </kendo-popup>\n  "
+	            template: "\n        <span #anchor [ngClass]=\"setHeaderClasses()\" unselectable=\"on\">\n            <kendo-searchbar #searchbar\n                [value]=\"text\"\n                [disabled]=\"disabled\"\n                [placeholder]=\"placeholder\"\n                (onNavigate)=\"handleNavigate($event)\"\n                (onFilter)=\"handleFilter($event)\"\n                (onBlur)=\"handleBlur()\"\n                (onFocus)=\"handleFocus()\"\n            ></kendo-searchbar>\n            <span\n                 [ngClass]=\"{ 'k-select': true }\"\n                 (click)=\"iconClick()\"\n                 (mousedown)=\"$event.preventDefault()\"\n                 unselectable=\"on\">\n                 <span [ngClass]=\"{\n                     'k-icon': true,\n                     'k-i-arrow-s': true\n                 }\"></span>\n        </span>\n        <kendo-popup *ngIf=\"open\"\n            [anchor]=\"anchor\"\n            [popupClass]=\"setListContainerClasses()\"\n            [style.width]=\"popupWidth\"\n            (anchorViewportLeave)=\"open=false\"\n            (mousedown)=\"$event.preventDefault()\">\n            <!--header template-->\n            <template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </template>\n            <!--list-->\n            <kendo-list\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [template]=\"template\"\n                [height]=\"getHeight()\"\n                [show]=\"open\"\n            >\n            </kendo-list>\n            <!--footer template-->\n            <template *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate.templateRef\n                }\">\n            </template>\n        </kendo-popup>\n  "
 	        }), 
@@ -747,4 +769,3 @@ __metadata('design:paramtypes', [selection_service_1.SelectionService, navigation_service_1.NavigationService, core_1.ElementRef, core_1.Renderer])
 /* 5 */,
-/* 6 */,
-/* 7 */
+/* 6 */
 /***/ function(module, exports) {
@@ -755,3 +776,3 @@
 /***/ },
-/* 8 */
+/* 7 */
 /***/ function(module, exports) {
@@ -762,3 +783,3 @@
 /***/ },
-/* 9 */
+/* 8 */
 /***/ function(module, exports) {
@@ -769,3 +790,3 @@
 /***/ },
-/* 10 */
+/* 9 */
 /***/ function(module, exports) {
@@ -776,3 +797,3 @@
 /***/ },
-/* 11 */
+/* 10 */
 /***/ function(module, exports) {
@@ -783,3 +804,3 @@
 /***/ },
-/* 12 */
+/* 11 */
 /***/ function(module, exports) {
@@ -790,3 +811,3 @@
 /***/ },
-/* 13 */
+/* 12 */
 /***/ function(module, exports) {
@@ -797,3 +818,3 @@
 /***/ },
-/* 14 */
+/* 13 */
 /***/ function(module, exports) {
@@ -804,3 +825,3 @@
 /***/ },
-/* 15 */
+/* 14 */
 /***/ function(module, exports) {
@@ -811,3 +832,3 @@
 /***/ },
-/* 16 */
+/* 15 */
 /***/ function(module, exports) {
@@ -818,3 +839,3 @@
 /***/ },
-/* 17 */
+/* 16 */
 /***/ function(module, exports) {
@@ -825,3 +846,3 @@
 /***/ },
-/* 18 */
+/* 17 */
 /***/ function(module, exports) {
@@ -832,3 +853,3 @@
 /***/ },
-/* 19 */
+/* 18 */
 /***/ function(module, exports) {
@@ -835,0 +856,0 @@

dist/npm/js/combobox.component.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"COMBOBOX_VALUE_ACCESSOR":{"multi":true,"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"ComboBoxComponent"}},"ComboBoxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"providers":[{"__symbolic":"reference","name":"COMBOBOX_VALUE_ACCESSOR"},{"__symbolic":"reference","module":"./selection.service","name":"SelectionService"},{"__symbolic":"reference","module":"./navigation.service","name":"NavigationService"},{"provide":{"__symbolic":"reference","module":"./navigation-config","name":"NAVIGATION_CONFIG"},"useValue":{"useLeftRightArrows":false}}],"selector":"kendo-combobox","template":"\n        <span #anchor [ngClass]=\"setHeaderClasses()\" unselectable=\"on\">\n            <kendo-searchbar #searchbar\n                [value]=\"text\"\n                [disabled]=\"disabled\"\n                [placeholder]=\"placeholder\"\n                (onNavigate)=\"handleNavigate($event)\"\n                (valueChange)=\"handleSearchBarChange($event)\"\n                (onFilter)=\"handleFilter($event)\"\n                (onBlur)=\"handleBlur()\"\n                (onFocus)=\"handleFocus()\"\n            ></kendo-searchbar>\n            <span\n                 [ngClass]=\"{ 'k-select': true }\"\n                 (click)=\"iconClick()\"\n                 (mousedown)=\"$event.preventDefault()\"\n                 unselectable=\"on\">\n                 <span [ngClass]=\"{\n                     'k-icon': true,\n                     'k-i-arrow-s': true\n                 }\"></span>\n        </span>\n        <kendo-popup *ngIf=\"open\" [anchor]=\"anchor\" [popupClass]=\"setListContainerClasses()\" [style.width]=\"popupWidth\" (mousedown)=\"$event.preventDefault()\">\n            <!--header template-->\n            <template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </template>\n            <!--list-->\n            <kendo-list\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [template]=\"template\"\n                [height]=\"getHeight()\"\n                [show]=\"open\"\n            >\n            </kendo-list>\n            <!--footer template-->\n            <template *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate.templateRef\n                }\">\n            </template>\n        </kendo-popup>\n  "}]}],"members":{"allowCustom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"textField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valueField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valuePrimitive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"normalizeValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["valueNormalizer"]}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popupSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"suggest":[{"__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"}}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"filterable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selectionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"filterChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"template":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./templates/item-template.directive","name":"ItemTemplateDirective"}]}]}],"headerTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./templates/header-template.directive","name":"HeaderTemplateDirective"}]}]}],"footerTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./templates/footer-template.directive","name":"FooterTemplateDirective"}]}]}],"searchbar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"./searchbar.component","name":"SearchBarComponent"}]}]}],"widgetClasses":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-widget"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-combobox"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-header"]}]}],"isFocused":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-state-focused"]}]}],"widgetHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.max-height"]}]}],"role":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.role"]}]}],"widgetTabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["tabindex"]}]}],"ariaDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-disabled"]}]}],"ariaHasPopup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-haspopup"]}]}],"ariaExpanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-expanded"]}]}],"ariaOwns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-owns"]}]}],"ariaActivedescendant":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-activedescendant"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./selection.service","name":"SelectionService"},{"__symbolic":"reference","module":"./navigation.service","name":"NavigationService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"subscribeEvents":[{"__symbolic":"method"}],"unsubscribeEvents":[{"__symbolic":"method"}],"handleItemChange":[{"__symbolic":"method"}],"handleItemSelect":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"verifySettings":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"setHeaderClasses":[{"__symbolic":"method"}],"navigate":[{"__symbolic":"method"}],"handleNavigate":[{"__symbolic":"method"}],"handleEnter":[{"__symbolic":"method"}],"handleSearchBarChange":[{"__symbolic":"method"}],"handleFilter":[{"__symbolic":"method"}],"handleFocus":[{"__symbolic":"method"}],"handleBlur":[{"__symbolic":"method"}],"change":[{"__symbolic":"method"}],"iconClick":[{"__symbolic":"method"}],"getWidth":[{"__symbolic":"method"}],"getHeight":[{"__symbolic":"method"}],"setListContainerClasses":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"COMBOBOX_VALUE_ACCESSOR":{"multi":true,"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"ComboBoxComponent"}},"ComboBoxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"providers":[{"__symbolic":"reference","name":"COMBOBOX_VALUE_ACCESSOR"},{"__symbolic":"reference","module":"./selection.service","name":"SelectionService"},{"__symbolic":"reference","module":"./navigation.service","name":"NavigationService"},{"provide":{"__symbolic":"reference","module":"./navigation-config","name":"NAVIGATION_CONFIG"},"useValue":{"useLeftRightArrows":false}}],"selector":"kendo-combobox","template":"\n        <span #anchor [ngClass]=\"setHeaderClasses()\" unselectable=\"on\">\n            <kendo-searchbar #searchbar\n                [value]=\"text\"\n                [disabled]=\"disabled\"\n                [placeholder]=\"placeholder\"\n                (onNavigate)=\"handleNavigate($event)\"\n                (onFilter)=\"handleFilter($event)\"\n                (onBlur)=\"handleBlur()\"\n                (onFocus)=\"handleFocus()\"\n            ></kendo-searchbar>\n            <span\n                 [ngClass]=\"{ 'k-select': true }\"\n                 (click)=\"iconClick()\"\n                 (mousedown)=\"$event.preventDefault()\"\n                 unselectable=\"on\">\n                 <span [ngClass]=\"{\n                     'k-icon': true,\n                     'k-i-arrow-s': true\n                 }\"></span>\n        </span>\n        <kendo-popup *ngIf=\"open\"\n            [anchor]=\"anchor\"\n            [popupClass]=\"setListContainerClasses()\"\n            [style.width]=\"popupWidth\"\n            (anchorViewportLeave)=\"open=false\"\n            (mousedown)=\"$event.preventDefault()\">\n            <!--header template-->\n            <template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </template>\n            <!--list-->\n            <kendo-list\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [template]=\"template\"\n                [height]=\"getHeight()\"\n                [show]=\"open\"\n            >\n            </kendo-list>\n            <!--footer template-->\n            <template *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate.templateRef\n                }\">\n            </template>\n        </kendo-popup>\n  "}]}],"members":{"allowCustom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"textField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valueField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valuePrimitive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"normalizeValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["valueNormalizer"]}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popupSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"suggest":[{"__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"}}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"filterable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selectionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"filterChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"template":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./templates/item-template.directive","name":"ItemTemplateDirective"}]}]}],"headerTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./templates/header-template.directive","name":"HeaderTemplateDirective"}]}]}],"footerTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./templates/footer-template.directive","name":"FooterTemplateDirective"}]}]}],"searchbar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"./searchbar.component","name":"SearchBarComponent"}]}]}],"widgetClasses":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-widget"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-combobox"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-header"]}]}],"isFocused":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-state-focused"]}]}],"widgetHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.max-height"]}]}],"role":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.role"]}]}],"widgetTabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["tabindex"]}]}],"ariaDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-disabled"]}]}],"ariaHasPopup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-haspopup"]}]}],"ariaExpanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-expanded"]}]}],"ariaOwns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-owns"]}]}],"ariaActivedescendant":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-activedescendant"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./selection.service","name":"SelectionService"},{"__symbolic":"reference","module":"./navigation.service","name":"NavigationService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"subscribeEvents":[{"__symbolic":"method"}],"unsubscribeEvents":[{"__symbolic":"method"}],"handleItemChange":[{"__symbolic":"method"}],"handleItemSelect":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"verifySettings":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"setHeaderClasses":[{"__symbolic":"method"}],"navigate":[{"__symbolic":"method"}],"handleNavigate":[{"__symbolic":"method"}],"handleEnter":[{"__symbolic":"method"}],"handleFilter":[{"__symbolic":"method"}],"handleFocus":[{"__symbolic":"method"}],"handleBlur":[{"__symbolic":"method"}],"change":[{"__symbolic":"method"}],"handleCustomValue":[{"__symbolic":"method"}],"handleValue":[{"__symbolic":"method"}],"iconClick":[{"__symbolic":"method"}],"getWidth":[{"__symbolic":"method"}],"getHeight":[{"__symbolic":"method"}],"setListContainerClasses":[{"__symbolic":"method"}]}}}}

dist/npm/js/combobox.module.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(20);
+	module.exports = __webpack_require__(19);
 
@@ -54,3 +54,3 @@
 
-/***/ 7:
+/***/ 6:
 /***/ function(module, exports) {
@@ -62,3 +62,3 @@
 
-/***/ 20:
+/***/ 19:
 /***/ function(module, exports, __webpack_require__) {
@@ -76,6 +76,6 @@
 	};
-	var core_1 = __webpack_require__(7);
-	var combobox_component_1 = __webpack_require__(21);
-	var shared_module_1 = __webpack_require__(22);
-	var shared_directives_module_1 = __webpack_require__(23);
+	var core_1 = __webpack_require__(6);
+	var combobox_component_1 = __webpack_require__(20);
+	var shared_module_1 = __webpack_require__(21);
+	var shared_directives_module_1 = __webpack_require__(22);
 	var COMBOBOX_DIRECTIVES = [
@@ -114,3 +114,3 @@ combobox_component_1.ComboBoxComponent
 
-/***/ 21:
+/***/ 20:
 /***/ function(module, exports) {
@@ -122,3 +122,3 @@
 
-/***/ 22:
+/***/ 21:
 /***/ function(module, exports) {
@@ -130,3 +130,3 @@
 
-/***/ 23:
+/***/ 22:
 /***/ function(module, exports) {
@@ -133,0 +133,0 @@

dist/npm/js/common/keys.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(24);
+	module.exports = __webpack_require__(23);
 
@@ -54,3 +54,3 @@
 
-/***/ 24:
+/***/ 23:
 /***/ function(module, exports) {
@@ -57,0 +57,0 @@

dist/npm/js/dropdownlist.component.d.ts

 import '@telerik/kendo-theme-default/styles/packages/dropdowns';
-import { ElementRef, EventEmitter, OnInit, OnDestroy, AfterViewChecked, Renderer } from '@angular/core';
+import { ElementRef, EventEmitter, OnDestroy, AfterViewChecked, Renderer } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
@@ -39,11 +39,12 @@ import 'rxjs/add/observable/fromEvent';
  */
-export declare class DropDownListComponent implements ControlValueAccessor, OnInit, OnDestroy, AfterViewChecked {
-    dataItem: any;
+export declare class DropDownListComponent implements ControlValueAccessor, OnDestroy, AfterViewChecked {
     private _data;
+    private _value;
     private _open;
     private _previousValue;
+    private text;
     /**
      * Sets or gets the `open` property of the DropDownList.
      *
-     * > The `open` property determines whether the DropDownList's popup list is visible or not.
+     * > The `open` property determines whether the popup list of the DropDownList is visible or not.
      */
@@ -61,3 +62,3 @@ open: boolean;
      *
-     * > Selected values that are not present in the source will be ignored.
+     * > Selected values that are not present in the source are ignored.
      */
@@ -68,3 +69,3 @@ value: any;
      *
-     * Do not define it if the data contains only primitive values.
+     * If the data contains only primitive values, do not define it.
      */
@@ -75,3 +76,3 @@ textField: string;
      *
-     * Do not define it if the data contains only primitive values.
+     * If the data contains only primitive values, do not define it.
      */
@@ -82,4 +83,4 @@ valueField: string;
      *
-     * - `width: Number`—Sets the width of the popup container. By default will be used the width of the host element.
-     * - `height: Number`—Sets the height of the popup container. By default height is 200px.
+     * - `width: Number`—Sets the width of the popup container. By default, the width of the host element is used.
+     * - `height: Number`—Sets the height of the popup container. By default, the height is 200px.
      */
@@ -207,3 +208,2 @@ popupSettings: IPopupSettings;
     private handleEnter();
-    ngOnInit(): void;
     ngOnDestroy(): void;
@@ -214,3 +214,3 @@ ngOnChanges(changes: any): void;
      */
-    writeValue(value: any): void;
+    writeValue(newValue: any): void;
     /**
@@ -224,3 +224,3 @@ * @hidden
     registerOnTouched(fn: any): void;
-    protected verifySettings(): void;
+    protected verifySettings(newValue: any): void;
     /**
@@ -233,3 +233,2 @@ * @hidden
     protected getDefaultItemText(): any;
-    protected getValue(): any;
     protected getText(): any;
@@ -245,4 +244,4 @@ protected getWidth(): string;
     protected navigate(index: number): void;
-    protected resolveInternalState(state: any): void;
+    protected setState(value: any): void;
     protected handleFilter(event: any): void;
 }

dist/npm/js/dropdownlist.component.js

@@ -47,3 +47,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(25);
+	module.exports = __webpack_require__(24);
 
@@ -62,4 +62,3 @@
 /* 5 */,
-/* 6 */,
-/* 7 */
+/* 6 */
 /***/ function(module, exports) {
@@ -70,3 +69,3 @@
 /***/ },
-/* 8 */
+/* 7 */
 /***/ function(module, exports) {
@@ -77,4 +76,4 @@
 /***/ },
-/* 9 */,
-/* 10 */
+/* 8 */,
+/* 9 */
 /***/ function(module, exports) {
@@ -85,3 +84,3 @@
 /***/ },
-/* 11 */
+/* 10 */
 /***/ function(module, exports) {
@@ -92,3 +91,3 @@
 /***/ },
-/* 12 */
+/* 11 */
 /***/ function(module, exports) {
@@ -99,3 +98,3 @@
 /***/ },
-/* 13 */
+/* 12 */
 /***/ function(module, exports) {
@@ -106,3 +105,3 @@
 /***/ },
-/* 14 */
+/* 13 */
 /***/ function(module, exports) {
@@ -113,3 +112,3 @@
 /***/ },
-/* 15 */
+/* 14 */
 /***/ function(module, exports) {
@@ -120,3 +119,3 @@
 /***/ },
-/* 16 */
+/* 15 */
 /***/ function(module, exports) {
@@ -127,3 +126,3 @@
 /***/ },
-/* 17 */
+/* 16 */
 /***/ function(module, exports) {
@@ -134,3 +133,3 @@
 /***/ },
-/* 18 */
+/* 17 */
 /***/ function(module, exports) {
@@ -141,3 +140,3 @@
 /***/ },
-/* 19 */
+/* 18 */
 /***/ function(module, exports) {
@@ -148,2 +147,3 @@
 /***/ },
+/* 19 */,
 /* 20 */,
@@ -153,4 +153,3 @@ /* 21 */,
 /* 23 */,
-/* 24 */,
-/* 25 */
+/* 24 */
 /***/ function(module, exports, __webpack_require__) {
@@ -170,5 +169,6 @@
 	__webpack_require__(2);
-	var core_1 = __webpack_require__(7);
-	var forms_1 = __webpack_require__(8);
-	var Observable_1 = __webpack_require__(26);
+	var core_1 = __webpack_require__(6);
+	var forms_1 = __webpack_require__(7);
+	var Observable_1 = __webpack_require__(25);
+	__webpack_require__(26);
 	__webpack_require__(27);
@@ -180,14 +180,13 @@ __webpack_require__(28);
 	__webpack_require__(32);
-	__webpack_require__(33);
-	var keys_1 = __webpack_require__(19);
-	var util_1 = __webpack_require__(17);
-	var kendo_dropdowns_common_1 = __webpack_require__(10);
-	var selection_service_1 = __webpack_require__(14);
-	var navigation_service_1 = __webpack_require__(15);
-	var navigation_config_1 = __webpack_require__(16);
-	var item_template_directive_1 = __webpack_require__(11);
-	var value_template_directive_1 = __webpack_require__(34);
-	var header_template_directive_1 = __webpack_require__(12);
-	var footer_template_directive_1 = __webpack_require__(13);
-	var navigation_action_1 = __webpack_require__(18);
+	var keys_1 = __webpack_require__(18);
+	var util_1 = __webpack_require__(16);
+	var kendo_dropdowns_common_1 = __webpack_require__(9);
+	var selection_service_1 = __webpack_require__(13);
+	var navigation_service_1 = __webpack_require__(14);
+	var navigation_config_1 = __webpack_require__(15);
+	var item_template_directive_1 = __webpack_require__(10);
+	var value_template_directive_1 = __webpack_require__(33);
+	var header_template_directive_1 = __webpack_require__(11);
+	var footer_template_directive_1 = __webpack_require__(12);
+	var navigation_action_1 = __webpack_require__(17);
 	/**
@@ -231,4 +230,4 @@ * @hidden
 	         *
-	         * - `width: Number`—Sets the width of the popup container. By default will be used the width of the host element.
-	         * - `height: Number`—Sets the height of the popup container. By default height is 200px.
+	         * - `width: Number`—Sets the width of the popup container. By default, the width of the host element is used.
+	         * - `height: Number`—Sets the height of the popup container. By default, the height is 200px.
 	         */
@@ -290,2 +289,3 @@ this.popupSettings = { height: 200 };
 	        this.renderer = renderer;
+	        this.data = [];
 	        this.subscribeEvents();
@@ -300,3 +300,3 @@ }
 	         *
-	         * > The `open` property determines whether the DropDownList's popup list is visible or not.
+	         * > The `open` property determines whether the popup list of the DropDownList is visible or not.
 	         */
@@ -330,2 +330,19 @@ set: function (open) {
 	    });
+	    Object.defineProperty(DropDownListComponent.prototype, "value", {
+	        get: function () {
+	            return this._value;
+	        },
+	        /**
+	         * Sets the value of the DropDownList. It could be either of the *primivite* (string numbers)
+	         * or of the *complex* (objects) type. Use the `valuePrimitive` option to define the type.
+	         *
+	         * > Selected values that are not present in the source are ignored.
+	         */
+	        set: function (newValue) {
+	            this.verifySettings(newValue);
+	            this._value = newValue;
+	        },
+	        enumerable: true,
+	        configurable: true
+	    });
 	    /**
@@ -347,5 +364,16 @@ * @hidden
 	    DropDownListComponent.prototype.keydown = function (event) {
+	        var hasSelected = util_1.isPresent(this.selectionService.selected[0]);
+	        var focused = isNaN(this.selectionService.focused) ? 0 : this.selectionService.focused;
+	        var offset = 0;
 	        if (this.disabled) {
 	            return;
 	        }
+	        if (!hasSelected) {
+	            if (event.keyCode === keys_1.Keys.down) {
+	                offset = -1;
+	            }
+	            else if (event.keyCode === keys_1.Keys.up) {
+	                offset = 1;
+	            }
+	        }
 	        var eventData = event;
@@ -357,3 +385,3 @@ var action = this.navigationService.process({
 	            max: this.data.length - 1,
-	            current: this.selectionService.selected[0]
+	            current: focused + offset
 	        });
@@ -441,3 +469,3 @@ if (action !== navigation_action_1.NavigationAction.Undefined
 	        get: function () {
-	            return this.optionPrefix + "-" + this.value;
+	            return this.optionPrefix + "-" + kendo_dropdowns_common_1.DropDownsUtil.getter(this.value, this.valueField);
 	        },
@@ -471,3 +499,5 @@ enumerable: true,
 	        });
-	        this.enterSubscription = this.navigationService.enter.subscribe(this.handleEnter.bind(this));
+	        this.enterSubscription = this.navigationService.enter
+	            .merge(this.navigationService.esc)
+	            .subscribe(this.handleEnter.bind(this));
 	        this.documentClick = Observable_1.Observable
@@ -502,3 +532,3 @@ .fromEvent(document, 'click')
 	        }
-	        this.selectionChange.emit(kendo_dropdowns_common_1.DropDownsUtil.getter(this.data[index], this.valueField));
+	        this.selectionChange.emit(this.data[index]);
 	        this.change(this.data[index]);
@@ -511,10 +541,11 @@ };
 	        }
+	        var dataItem = this.data[index] || this.defaultItem;
 	        if (this.open) {
-	            this.dataItem = this.data[index] || this.defaultItem;
-	            this.value = kendo_dropdowns_common_1.DropDownsUtil.getter(this.dataItem, this.valueField);
-	            this.selectionChange.emit(kendo_dropdowns_common_1.DropDownsUtil.getter(this.data[index], this.valueField));
+	            this.value = this.valuePrimitive ? kendo_dropdowns_common_1.DropDownsUtil.getter(dataItem, this.valueField) : dataItem;
+	            this.text = kendo_dropdowns_common_1.DropDownsUtil.getter(dataItem, this.textField);
+	            this.selectionChange.emit(dataItem);
 	        }
 	        else {
-	            this.selectionChange.emit(kendo_dropdowns_common_1.DropDownsUtil.getter(this.data[index], this.valueField));
-	            this.change(this.data[index]);
+	            this.selectionChange.emit(dataItem);
+	            this.change(dataItem);
 	        }
@@ -528,8 +559,2 @@ };
 	    };
-	    DropDownListComponent.prototype.ngOnInit = function () {
-	        if (this.valuePrimitive === undefined) {
-	            this.valuePrimitive = this.valueField ? false : true;
-	        }
-	        this.verifySettings();
-	    };
 	    DropDownListComponent.prototype.ngOnDestroy = function () {
@@ -539,15 +564,6 @@ this.unsubscribeEvents();
 	    DropDownListComponent.prototype.ngOnChanges = function (changes) {
-	        if (util_1.isChanged("value", changes)) {
-	            this.verifySettings();
-	            this.resolveInternalState({
-	                field: "value",
-	                value: this.value
-	            });
+	        if (this.valuePrimitive === undefined) {
+	            this.valuePrimitive = this.valueField ? false : true;
 	        }
-	        else if (util_1.isChanged("data", changes) || (changes.data && changes.data.isFirstChange())) {
-	            this.resolveInternalState({
-	                field: "data",
-	                value: this.value
-	            });
-	        }
+	        this.setState(this.value);
 	    };
@@ -557,8 +573,5 @@ /**
 	     */
-	    DropDownListComponent.prototype.writeValue = function (value) {
-	        this.verifySettings();
-	        this.resolveInternalState({
-	            field: "value",
-	            value: value
-	        });
+	    DropDownListComponent.prototype.writeValue = function (newValue) {
+	        this.verifySettings(newValue);
+	        this.setState(newValue);
 	    };
@@ -577,3 +590,3 @@ /**
 	    };
-	    DropDownListComponent.prototype.verifySettings = function () {
+	    DropDownListComponent.prototype.verifySettings = function (newValue) {
 	        if (!core_1.isDevMode()) {
@@ -585,6 +598,6 @@ return;
 	        }
-	        if (this.valuePrimitive === true && util_1.isPresent(this.value) && typeof this.value === "object") {
+	        if (this.valuePrimitive === true && util_1.isPresent(newValue) && typeof newValue === "object") {
 	            throw new Error("Expected initial value of primitive type. See http://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/#value-selection");
 	        }
-	        if (this.valuePrimitive === false && util_1.isPresent(this.value) && typeof this.value !== "object") {
+	        if (this.valuePrimitive === false && util_1.isPresent(newValue) && typeof newValue !== "object") {
 	            throw new Error("Expected initial value of type Object. See http://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/#value-selection");
@@ -617,7 +630,4 @@ }
 	    };
-	    DropDownListComponent.prototype.getValue = function () {
-	        return kendo_dropdowns_common_1.DropDownsUtil.getter(this.dataItem, this.valueField);
-	    };
 	    DropDownListComponent.prototype.getText = function () {
-	        return kendo_dropdowns_common_1.DropDownsUtil.getter(this.dataItem, this.textField);
+	        return this.text;
 	    };
@@ -640,3 +650,3 @@ DropDownListComponent.prototype.getWidth = function () {
 	        if (this._previousValue !== this.value) {
-	            this.change(this.dataItem);
+	            this.change(this.value);
 	        }
@@ -707,2 +717,3 @@ else {
 	    DropDownListComponent.prototype.change = function (dataItem) {
+	        dataItem = dataItem || this.defaultItem;
 	        this.open = false;
@@ -712,7 +723,8 @@ if (this._previousValue === kendo_dropdowns_common_1.DropDownsUtil.getter(dataItem, this.valueField)) {
 	        }
-	        this.dataItem = dataItem || this.defaultItem;
-	        this.value = kendo_dropdowns_common_1.DropDownsUtil.getter(this.dataItem, this.valueField);
-	        this.onChangeCallback(this.valuePrimitive ? this.value : this.dataItem);
+	        var primitiveValue = kendo_dropdowns_common_1.DropDownsUtil.getter(dataItem, this.valueField);
+	        this.value = this.valuePrimitive ? kendo_dropdowns_common_1.DropDownsUtil.getter(dataItem, this.valueField) : dataItem;
+	        this.text = kendo_dropdowns_common_1.DropDownsUtil.getter(dataItem, this.textField);
 	        this._previousValue = this.value;
-	        this.valueChange.emit(this.valuePrimitive ? this.value : this.dataItem);
+	        this.onChangeCallback(this.valuePrimitive ? primitiveValue : this.value);
+	        this.valueChange.emit(this.valuePrimitive ? primitiveValue : this.value);
 	        if (this.filterable) {
@@ -726,31 +738,43 @@ this.filterText = "";
 	    };
-	    DropDownListComponent.prototype.resolveInternalState = function (state) {
-	        var newValue = kendo_dropdowns_common_1.DropDownsUtil.getter(state.value, this.valueField) || state.value;
-	        if (!this.data) {
-	            this.value = newValue;
-	            return;
+	    DropDownListComponent.prototype.setState = function (value) {
+	        var newValue = kendo_dropdowns_common_1.DropDownsUtil.getter(value, this.valueField) || value;
+	        var valueCandidate;
+	        var textCandidate;
+	        var filterState = this.filterable && !!this.filterText;
+	        if (!this.data.length) {
+	            valueCandidate = value;
+	            textCandidate = kendo_dropdowns_common_1.DropDownsUtil.getter(value, this.textField);
 	        }
-	        var result = kendo_dropdowns_common_1.DropDownsUtil.resolveValue({
-	            data: this.data,
-	            defaultItem: this.defaultItem,
-	            value: newValue,
-	            valueField: this.valueField
-	        });
-	        if (result.dataItem) {
-	            this.selectionService.resetSelection(result.selected);
-	            if (this.filterText) {
+	        else {
+	            this.verifySettings(value);
+	            var result = kendo_dropdowns_common_1.DropDownsUtil.resolveValue({
+	                data: this.data,
+	                defaultItem: this.defaultItem,
+	                value: newValue,
+	                valueField: this.valueField
+	            });
+	            if (result.dataItem) {
+	                this.selectionService.resetSelection(result.selected);
+	                if (this.filterText) {
+	                    this.selectionService.focused = 0;
+	                }
+	                valueCandidate = this.valuePrimitive ? kendo_dropdowns_common_1.DropDownsUtil.getter(result.dataItem, this.valueField) : result.dataItem;
+	                textCandidate = kendo_dropdowns_common_1.DropDownsUtil.getter(result.dataItem, this.textField);
+	            }
+	            else if (filterState) {
+	                this.selectionService.resetSelection([]);
 	                this.selectionService.focused = 0;
+	                valueCandidate = this.value;
+	                textCandidate = this.text;
 	            }
-	            this.dataItem = result.dataItem;
-	            this.value = kendo_dropdowns_common_1.DropDownsUtil.getter(this.dataItem, this.valueField);
-	            this._previousValue = this.value;
-	        }
-	        else {
-	            this.selectionService.resetSelection(this.defaultItem ? [-1] : []);
-	            this.selectionService.focused = 0;
-	            if (state.field === "value" || !this.dataItem) {
-	                this.dataItem = this.defaultItem;
-	                this._previousValue = this.value;
+	            else {
+	                this.selectionService.resetSelection(this.defaultItem ? [-1] : []);
+	                this.selectionService.focused = 0;
+	                valueCandidate = this.valuePrimitive ? kendo_dropdowns_common_1.DropDownsUtil.getter(this.defaultItem, this.valueField) : this.defaultItem;
+	                textCandidate = kendo_dropdowns_common_1.DropDownsUtil.getter(this.defaultItem, this.textField);
 	            }
 	        }
+	        this.value = valueCandidate;
+	        this.text = textCandidate;
+	        this._previousValue = this.value;
 	    };
@@ -772,4 +796,5 @@ DropDownListComponent.prototype.handleFilter = function (event) {
 	        core_1.Input(), 
-	        __metadata('design:type', Object)
-	    ], DropDownListComponent.prototype, "value", void 0);
+	        __metadata('design:type', Object), 
+	        __metadata('design:paramtypes', [Object])
+	    ], DropDownListComponent.prototype, "value", null);
 	    __decorate([
@@ -919,3 +944,3 @@ core_1.Input(),
 	            selector: 'kendo-dropdownlist',
-	            template: "\n        <span [ngClass]=\"setHeaderClasses()\" unselectable=\"on\">\n            <span #anchor [ngClass]=\"{ 'k-input': true }\" unselectable=\"on\">\n                <template *ngIf=\"valueTemplate\"\n                    [templateContext]=\"{\n                        templateRef: valueTemplate.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </template>\n                <template [ngIf]=\"!valueTemplate\">{{ getText() }}</template>\n            </span>\n            <span [ngClass]=\"{ 'k-select': true }\" unselectable=\"on\">\n                <span [ngClass]=\"{\n                    'k-icon': true,\n                    'k-i-arrow-s': true\n                }\"></span>\n            </span>\n        </span>\n        <kendo-popup *ngIf=\"open\" [anchor]=\"anchor\" [popupClass]=\"setListContainerClasses()\" [style.width]=\"popupWidth\" (mousedown)=\"onMouseDown($event)\">\n            <!--filterable-->\n            <template [ngIf]=\"filterable\">\n                <span [ngClass]=\"{ 'k-list-filter': true }\" (click)=\"$event.stopImmediatePropagation()\">\n                    <input #filterInput\n                        [(ngModel)]=\"filterText\" [ngClass]=\"{ 'k-textbox': true }\"\n                        (input)=\"handleFilter($event)\"\n                        (focus)=\"onFilterFocus()\" />\n                    <span [ngClass]=\"{ 'k-icon': true, 'k-i-search': true }\" unselectable=\"on\"></span>\n                </span>\n            </template>\n            <!--default item-->\n            <template [ngIf]=\"defaultItem && !itemTemplate\">\n                <div [ngClass]=\"setDefaultItemClasses()\" kendoDropDownsSelectable [index]=\"-1\">\n                    {{ getDefaultItemText() }}\n                </div>\n            </template>\n            <template [ngIf]=\"defaultItem && itemTemplate\">\n                <div [ngClass]=\"setDefaultItemClasses()\" kendoDropDownsSelectable [index]=\"-1\">\n                    <template\n                        [templateContext]=\"{\n                            templateRef: itemTemplate.templateRef,\n                            $implicit: defaultItem\n                        }\">\n                    </template>\n                </div>\n            </template>\n            <!--header template-->\n            <template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </template>\n            <!--list-->\n            <kendo-list\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [template]=\"itemTemplate\"\n                [height]=\"getHeight()\"\n                [show]=\"open\"\n                >\n            </kendo-list>\n            <!--footer template-->\n            <template *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate.templateRef\n                }\">\n            </template>\n        </kendo-popup>\n  "
+	            template: "\n        <span [ngClass]=\"setHeaderClasses()\" unselectable=\"on\">\n            <span #anchor [ngClass]=\"{ 'k-input': true }\" unselectable=\"on\">\n                <template *ngIf=\"valueTemplate\"\n                    [templateContext]=\"{\n                        templateRef: valueTemplate.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </template>\n                <template [ngIf]=\"!valueTemplate\">{{ getText() }}</template>\n            </span>\n            <span [ngClass]=\"{ 'k-select': true }\" unselectable=\"on\">\n                <span [ngClass]=\"{\n                    'k-icon': true,\n                    'k-i-arrow-s': true\n                }\"></span>\n            </span>\n        </span>\n        <kendo-popup *ngIf=\"open\"\n            [anchor]=\"anchor\"\n            [popupClass]=\"setListContainerClasses()\"\n            [style.width]=\"popupWidth\"\n            (anchorViewportLeave)=\"open=false\"\n            (mousedown)=\"onMouseDown($event)\">\n            <!--filterable-->\n            <template [ngIf]=\"filterable\">\n                <span [ngClass]=\"{ 'k-list-filter': true }\" (click)=\"$event.stopImmediatePropagation()\">\n                    <input #filterInput\n                        [(ngModel)]=\"filterText\" [ngClass]=\"{ 'k-textbox': true }\"\n                        (input)=\"handleFilter($event)\"\n                        (focus)=\"onFilterFocus()\" />\n                    <span [ngClass]=\"{ 'k-icon': true, 'k-i-search': true }\" unselectable=\"on\"></span>\n                </span>\n            </template>\n            <!--default item-->\n            <template [ngIf]=\"defaultItem && !itemTemplate\">\n                <div [ngClass]=\"setDefaultItemClasses()\" kendoDropDownsSelectable [index]=\"-1\">\n                    {{ getDefaultItemText() }}\n                </div>\n            </template>\n            <template [ngIf]=\"defaultItem && itemTemplate\">\n                <div [ngClass]=\"setDefaultItemClasses()\" kendoDropDownsSelectable [index]=\"-1\">\n                    <template\n                        [templateContext]=\"{\n                            templateRef: itemTemplate.templateRef,\n                            $implicit: defaultItem\n                        }\">\n                    </template>\n                </div>\n            </template>\n            <!--header template-->\n            <template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </template>\n            <!--list-->\n            <kendo-list\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [template]=\"itemTemplate\"\n                [height]=\"getHeight()\"\n                [show]=\"open\"\n                >\n            </kendo-list>\n            <!--footer template-->\n            <template *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate.templateRef\n                }\">\n            </template>\n        </kendo-popup>\n  "
 	        }), 
@@ -930,3 +955,3 @@ __metadata('design:paramtypes', [selection_service_1.SelectionService, navigation_service_1.NavigationService, core_1.ElementRef, core_1.Renderer])
 /***/ },
-/* 26 */
+/* 25 */
 /***/ function(module, exports) {
@@ -937,3 +962,3 @@
 /***/ },
-/* 27 */
+/* 26 */
 /***/ function(module, exports) {
@@ -944,3 +969,3 @@
 /***/ },
-/* 28 */
+/* 27 */
 /***/ function(module, exports) {
@@ -951,3 +976,3 @@
 /***/ },
-/* 29 */
+/* 28 */
 /***/ function(module, exports) {
@@ -958,3 +983,3 @@
 /***/ },
-/* 30 */
+/* 29 */
 /***/ function(module, exports) {
@@ -965,3 +990,3 @@
 /***/ },
-/* 31 */
+/* 30 */
 /***/ function(module, exports) {
@@ -972,3 +997,3 @@
 /***/ },
-/* 32 */
+/* 31 */
 /***/ function(module, exports) {
@@ -979,3 +1004,3 @@
 /***/ },
-/* 33 */
+/* 32 */
 /***/ function(module, exports) {
@@ -986,3 +1011,3 @@
 /***/ },
-/* 34 */
+/* 33 */
 /***/ function(module, exports) {
@@ -989,0 +1014,0 @@

dist/npm/js/dropdownlist.component.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"DROPDOWNLIST_VALUE_ACCESSOR":{"multi":true,"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"DropDownListComponent"}},"DropDownListComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"providers":[{"__symbolic":"reference","name":"DROPDOWNLIST_VALUE_ACCESSOR"},{"__symbolic":"reference","module":"./selection.service","name":"SelectionService"},{"__symbolic":"reference","module":"./navigation.service","name":"NavigationService"},{"provide":{"__symbolic":"reference","module":"./navigation-config","name":"NAVIGATION_CONFIG"},"useValue":{"useLeftRightArrows":true}}],"selector":"kendo-dropdownlist","template":"\n        <span [ngClass]=\"setHeaderClasses()\" unselectable=\"on\">\n            <span #anchor [ngClass]=\"{ 'k-input': true }\" unselectable=\"on\">\n                <template *ngIf=\"valueTemplate\"\n                    [templateContext]=\"{\n                        templateRef: valueTemplate.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </template>\n                <template [ngIf]=\"!valueTemplate\">{{ getText() }}</template>\n            </span>\n            <span [ngClass]=\"{ 'k-select': true }\" unselectable=\"on\">\n                <span [ngClass]=\"{\n                    'k-icon': true,\n                    'k-i-arrow-s': true\n                }\"></span>\n            </span>\n        </span>\n        <kendo-popup *ngIf=\"open\" [anchor]=\"anchor\" [popupClass]=\"setListContainerClasses()\" [style.width]=\"popupWidth\" (mousedown)=\"onMouseDown($event)\">\n            <!--filterable-->\n            <template [ngIf]=\"filterable\">\n                <span [ngClass]=\"{ 'k-list-filter': true }\" (click)=\"$event.stopImmediatePropagation()\">\n                    <input #filterInput\n                        [(ngModel)]=\"filterText\" [ngClass]=\"{ 'k-textbox': true }\"\n                        (input)=\"handleFilter($event)\"\n                        (focus)=\"onFilterFocus()\" />\n                    <span [ngClass]=\"{ 'k-icon': true, 'k-i-search': true }\" unselectable=\"on\"></span>\n                </span>\n            </template>\n            <!--default item-->\n            <template [ngIf]=\"defaultItem && !itemTemplate\">\n                <div [ngClass]=\"setDefaultItemClasses()\" kendoDropDownsSelectable [index]=\"-1\">\n                    {{ getDefaultItemText() }}\n                </div>\n            </template>\n            <template [ngIf]=\"defaultItem && itemTemplate\">\n                <div [ngClass]=\"setDefaultItemClasses()\" kendoDropDownsSelectable [index]=\"-1\">\n                    <template\n                        [templateContext]=\"{\n                            templateRef: itemTemplate.templateRef,\n                            $implicit: defaultItem\n                        }\">\n                    </template>\n                </div>\n            </template>\n            <!--header template-->\n            <template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </template>\n            <!--list-->\n            <kendo-list\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [template]=\"itemTemplate\"\n                [height]=\"getHeight()\"\n                [show]=\"open\"\n                >\n            </kendo-list>\n            <!--footer template-->\n            <template *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate.templateRef\n                }\">\n            </template>\n        </kendo-popup>\n  "}]}],"members":{"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"textField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valueField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popupSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"defaultItem":[{"__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"}}]}],"filterable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ignoreCase":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"delay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valuePrimitive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"filterChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selectionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"itemTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./templates/item-template.directive","name":"ItemTemplateDirective"}]}]}],"valueTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./templates/value-template.directive","name":"ValueTemplateDirective"}]}]}],"headerTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./templates/header-template.directive","name":"HeaderTemplateDirective"}]}]}],"footerTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./templates/footer-template.directive","name":"FooterTemplateDirective"}]}]}],"filterInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["filterInput"]}]}],"blur":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["blur"]}]}],"focus":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["focus"]}]}],"keydown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"keypress":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keypress",["$event"]]}]}],"click":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click"]}]}],"widgetClasses":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-widget"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-dropdown"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-header"]}]}],"isFocused":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-state-focused"]}]}],"role":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.role"]}]}],"widgetTabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["tabindex"]}]}],"ariaDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-disabled"]}]}],"ariaHasPopup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-haspopup"]}]}],"ariaExpanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-expanded"]}]}],"ariaOwns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-owns"]}]}],"ariaActivedescendant":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-activedescendant"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./selection.service","name":"SelectionService"},{"__symbolic":"reference","module":"./navigation.service","name":"NavigationService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"onFilterFocus":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"subscribeEvents":[{"__symbolic":"method"}],"unsubscribeEvents":[{"__symbolic":"method"}],"handleItemChange":[{"__symbolic":"method"}],"handleItemSelect":[{"__symbolic":"method"}],"handleEnter":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"verifySettings":[{"__symbolic":"method"}],"setHeaderClasses":[{"__symbolic":"method"}],"setListContainerClasses":[{"__symbolic":"method"}],"setDefaultItemClasses":[{"__symbolic":"method"}],"getDefaultItemText":[{"__symbolic":"method"}],"getValue":[{"__symbolic":"method"}],"getText":[{"__symbolic":"method"}],"getWidth":[{"__symbolic":"method"}],"getHeight":[{"__symbolic":"method"}],"componentBlur":[{"__symbolic":"method"}],"onMouseDown":[{"__symbolic":"method"}],"onKeyPress":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"selectNext":[{"__symbolic":"method"}],"change":[{"__symbolic":"method"}],"navigate":[{"__symbolic":"method"}],"resolveInternalState":[{"__symbolic":"method"}],"handleFilter":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"DROPDOWNLIST_VALUE_ACCESSOR":{"multi":true,"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"DropDownListComponent"}},"DropDownListComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"providers":[{"__symbolic":"reference","name":"DROPDOWNLIST_VALUE_ACCESSOR"},{"__symbolic":"reference","module":"./selection.service","name":"SelectionService"},{"__symbolic":"reference","module":"./navigation.service","name":"NavigationService"},{"provide":{"__symbolic":"reference","module":"./navigation-config","name":"NAVIGATION_CONFIG"},"useValue":{"useLeftRightArrows":true}}],"selector":"kendo-dropdownlist","template":"\n        <span [ngClass]=\"setHeaderClasses()\" unselectable=\"on\">\n            <span #anchor [ngClass]=\"{ 'k-input': true }\" unselectable=\"on\">\n                <template *ngIf=\"valueTemplate\"\n                    [templateContext]=\"{\n                        templateRef: valueTemplate.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </template>\n                <template [ngIf]=\"!valueTemplate\">{{ getText() }}</template>\n            </span>\n            <span [ngClass]=\"{ 'k-select': true }\" unselectable=\"on\">\n                <span [ngClass]=\"{\n                    'k-icon': true,\n                    'k-i-arrow-s': true\n                }\"></span>\n            </span>\n        </span>\n        <kendo-popup *ngIf=\"open\"\n            [anchor]=\"anchor\"\n            [popupClass]=\"setListContainerClasses()\"\n            [style.width]=\"popupWidth\"\n            (anchorViewportLeave)=\"open=false\"\n            (mousedown)=\"onMouseDown($event)\">\n            <!--filterable-->\n            <template [ngIf]=\"filterable\">\n                <span [ngClass]=\"{ 'k-list-filter': true }\" (click)=\"$event.stopImmediatePropagation()\">\n                    <input #filterInput\n                        [(ngModel)]=\"filterText\" [ngClass]=\"{ 'k-textbox': true }\"\n                        (input)=\"handleFilter($event)\"\n                        (focus)=\"onFilterFocus()\" />\n                    <span [ngClass]=\"{ 'k-icon': true, 'k-i-search': true }\" unselectable=\"on\"></span>\n                </span>\n            </template>\n            <!--default item-->\n            <template [ngIf]=\"defaultItem && !itemTemplate\">\n                <div [ngClass]=\"setDefaultItemClasses()\" kendoDropDownsSelectable [index]=\"-1\">\n                    {{ getDefaultItemText() }}\n                </div>\n            </template>\n            <template [ngIf]=\"defaultItem && itemTemplate\">\n                <div [ngClass]=\"setDefaultItemClasses()\" kendoDropDownsSelectable [index]=\"-1\">\n                    <template\n                        [templateContext]=\"{\n                            templateRef: itemTemplate.templateRef,\n                            $implicit: defaultItem\n                        }\">\n                    </template>\n                </div>\n            </template>\n            <!--header template-->\n            <template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </template>\n            <!--list-->\n            <kendo-list\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [template]=\"itemTemplate\"\n                [height]=\"getHeight()\"\n                [show]=\"open\"\n                >\n            </kendo-list>\n            <!--footer template-->\n            <template *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate.templateRef\n                }\">\n            </template>\n        </kendo-popup>\n  "}]}],"members":{"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"textField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valueField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popupSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"defaultItem":[{"__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"}}]}],"filterable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ignoreCase":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"delay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valuePrimitive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"filterChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"selectionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"itemTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./templates/item-template.directive","name":"ItemTemplateDirective"}]}]}],"valueTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./templates/value-template.directive","name":"ValueTemplateDirective"}]}]}],"headerTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./templates/header-template.directive","name":"HeaderTemplateDirective"}]}]}],"footerTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./templates/footer-template.directive","name":"FooterTemplateDirective"}]}]}],"filterInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["filterInput"]}]}],"blur":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["blur"]}]}],"focus":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["focus"]}]}],"keydown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"keypress":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keypress",["$event"]]}]}],"click":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click"]}]}],"widgetClasses":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-widget"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-dropdown"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-header"]}]}],"isFocused":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-state-focused"]}]}],"role":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.role"]}]}],"widgetTabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["tabindex"]}]}],"ariaDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-disabled"]}]}],"ariaHasPopup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-haspopup"]}]}],"ariaExpanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-expanded"]}]}],"ariaOwns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-owns"]}]}],"ariaActivedescendant":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-activedescendant"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./selection.service","name":"SelectionService"},{"__symbolic":"reference","module":"./navigation.service","name":"NavigationService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"onFilterFocus":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"subscribeEvents":[{"__symbolic":"method"}],"unsubscribeEvents":[{"__symbolic":"method"}],"handleItemChange":[{"__symbolic":"method"}],"handleItemSelect":[{"__symbolic":"method"}],"handleEnter":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"verifySettings":[{"__symbolic":"method"}],"setHeaderClasses":[{"__symbolic":"method"}],"setListContainerClasses":[{"__symbolic":"method"}],"setDefaultItemClasses":[{"__symbolic":"method"}],"getDefaultItemText":[{"__symbolic":"method"}],"getText":[{"__symbolic":"method"}],"getWidth":[{"__symbolic":"method"}],"getHeight":[{"__symbolic":"method"}],"componentBlur":[{"__symbolic":"method"}],"onMouseDown":[{"__symbolic":"method"}],"onKeyPress":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"selectNext":[{"__symbolic":"method"}],"change":[{"__symbolic":"method"}],"navigate":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"handleFilter":[{"__symbolic":"method"}]}}}}

dist/npm/js/dropdownlist.module.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(35);
+	module.exports = __webpack_require__(34);
 
@@ -54,3 +54,3 @@
 
-/***/ 7:
+/***/ 6:
 /***/ function(module, exports) {
@@ -62,3 +62,3 @@
 
-/***/ 22:
+/***/ 21:
 /***/ function(module, exports) {
@@ -70,3 +70,3 @@
 
-/***/ 23:
+/***/ 22:
 /***/ function(module, exports) {
@@ -78,3 +78,3 @@
 
-/***/ 34:
+/***/ 33:
 /***/ function(module, exports) {
@@ -86,3 +86,3 @@
 
-/***/ 35:
+/***/ 34:
 /***/ function(module, exports, __webpack_require__) {
@@ -100,7 +100,7 @@
 	};
-	var core_1 = __webpack_require__(7);
-	var dropdownlist_component_1 = __webpack_require__(36);
-	var value_template_directive_1 = __webpack_require__(34);
-	var shared_module_1 = __webpack_require__(22);
-	var shared_directives_module_1 = __webpack_require__(23);
+	var core_1 = __webpack_require__(6);
+	var dropdownlist_component_1 = __webpack_require__(35);
+	var value_template_directive_1 = __webpack_require__(33);
+	var shared_module_1 = __webpack_require__(21);
+	var shared_directives_module_1 = __webpack_require__(22);
 	var DROPDOWNLIST_DIRECTIVES = [
@@ -141,3 +141,3 @@ dropdownlist_component_1.DropDownListComponent,
 
-/***/ 36:
+/***/ 35:
 /***/ function(module, exports) {
@@ -144,0 +144,0 @@

dist/npm/js/dropdowns.module.d.ts

 /**
- * The exported package module.
+ * Represents the [NgModule](https://angular.io/docs/ts/latest/guide/ngmodule.html)
+ * definition for the DropDowns components.
  *
- * The package exports:
+ * @example
  *
- * - `ComboBoxComponent`- The ComboBox component class.
- * - `DropDownListComponent` - The DropDownList component class.
- * - `ItemTemplateDirective` - The item template directive.
- * - `ValueTemplateDirective` - The value template directive.
- * - `HeaderTemplateDirective` - The header template directive.
- * - `FooterTemplateDirective` - The footer template directive.
+ * ```ts-no-run
+ * // Import the DropDowns module
+ * import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * @@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, DropDownsModule], // import DropDowns module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
  */
 export declare class DropDownsModule {
 }

dist/npm/js/dropdowns.module.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(37);
+	module.exports = __webpack_require__(36);
 
@@ -54,3 +54,3 @@
 
-/***/ 7:
+/***/ 6:
 /***/ function(module, exports) {
@@ -62,3 +62,3 @@
 
-/***/ 37:
+/***/ 36:
 /***/ function(module, exports, __webpack_require__) {
@@ -76,16 +76,35 @@
 	};
-	var core_1 = __webpack_require__(7);
-	var combobox_module_1 = __webpack_require__(38);
-	var dropdownlist_module_1 = __webpack_require__(39);
+	var core_1 = __webpack_require__(6);
+	var combobox_module_1 = __webpack_require__(37);
+	var dropdownlist_module_1 = __webpack_require__(38);
 	/**
-	 * The exported package module.
+	 * Represents the [NgModule](https://angular.io/docs/ts/latest/guide/ngmodule.html)
+	 * definition for the DropDowns components.
 	 *
-	 * The package exports:
+	 * @example
 	 *
-	 * - `ComboBoxComponent`- The ComboBox component class.
-	 * - `DropDownListComponent` - The DropDownList component class.
-	 * - `ItemTemplateDirective` - The item template directive.
-	 * - `ValueTemplateDirective` - The value template directive.
-	 * - `HeaderTemplateDirective` - The header template directive.
-	 * - `FooterTemplateDirective` - The footer template directive.
+	 * ```ts-no-run
+	 * // Import the DropDowns module
+	 * import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
+	 *
+	 * // The browser platform with a compiler
+	 * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+	 *
+	 * import { NgModule } from '@angular/core';
+	 *
+	 * // Import the app component
+	 * import { AppComponent } from './app.component';
+	 *
+	 * // Define the app module
+	 * @@NgModule({
+	 *     declarations: [AppComponent], // declare app component
+	 *     imports:      [BrowserModule, DropDownsModule], // import DropDowns module
+	 *     bootstrap:    [AppComponent]
+	 * })
+	 * export class AppModule {}
+	 *
+	 * // Compile and launch the module
+	 * platformBrowserDynamic().bootstrapModule(AppModule);
+	 *
+	 * ```
 	 */
@@ -108,3 +127,3 @@ var DropDownsModule = (function () {
 
-/***/ 38:
+/***/ 37:
 /***/ function(module, exports) {
@@ -116,3 +135,3 @@
 
-/***/ 39:
+/***/ 38:
 /***/ function(module, exports) {
@@ -119,0 +138,0 @@

dist/npm/js/list-item.directive.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(40);
+	module.exports = __webpack_require__(39);
 
@@ -54,3 +54,3 @@
 
-/***/ 7:
+/***/ 6:
 /***/ function(module, exports) {
@@ -62,3 +62,3 @@
 
-/***/ 40:
+/***/ 39:
 /***/ function(module, exports, __webpack_require__) {
@@ -76,3 +76,3 @@
 	};
-	var core_1 = __webpack_require__(7);
+	var core_1 = __webpack_require__(6);
 	/**
@@ -79,0 +79,0 @@ * @hidden

dist/npm/js/list.component.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(41);
+	module.exports = __webpack_require__(40);
 
@@ -61,3 +61,3 @@
 
-/***/ 7:
+/***/ 6:
 /***/ function(module, exports) {
@@ -69,3 +69,3 @@
 
-/***/ 10:
+/***/ 9:
 /***/ function(module, exports) {
@@ -77,3 +77,3 @@
 
-/***/ 11:
+/***/ 10:
 /***/ function(module, exports) {
@@ -85,3 +85,3 @@
 
-/***/ 14:
+/***/ 13:
 /***/ function(module, exports) {
@@ -93,3 +93,3 @@
 
-/***/ 17:
+/***/ 16:
 /***/ function(module, exports) {
@@ -101,3 +101,3 @@
 
-/***/ 33:
+/***/ 32:
 /***/ function(module, exports) {
@@ -109,3 +109,3 @@
 
-/***/ 41:
+/***/ 40:
 /***/ function(module, exports, __webpack_require__) {
@@ -124,10 +124,10 @@
 	__webpack_require__(2);
-	var core_1 = __webpack_require__(7);
-	var kendo_dropdowns_common_1 = __webpack_require__(10);
-	var list_item_directive_1 = __webpack_require__(42);
-	var item_template_directive_1 = __webpack_require__(11);
-	var util_1 = __webpack_require__(17);
-	var selection_service_1 = __webpack_require__(14);
-	__webpack_require__(43);
-	__webpack_require__(33);
+	var core_1 = __webpack_require__(6);
+	var kendo_dropdowns_common_1 = __webpack_require__(9);
+	var list_item_directive_1 = __webpack_require__(41);
+	var item_template_directive_1 = __webpack_require__(10);
+	var util_1 = __webpack_require__(16);
+	var selection_service_1 = __webpack_require__(13);
+	__webpack_require__(42);
+	__webpack_require__(32);
 	/**
@@ -257,3 +257,3 @@ * @hidden
 
-/***/ 42:
+/***/ 41:
 /***/ function(module, exports) {
@@ -265,3 +265,3 @@
 
-/***/ 43:
+/***/ 42:
 /***/ function(module, exports) {
@@ -268,0 +268,0 @@

dist/npm/js/main.js

@@ -47,3 +47,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(44);
+	module.exports = __webpack_require__(43);
 
@@ -61,4 +61,3 @@
 /* 9 */,
-/* 10 */,
-/* 11 */
+/* 10 */
 /***/ function(module, exports) {
@@ -69,3 +68,3 @@
 /***/ },
-/* 12 */
+/* 11 */
 /***/ function(module, exports) {
@@ -76,3 +75,3 @@
 /***/ },
-/* 13 */
+/* 12 */
 /***/ function(module, exports) {
@@ -83,2 +82,3 @@
 /***/ },
+/* 13 */,
 /* 14 */,
@@ -90,4 +90,3 @@ /* 15 */,
 /* 19 */,
-/* 20 */,
-/* 21 */
+/* 20 */
 /***/ function(module, exports) {
@@ -98,3 +97,3 @@
 /***/ },
-/* 22 */
+/* 21 */
 /***/ function(module, exports) {
@@ -105,3 +104,3 @@
 /***/ },
-/* 23 */
+/* 22 */
 /***/ function(module, exports) {
@@ -112,2 +111,3 @@
 /***/ },
+/* 23 */,
 /* 24 */,
@@ -122,4 +122,3 @@ /* 25 */,
 /* 32 */,
-/* 33 */,
-/* 34 */
+/* 33 */
 /***/ function(module, exports) {
@@ -130,4 +129,4 @@
 /***/ },
-/* 35 */,
-/* 36 */
+/* 34 */,
+/* 35 */
 /***/ function(module, exports) {
@@ -138,4 +137,4 @@
 /***/ },
-/* 37 */,
-/* 38 */
+/* 36 */,
+/* 37 */
 /***/ function(module, exports) {
@@ -146,3 +145,3 @@
 /***/ },
-/* 39 */
+/* 38 */
 /***/ function(module, exports) {
@@ -153,39 +152,39 @@
 /***/ },
+/* 39 */,
 /* 40 */,
 /* 41 */,
 /* 42 */,
-/* 43 */,
-/* 44 */
+/* 43 */
 /***/ function(module, exports, __webpack_require__) {
 
 	"use strict";
-	var combobox_component_1 = __webpack_require__(21);
+	var combobox_component_1 = __webpack_require__(20);
 	exports.ComboBoxComponent = combobox_component_1.ComboBoxComponent;
-	var dropdownlist_component_1 = __webpack_require__(36);
+	var dropdownlist_component_1 = __webpack_require__(35);
 	exports.DropDownListComponent = dropdownlist_component_1.DropDownListComponent;
-	var item_template_directive_1 = __webpack_require__(11);
+	var item_template_directive_1 = __webpack_require__(10);
 	exports.ItemTemplateDirective = item_template_directive_1.ItemTemplateDirective;
-	var header_template_directive_1 = __webpack_require__(12);
+	var header_template_directive_1 = __webpack_require__(11);
 	exports.HeaderTemplateDirective = header_template_directive_1.HeaderTemplateDirective;
-	var footer_template_directive_1 = __webpack_require__(13);
+	var footer_template_directive_1 = __webpack_require__(12);
 	exports.FooterTemplateDirective = footer_template_directive_1.FooterTemplateDirective;
-	var value_template_directive_1 = __webpack_require__(34);
+	var value_template_directive_1 = __webpack_require__(33);
 	exports.ValueTemplateDirective = value_template_directive_1.ValueTemplateDirective;
-	var template_context_directive_1 = __webpack_require__(45);
+	var template_context_directive_1 = __webpack_require__(44);
 	exports.TemplateContextDirective = template_context_directive_1.TemplateContextDirective;
-	var selectable_directive_1 = __webpack_require__(46);
+	var selectable_directive_1 = __webpack_require__(45);
 	exports.SelectableDirective = selectable_directive_1.SelectableDirective;
-	var dropdowns_module_1 = __webpack_require__(47);
+	var dropdowns_module_1 = __webpack_require__(46);
 	exports.DropDownsModule = dropdowns_module_1.DropDownsModule;
-	var shared_module_1 = __webpack_require__(22);
+	var shared_module_1 = __webpack_require__(21);
 	exports.SharedModule = shared_module_1.SharedModule;
-	var combobox_module_1 = __webpack_require__(38);
+	var combobox_module_1 = __webpack_require__(37);
 	exports.ComboBoxModule = combobox_module_1.ComboBoxModule;
-	var dropdownlist_module_1 = __webpack_require__(39);
+	var dropdownlist_module_1 = __webpack_require__(38);
 	exports.DropDownListModule = dropdownlist_module_1.DropDownListModule;
-	var shared_directives_module_1 = __webpack_require__(23);
+	var shared_directives_module_1 = __webpack_require__(22);
 	exports.SharedDirectivesModule = shared_directives_module_1.SharedDirectivesModule;
-	var list_component_1 = __webpack_require__(48);
+	var list_component_1 = __webpack_require__(47);
 	exports.ListComponent = list_component_1.ListComponent;
-	var kendo_angular_popup_1 = __webpack_require__(49);
+	var kendo_angular_popup_1 = __webpack_require__(48);
 	exports.PopupComponent = kendo_angular_popup_1.PopupComponent;
@@ -195,3 +194,3 @@
 /***/ },
-/* 45 */
+/* 44 */
 /***/ function(module, exports) {
@@ -202,3 +201,3 @@
 /***/ },
-/* 46 */
+/* 45 */
 /***/ function(module, exports) {
@@ -209,3 +208,3 @@
 /***/ },
-/* 47 */
+/* 46 */
 /***/ function(module, exports) {
@@ -216,3 +215,3 @@
 /***/ },
-/* 48 */
+/* 47 */
 /***/ function(module, exports) {
@@ -223,3 +222,3 @@
 /***/ },
-/* 49 */
+/* 48 */
 /***/ function(module, exports) {
@@ -226,0 +225,0 @@

dist/npm/js/navigation-action.d.ts

@@ -10,3 +10,4 @@ /**
     Tab = 4,
-    Navigate = 5,
+    Esc = 5,
+    Navigate = 6,
 }

dist/npm/js/navigation-action.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(50);
+	module.exports = __webpack_require__(49);
 
@@ -54,3 +54,3 @@
 
-/***/ 50:
+/***/ 49:
 /***/ function(module, exports) {
@@ -68,3 +68,4 @@
 	    NavigationAction[NavigationAction["Tab"] = 4] = "Tab";
-	    NavigationAction[NavigationAction["Navigate"] = 5] = "Navigate";
+	    NavigationAction[NavigationAction["Esc"] = 5] = "Esc";
+	    NavigationAction[NavigationAction["Navigate"] = 6] = "Navigate";
 	})(exports.NavigationAction || (exports.NavigationAction = {}));
@@ -71,0 +72,0 @@ var NavigationAction = exports.NavigationAction;

dist/npm/js/navigation-action.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"NavigationAction":{"Undefined":0,"Open":1,"Close":2,"Enter":3,"Tab":4,"Navigate":5}}}
+{"__symbolic":"module","version":1,"metadata":{"NavigationAction":{"Undefined":0,"Open":1,"Close":2,"Enter":3,"Tab":4,"Esc":5,"Navigate":6}}}

dist/npm/js/navigation-config.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(51);
+	module.exports = __webpack_require__(50);
 
@@ -54,3 +54,3 @@
 
-/***/ 7:
+/***/ 6:
 /***/ function(module, exports) {
@@ -62,7 +62,7 @@
 
-/***/ 51:
+/***/ 50:
 /***/ function(module, exports, __webpack_require__) {
 
 	"use strict";
-	var core_1 = __webpack_require__(7);
+	var core_1 = __webpack_require__(6);
 	/**
@@ -69,0 +69,0 @@ * @hidden

dist/npm/js/navigation.service.d.ts

@@ -13,2 +13,3 @@ import { EventEmitter } from '@angular/core';
     tab: EventEmitter<any>;
+    esc: EventEmitter<any>;
     private useLeftRightArrows;
@@ -15,0 +16,0 @@ constructor(config: NavigationConfig);

dist/npm/js/navigation.service.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(52);
+	module.exports = __webpack_require__(51);
 
@@ -54,3 +54,3 @@
 
-/***/ 7:
+/***/ 6:
 /***/ function(module, exports) {
@@ -62,3 +62,3 @@
 
-/***/ 16:
+/***/ 15:
 /***/ function(module, exports) {
@@ -70,3 +70,3 @@
 
-/***/ 17:
+/***/ 16:
 /***/ function(module, exports) {
@@ -78,3 +78,3 @@
 
-/***/ 18:
+/***/ 17:
 /***/ function(module, exports) {
@@ -86,3 +86,3 @@
 
-/***/ 19:
+/***/ 18:
 /***/ function(module, exports) {
@@ -94,3 +94,3 @@
 
-/***/ 52:
+/***/ 51:
 /***/ function(module, exports, __webpack_require__) {
@@ -111,7 +111,7 @@
 	};
-	var core_1 = __webpack_require__(7);
-	var util_1 = __webpack_require__(17);
-	var keys_1 = __webpack_require__(19);
-	var navigation_action_1 = __webpack_require__(18);
-	var navigation_config_1 = __webpack_require__(16);
+	var core_1 = __webpack_require__(6);
+	var util_1 = __webpack_require__(16);
+	var keys_1 = __webpack_require__(18);
+	var navigation_action_1 = __webpack_require__(17);
+	var navigation_config_1 = __webpack_require__(15);
 	var MIN_INDEX = 0;
@@ -128,2 +128,3 @@ /**
 	        this.tab = new core_1.EventEmitter();
+	        this.esc = new core_1.EventEmitter();
 	        this.useLeftRightArrows = config.useLeftRightArrows;
@@ -141,6 +142,8 @@ }
 	        }
-	        else if (keyCode === keys_1.Keys.enter || (keyCode === keys_1.Keys.esc)) {
+	        else if (keyCode === keys_1.Keys.enter) {
 	            action = navigation_action_1.NavigationAction.Enter;
-	            this.enter.emit();
 	        }
+	        else if (keyCode === keys_1.Keys.esc) {
+	            action = navigation_action_1.NavigationAction.Esc;
+	        }
 	        else if (keyCode === keys_1.Keys.tab) {
@@ -147,0 +150,0 @@ action = navigation_action_1.NavigationAction.Tab;

dist/npm/js/popup-settings.d.ts

 /**
- * The popup settings
+ * Used for configuring the dimensions of the popup container.
+ *
+ * @example
+ * ```ts
+ * @@Component({
+ * selector: 'my-app',
+ * template: `
+ *  <kendo-dropdownlist [data]="listItems" [popupSettings]="{ height: 300, width: 300 }">
+ *  </kendo-dropdownlist>
+ * `
+ * })
+ * class AppComponent {
+ *   public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
+ * }
+ * ```
  */
 export interface IPopupSettings {
     /**
-     * Sets the popup width
+     * Sets the popup width. By default it is equal to the component's width.
      */
     width?: number;
     /**
-     * Sets the popup height
+     * Sets the max height of the popup.
      */
     height?: number;
 }

dist/npm/js/popup-settings.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(53);
+	module.exports = __webpack_require__(52);
 
@@ -54,3 +54,3 @@
 
-/***/ 53:
+/***/ 52:
 /***/ function(module, exports) {
@@ -57,0 +57,0 @@

dist/npm/js/searchbar.component.d.ts

@@ -10,4 +10,2 @@ import '@telerik/kendo-theme-default/styles/packages/dropdowns';
     value: any;
-    readonly text: any;
-    valueChange: EventEmitter<any>;
     onFilter: EventEmitter<any>;
@@ -26,3 +24,2 @@ onBlur: EventEmitter<any>;
     handleInput(text: string): void;
-    handleChange(text: string): void;
     handleFocus(event: any): void;
@@ -29,0 +26,0 @@ handleBlur(event: any): void;

dist/npm/js/searchbar.component.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(54);
+	module.exports = __webpack_require__(53);
 
@@ -61,3 +61,3 @@
 
-/***/ 7:
+/***/ 6:
 /***/ function(module, exports) {
@@ -69,3 +69,3 @@
 
-/***/ 19:
+/***/ 18:
 /***/ function(module, exports) {
@@ -77,3 +77,3 @@
 
-/***/ 54:
+/***/ 53:
 /***/ function(module, exports, __webpack_require__) {
@@ -92,4 +92,4 @@
 	__webpack_require__(2);
-	var core_1 = __webpack_require__(7);
-	var keys_1 = __webpack_require__(19);
+	var core_1 = __webpack_require__(6);
+	var keys_1 = __webpack_require__(18);
 	/**
@@ -100,3 +100,2 @@ * @hidden
 	    function SearchBarComponent(renderer) {
-	        this.valueChange = new core_1.EventEmitter();
 	        this.onFilter = new core_1.EventEmitter();
@@ -121,14 +120,7 @@ this.onBlur = new core_1.EventEmitter();
 	    ;
-	    Object.defineProperty(SearchBarComponent.prototype, "text", {
-	        get: function () {
-	            return this.input.nativeElement.value;
-	        },
-	        enumerable: true,
-	        configurable: true
-	    });
-	    ;
 	    SearchBarComponent.prototype.handleKeyDown = function (event) {
 	        if (event.keyCode === keys_1.Keys.up ||
 	            event.keyCode === keys_1.Keys.down ||
-	            event.keyCode === keys_1.Keys.enter) {
+	            event.keyCode === keys_1.Keys.enter ||
+	            event.keyCode === keys_1.Keys.esc) {
 	            event.preventDefault();
@@ -141,5 +133,2 @@ this.onNavigate.emit(event);
 	    };
-	    SearchBarComponent.prototype.handleChange = function (text) {
-	        this.valueChange.emit(text);
-	    };
 	    SearchBarComponent.prototype.handleFocus = function (event) {
@@ -174,6 +163,2 @@ this.onFocus.emit(event);
 	        __metadata('design:type', core_1.EventEmitter)
-	    ], SearchBarComponent.prototype, "valueChange", void 0);
-	    __decorate([
-	        core_1.Output(), 
-	        __metadata('design:type', core_1.EventEmitter)
 	    ], SearchBarComponent.prototype, "onFilter", void 0);
@@ -203,3 +188,3 @@ __decorate([
 	            selector: 'kendo-searchbar',
-	            template: "\n        <input #input\n            [value]=\"value\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"placeholder\"\n            [class]=\"'k-input'\"\n            (input)=\"handleInput($event.target.value)\"\n            (change)=\"handleChange($event.target.value)\"\n            (focus)=\"handleFocus($event)\"\n            (blur)=\"handleBlur($event)\"\n            (keydown)=\"handleKeyDown($event)\"\n        />\n   "
+	            template: "\n        <input #input\n            [value]=\"value\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"placeholder\"\n            [class]=\"'k-input'\"\n            (input)=\"handleInput($event.target.value)\"\n            (focus)=\"handleFocus($event)\"\n            (blur)=\"handleBlur($event)\"\n            (keydown)=\"handleKeyDown($event)\"\n        />\n   "
 	        }), 
@@ -206,0 +191,0 @@ __metadata('design:paramtypes', [core_1.Renderer])

dist/npm/js/searchbar.component.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"SearchBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"kendo-searchbar","template":"\n        <input #input\n            [value]=\"value\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"placeholder\"\n            [class]=\"'k-input'\"\n            (input)=\"handleInput($event.target.value)\"\n            (change)=\"handleChange($event.target.value)\"\n            (focus)=\"handleFocus($event)\"\n            (blur)=\"handleBlur($event)\"\n            (keydown)=\"handleKeyDown($event)\"\n        />\n   "}]}],"members":{"disabled":[{"__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"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onNavigate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["input"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"handleKeyDown":[{"__symbolic":"method"}],"handleInput":[{"__symbolic":"method"}],"handleChange":[{"__symbolic":"method"}],"handleFocus":[{"__symbolic":"method"}],"handleBlur":[{"__symbolic":"method"}],"onSelectionChange":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"SearchBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"kendo-searchbar","template":"\n        <input #input\n            [value]=\"value\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"placeholder\"\n            [class]=\"'k-input'\"\n            (input)=\"handleInput($event.target.value)\"\n            (focus)=\"handleFocus($event)\"\n            (blur)=\"handleBlur($event)\"\n            (keydown)=\"handleKeyDown($event)\"\n        />\n   "}]}],"members":{"disabled":[{"__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"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onNavigate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["input"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"handleKeyDown":[{"__symbolic":"method"}],"handleInput":[{"__symbolic":"method"}],"handleFocus":[{"__symbolic":"method"}],"handleBlur":[{"__symbolic":"method"}],"onSelectionChange":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}]}}}}

dist/npm/js/selectable.directive.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(55);
+	module.exports = __webpack_require__(54);
 
@@ -61,3 +61,3 @@
 
-/***/ 7:
+/***/ 6:
 /***/ function(module, exports) {
@@ -69,3 +69,3 @@
 
-/***/ 14:
+/***/ 13:
 /***/ function(module, exports) {
@@ -77,3 +77,3 @@
 
-/***/ 55:
+/***/ 54:
 /***/ function(module, exports, __webpack_require__) {
@@ -92,4 +92,4 @@
 	__webpack_require__(2);
-	var core_1 = __webpack_require__(7);
-	var selection_service_1 = __webpack_require__(14);
+	var core_1 = __webpack_require__(6);
+	var selection_service_1 = __webpack_require__(13);
 	/**
@@ -96,0 +96,0 @@ * @hidden

dist/npm/js/selection.service.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(56);
+	module.exports = __webpack_require__(55);
 
@@ -54,3 +54,3 @@
 
-/***/ 7:
+/***/ 6:
 /***/ function(module, exports) {
@@ -62,3 +62,3 @@
 
-/***/ 17:
+/***/ 16:
 /***/ function(module, exports) {
@@ -70,3 +70,3 @@
 
-/***/ 56:
+/***/ 55:
 /***/ function(module, exports, __webpack_require__) {
@@ -84,4 +84,4 @@
 	};
-	var core_1 = __webpack_require__(7);
-	var util_1 = __webpack_require__(17);
+	var core_1 = __webpack_require__(6);
+	var util_1 = __webpack_require__(16);
 	/**
@@ -88,0 +88,0 @@ * @hidden

dist/npm/js/shared-directives.module.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(57);
+	module.exports = __webpack_require__(56);
 
@@ -54,3 +54,3 @@
 
-/***/ 7:
+/***/ 6:
 /***/ function(module, exports) {
@@ -62,3 +62,3 @@
 
-/***/ 11:
+/***/ 10:
 /***/ function(module, exports) {
@@ -70,3 +70,3 @@
 
-/***/ 12:
+/***/ 11:
 /***/ function(module, exports) {
@@ -78,3 +78,3 @@
 
-/***/ 13:
+/***/ 12:
 /***/ function(module, exports) {
@@ -86,3 +86,3 @@
 
-/***/ 57:
+/***/ 56:
 /***/ function(module, exports, __webpack_require__) {
@@ -100,6 +100,6 @@
 	};
-	var core_1 = __webpack_require__(7);
-	var item_template_directive_1 = __webpack_require__(11);
-	var header_template_directive_1 = __webpack_require__(12);
-	var footer_template_directive_1 = __webpack_require__(13);
+	var core_1 = __webpack_require__(6);
+	var item_template_directive_1 = __webpack_require__(10);
+	var header_template_directive_1 = __webpack_require__(11);
+	var footer_template_directive_1 = __webpack_require__(12);
 	var SHARED_DIRECTIVES = [
@@ -106,0 +106,0 @@ header_template_directive_1.HeaderTemplateDirective,

dist/npm/js/shared.module.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(58);
+	module.exports = __webpack_require__(57);
 
@@ -54,3 +54,3 @@
 
-/***/ 7:
+/***/ 6:
 /***/ function(module, exports) {
@@ -62,3 +62,3 @@
 
-/***/ 8:
+/***/ 7:
 /***/ function(module, exports) {
@@ -70,3 +70,3 @@
 
-/***/ 9:
+/***/ 8:
 /***/ function(module, exports) {
@@ -78,3 +78,3 @@
 
-/***/ 23:
+/***/ 22:
 /***/ function(module, exports) {
@@ -86,3 +86,3 @@
 
-/***/ 42:
+/***/ 41:
 /***/ function(module, exports) {
@@ -94,3 +94,3 @@
 
-/***/ 45:
+/***/ 44:
 /***/ function(module, exports) {
@@ -102,3 +102,3 @@
 
-/***/ 46:
+/***/ 45:
 /***/ function(module, exports) {
@@ -110,3 +110,3 @@
 
-/***/ 48:
+/***/ 47:
 /***/ function(module, exports) {
@@ -118,3 +118,3 @@
 
-/***/ 49:
+/***/ 48:
 /***/ function(module, exports) {
@@ -126,3 +126,3 @@
 
-/***/ 58:
+/***/ 57:
 /***/ function(module, exports, __webpack_require__) {
@@ -140,12 +140,12 @@
 	};
-	var core_1 = __webpack_require__(7);
-	var common_1 = __webpack_require__(59);
-	var forms_1 = __webpack_require__(8);
-	var list_component_1 = __webpack_require__(48);
-	var searchbar_component_1 = __webpack_require__(9);
-	var kendo_angular_popup_1 = __webpack_require__(49);
-	var shared_directives_module_1 = __webpack_require__(23);
-	var list_item_directive_1 = __webpack_require__(42);
-	var selectable_directive_1 = __webpack_require__(46);
-	var template_context_directive_1 = __webpack_require__(45);
+	var core_1 = __webpack_require__(6);
+	var common_1 = __webpack_require__(58);
+	var forms_1 = __webpack_require__(7);
+	var list_component_1 = __webpack_require__(47);
+	var searchbar_component_1 = __webpack_require__(8);
+	var kendo_angular_popup_1 = __webpack_require__(48);
+	var shared_directives_module_1 = __webpack_require__(22);
+	var list_item_directive_1 = __webpack_require__(41);
+	var selectable_directive_1 = __webpack_require__(45);
+	var template_context_directive_1 = __webpack_require__(44);
 	var INTERNAL_DIRECTIVES = [
@@ -179,3 +179,3 @@ list_component_1.ListComponent,
 
-/***/ 59:
+/***/ 58:
 /***/ function(module, exports) {
@@ -182,0 +182,0 @@

dist/npm/js/templates/footer-template.directive.d.ts

 import { TemplateRef } from '@angular/core';
 /**
- * The `FooterTemplate` directive that augments the footer `<template>`.
+ * The `FooterTemplate` directive is used for rendering the list footer content.
+ *
+ * @example
+ * ```ts
+ * @@Component({
+ * selector: 'my-app',
+ * template: `
+ *  <kendo-combobox [data]="listItems">
+ *    <template footerTemplate>
+ *      <h4>Footer template</h4>
+ *    </template>
+ *  </kendo-combobox>
+ * `
+ * })
+ * class AppComponent {
+ *   public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
+ * }
+ * ```
+ *
+ * For more examples see [Tempaltes]({% slug overview_ddl_kendouiforangular %}#templates)
  */
@@ -5,0 +24,0 @@ export declare class FooterTemplateDirective {

dist/npm/js/templates/footer-template.directive.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(60);
+	module.exports = __webpack_require__(59);
 
@@ -54,3 +54,3 @@
 
-/***/ 7:
+/***/ 6:
 /***/ function(module, exports) {
@@ -62,3 +62,3 @@
 
-/***/ 60:
+/***/ 59:
 /***/ function(module, exports, __webpack_require__) {
@@ -76,5 +76,24 @@
 	};
-	var core_1 = __webpack_require__(7);
+	var core_1 = __webpack_require__(6);
 	/**
-	 * The `FooterTemplate` directive that augments the footer `<template>`.
+	 * The `FooterTemplate` directive is used for rendering the list footer content.
+	 *
+	 * @example
+	 * ```ts
+	 * @@Component({
+	 * selector: 'my-app',
+	 * template: `
+	 *  <kendo-combobox [data]="listItems">
+	 *    <template footerTemplate>
+	 *      <h4>Footer template</h4>
+	 *    </template>
+	 *  </kendo-combobox>
+	 * `
+	 * })
+	 * class AppComponent {
+	 *   public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
+	 * }
+	 * ```
+	 *
+	 * For more examples see [Tempaltes]({% slug overview_ddl_kendouiforangular %}#templates)
 	 */
@@ -81,0 +100,0 @@ var FooterTemplateDirective = (function () {

dist/npm/js/templates/header-template.directive.d.ts

 import { TemplateRef } from '@angular/core';
 /**
- * The `HeaderTemplate` directive that augments the header `<template>`.
+ * The `headerTemplate` directive is used for rendering the list header content.
+ *
+ * @example
+ * ```ts
+ * @@Component({
+ * selector: 'my-app',
+ * template: `
+ *  <kendo-combobox [data]="listItems">
+ *    <template headerTemplate>
+ *      <h4>Header template</h4>
+ *    </template>
+ *  </kendo-combobox>
+ * `
+ * })
+ * class AppComponent {
+ *   public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
+ * }
+ * ```
+ * For more examples see [Tempaltes]({% slug overview_ddl_kendouiforangular %}#templates)
  */
@@ -5,0 +23,0 @@ export declare class HeaderTemplateDirective {

dist/npm/js/templates/header-template.directive.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(61);
+	module.exports = __webpack_require__(60);
 
@@ -54,3 +54,3 @@
 
-/***/ 7:
+/***/ 6:
 /***/ function(module, exports) {
@@ -62,3 +62,3 @@
 
-/***/ 61:
+/***/ 60:
 /***/ function(module, exports, __webpack_require__) {
@@ -76,5 +76,23 @@
 	};
-	var core_1 = __webpack_require__(7);
+	var core_1 = __webpack_require__(6);
 	/**
-	 * The `HeaderTemplate` directive that augments the header `<template>`.
+	 * The `headerTemplate` directive is used for rendering the list header content.
+	 *
+	 * @example
+	 * ```ts
+	 * @@Component({
+	 * selector: 'my-app',
+	 * template: `
+	 *  <kendo-combobox [data]="listItems">
+	 *    <template headerTemplate>
+	 *      <h4>Header template</h4>
+	 *    </template>
+	 *  </kendo-combobox>
+	 * `
+	 * })
+	 * class AppComponent {
+	 *   public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
+	 * }
+	 * ```
+	 * For more examples see [Tempaltes]({% slug overview_ddl_kendouiforangular %}#templates)
 	 */
@@ -81,0 +99,0 @@ var HeaderTemplateDirective = (function () {

dist/npm/js/templates/item-template.directive.d.ts

 import { TemplateRef } from '@angular/core';
 /**
- * The `ItemTemplate` directive that augments the item `<template>`.
+ * The `itemTemplate` directive is used for rendering the list item content.
+ *
+ * @example
+ * ```ts
+ * @@Component({
+ * selector: 'my-app',
+ * template: `
+ *  <kendo-combobox [data]="listItems">
+ *    <template itemTemplate let-dataItem>
+ *      <span>{{dataItem}} option</span>
+ *    </template>
+ *  </kendo-combobox>
+ * `
+ * })
+ * class AppComponent {
+ *   public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
+ * }
+ * ```
+ *
+ * For more examples see [Tempaltes]({% slug overview_ddl_kendouiforangular %}#templates)
  */
@@ -5,0 +24,0 @@ export declare class ItemTemplateDirective {

dist/npm/js/templates/item-template.directive.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(62);
+	module.exports = __webpack_require__(61);
 
@@ -54,3 +54,3 @@
 
-/***/ 7:
+/***/ 6:
 /***/ function(module, exports) {
@@ -62,3 +62,3 @@
 
-/***/ 62:
+/***/ 61:
 /***/ function(module, exports, __webpack_require__) {
@@ -76,5 +76,24 @@
 	};
-	var core_1 = __webpack_require__(7);
+	var core_1 = __webpack_require__(6);
 	/**
-	 * The `ItemTemplate` directive that augments the item `<template>`.
+	 * The `itemTemplate` directive is used for rendering the list item content.
+	 *
+	 * @example
+	 * ```ts
+	 * @@Component({
+	 * selector: 'my-app',
+	 * template: `
+	 *  <kendo-combobox [data]="listItems">
+	 *    <template itemTemplate let-dataItem>
+	 *      <span>{{dataItem}} option</span>
+	 *    </template>
+	 *  </kendo-combobox>
+	 * `
+	 * })
+	 * class AppComponent {
+	 *   public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
+	 * }
+	 * ```
+	 *
+	 * For more examples see [Tempaltes]({% slug overview_ddl_kendouiforangular %}#templates)
 	 */
@@ -81,0 +100,0 @@ var ItemTemplateDirective = (function () {

dist/npm/js/templates/template-context.directive.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(63);
+	module.exports = __webpack_require__(62);
 
@@ -54,3 +54,3 @@
 
-/***/ 7:
+/***/ 6:
 /***/ function(module, exports) {
@@ -62,3 +62,3 @@
 
-/***/ 63:
+/***/ 62:
 /***/ function(module, exports, __webpack_require__) {
@@ -76,3 +76,3 @@
 	};
-	var core_1 = __webpack_require__(7);
+	var core_1 = __webpack_require__(6);
 	/**
@@ -79,0 +79,0 @@ * @hidden

dist/npm/js/templates/value-template.directive.d.ts

 import { TemplateRef } from '@angular/core';
 /**
- * The `ValueTemplate` directive that augments the value `<template>`.
+ * The `valueTemplate` directive is used for rendering the components selected value. Can only be used with the DropDownList component.
+ *
+ * @example
+ * ```ts
+ * @@Component({
+ * selector: 'my-app',
+ * template: `
+ *  <kendo-dropdownlist [data]="listItems">
+ *    <template valueTemplate let-dataItem>
+ *      <span>{{dataItem}} option</span>
+ *    </template>
+ *  </kendo-dropdownlist>
+ * `
+ * })
+ * class AppComponent {
+ *   public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
+ * }
+ * ```
+ *
+ * For more examples see [Tempaltes]({% slug overview_ddl_kendouiforangular %}#templates)
  */
@@ -5,0 +24,0 @@ export declare class ValueTemplateDirective {

dist/npm/js/templates/value-template.directive.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(64);
+	module.exports = __webpack_require__(63);
 
@@ -54,3 +54,3 @@
 
-/***/ 7:
+/***/ 6:
 /***/ function(module, exports) {
@@ -62,3 +62,3 @@
 
-/***/ 64:
+/***/ 63:
 /***/ function(module, exports, __webpack_require__) {
@@ -76,5 +76,24 @@
 	};
-	var core_1 = __webpack_require__(7);
+	var core_1 = __webpack_require__(6);
 	/**
-	 * The `ValueTemplate` directive that augments the value `<template>`.
+	 * The `valueTemplate` directive is used for rendering the components selected value. Can only be used with the DropDownList component.
+	 *
+	 * @example
+	 * ```ts
+	 * @@Component({
+	 * selector: 'my-app',
+	 * template: `
+	 *  <kendo-dropdownlist [data]="listItems">
+	 *    <template valueTemplate let-dataItem>
+	 *      <span>{{dataItem}} option</span>
+	 *    </template>
+	 *  </kendo-dropdownlist>
+	 * `
+	 * })
+	 * class AppComponent {
+	 *   public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
+	 * }
+	 * ```
+	 *
+	 * For more examples see [Tempaltes]({% slug overview_ddl_kendouiforangular %}#templates)
 	 */
@@ -81,0 +100,0 @@ var ValueTemplateDirective = (function () {

dist/npm/js/util.d.ts

@@ -13,2 +13,5 @@ /**
 export declare const guid: Function;
+/**
+ * @hidden
+ */
 export declare const isDocumentAvailable: Function;

dist/npm/js/util.js

@@ -48,3 +48,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 
-	module.exports = __webpack_require__(65);
+	module.exports = __webpack_require__(64);
 
@@ -54,3 +54,3 @@
 
-/***/ 65:
+/***/ 64:
 /***/ function(module, exports) {
@@ -86,2 +86,5 @@
 	};
+	/**
+	 * @hidden
+	 */
 	exports.isDocumentAvailable = function () {
@@ -88,0 +91,0 @@ return typeof document !== 'undefined';

dist/npm/js/util.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"isPresent":{"__symbolic":"error","message":"Function call not supported","line":6,"character":35},"isChanged":{"__symbolic":"error","message":"Function call not supported","line":11,"character":35},"guid":{"__symbolic":"error","message":"Function call not supported","line":19,"character":30},"isDocumentAvailable":{"__symbolic":"error","message":"Function call not supported","line":36,"character":45}}}
+{"__symbolic":"module","version":1,"metadata":{"isPresent":{"__symbolic":"error","message":"Function call not supported","line":6,"character":35},"isChanged":{"__symbolic":"error","message":"Function call not supported","line":11,"character":35},"guid":{"__symbolic":"error","message":"Function call not supported","line":19,"character":30},"isDocumentAvailable":{"__symbolic":"error","message":"Function call not supported","line":39,"character":45}}}

package.json

 {
   "name": "@progress/kendo-angular-dropdowns",
   "description": "Dropdowns Package for Angular 2",
-  "version": "0.16.0",
+  "version": "0.16.10",
   "publishConfig": {
@@ -39,3 +39,3 @@ "registry": "https://registry.npm.telerik.com"
   "dependencies": {
-    "@progress/kendo-angular-popup": "^0.11.0",
+    "@progress/kendo-angular-popup": "^0.13.0",
     "@telerik/kendo-dropdowns-common": "^0.1.0"
@@ -55,3 +55,3 @@ },
     "rxjs": "5.0.0-beta.12",
-    "typescript": "^2.0.3",
+    "typescript": "~2.0.3",
     "zone.js": "0.6.23",
@@ -58,0 +58,0 @@ "@progress/kendo-angular-tasks": "^5.0.0",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

835170

increased by22.91%

Lines of code

6338

increased by3.94%

Dependency changes

• + Added@progress/kendo-angular-popup@0.13.3(transitive)

• + Added@progress/kendo-popup-common@0.2.1(transitive)

• - Removed@progress/kendo-angular-popup@0.11.0(transitive)

• - Removed@progress/kendo-popup-common@0.1.1(transitive)

• Updated@progress/kendo-angular-popup@^0.13.0