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

Comparing version 0.11.0 to 0.11.1

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

 import '@telerik/kendo-theme-default/styles/packages/dropdowns';
-import { ElementRef, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { ElementRef, EventEmitter, OnInit, OnDestroy, Renderer } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
@@ -18,5 +18,5 @@ import { SearchBarComponent } from './searchbar.component';
  *
- * @example <caption>Basic Usage</caption>
+ * @example
  * ```ts-preview
- * @Component({
+ * @@Component({
  * selector: 'my-app',
@@ -125,2 +125,3 @@ * template: `
     readonly widgetClasses: boolean;
+    isFocused: boolean;
     readonly widgetHeight: string;
@@ -147,4 +148,6 @@ readonly role: string;
     private popupWidth;
+    private renderer;
     private wrapper;
-    constructor(selectionService: SelectionService, navigationService: NavigationService, wrapper: ElementRef);
+    private _isFocused;
+    constructor(selectionService: SelectionService, navigationService: NavigationService, wrapper: ElementRef, renderer: Renderer);
     private handleItemChange(event);
@@ -176,2 +179,3 @@ private handleItemSelect(event);
     protected handleFilter(text: string): void;
+    protected handleFocus(): void;
     protected handleBlur(): void;
@@ -178,0 +182,0 @@ protected change(dataItem: any, isCustom?: boolean): void;

dist/npm/js/combobox.component.js

@@ -78,2 +78,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
 	var util_1 = __webpack_require__(17);
+	var navigation_action_1 = __webpack_require__(18);
 	/**
@@ -97,5 +98,5 @@ * @hidden
 	 *
-	 * @example <caption>Basic Usage</caption>
+	 * @example
 	 * ```ts-preview
-	 * @Component({
+	 * @@Component({
 	 * selector: 'my-app',
@@ -113,3 +114,3 @@ * template: `
 	var ComboBoxComponent = (function () {
-	    function ComboBoxComponent(selectionService, navigationService, wrapper) {
+	    function ComboBoxComponent(selectionService, navigationService, wrapper, renderer) {
 	        var _this = this;
@@ -156,2 +157,3 @@ this.text = null;
 	        this.onTouchedCallback = function (_) { };
+	        this._isFocused = false;
 	        this.selectionService = selectionService;
@@ -165,2 +167,3 @@ this.changeSubscribtion = this.selectionService.onChange.subscribe(this.handleItemChange.bind(this));
 	        this.enterSubscription = this.navigationService.enter.subscribe(this.handleEnter.bind(this));
+	        this.renderer = renderer;
 	        this.wrapper = wrapper.nativeElement;
@@ -211,2 +214,12 @@ }
 	    });
+	    Object.defineProperty(ComboBoxComponent.prototype, "isFocused", {
+	        get: function () {
+	            return this._isFocused;
+	        },
+	        set: function (isFocused) {
+	            this._isFocused = isFocused;
+	        },
+	        enumerable: true,
+	        configurable: true
+	    });
 	    Object.defineProperty(ComboBoxComponent.prototype, "widgetHeight", {
@@ -396,7 +409,6 @@ get: function () {
 	    ComboBoxComponent.prototype.handleNavigate = function (event) {
-	        var action;
 	        if (this.disabled) {
 	            return;
 	        }
-	        action = this.navigationService.process({
+	        var action = this.navigationService.process({
 	            keyCode: event.keyCode,
@@ -408,6 +420,5 @@ altKey: event.altKey,
 	        });
-	        if (action) {
-	            if (action !== "enter" || (action === "enter" && this.open)) {
-	                event.preventDefault();
-	            }
+	        if (action !== navigation_action_1.NavigationAction.Undefined
+	            && (action !== navigation_action_1.NavigationAction.Enter || (action === navigation_action_1.NavigationAction.Enter && this.open))) {
+	            event.preventDefault();
 	        }
@@ -430,5 +441,9 @@ };
 	    };
+	    ComboBoxComponent.prototype.handleFocus = function () {
+	        this.isFocused = true;
+	    };
 	    ComboBoxComponent.prototype.handleBlur = function () {
 	        if (this.text === null) {
 	            this.open = false;
+	            this.isFocused = false;
 	            return;
@@ -444,2 +459,3 @@ }
 	        this.open = false;
+	        this.isFocused = false;
 	    };
@@ -567,2 +583,6 @@ ComboBoxComponent.prototype.change = function (dataItem, isCustom) {
 	    __decorate([
+	        core_1.HostBinding('class.k-state-focused'), 
+	        __metadata('design:type', Boolean)
+	    ], ComboBoxComponent.prototype, "isFocused", null);
+	    __decorate([
 	        core_1.HostBinding('style.max-height'), 
@@ -603,5 +623,5 @@ __metadata('design:type', String)
 	            selector: 'kendo-combobox',
-	            template: "\n        <span #anchor [ngClass]=\"setHeaderClasses()\" unselectable=\"on\">\n            <kendo-searchbar #searchbar\n                [value]=\"text\"\n                (onNavigate)=\"handleNavigate($event)\"\n                (valueChange)=\"handleSearchBarChange($event)\"\n                (onFilter)=\"handleFilter($event)\"\n                (onBlur)=\"handleBlur($event)\"\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                (onNavigate)=\"handleNavigate($event)\"\n                (valueChange)=\"handleSearchBarChange($event)\"\n                (onFilter)=\"handleFilter($event)\"\n                (onBlur)=\"handleBlur($event)\"\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  "
 	        }), 
-	        __metadata('design:paramtypes', [selection_service_1.SelectionService, navigation_service_1.NavigationService, core_1.ElementRef])
+	        __metadata('design:paramtypes', [selection_service_1.SelectionService, navigation_service_1.NavigationService, core_1.ElementRef, core_1.Renderer])
 	    ], ComboBoxComponent);
@@ -689,4 +709,10 @@ return ComboBoxComponent;
 
+/***/ },
+/* 18 */
+/***/ function(module, exports) {
+
+	module.exports = require("./navigation-action");
+
 /***/ }
 /******/ ])));
 //# sourceMappingURL=combobox.component.js.map

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__(18);
+	module.exports = __webpack_require__(19);
 
