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

Comparing version 0.20.3 to 0.21.0

dist/es/combobox.component.d.ts

@@ -7,3 +7,3 @@ import { ElementRef, EventEmitter, OnDestroy, Renderer } from '@angular/core';
 import { FooterTemplateDirective } from './templates/footer-template.directive';
-import { IPopupSettings } from './popup-settings';
+import { PopupSettings } from './popup-settings';
 import { SelectionService } from './selection.service';
@@ -90,6 +90,8 @@ import { NavigationService } from './navigation.service';
      * The available options are:
+     * - `animation: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
      * - `width: Number`—Sets the width of the popup container. By default, the width of the host element is used.
      * - `height: Number`—Sets the height of the popup container. By default, the height is 200px.
+     * - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
      */
-    popupSettings: IPopupSettings;
+    popupSettings: PopupSettings;
     /**
@@ -96,0 +98,0 @@ * @hidden

dist/es/combobox.component.js

@@ -76,6 +76,8 @@ /* tslint:disable:no-null-keyword */
          * The available options are:
+         * - `animation: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
          * - `width: Number`—Sets the width of the popup container. By default, the width of the host element is used.
          * - `height: Number`—Sets the height of the popup container. By default, the height is 200px.
+         * - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
          */
-        this.popupSettings = { height: 200 };
+        this.popupSettings = { height: 200, animate: true };
         /**
@@ -554,6 +556,7 @@ * @hidden
     ComboBoxComponent.prototype.setListContainerClasses = function () {
-        return {
-            'k-list-container': true,
-            'k-reset': true
-        };
+        var containerClasses = ['k-list-container', 'k-reset'];
+        if (this.popupSettings.popupClass) {
+            containerClasses.push(this.popupSettings.popupClass);
+        }
+        return containerClasses;
     };
@@ -565,3 +568,3 @@ ComboBoxComponent.decorators = [
                     exportAs: 'kendoComboBox',
-                    template: "\n        <span #anchor [ngClass]=\"setHeaderClasses()\" unselectable=\"on\">\n            <kendo-searchbar #searchbar\n                [userInput]=\"text\"\n                [suggestedText]=\"getSuggestion()\"\n                [disabled]=\"disabled\"\n                [placeholder]=\"placeholder\"\n                (onNavigate)=\"handleNavigate($event)\"\n                (valueChange)=\"searchBarChange($event)\"\n                (onBlur)=\"handleBlur()\"\n                (onFocus)=\"handleFocus()\"\n            ></kendo-searchbar>\n            <span\n                 [ngClass]=\"{ 'k-select': true }\"\n                 (click)=\"iconClick()\"\n                 (mousedown)=\"$event.preventDefault()\"\n                 unselectable=\"on\">\n                 <span [ngClass]=\"{\n                     'k-icon': true,\n                     'k-i-arrow-s': true\n                 }\"></span>\n        </span>\n        <kendo-popup *ngIf=\"open\"\n            [anchor]=\"anchor\"\n            [popupClass]=\"setListContainerClasses()\"\n            [style.width]=\"popupWidth\"\n            (anchorViewportLeave)=\"open=false\"\n            (mousedown)=\"$event.preventDefault()\">\n            <!--header template-->\n            <template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </template>\n            <!--list-->\n            <kendo-list\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [template]=\"template\"\n                [height]=\"getHeight()\"\n                [show]=\"open\"\n            >\n            </kendo-list>\n            <!--footer template-->\n            <template *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate.templateRef\n                }\">\n            </template>\n        </kendo-popup>\n  "
+                    template: "\n        <span #anchor [ngClass]=\"setHeaderClasses()\" unselectable=\"on\">\n            <kendo-searchbar #searchbar\n                [userInput]=\"text\"\n                [suggestedText]=\"getSuggestion()\"\n                [disabled]=\"disabled\"\n                [placeholder]=\"placeholder\"\n                (onNavigate)=\"handleNavigate($event)\"\n                (valueChange)=\"searchBarChange($event)\"\n                (onBlur)=\"handleBlur()\"\n                (onFocus)=\"handleFocus()\"\n            ></kendo-searchbar>\n            <span\n                 [ngClass]=\"{ 'k-select': true }\"\n                 (click)=\"iconClick()\"\n                 (mousedown)=\"$event.preventDefault()\"\n                 unselectable=\"on\">\n                 <span [ngClass]=\"{\n                     'k-icon': true,\n                     'k-i-arrow-s': true\n                 }\"></span>\n        </span>\n        <kendo-popup *ngIf=\"open\"\n            [anchor]=\"anchor\"\n            [animate]=\"popupSettings.animate\"\n            [popupClass]=\"setListContainerClasses()\"\n            [style.width]=\"popupWidth\"\n            (anchorViewportLeave)=\"open=false\"\n            (mousedown)=\"$event.preventDefault()\">\n            <!--header template-->\n            <template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </template>\n            <!--list-->\n            <kendo-list\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [template]=\"template\"\n                [height]=\"getHeight()\"\n                [show]=\"open\"\n            >\n            </kendo-list>\n            <!--footer template-->\n            <template *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate.templateRef\n                }\">\n            </template>\n        </kendo-popup>\n  "
                 },] },
@@ -568,0 +571,0 @@ ];

dist/es/combobox.component.metadata.json

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

dist/es/dropdownlist.component.d.ts

@@ -10,3 +10,3 @@ import { ElementRef, EventEmitter, OnDestroy, AfterViewChecked, Renderer, NgZone } from '@angular/core';
 import 'rxjs/add/operator/merge';
-import { IPopupSettings } from './popup-settings';
+import { PopupSettings } from './popup-settings';
 import { SelectionService } from './selection.service';
@@ -73,6 +73,8 @@ import { NavigationService } from './navigation.service';
      * The available options are:
+     * - `animation: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
      * - `width: Number`—Sets the width of the popup container. By default, the width of the host element is used.
      * - `height: Number`—Sets the height of the popup container. By default, the height is 200px.
+     * - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
      */
