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

Comparing version 0.18.1 to 0.18.2

dist/es/dropdownlist.component.d.ts

@@ -1,2 +0,2 @@
-import { ElementRef, EventEmitter, OnDestroy, AfterViewChecked, Renderer } from '@angular/core';
+import { ElementRef, EventEmitter, OnDestroy, AfterViewChecked, Renderer, NgZone } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
@@ -186,2 +186,3 @@ import 'rxjs/add/observable/fromEvent';
     private renderer;
+    private _zone;
     private filterText;
@@ -191,3 +192,3 @@ private wrapper;
     private isFocused;
-    constructor(selectionService: SelectionService, navigationService: NavigationService, wrapper: ElementRef, renderer: Renderer);
+    constructor(selectionService: SelectionService, navigationService: NavigationService, wrapper: ElementRef, renderer: Renderer, zone: NgZone);
     /**
@@ -194,0 +195,0 @@ * @hidden

dist/es/dropdownlist.component.js

 /* tslint:disable:max-line-length */
-import { Component, forwardRef, ElementRef, Input, Output, HostBinding, HostListener, EventEmitter, ContentChild, ViewChild, isDevMode, Renderer } from '@angular/core';
+import { Component, forwardRef, ElementRef, Input, Output, HostBinding, HostListener, EventEmitter, ContentChild, ViewChild, isDevMode, Renderer, NgZone } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -56,3 +56,3 @@ import { Observable } from 'rxjs/Observable';
 export var DropDownListComponent = (function () {
-    function DropDownListComponent(selectionService, navigationService, wrapper, renderer) {
+    function DropDownListComponent(selectionService, navigationService, wrapper, renderer, zone) {
         this._open = false;
@@ -120,2 +120,3 @@ /**
         this.renderer = renderer;
+        this._zone = zone;
         this.data = [];
@@ -300,3 +301,6 @@ this.subscribeEvents();
         if (this.open && this.filterInput) {
-            this.filterInput.nativeElement.focus();
+            var element_1 = this.filterInput.nativeElement;
+            this._zone.runOutsideAngular(function () {
+                setTimeout(function () { element_1.focus(); }); /* see https://github.com/telerik/kendo-angular2/issues/91 */
+            });
         }
@@ -320,13 +324,15 @@ };
             .subscribe(this.handleEnter.bind(this));
-        this.documentClick = Observable
-            .fromEvent(document, 'click')
-            .filter(function (event) {
-            return !(_this.wrapper !== event.target && _this.wrapper.contains(event.target));
+        this._zone.runOutsideAngular(function () {
+            _this.documentClick = Observable
+                .fromEvent(document, 'click')
+                .filter(function (event) {
+                return !(_this.wrapper !== event.target && _this.wrapper.contains(event.target));
+            });
+            _this.componentBlurredSubscription = _this.wrapperBlurred
+                .concatMap(function () { return Observable.interval(10).take(1).takeUntil(_this.filterFocused); })
+                .merge(_this.navigationService.tab, _this.documentClick)
+                .subscribe(function () { return _this._zone.run(function () {
+                _this.componentBlur();
+            }); });
         });
-        this.componentBlurredSubscription = this.wrapperBlurred
-            .concatMap(function () { return Observable.interval(10).take(1).takeUntil(_this.filterFocused); })
-            .merge(this.navigationService.tab, this.documentClick)
-            .subscribe(function () {
-            _this.componentBlur();
-        });
     };
@@ -350,4 +356,5 @@ DropDownListComponent.prototype.unsubscribeEvents = function () {
         }
-        this.selectionChange.emit(this.data[index]);
-        this.change(this.data[index]);
+        var dataItem = isPresent(this.data[index]) ? this.data[index] : this.defaultItem;
+        this.selectionChange.emit(dataItem);
+        this.change(dataItem);
     };
@@ -359,3 +366,3 @@ DropDownListComponent.prototype.handleItemSelect = function (event) {
         }
-        var dataItem = this.data[index] || this.defaultItem;
+        var dataItem = isPresent(this.data[index]) ? this.data[index] : this.defaultItem;
         if (this.open) {
@@ -595,3 +602,3 @@ this.value = this.valuePrimitive ? Util.getter(dataItem, this.valueField) : dataItem;
                     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  "
+                    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: value\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\"\n                        class=\"k-textbox\"\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  "
                 },] },
@@ -605,2 +612,3 @@ ];
         { type: Renderer, },
+        { type: NgZone, },
     ];
@@ -607,0 +615,0 @@ DropDownListComponent.propDecorators = {

dist/es/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\"\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"]}]}],"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"}]}}}}
+{"__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: value\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\"\n                        class=\"k-textbox\"\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"]}]}],"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"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"}]}],"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/dropdownlist.component.d.ts