@@ -61,3 +61,3 @@
 
-/***/ 18:
+/***/ 19:
 /***/ function(module, exports, __webpack_require__) {
@@ -76,5 +76,5 @@
 	var core_1 = __webpack_require__(7);
-	var combobox_component_1 = __webpack_require__(19);
-	var shared_module_1 = __webpack_require__(20);
-	var shared_directives_module_1 = __webpack_require__(21);
+	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 = [
@@ -113,3 +113,3 @@ combobox_component_1.ComboBoxComponent
 
-/***/ 19:
+/***/ 20:
 /***/ function(module, exports) {
@@ -121,3 +121,3 @@
 
-/***/ 20:
+/***/ 21:
 /***/ function(module, exports) {
@@ -129,3 +129,3 @@
 
-/***/ 21:
+/***/ 22:
 /***/ function(module, exports) {
@@ -132,0 +132,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__(22);
+	module.exports = __webpack_require__(23);
 
@@ -54,3 +54,3 @@
 
-/***/ 22:
+/***/ 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 } from '@angular/core';
+import { ElementRef, EventEmitter, OnInit, OnDestroy, AfterViewChecked, Renderer } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
@@ -18,5 +18,5 @@ import { IPopupSettings } from './popup-settings';
  *
- * @example <caption>Basic Usage</caption>
+ * @example
  * ```ts-preview
- * @Component({
+ * @@Component({
  * selector: 'my-app',
@@ -132,3 +132,4 @@ * template: `
     protected filterInput: ElementRef;
-    protected blur(event: KeyboardEvent): void;
+    protected blur(): void;
+    protected focus(): void;
     protected keydown(event: KeyboardEvent): void;
@@ -138,2 +139,3 @@ protected keypress(event: KeyboardEvent): void;
     readonly widgetClasses: boolean;
+    isFocused: boolean;
     readonly role: string;
@@ -161,6 +163,13 @@ readonly widgetTabIndex: number;
     private closeSubscription;
+    private documentClick;
+    private filterFocused;
+    private wrapperBlurred;
+    private componentBlurredSubscription;
+    private renderer;
     private filterText;
     private wrapper;
     private popupWidth;
-    constructor(selectionService: SelectionService, navigationService: NavigationService, wrapper: ElementRef);
+    private _isFocused;
+    constructor(selectionService: SelectionService, navigationService: NavigationService, wrapper: ElementRef, renderer: Renderer);
+    onFilterFocus(): void;
     ngAfterViewChecked(): void;
@@ -194,3 +203,3 @@ private handleItemChange(event);
     protected getHeight(): any;
-    protected onBlur(event: any): void;
+    protected componentBlur(): void;
     protected onMouseDown(event: any): void;
@@ -197,0 +206,0 @@ protected onKeyPress(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__(23);
+	module.exports = __webpack_require__(24);
 
@@ -124,3 +124,8 @@
 /***/ },
-/* 18 */,
+/* 18 */
+/***/ function(module, exports) {
+
+	module.exports = require("./navigation-action");
+
+/***/ },
 /* 19 */,
@@ -130,3 +135,4 @@ /* 20 */,
 /* 22 */,
-/* 23 */
+/* 23 */,
+/* 24 */
 /***/ function(module, exports, __webpack_require__) {
@@ -148,3 +154,4 @@
 	var forms_1 = __webpack_require__(8);
-	var keys_1 = __webpack_require__(24);
+	var Observable_1 = __webpack_require__(25);
+	var keys_1 = __webpack_require__(26);
 	var util_1 = __webpack_require__(17);
@@ -156,5 +163,6 @@ var kendo_dropdowns_common_1 = __webpack_require__(10);
 	var item_template_directive_1 = __webpack_require__(11);
-	var value_template_directive_1 = __webpack_require__(25);
+	var value_template_directive_1 = __webpack_require__(27);
 	var header_template_directive_1 = __webpack_require__(12);
 	var footer_template_directive_1 = __webpack_require__(13);
+	var navigation_action_1 = __webpack_require__(18);
 	/**
@@ -178,5 +186,5 @@ * @hidden
 	 *
-	 * @example <caption>Basic Usage</caption>
+	 * @example
 	 * ```ts-preview
-	 * @Component({
+	 * @@Component({
 	 * selector: 'my-app',
@@ -194,3 +202,3 @@ * template: `
 	var DropDownListComponent = (function () {
-	    function DropDownListComponent(selectionService, navigationService, wrapper) {
+	    function DropDownListComponent(selectionService, navigationService, wrapper, renderer) {
 	        var _this = this;
@@ -258,3 +266,6 @@ this._open = false;
 	        this.onChangeCallback = function (value) { };
+	        this.filterFocused = new core_1.EventEmitter();
+	        this.wrapperBlurred = new core_1.EventEmitter();
 	        this.filterText = "";
+	        this._isFocused = false;
 	        this.selectionService = selectionService;
@@ -266,5 +277,20 @@ this.changeSubscribtion = this.selectionService.onChange.subscribe(this.handleItemChange.bind(this));
 	        this.openSubscribtion = this.navigationService.open.subscribe(function () { return _this.open = true; });
-	        this.closeSubscription = this.navigationService.close.subscribe(function () { return _this.open = false; });
+	        this.closeSubscription = this.navigationService.close.subscribe(function () {
+	            _this.open = false;
+	            _this.renderer.invokeElementMethod(_this.wrapper, "focus");
+	        });
 	        this.enterSubscription = this.navigationService.enter.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.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();
+	        });
 	        this.wrapper = wrapper.nativeElement;
+	        this.renderer = renderer;
 	    }
@@ -307,11 +333,13 @@ Object.defineProperty(DropDownListComponent.prototype, "open", {
 	    });
-	    DropDownListComponent.prototype.blur = function (event) {
-	        this.onBlur(event);
+	    DropDownListComponent.prototype.blur = function () {
+	        this.wrapperBlurred.emit();
 	    };
+	    DropDownListComponent.prototype.focus = function () {
+	        this.isFocused = true;
+	    };
 	    DropDownListComponent.prototype.keydown = function (event) {
-	        var action;
 	        if (this.disabled) {
 	            return;
 	        }
-	        action = this.navigationService.process({
+	        var action = this.navigationService.process({
 	            keyCode: event.keyCode,
@@ -323,6 +351,5 @@ altKey: event.altKey,
 	        });
-	        if (action) {
-	            if (action !== "enter" || (action === "enter" && this.open)) {
-	                event.preventDefault();
-	            }
+	        if (action !== navigation_action_1.NavigationAction.Undefined
+	            && (action !== navigation_action_1.NavigationAction.Enter || (action === navigation_action_1.NavigationAction.Enter && this.open))) {
+	            event.preventDefault();
 	        }
@@ -335,2 +362,5 @@ };
 	        this.open = !this.open;
+	        if (!this.open) {
+	            this.renderer.invokeElementMethod(this.wrapper, "focus");
+	        }
 	    };
@@ -344,2 +374,12 @@ Object.defineProperty(DropDownListComponent.prototype, "widgetClasses", {
 	    });
+	    Object.defineProperty(DropDownListComponent.prototype, "isFocused", {
+	        get: function () {
+	            return this._isFocused;
+	        },
+	        set: function (isFocused) {
+	            this._isFocused = isFocused;
+	        },
+	        enumerable: true,
+	        configurable: true
+	    });
 	    Object.defineProperty(DropDownListComponent.prototype, "role", {
@@ -394,2 +434,5 @@ get: function () {
 	    });
+	    DropDownListComponent.prototype.onFilterFocus = function () {
+	        this.filterFocused.emit();
+	    };
 	    DropDownListComponent.prototype.ngAfterViewChecked = function () {
@@ -426,2 +469,3 @@ if (this.open && this.filterInput) {
 	            this.change(this.data[this.selectionService.focused]);
+	            this.renderer.invokeElementMethod(this.wrapper, "focus");
 	        }
@@ -433,8 +477,9 @@ };
 	    DropDownListComponent.prototype.ngOnDestroy = function () {
-	        if (this.changeSubscribtion) {
-	            this.changeSubscribtion.unsubscribe();
-	        }
-	        if (this.selectSubscribtion) {
-	            this.selectSubscribtion.unsubscribe();
-	        }
+	        this.changeSubscribtion.unsubscribe();
+	        this.selectSubscribtion.unsubscribe();
+	        this.navigationSubscribtion.unsubscribe();
+	        this.openSubscribtion.unsubscribe();
+	        this.closeSubscription.unsubscribe();
+	        this.enterSubscription.unsubscribe();
+	        this.componentBlurredSubscription.unsubscribe();
 	    };
@@ -520,3 +565,3 @@ DropDownListComponent.prototype.ngOnChanges = function (changes) {
 	    };
-	    DropDownListComponent.prototype.onBlur = function (event) {
+	    DropDownListComponent.prototype.componentBlur = function () {
 	        if (this._previousValue !== this.value) {
@@ -526,4 +571,6 @@ this.change(this.dataItem);
 	        else {
+	            this.open = false;
 	        }
 	        this.onTouchedCallback();
+	        this.isFocused = false;
 	    };
@@ -727,6 +774,12 @@ DropDownListComponent.prototype.onMouseDown = function (event) {
 	        __metadata('design:type', Function), 
-	        __metadata('design:paramtypes', [KeyboardEvent]), 
+	        __metadata('design:paramtypes', []), 
 	        __metadata('design:returntype', void 0)
 	    ], DropDownListComponent.prototype, "blur", null);
 	    __decorate([
+	        core_1.HostListener('focus', ['$event']), 
+	        __metadata('design:type', Function), 
+	        __metadata('design:paramtypes', []), 
+	        __metadata('design:returntype', void 0)
+	    ], DropDownListComponent.prototype, "focus", null);
+	    __decorate([
 	        core_1.HostListener('keydown', ['$event']), 
@@ -756,2 +809,6 @@ __metadata('design:type', Function),
 	    __decorate([
+	        core_1.HostBinding('class.k-state-focused'), 
+	        __metadata('design:type', Boolean)
+	    ], DropDownListComponent.prototype, "isFocused", null);
+	    __decorate([
 	        core_1.HostBinding('attr.role'), 
@@ -788,5 +845,5 @@ __metadata('design:type', String)
 	            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 [(ngModel)]=\"filterText\" [ngClass]=\"{ 'k-textbox': true }\" (input)=\"handleFilter($event)\" />\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\" [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  "
 	        }), 
-	        __metadata('design:paramtypes', [selection_service_1.SelectionService, navigation_service_1.NavigationService, core_1.ElementRef])
+	        __metadata('design:paramtypes', [selection_service_1.SelectionService, navigation_service_1.NavigationService, core_1.ElementRef, core_1.Renderer])
 	    ], DropDownListComponent);
@@ -799,9 +856,15 @@ return DropDownListComponent;
 /***/ },
-/* 24 */
+/* 25 */
 /***/ function(module, exports) {
 
+	module.exports = require("rxjs/Observable");
+
+/***/ },
+/* 26 */
+/***/ function(module, exports) {
+
 	module.exports = require("./common/keys");
 
 /***/ },
-/* 25 */
+/* 27 */
 /***/ function(module, exports) {
@@ -808,0 +871,0 @@

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__(26);
+	module.exports = __webpack_require__(28);
 
@@ -61,3 +61,3 @@
 
-/***/ 20:
+/***/ 21:
 /***/ function(module, exports) {
@@ -69,3 +69,3 @@
 
-/***/ 21:
+/***/ 22:
 /***/ function(module, exports) {
@@ -77,3 +77,3 @@
 
-/***/ 25:
+/***/ 27:
 /***/ function(module, exports) {
@@ -85,3 +85,3 @@
 
-/***/ 26:
+/***/ 28:
 /***/ function(module, exports, __webpack_require__) {
@@ -100,6 +100,6 @@
 	var core_1 = __webpack_require__(7);
-	var dropdownlist_component_1 = __webpack_require__(27);
-	var value_template_directive_1 = __webpack_require__(25);
-	var shared_module_1 = __webpack_require__(20);
-	var shared_directives_module_1 = __webpack_require__(21);
+	var dropdownlist_component_1 = __webpack_require__(29);
+	var value_template_directive_1 = __webpack_require__(27);
+	var shared_module_1 = __webpack_require__(21);
+	var shared_directives_module_1 = __webpack_require__(22);
 	var DROPDOWNLIST_DIRECTIVES = [
@@ -140,3 +140,3 @@ dropdownlist_component_1.DropDownListComponent,
 
-/***/ 27:
+/***/ 29:
 /***/ function(module, exports) {
@@ -143,0 +143,0 @@

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__(28);
+	module.exports = __webpack_require__(30);
 
@@ -61,3 +61,3 @@
 
-/***/ 28:
+/***/ 30:
 /***/ function(module, exports, __webpack_require__) {
@@ -76,4 +76,4 @@
 	var core_1 = __webpack_require__(7);
-	var combobox_module_1 = __webpack_require__(29);
-	var dropdownlist_module_1 = __webpack_require__(30);
+	var combobox_module_1 = __webpack_require__(31);
+	var dropdownlist_module_1 = __webpack_require__(32);
 	/**
@@ -107,3 +107,3 @@ * The exported package module.
 
-/***/ 29:
+/***/ 31:
 /***/ function(module, exports) {
@@ -115,3 +115,3 @@
 
-/***/ 30:
+/***/ 32:
 /***/ function(module, exports) {
@@ -118,0 +118,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__(31);
+	module.exports = __webpack_require__(33);
 
@@ -61,3 +61,3 @@
 
-/***/ 31:
+/***/ 33:
 /***/ function(module, exports, __webpack_require__) {
@@ -64,0 +64,0 @@

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__(32);
+	module.exports = __webpack_require__(34);
 
@@ -96,3 +96,3 @@
 
-/***/ 32:
+/***/ 34:
 /***/ function(module, exports, __webpack_require__) {
@@ -113,3 +113,3 @@
 	var kendo_dropdowns_common_1 = __webpack_require__(10);
-	var list_item_directive_1 = __webpack_require__(33);
+	var list_item_directive_1 = __webpack_require__(35);
 	var item_template_directive_1 = __webpack_require__(11);
@@ -242,3 +242,3 @@ var util_1 = __webpack_require__(17);
 
-/***/ 33:
+/***/ 35:
 /***/ function(module, exports) {
@@ -245,0 +245,0 @@

dist/npm/js/main.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__(34);
+	module.exports = __webpack_require__(36);
 
@@ -75,3 +75,3 @@
 
-/***/ 19:
+/***/ 20:
 /***/ function(module, exports) {
@@ -83,3 +83,3 @@
 
-/***/ 25:
+/***/ 27:
 /***/ function(module, exports) {
@@ -91,3 +91,3 @@
 
-/***/ 27:
+/***/ 29:
 /***/ function(module, exports) {
@@ -99,9 +99,9 @@
 
-/***/ 34:
+/***/ 36:
 /***/ function(module, exports, __webpack_require__) {
 
 	"use strict";
-	var combobox_component_1 = __webpack_require__(19);
+	var combobox_component_1 = __webpack_require__(20);
 	exports.ComboBoxComponent = combobox_component_1.ComboBoxComponent;
-	var dropdownlist_component_1 = __webpack_require__(27);
+	var dropdownlist_component_1 = __webpack_require__(29);
 	exports.DropDownListComponent = dropdownlist_component_1.DropDownListComponent;
@@ -114,5 +114,5 @@ var item_template_directive_1 = __webpack_require__(11);
 	exports.FooterTemplateDirective = footer_template_directive_1.FooterTemplateDirective;
-	var value_template_directive_1 = __webpack_require__(25);
+	var value_template_directive_1 = __webpack_require__(27);
 	exports.ValueTemplateDirective = value_template_directive_1.ValueTemplateDirective;
-	var dropdowns_module_1 = __webpack_require__(35);
+	var dropdowns_module_1 = __webpack_require__(37);
 	exports.DropDownsModule = dropdowns_module_1.DropDownsModule;
@@ -125,3 +125,3 @@ //export { ComboBoxModule } from './combobox.module';
 
-/***/ 35:
+/***/ 37:
 /***/ function(module, exports) {
@@ -128,0 +128,0 @@

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__(36);
+	module.exports = __webpack_require__(39);
 
@@ -61,3 +61,3 @@
 
-/***/ 36:
+/***/ 39:
 /***/ function(module, exports, __webpack_require__) {
@@ -64,0 +64,0 @@

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

 import { EventEmitter } from '@angular/core';
+import { NavigationAction } from './navigation-action';
 import { NavigationConfig } from './navigation-config';
@@ -11,6 +12,7 @@ /**
     enter: EventEmitter<any>;
+    tab: EventEmitter<any>;
     private useLeftRightArrows;
     constructor(config: NavigationConfig);
-    process(args: any): string;
+    process(args: any): NavigationAction;
     private next(args);
 }

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__(37);
+	module.exports = __webpack_require__(40);
 
@@ -75,5 +75,12 @@
 
-/***/ 24:
+/***/ 18:
 /***/ function(module, exports) {
 
+	module.exports = require("./navigation-action");
+
+/***/ },
+
+/***/ 26:
+/***/ function(module, exports) {
+
 	module.exports = require("./common/keys");
@@ -83,3 +90,3 @@
 
-/***/ 37:
+/***/ 40:
 /***/ function(module, exports, __webpack_require__) {
@@ -102,4 +109,6 @@
 	var util_1 = __webpack_require__(17);
-	var keys_1 = __webpack_require__(24);
+	var keys_1 = __webpack_require__(26);
+	var navigation_action_1 = __webpack_require__(18);
 	var navigation_config_1 = __webpack_require__(16);
+	var MIN_INDEX = 0;
 	/**
@@ -114,2 +123,3 @@ * @hidden
 	        this.enter = new core_1.EventEmitter();
+	        this.tab = new core_1.EventEmitter();
 	        this.useLeftRightArrows = config.useLeftRightArrows;
@@ -120,32 +130,33 @@ }
 	        var index;
-	        var action;
+	        var action = navigation_action_1.NavigationAction.Undefined;
 	        if (args.altKey && keyCode === keys_1.Keys.down) {
-	            action = "open";
+	            action = navigation_action_1.NavigationAction.Open;
 	        }
 	        else if (args.altKey && keyCode === keys_1.Keys.up) {
-	            action = "close";
+	            action = navigation_action_1.NavigationAction.Close;
 	        }
 	        else if (keyCode === keys_1.Keys.enter || (keyCode === keys_1.Keys.esc)) {
-	            action = "enter";
+	            action = navigation_action_1.NavigationAction.Enter;
 	        }
 	        else if (keyCode === keys_1.Keys.tab) {
+	            action = navigation_action_1.NavigationAction.Tab;
 	        }
 	        else if (keyCode === keys_1.Keys.up || (this.useLeftRightArrows && keyCode === keys_1.Keys.left)) {
 	            index = this.next({ current: args.current, start: args.max, end: args.min, step: -1 });
-	            action = "navigate";
+	            action = navigation_action_1.NavigationAction.Navigate;
 	        }
 	        else if (keyCode === keys_1.Keys.down || (this.useLeftRightArrows && keyCode === keys_1.Keys.right)) {
 	            index = this.next({ current: args.current, start: args.min, end: args.max, step: 1 });
-	            action = "navigate";
+	            action = navigation_action_1.NavigationAction.Navigate;
 	        }
 	        else if (keyCode === keys_1.Keys.home) {
-	            index = args.min;
-	            action = "navigate";
+	            index = MIN_INDEX;
+	            action = navigation_action_1.NavigationAction.Navigate;
 	        }
 	        else if (keyCode === keys_1.Keys.end) {
 	            index = args.max;
-	            action = "navigate";
+	            action = navigation_action_1.NavigationAction.Navigate;
 	        }
-	        if (action) {
-	            this[action].emit(index);
+	        if (action !== navigation_action_1.NavigationAction.Undefined) {
+	            this[navigation_action_1.NavigationAction[action].toLowerCase()].emit(index);
 	            return action;
@@ -152,0 +163,0 @@ }

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__(38);
+	module.exports = __webpack_require__(41);
 
@@ -54,3 +54,3 @@
 
-/***/ 38:
+/***/ 41:
 /***/ function(module, exports) {
@@ -57,0 +57,0 @@

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__(39);
+	module.exports = __webpack_require__(42);
 
@@ -68,3 +68,3 @@
 
-/***/ 24:
+/***/ 26:
 /***/ function(module, exports) {
@@ -76,3 +76,3 @@
 
-/***/ 39:
+/***/ 42:
 /***/ function(module, exports, __webpack_require__) {
@@ -92,3 +92,3 @@
 	var core_1 = __webpack_require__(7);
-	var keys_1 = __webpack_require__(24);
+	var keys_1 = __webpack_require__(26);
 	/**
@@ -142,2 +142,3 @@ * @hidden
 	    SearchBarComponent.prototype.handleFocus = function (event) {
+	        this.onFocus.emit(event);
 	        this.selectionChangeListener = this.renderer.listenGlobal('document', 'selectionchange', this.onSelectionChange.bind(this));
@@ -144,0 +145,0 @@ };

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__(40);
+	module.exports = __webpack_require__(43);
 
@@ -75,3 +75,3 @@
 
-/***/ 40:
+/***/ 43:
 /***/ function(module, exports, __webpack_require__) {
@@ -78,0 +78,0 @@

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__(41);
+	module.exports = __webpack_require__(44);
 
@@ -68,3 +68,3 @@
 
-/***/ 41:
+/***/ 44:
 /***/ function(module, exports, __webpack_require__) {
@@ -71,0 +71,0 @@

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__(42);
+	module.exports = __webpack_require__(45);
 
@@ -82,3 +82,3 @@
 
-/***/ 42:
+/***/ 45:
 /***/ function(module, exports, __webpack_require__) {
@@ -85,0 +85,0 @@

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__(43);
+	module.exports = __webpack_require__(46);
 
@@ -75,3 +75,3 @@
 
-/***/ 21:
+/***/ 22:
 /***/ function(module, exports) {
@@ -83,3 +83,3 @@
 
-/***/ 33:
+/***/ 35:
 /***/ function(module, exports) {
@@ -91,3 +91,3 @@
 
-/***/ 43:
+/***/ 46:
 /***/ function(module, exports, __webpack_require__) {
@@ -106,11 +106,11 @@
 	var core_1 = __webpack_require__(7);
-	var common_1 = __webpack_require__(44);
+	var common_1 = __webpack_require__(47);
 	var forms_1 = __webpack_require__(8);
-	var list_component_1 = __webpack_require__(45);
+	var list_component_1 = __webpack_require__(48);
 	var searchbar_component_1 = __webpack_require__(9);
-	var kendo_angular_popup_1 = __webpack_require__(46);
-	var shared_directives_module_1 = __webpack_require__(21);
-	var list_item_directive_1 = __webpack_require__(33);
-	var selectable_directive_1 = __webpack_require__(47);
-	var template_context_directive_1 = __webpack_require__(48);
+	var kendo_angular_popup_1 = __webpack_require__(49);
+	var shared_directives_module_1 = __webpack_require__(22);
+	var list_item_directive_1 = __webpack_require__(35);
+	var selectable_directive_1 = __webpack_require__(50);
+	var template_context_directive_1 = __webpack_require__(51);
 	var INTERNAL_DIRECTIVES = [
@@ -144,3 +144,3 @@ list_component_1.ListComponent,
 
-/***/ 44:
+/***/ 47:
 /***/ function(module, exports) {
@@ -152,3 +152,3 @@
 
-/***/ 45:
+/***/ 48:
 /***/ function(module, exports) {
@@ -160,3 +160,3 @@
 
-/***/ 46:
+/***/ 49:
 /***/ function(module, exports) {
@@ -168,3 +168,3 @@
 
-/***/ 47:
+/***/ 50:
 /***/ function(module, exports) {
@@ -176,3 +176,3 @@
 
-/***/ 48:
+/***/ 51:
 /***/ function(module, exports) {
@@ -179,0 +179,0 @@

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__(49);
+	module.exports = __webpack_require__(52);
 
@@ -61,3 +61,3 @@
 
-/***/ 49:
+/***/ 52:
 /***/ function(module, exports, __webpack_require__) {
@@ -64,0 +64,0 @@

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__(50);
+	module.exports = __webpack_require__(53);
 
@@ -61,3 +61,3 @@
 
-/***/ 50:
+/***/ 53:
 /***/ function(module, exports, __webpack_require__) {
@@ -64,0 +64,0 @@

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__(51);
+	module.exports = __webpack_require__(54);
 
@@ -61,3 +61,3 @@
 
-/***/ 51:
+/***/ 54:
 /***/ function(module, exports, __webpack_require__) {
@@ -64,0 +64,0 @@

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__(52);
+	module.exports = __webpack_require__(55);
 
@@ -61,3 +61,3 @@
 
-/***/ 52:
+/***/ 55:
 /***/ function(module, exports, __webpack_require__) {
@@ -64,0 +64,0 @@

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__(53);
+	module.exports = __webpack_require__(56);
 
@@ -61,3 +61,3 @@
 
-/***/ 53:
+/***/ 56:
 /***/ function(module, exports, __webpack_require__) {
@@ -64,0 +64,0 @@

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__(54);
+	module.exports = __webpack_require__(57);
 
@@ -54,3 +54,3 @@
 
-/***/ 54:
+/***/ 57:
 /***/ function(module, exports) {
@@ -57,0 +57,0 @@

package.json

 {
   "name": "@progress/kendo-angular-dropdowns",
   "description": "Dropdowns Package for Angular 2",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "publishConfig": {
@@ -11,2 +11,5 @@ "registry": "https://registry.npm.telerik.com"
   "author": "Progress",
+  "@progress": {
+    "friendlyName": "DropDowns"
+  },
   "license": "SEE LICENSE in LICENSE.md",
@@ -33,3 +36,4 @@ "scripts": {
     "@angular/core": "~2.0.0",
-    "@angular/forms": "~2.0.0"
+    "@angular/forms": "~2.0.0",
+    "rxjs": "~5.0.0-X"
   },
@@ -36,0 +40,0 @@ "dependencies": {

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

613557

increased by2.55%

Number of package files

81

increased by3.85%

Lines of code

5725

increased by3.23%

Worsened metrics

Dependency count

6

increased by20%

No dependency changes