-    popupSettings: IPopupSettings;
+    popupSettings: PopupSettings;
     /**
@@ -79,0 +81,0 @@ * Sets the text of the default empty item. The type of the defined value has to match the data type.

dist/es/dropdownlist.component.js

@@ -62,6 +62,8 @@ /* tslint:disable:max-line-length */
          * The available options are:
+         * - `animation: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
          * - `width: Number`—Sets the width of the popup container. By default, the width of the host element is used.
          * - `height: Number`—Sets the height of the popup container. By default, the height is 200px.
+         * - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
          */
-        this.popupSettings = { height: 200 };
+        this.popupSettings = { height: 200, animate: true };
         /**
@@ -427,6 +429,7 @@ * Sets the disabled state of the component.
     DropDownListComponent.prototype.setListContainerClasses = function () {
-        return {
-            'k-list-container': true,
-            'k-reset': true
-        };
+        var containerClasses = ['k-list-container', 'k-reset'];
+        if (this.popupSettings.popupClass) {
+            containerClasses.push(this.popupSettings.popupClass);
+        }
+        return containerClasses;
     };
@@ -599,3 +602,3 @@ DropDownListComponent.prototype.setDefaultItemClasses = function () {
                     exportAs: 'kendoDropDownList',
-                    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  "
+                    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            [animate]=\"popupSettings.animate\"\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  "
                 },] },
@@ -602,0 +605,0 @@ ];

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","exportAs":"kendoDropDownList","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":["attr.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"}]}}}}
+{"__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","exportAs":"kendoDropDownList","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            [animate]=\"popupSettings.animate\"\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":["attr.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/es/popup-settings.d.ts

@@ -18,4 +18,12 @@ /**
  */
-export interface IPopupSettings {
+export interface PopupSettings {
     /**
+     * Controls the popup animation. By default, the open and close animation are enabled.
+     */
+    animate?: boolean;
+    /**
+     * Specifies a list of CSS classes used for styling the popup.
+     */
+    popupClass?: string;
+    /**
      * Sets the popup width. By default, it is equal to the width of the component.
@@ -22,0 +30,0 @@ */

dist/npm/combobox.component.d.ts

@@ -7,3 +7,3 @@ import { ElementRef, EventEmitter, OnDestroy, Renderer } from '@angular/core';
 import { FooterTemplateDirective } from './templates/footer-template.directive';
-import { IPopupSettings } from './popup-settings';
+import { PopupSettings } from './popup-settings';
 import { SelectionService } from './selection.service';
@@ -90,6 +90,8 @@ import { NavigationService } from './navigation.service';
      * The available options are:
+     * - `animation: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
      * - `width: Number`—Sets the width of the popup container. By default, the width of the host element is used.
      * - `height: Number`—Sets the height of the popup container. By default, the height is 200px.