@@ -1,2 +0,2 @@
-import { ElementRef, EventEmitter, OnDestroy, AfterViewChecked, Renderer } from '@angular/core';
+import { ElementRef, EventEmitter, OnDestroy, AfterViewChecked, Renderer, NgZone } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
@@ -186,2 +186,3 @@ import 'rxjs/add/observable/fromEvent';
     private renderer;
+    private _zone;
     private filterText;
@@ -191,3 +192,3 @@ private wrapper;
     private isFocused;
-    constructor(selectionService: SelectionService, navigationService: NavigationService, wrapper: ElementRef, renderer: Renderer);
+    constructor(selectionService: SelectionService, navigationService: NavigationService, wrapper: ElementRef, renderer: Renderer, zone: NgZone);
     /**
@@ -194,0 +195,0 @@ * @hidden

dist/npm/dropdownlist.component.js

@@ -57,3 +57,3 @@ /* tslint:disable:max-line-length */
 var DropDownListComponent = (function () {
-    function DropDownListComponent(selectionService, navigationService, wrapper, renderer) {
+    function DropDownListComponent(selectionService, navigationService, wrapper, renderer, zone) {
         this._open = false;
@@ -121,2 +121,3 @@ /**
         this.renderer = renderer;
+        this._zone = zone;
         this.data = [];
@@ -301,3 +302,6 @@ this.subscribeEvents();
         if (this.open && this.filterInput) {
-            this.filterInput.nativeElement.focus();
+            var element_1 = this.filterInput.nativeElement;
+            this._zone.runOutsideAngular(function () {
+                setTimeout(function () { element_1.focus(); }); /* see https://github.com/telerik/kendo-angular2/issues/91 */
+            });
         }
@@ -321,13 +325,15 @@ };
             .subscribe(this.handleEnter.bind(this));
-        this.documentClick = Observable_1.Observable
-            .fromEvent(document, 'click')
-            .filter(function (event) {
-            return !(_this.wrapper !== event.target && _this.wrapper.contains(event.target));
+        this._zone.runOutsideAngular(function () {
+            _this.documentClick = Observable_1.Observable
+                .fromEvent(document, 'click')
+                .filter(function (event) {
+                return !(_this.wrapper !== event.target && _this.wrapper.contains(event.target));
+            });
+            _this.componentBlurredSubscription = _this.wrapperBlurred
+                .concatMap(function () { return Observable_1.Observable.interval(10).take(1).takeUntil(_this.filterFocused); })
+                .merge(_this.navigationService.tab, _this.documentClick)
+                .subscribe(function () { return _this._zone.run(function () {
+                _this.componentBlur();
+            }); });
         });
-        this.componentBlurredSubscription = this.wrapperBlurred
-            .concatMap(function () { return Observable_1.Observable.interval(10).take(1).takeUntil(_this.filterFocused); })
-            .merge(this.navigationService.tab, this.documentClick)
-            .subscribe(function () {
-            _this.componentBlur();
-        });
     };
@@ -351,4 +357,5 @@ DropDownListComponent.prototype.unsubscribeEvents = function () {
         }
-        this.selectionChange.emit(this.data[index]);
-        this.change(this.data[index]);
+        var dataItem = util_1.isPresent(this.data[index]) ? this.data[index] : this.defaultItem;
+        this.selectionChange.emit(dataItem);
+        this.change(dataItem);
     };
@@ -360,3 +367,3 @@ DropDownListComponent.prototype.handleItemSelect = function (event) {
         }
-        var dataItem = this.data[index] || this.defaultItem;
+        var dataItem = util_1.isPresent(this.data[index]) ? this.data[index] : this.defaultItem;
         if (this.open) {
@@ -596,3 +603,3 @@ this.value = this.valuePrimitive ? kendo_dropdowns_common_1.DropDownsUtil.getter(dataItem, this.valueField) : dataItem;
                     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  "
+                    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: value\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\"\n                        class=\"k-textbox\"\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  "
                 },] },
@@ -606,2 +613,3 @@ ];
         { type: core_1.Renderer, },
+        { type: core_1.NgZone, },
     ];
@@ -608,0 +616,0 @@ DropDownListComponent.propDecorators = {

dist/npm/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\"\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"]}]}],"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"}]}}}}
+{"__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: value\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\"\n                        class=\"k-textbox\"\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"]}]}],"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"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"}]}],"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"}]}}}}

package.json

 {
   "name": "@progress/kendo-angular-dropdowns",
   "description": "Dropdowns Package for Angular 2",
-  "version": "0.18.1",
+  "version": "0.18.2",
   "publishConfig": {
@@ -6,0 +6,0 @@ "registry": "https://registry.npm.telerik.com"

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

413289

0.38%

Lines of code

6587

0.26%

No dependency changes