+     * - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
      */
-    popupSettings: IPopupSettings;
+    popupSettings: PopupSettings;
     /**
@@ -96,0 +98,0 @@ * @hidden

dist/npm/combobox.component.js

@@ -77,6 +77,8 @@ /* tslint:disable:no-null-keyword */
          * The available options are:
+         * - `animation: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
          * - `width: Number`—Sets the width of the popup container. By default, the width of the host element is used.
          * - `height: Number`—Sets the height of the popup container. By default, the height is 200px.
+         * - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
          */
-        this.popupSettings = { height: 200 };
+        this.popupSettings = { height: 200, animate: true };
         /**
@@ -555,6 +557,7 @@ * @hidden
     ComboBoxComponent.prototype.setListContainerClasses = function () {
-        return {
-            'k-list-container': true,
-            'k-reset': true
-        };
+        var containerClasses = ['k-list-container', 'k-reset'];
+        if (this.popupSettings.popupClass) {
+            containerClasses.push(this.popupSettings.popupClass);
+        }
+        return containerClasses;
     };
@@ -566,3 +569,3 @@ ComboBoxComponent.decorators = [
                     exportAs: 'kendoComboBox',
-                    template: "\n        <span #anchor [ngClass]=\"setHeaderClasses()\" unselectable=\"on\">\n            <kendo-searchbar #searchbar\n                [userInput]=\"text\"\n                [suggestedText]=\"getSuggestion()\"\n                [disabled]=\"disabled\"\n                [placeholder]=\"placeholder\"\n                (onNavigate)=\"handleNavigate($event)\"\n                (valueChange)=\"searchBarChange($event)\"\n                (onBlur)=\"handleBlur()\"\n                (onFocus)=\"handleFocus()\"\n            ></kendo-searchbar>\n            <span\n                 [ngClass]=\"{ 'k-select': true }\"\n                 (click)=\"iconClick()\"\n                 (mousedown)=\"$event.preventDefault()\"\n                 unselectable=\"on\">\n                 <span [ngClass]=\"{\n                     'k-icon': true,\n                     'k-i-arrow-s': true\n                 }\"></span>\n        </span>\n        <kendo-popup *ngIf=\"open\"\n            [anchor]=\"anchor\"\n            [popupClass]=\"setListContainerClasses()\"\n            [style.width]=\"popupWidth\"\n            (anchorViewportLeave)=\"open=false\"\n            (mousedown)=\"$event.preventDefault()\">\n            <!--header template-->\n            <template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </template>\n            <!--list-->\n            <kendo-list\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [template]=\"template\"\n                [height]=\"getHeight()\"\n                [show]=\"open\"\n            >\n            </kendo-list>\n            <!--footer template-->\n            <template *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate.templateRef\n                }\">\n            </template>\n        </kendo-popup>\n  "
+                    template: "\n        <span #anchor [ngClass]=\"setHeaderClasses()\" unselectable=\"on\">\n            <kendo-searchbar #searchbar\n                [userInput]=\"text\"\n                [suggestedText]=\"getSuggestion()\"\n                [disabled]=\"disabled\"\n                [placeholder]=\"placeholder\"\n                (onNavigate)=\"handleNavigate($event)\"\n                (valueChange)=\"searchBarChange($event)\"\n                (onBlur)=\"handleBlur()\"\n                (onFocus)=\"handleFocus()\"\n            ></kendo-searchbar>\n            <span\n                 [ngClass]=\"{ 'k-select': true }\"\n                 (click)=\"iconClick()\"\n                 (mousedown)=\"$event.preventDefault()\"\n                 unselectable=\"on\">\n                 <span [ngClass]=\"{\n                     'k-icon': true,\n                     'k-i-arrow-s': true\n                 }\"></span>\n        </span>\n        <kendo-popup *ngIf=\"open\"\n            [anchor]=\"anchor\"\n            [animate]=\"popupSettings.animate\"\n            [popupClass]=\"setListContainerClasses()\"\n            [style.width]=\"popupWidth\"\n            (anchorViewportLeave)=\"open=false\"\n            (mousedown)=\"$event.preventDefault()\">\n            <!--header template-->\n            <template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </template>\n            <!--list-->\n            <kendo-list\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [template]=\"template\"\n                [height]=\"getHeight()\"\n                [show]=\"open\"\n            >\n            </kendo-list>\n            <!--footer template-->\n            <template *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate.templateRef\n                }\">\n            </template>\n        </kendo-popup>\n  "
                 },] },
@@ -569,0 +572,0 @@ ];

dist/npm/combobox.component.metadata.json

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

dist/npm/dropdownlist.component.d.ts

@@ -10,3 +10,3 @@ import { ElementRef, EventEmitter, OnDestroy, AfterViewChecked, Renderer, NgZone } from '@angular/core';
 import 'rxjs/add/operator/merge';
-import { IPopupSettings } from './popup-settings';
+import { PopupSettings } from './popup-settings';
 import { SelectionService } from './selection.service';
@@ -73,6 +73,8 @@ import { NavigationService } from './navigation.service';
      * The available options are:
+     * - `animation: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
      * - `width: Number`—Sets the width of the popup container. By default, the width of the host element is used.
      * - `height: Number`—Sets the height of the popup container. By default, the height is 200px.
+     * - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
      */
-    popupSettings: IPopupSettings;
+    popupSettings: PopupSettings;
     /**
@@ -79,0 +81,0 @@ * Sets the text of the default empty item. The type of the defined value has to match the data type.

dist/npm/dropdownlist.component.js

@@ -63,6 +63,8 @@ /* tslint:disable:max-line-length */
          * The available options are:
+         * - `animation: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
          * - `width: Number`—Sets the width of the popup container. By default, the width of the host element is used.
          * - `height: Number`—Sets the height of the popup container. By default, the height is 200px.
+         * - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
          */
-        this.popupSettings = { height: 200 };
+        this.popupSettings = { height: 200, animate: true };
         /**
@@ -428,6 +430,7 @@ * Sets the disabled state of the component.
     DropDownListComponent.prototype.setListContainerClasses = function () {
-        return {
-            'k-list-container': true,
-            'k-reset': true
-        };
+        var containerClasses = ['k-list-container', 'k-reset'];
+        if (this.popupSettings.popupClass) {
+            containerClasses.push(this.popupSettings.popupClass);
+        }
+        return containerClasses;
     };
@@ -600,3 +603,3 @@ DropDownListComponent.prototype.setDefaultItemClasses = function () {
                     exportAs: 'kendoDropDownList',
-                    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  "
+                    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            [animate]=\"popupSettings.animate\"\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  "
                 },] },
@@ -603,0 +606,0 @@ ];

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","exportAs":"kendoDropDownList","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":["attr.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"}]}}}}
+{"__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","exportAs":"kendoDropDownList","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            [animate]=\"popupSettings.animate\"\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":["attr.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/popup-settings.d.ts

@@ -18,4 +18,12 @@ /**
  */
-export interface IPopupSettings {
+export interface PopupSettings {
     /**
+     * Controls the popup animation. By default, the open and close animation are enabled.
+     */
+    animate?: boolean;
+    /**
+     * Specifies a list of CSS classes used for styling the popup.
+     */
+    popupClass?: string;
+    /**
      * Sets the popup width. By default, it is equal to the width of the component.
@@ -22,0 +30,0 @@ */

package.json

 {
   "name": "@progress/kendo-angular-dropdowns",
   "description": "Dropdowns Package for Angular 2",
-  "version": "0.20.3",
+  "version": "0.21.0",
   "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

426549

increased by0.82%

Lines of code

6702

increased by0.54%

No dependency changes