@progress/kendo-angular-dropdowns 5.5.1 → 6.0.1-dev.202201201129

package/dist/es/autocomplete/autocomplete.component.js

@@ -19,7 +19,7 @@ import { SelectionService } from '../common/selection/selection.service';
 import { NavigationService } from '../common/navigation/navigation.service';
 import { DisabledItemsService } from '../common/disabled-items/disabled-items.service';
 import { Subject, merge } from 'rxjs';
-import { isPresent, guid, getter, isUntouched, noop, inDropDown } from '../common/util';
+import { isPresent, guid, getter, isUntouched, noop, inDropDown, getSizeClass, getRoundedClass, getFillModeClass } from '../common/util';
 import { NavigationAction } from '../common/navigation/navigation-action';
 import { NoDataTemplateDirective } from '../common/templates/no-data-template.directive';
 import { PreventableEvent } from '../common/models/preventable-event';
@@ -168,6 +168,9 @@ var AutoCompleteComponent = /** @class */ (function () {
         this._value = "";
         this.valueChangeSubject = new Subject();
         this._isFocused = false;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.wrapper = this.hostElement.nativeElement;
@@ -418,12 +421,85 @@ var AutoCompleteComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(AutoCompleteComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * Sets the size of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         *
+         */
+        set: function (size) {
+            this.renderer.removeClass(this.wrapper, getSizeClass('input', this.size));
+            if (size) {
+                this.renderer.addClass(this.wrapper, getSizeClass('input', size));
+            }
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(AutoCompleteComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * Sets the border radius of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         *
+         */
+        set: function (rounded) {
+            this.renderer.removeClass(this.wrapper, getRoundedClass(this.rounded));
+            if (rounded) {
+                this.renderer.addClass(this.wrapper, getRoundedClass(rounded));
+            }
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(AutoCompleteComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * Sets the fillMode of the component.
+         *
+         * The possible values are:
+         * * `'flat'`
+         * * `'solid'` (default)
+         * * `'outline'`
+         * * `null`
+         *
+         */
+        set: function (fillMode) {
+            this.renderer.removeClass(this.wrapper, getFillModeClass('input', this.fillMode));
+            if (fillMode) {
+                this.renderer.addClass(this.wrapper, getFillModeClass('input', fillMode));
+            }
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(AutoCompleteComponent.prototype, "isFocused", {
         get: function () {
             return this._isFocused;
         },
         set: function (isFocused) {
-            this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper, "k-state-focused");
+            this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper, "k-focus");
             this._isFocused = isFocused;
         },
         enumerable: true,
@@ -436,6 +512,13 @@ var AutoCompleteComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(AutoCompleteComponent.prototype, "isLoading", {
+        get: function () {
+            return this.loading;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(AutoCompleteComponent.prototype, "dir", {
         get: function () {
             return this.direction;
@@ -454,6 +537,7 @@ var AutoCompleteComponent = /** @class */ (function () {
             _this.setMessages();
         });
         this.setMessages();
+        this.setComponentClasses();
     };
     AutoCompleteComponent.prototype.ngOnDestroy = function () {
         this.destroyPopup();
@@ -890,6 +974,17 @@ var AutoCompleteComponent = /** @class */ (function () {
             });
         });
     };
+    AutoCompleteComponent.prototype.setComponentClasses = function () {
+        if (this.size) {
+            this.renderer.addClass(this.wrapper, getSizeClass('input', this.size));
+        }
+        if (this.rounded) {
+            this.renderer.addClass(this.wrapper, getRoundedClass(this.rounded));
+        }
+        if (this.fillMode) {
+            this.renderer.addClass(this.wrapper, getFillModeClass('input', this.fillMode));
+        }
+    };
     var AutoCompleteComponent_1;
     tslib_1.__decorate([
         Input(),
@@ -969,6 +1064,21 @@ var AutoCompleteComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Object),
         tslib_1.__metadata("design:paramtypes", [Object])
     ], AutoCompleteComponent.prototype, "virtual", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], AutoCompleteComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], AutoCompleteComponent.prototype, "rounded", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], AutoCompleteComponent.prototype, "fillMode", null);
     tslib_1.__decorate([
         Output(),
         tslib_1.__metadata("design:type", EventEmitter)
@@ -1042,15 +1152,20 @@ var AutoCompleteComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", ListComponent)
     ], AutoCompleteComponent.prototype, "optionsList", void 0);
     tslib_1.__decorate([
-        HostBinding('class.k-widget'),
         HostBinding('class.k-autocomplete'),
+        HostBinding('class.k-input'),
         tslib_1.__metadata("design:type", Boolean)
     ], AutoCompleteComponent.prototype, "widgetClasses", void 0);
     tslib_1.__decorate([
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], AutoCompleteComponent.prototype, "isDisabled", null);
+    tslib_1.__decorate([
+        HostBinding('class.k-loading'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], AutoCompleteComponent.prototype, "isLoading", null);
     tslib_1.__decorate([
         HostBinding('attr.dir'),
         tslib_1.__metadata("design:type", Object),
@@ -1080,7 +1195,7 @@ var AutoCompleteComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-autocomplete',
-            template: "\n        <ng-container kendoAutoCompleteLocalizedMessages\n            i18n-noDataText=\"kendo.autocomplete.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.autocomplete.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <kendo-searchbar #searchbar\n            [role]=\"'combobox'\"\n            [id]=\"focusableId\"\n            [listId]=\"listBoxId\"\n            [activeDescendant]=\"activeDescendant\"\n            [noDataLabel]=\"noDataLabel\"\n            [userInput]=\"text\"\n            [suggestedText]=\"suggestion\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [tabIndex]=\"tabIndex\"\n            [popupOpen]=\"isOpen\"\n            [placeholder]=\"placeholder\"\n            (onNavigate)=\"handleNavigate($event)\"\n            (valueChange)=\"searchBarChange($event)\"\n            (onBlur)=\"handleBlur()\"\n            (onFocus)=\"handleFocus()\"\n        ></kendo-searchbar>\n        <span\n            *ngIf=\"!loading && !readonly && (clearButton && text?.length)\"\n            class=\"k-icon k-clear-value k-i-close\"\n            [style.visibility]=\"clearButtonVisiblity\"\n            [attr.title]=\"clearTitle\"\n            role=\"button\"\n            tabindex=\"-1\"\n            (click)=\"clearValue($event)\"\n            (mousedown)=\"$event.preventDefault()\"\n        >\n</span>\n        <span *ngIf=\"loading\" class=\"k-icon k-i-loading\"></span>\n        <ng-template #popupTemplate>\n            <!--header template-->\n            <ng-template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </ng-template>\n            <!--list-->\n            <kendo-list\n                #optionsList\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"valueField\"\n                [valueField]=\"valueField\"\n                [template]=\"template\"\n                [groupTemplate]=\"groupTemplate\"\n                [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                [height]=\"listHeight\"\n                [show]=\"isOpen\"\n                [virtual]=\"virtual\"\n                (pageChange)=\"pageChange($event)\"\n            >\n            </kendo-list>\n            <!--no-data template-->\n            <div class=\"k-nodata\" *ngIf=\"data.length === 0\">\n                <ng-template [ngIf]=\"noDataTemplate\"\n                    [templateContext]=\"{\n                        templateRef: noDataTemplate?.templateRef\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!noDataTemplate\">\n                    <div>{{ noDataText }}</div>\n                </ng-template>\n            </div>\n            <!--footer template-->\n            <ng-template *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate.templateRef\n                }\">\n            </ng-template>\n        </ng-template>\n        <ng-template [ngIf]=\"isOpen\">\n            <kendo-resize-sensor (resize)=\"onResize()\"></kendo-resize-sensor>\n        </ng-template>\n        <ng-container #container></ng-container>\n  "
+            template: "\n        <ng-container kendoAutoCompleteLocalizedMessages\n            i18n-noDataText=\"kendo.autocomplete.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.autocomplete.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <kendo-searchbar #searchbar\n            [role]=\"'combobox'\"\n            [id]=\"focusableId\"\n            [listId]=\"listBoxId\"\n            [activeDescendant]=\"activeDescendant\"\n            [noDataLabel]=\"noDataLabel\"\n            [userInput]=\"text\"\n            [suggestedText]=\"suggestion\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [tabIndex]=\"tabIndex\"\n            [popupOpen]=\"isOpen\"\n            [placeholder]=\"placeholder\"\n            (onNavigate)=\"handleNavigate($event)\"\n            (valueChange)=\"searchBarChange($event)\"\n            (onBlur)=\"handleBlur()\"\n            (onFocus)=\"handleFocus()\"\n        ></kendo-searchbar>\n        <span\n            *ngIf=\"!loading && !readonly && (clearButton && text?.length)\"\n            class=\"k-clear-value\"\n            [style.visibility]=\"clearButtonVisiblity\"\n            [attr.title]=\"clearTitle\"\n            role=\"button\"\n            tabindex=\"-1\"\n            (click)=\"clearValue($event)\"\n            (mousedown)=\"$event.preventDefault()\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n        <span *ngIf=\"loading\" class=\"k-icon k-i-loading\"></span>\n        <ng-template #popupTemplate>\n            <!--header template-->\n            <ng-template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </ng-template>\n            <!--list-->\n            <kendo-list\n                #optionsList\n                [size]=\"size\"\n                [rounded]=\"rounded\"\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"valueField\"\n                [valueField]=\"valueField\"\n                [template]=\"template\"\n                [groupTemplate]=\"groupTemplate\"\n                [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                [height]=\"listHeight\"\n                [show]=\"isOpen\"\n                [virtual]=\"virtual\"\n                (pageChange)=\"pageChange($event)\"\n            >\n            </kendo-list>\n            <!--no-data template-->\n            <div class=\"k-no-data\" *ngIf=\"data.length === 0\">\n                <ng-template [ngIf]=\"noDataTemplate\"\n                    [templateContext]=\"{\n                        templateRef: noDataTemplate?.templateRef\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!noDataTemplate\">\n                    <div>{{ noDataText }}</div>\n                </ng-template>\n            </div>\n            <!--footer template-->\n            <ng-template *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate.templateRef\n                }\">\n            </ng-template>\n        </ng-template>\n        <ng-template [ngIf]=\"isOpen\">\n            <kendo-resize-sensor (resize)=\"onResize()\"></kendo-resize-sensor>\n        </ng-template>\n        <ng-container #container></ng-container>\n  "
         }),
         tslib_1.__param(10, Optional()), tslib_1.__param(10, Inject(TOUCH_ENABLED)),
         tslib_1.__metadata("design:paramtypes", [LocalizationService,

package/dist/es/comboboxes/combobox.component.js

@@ -21,7 +21,7 @@ import { DisabledItemsService } from '../common/disabled-items/disabled-items.se
 import { merge, of, Subject, Subscription } from 'rxjs';
 import { catchError, filter, map, partition, tap, throttleTime } from 'rxjs/operators';
 import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged } from '@progress/kendo-angular-common';
-import { isPresent, guid, getter, isEmptyString, isUntouched, inDropDown } from '../common/util';
+import { isPresent, guid, getter, isEmptyString, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass } from '../common/util';
 import { NavigationAction } from '../common/navigation/navigation-action';
 import { Keys } from '@progress/kendo-angular-common';
 import { PreventableEvent } from '../common/models/preventable-event';
@@ -60,7 +60,8 @@ export var COMBOBOX_VALUE_ACCESSOR = {
  * ```
  */
 var ComboBoxComponent = /** @class */ (function () {
-    function ComboBoxComponent(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, cdr, renderer, hostElement, touchEnabled) {
+    function ComboBoxComponent(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, cdr, renderer, touchEnabled) {
+        this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
         this.selectionService = selectionService;
@@ -70,7 +71,6 @@ var ComboBoxComponent = /** @class */ (function () {
         this.zone = zone;
         this.cdr = cdr;
         this.renderer = renderer;
-        this.hostElement = hostElement;
         this.touchEnabled = touchEnabled;
         this.selected = [];
         /**
@@ -237,6 +237,9 @@ var ComboBoxComponent = /** @class */ (function () {
         this.valueSubject = new Subject();
         this.clearValueSubject = new Subject();
         this.subs = new Subscription();
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.data = [];
@@ -440,9 +443,89 @@ var ComboBoxComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ComboBoxComponent.prototype, "clearable", {
+    Object.defineProperty(ComboBoxComponent.prototype, "size", {
         get: function () {
-            return this.clearButton;
+            return this._size;
+        },
+        /**
+         * Sets the size of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         *
+         */
+        set: function (size) {
+            this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
+            if (size) {
+                this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
+            }
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ComboBoxComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * Sets the border radius of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         *
+         */
+        set: function (rounded) {
+            this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+            if (rounded) {
+                this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+            }
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ComboBoxComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * Sets the fillMode of the component.
+         *
+         * The possible values are:
+         * * `'flat'`
+         * * `'solid'` (default)
+         * * `'outline'`
+         * * `null`
+         *
+         */
+        set: function (fillMode) {
+            this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
+            if (fillMode) {
+                this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
+            }
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ComboBoxComponent.prototype, "isDisabled", {
+        get: function () {
+            return this.disabled;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ComboBoxComponent.prototype, "isLoading", {
+        get: function () {
+            return this.loading;
         },
         enumerable: true,
         configurable: true
@@ -459,7 +542,7 @@ var ComboBoxComponent = /** @class */ (function () {
             return this._isFocused;
         },
         set: function (value) {
-            this.renderer[value ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, "k-state-focused");
+            this.renderer[value ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, "k-focus");
             this._isFocused = value;
         },
         enumerable: true,
@@ -497,12 +580,13 @@ var ComboBoxComponent = /** @class */ (function () {
         configurable: true
     });
     ComboBoxComponent.prototype.ngOnInit = function () {
-        this.renderer.removeAttribute(this.hostElement.nativeElement, 'tabindex');
+        this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
         this.attachStreams();
         this.createValueStream();
         this.subscribeTouchEvents();
         this.attachSelectClickHandler();
         this.setMessages();
+        this.setComponentClasses();
     };
     ComboBoxComponent.prototype.createValueStream = function () {
         var _this = this;
@@ -792,6 +876,16 @@ var ComboBoxComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ComboBoxComponent.prototype, "selectButtonClasses", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return (this.size ? getSizeClass('button', this.size) : '') + " " + (this.fillMode ? 'k-button-' + this.fillMode : '') + " " + (this.fillMode ? 'k-button-' + this.fillMode + '-base' : '') + "\n        ";
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @hidden
      */
@@ -1023,7 +1117,7 @@ var ComboBoxComponent = /** @class */ (function () {
         var currentText = this.searchbar.value;
         var textHasChanged = currentText !== (getter(this.dataItem, this.textField) || '');
         var valueHasChanged = unresolvedSelection || textHasChanged;
-        var runInZone = valueHasChanged || hasObservers(this.onBlur) || hasObservers(this.close) || isUntouched(this.hostElement.nativeElement);
+        var runInZone = valueHasChanged || hasObservers(this.onBlur) || hasObservers(this.close) || isUntouched(this.wrapper.nativeElement);
         if (runInZone) {
             this.zone.run(function () {
                 if (valueHasChanged) {
@@ -1261,7 +1355,7 @@ var ComboBoxComponent = /** @class */ (function () {
             // Roll up ComboBox on iOS when tapped outside
             return _this.touchstartDisposeHandler = _this.renderer.listen(document, 'touchstart', function (e) {
                 var target = e.target;
-                var isInDropDown = inDropDown(_this.hostElement, target, _this.popupRef);
+                var isInDropDown = inDropDown(_this.wrapper, target, _this.popupRef);
                 if (_this.isFocused && !isInDropDown) {
                     // Close popup and mobile keyboard if searchbar is focused
                     _this.zone.run(function () { return _this.blur(); });
@@ -1278,6 +1372,17 @@ var ComboBoxComponent = /** @class */ (function () {
         var event = pointers ? 'pointerdown' : 'click';
         this.selectClickDisposeHandler = this.renderer.listen(selectElement, event, this.selectClick.bind(this));
     };
+    ComboBoxComponent.prototype.setComponentClasses = function () {
+        if (this.size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
+        }
+        if (this.rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        }
+        if (this.fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
+        }
+    };
     var ComboBoxComponent_1;
     tslib_1.__decorate([
         Input(),
@@ -1374,6 +1479,21 @@ var ComboBoxComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Object),
         tslib_1.__metadata("design:paramtypes", [Object])
     ], ComboBoxComponent.prototype, "virtual", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ComboBoxComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ComboBoxComponent.prototype, "rounded", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ComboBoxComponent.prototype, "fillMode", null);
     tslib_1.__decorate([
         Output(),
         tslib_1.__metadata("design:type", EventEmitter)
@@ -1450,24 +1570,25 @@ var ComboBoxComponent = /** @class */ (function () {
         ViewChild('optionsList', { static: false }),
         tslib_1.__metadata("design:type", ListComponent)
     ], ComboBoxComponent.prototype, "optionsList", void 0);
-    tslib_1.__decorate([
-        ViewChild('wrapper', { static: true }),
-        tslib_1.__metadata("design:type", ElementRef)
-    ], ComboBoxComponent.prototype, "wrapper", void 0);
     tslib_1.__decorate([
         ViewChild('select', { static: true }),
         tslib_1.__metadata("design:type", ElementRef)
     ], ComboBoxComponent.prototype, "select", void 0);
     tslib_1.__decorate([
-        HostBinding('class.k-widget'),
         HostBinding('class.k-combobox'),
+        HostBinding('class.k-input'),
         tslib_1.__metadata("design:type", Boolean)
     ], ComboBoxComponent.prototype, "widgetClasses", void 0);
     tslib_1.__decorate([
-        HostBinding('class.k-combobox-clearable'),
+        HostBinding('class.k-disabled'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], ComboBoxComponent.prototype, "isDisabled", null);
+    tslib_1.__decorate([
+        HostBinding('class.k-loading'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
-    ], ComboBoxComponent.prototype, "clearable", null);
+    ], ComboBoxComponent.prototype, "isLoading", null);
     tslib_1.__decorate([
         HostBinding('attr.dir'),
         tslib_1.__metadata("design:type", Object),
@@ -1495,10 +1616,11 @@ var ComboBoxComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-combobox',
-            template: "\n        <ng-container kendoComboBoxLocalizedMessages\n            i18n-noDataText=\"kendo.combobox.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.combobox.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <span #wrapper unselectable=\"on\"\n            class=\"k-dropdown-wrap\"\n            [ngClass]=\"{'k-state-disabled': disabled }\"\n        >\n          <kendo-searchbar #searchbar\n              [role]=\"'combobox'\"\n              [id]=\"focusableId\"\n              [listId]=\"listBoxId\"\n              [activeDescendant]=\"activeDescendant\"\n              [noDataLabel]=\"noDataLabel\"\n              [userInput]=\"text\"\n              [suggestedText]=\"getSuggestion()\"\n              [disabled]=\"disabled\"\n              [readonly]=\"readonly\"\n              [tabIndex]=\"tabIndex\"\n              [popupOpen]=\"isOpen\"\n              [placeholder]=\"placeholder\"\n              (onNavigate)=\"handleNavigate($event)\"\n              (valueChange)=\"searchBarChange($event)\"\n              (onBlur)=\"handleBlur()\"\n              (onFocus)=\"handleFocus()\"\n          ></kendo-searchbar>\n          <span\n              *ngIf=\"clearButton && !loading && !disabled && !readonly && text?.length\"\n              class=\"k-icon k-clear-value k-i-close\"\n              [style.visibility]=\"clearButtonVisiblity\"\n              aria-hidden=\"true\"\n              [attr.title]=\"clearTitle\"\n              (click)=\"clearValue($event)\"\n              [kendoEventsOutsideAngular]=\"{\n                    mousedown: preventEventDefault\n              }\"\n          >\n          </span>\n          <span\n              #select\n              aria-hidden=\"true\"\n              unselectable=\"on\"\n              class=\"k-select\"\n              [kendoEventsOutsideAngular]=\"{\n                  mousedown: preventEventDefault\n              }\"\n          >\n              <span class=\"k-icon\" [ngClass]=\"buttonClasses\">\n               </span>\n          </span>\n          <ng-template #popupTemplate>\n              <!--header template-->\n              <ng-template *ngIf=\"headerTemplate\"\n                  [templateContext]=\"{\n                      templateRef: headerTemplate.templateRef\n                  }\">\n              </ng-template>\n              <!--list-->\n              <kendo-list\n                  #optionsList\n                  [id]=\"listBoxId\"\n                  [optionPrefix]=\"optionPrefix\"\n                  [data]=\"data\"\n                  [textField]=\"textField\"\n                  [valueField]=\"valueField\"\n                  [template]=\"template\"\n                  [groupTemplate]=\"groupTemplate\"\n                  [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                  [height]=\"listHeight\"\n                  [show]=\"isOpen\"\n                  [virtual]=\"virtual\"\n                  (pageChange)=\"pageChange($event)\"\n              >\n              </kendo-list>\n              <!--no-data template-->\n              <div class=\"k-nodata\" *ngIf=\"data.length === 0\">\n                  <ng-template [ngIf]=\"noDataTemplate\"\n                      [templateContext]=\"{\n                          templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined\n                      }\">\n                  </ng-template>\n                  <ng-template [ngIf]=\"!noDataTemplate\">\n                      <div>{{ noDataText }}</div>\n                  </ng-template>\n              </div>\n              <!--footer template-->\n              <ng-template *ngIf=\"footerTemplate\"\n                  [templateContext]=\"{\n                      templateRef: footerTemplate.templateRef\n                  }\">\n              </ng-template>\n          </ng-template>\n        </span>\n        <ng-template [ngIf]=\"isOpen\">\n            <kendo-resize-sensor (resize)=\"onResize()\"></kendo-resize-sensor>\n        </ng-template>\n        <ng-container #container></ng-container>\n  "
+            template: "\n        <ng-container kendoComboBoxLocalizedMessages\n            i18n-noDataText=\"kendo.combobox.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.combobox.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <kendo-searchbar #searchbar\n            [role]=\"'combobox'\"\n            [id]=\"focusableId\"\n            [listId]=\"listBoxId\"\n            [activeDescendant]=\"activeDescendant\"\n            [noDataLabel]=\"noDataLabel\"\n            [userInput]=\"text\"\n            [suggestedText]=\"getSuggestion()\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [tabIndex]=\"tabIndex\"\n            [popupOpen]=\"isOpen\"\n            [placeholder]=\"placeholder\"\n            (onNavigate)=\"handleNavigate($event)\"\n            (valueChange)=\"searchBarChange($event)\"\n            (onBlur)=\"handleBlur()\"\n            (onFocus)=\"handleFocus()\"\n        ></kendo-searchbar>\n        <span\n            *ngIf=\"clearButton && !loading && !disabled && !readonly && text?.length\"\n            class=\"k-clear-value\"\n            [style.visibility]=\"clearButtonVisiblity\"\n            aria-hidden=\"true\"\n            [attr.title]=\"clearTitle\"\n            (click)=\"clearValue($event)\"\n            [kendoEventsOutsideAngular]=\"{\n                mousedown: preventEventDefault\n            }\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n        <button\n            #select\n            aria-hidden=\"true\"\n            unselectable=\"on\"\n            type=\"button\"\n            class=\"k-input-button k-button k-icon-button\"\n            [ngClass]=\"selectButtonClasses\"\n            [kendoEventsOutsideAngular]=\"{\n                mousedown: preventEventDefault\n            }\"\n        >\n            <span class=\"k-button-icon k-icon\" [ngClass]=\"buttonClasses\"></span>\n        </button>\n        <ng-template #popupTemplate>\n            <!--header template-->\n            <ng-template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </ng-template>\n            <!--list-->\n            <kendo-list\n                #optionsList\n                [size]=\"size\"\n                [rounded]=\"rounded\"\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [template]=\"template\"\n                [groupTemplate]=\"groupTemplate\"\n                [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                [height]=\"listHeight\"\n                [show]=\"isOpen\"\n                [virtual]=\"virtual\"\n                (pageChange)=\"pageChange($event)\"\n            >\n            </kendo-list>\n            <!--no-data template-->\n            <div class=\"k-no-data\" *ngIf=\"data.length === 0\">\n                <ng-template [ngIf]=\"noDataTemplate\"\n                    [templateContext]=\"{\n                        templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!noDataTemplate\">\n                    <div>{{ noDataText }}</div>\n                </ng-template>\n            </div>\n            <!--footer template-->\n            <ng-template *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate.templateRef\n                }\">\n            </ng-template>\n        </ng-template>\n        <ng-template [ngIf]=\"isOpen\">\n            <kendo-resize-sensor (resize)=\"onResize()\"></kendo-resize-sensor>\n        </ng-template>\n        <ng-container #container></ng-container>\n  "
         }),
         tslib_1.__param(10, Optional()), tslib_1.__param(10, Inject(TOUCH_ENABLED)),
-        tslib_1.__metadata("design:paramtypes", [LocalizationService,
+        tslib_1.__metadata("design:paramtypes", [ElementRef,
+            LocalizationService,
             PopupService,
             SelectionService,
             NavigationService,
@@ -1506,8 +1628,7 @@ var ComboBoxComponent = /** @class */ (function () {
             DataService,
             NgZone,
             ChangeDetectorRef,
-            Renderer2,
-            ElementRef, Boolean])
+            Renderer2, Boolean])
     ], ComboBoxComponent);
     return ComboBoxComponent;
 }());

package/dist/es/comboboxes/multicolumncombobox.component.js

@@ -15,7 +15,7 @@ import { DisabledItemsService } from '../common/disabled-items/disabled-items.se
 import { NavigationService } from '../common/navigation/navigation.service';
 import { SelectionService } from '../common/selection/selection.service';
 import { TOUCH_ENABLED } from '../common/constants/touch-enabled';
-import { getter, isObject, isPresent, noop } from '../common/util';
+import { getSizeClass, getter, isObject, isPresent, noop } from '../common/util';
 import { getRowWidthFromColumnsMeta, scrollbarWidth } from './combobox-column/util';
 import { FilterableComponent } from '../common/filtering/filterable-component';
 import { MultiColumnComboBoxMessages } from '../common/constants/error-messages';
@@ -24,8 +24,8 @@ import { MultiColumnComboBoxMessages } from '../common/constants/error-messages'
  */
 var MultiColumnComboBoxComponent = /** @class */ (function (_super) {
     tslib_1.__extends(MultiColumnComboBoxComponent, _super);
-    function MultiColumnComboBoxComponent(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, hostElement, touchEnabled) {
-        var _this = _super.call(this, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, hostElement, touchEnabled) || this;
+    function MultiColumnComboBoxComponent(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, wrapper, touchEnabled) {
+        var _this = _super.call(this, wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, touchEnabled) || this;
         /**
          * @hidden
          */
@@ -38,6 +38,16 @@ var MultiColumnComboBoxComponent = /** @class */ (function (_super) {
         return _this;
     }
     MultiColumnComboBoxComponent_1 = MultiColumnComboBoxComponent;
+    Object.defineProperty(MultiColumnComboBoxComponent.prototype, "isDisabled", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this.disabled;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(MultiColumnComboBoxComponent.prototype, "header", {
         /**
          * @hidden
@@ -60,19 +70,24 @@ var MultiColumnComboBoxComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(MultiColumnComboBoxComponent.prototype, "tableSizeClass", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return "" + (this.size ? getSizeClass('table', this.size) : '');
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(MultiColumnComboBoxComponent.prototype, "listContainerClasses", {
         /**
          * @hidden
          */
         get: function () {
             return [
-                'k-list-container',
                 'k-popup',
-                'k-reset',
-                'k-group',
-                'k-dropdowngrid-popup',
-                'k-popup-flush',
-                'k-state-border-up'
+                'k-dropdowngrid-popup'
             ].concat(this.popupSettings.popupClass || []);
         },
         enumerable: true,
@@ -155,6 +170,11 @@ var MultiColumnComboBoxComponent = /** @class */ (function (_super) {
         HostBinding('class.k-dropdowngrid'),
         tslib_1.__metadata("design:type", Boolean)
     ], MultiColumnComboBoxComponent.prototype, "hostClasses", void 0);
+    tslib_1.__decorate([
+        HostBinding('class.k-disabled'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], MultiColumnComboBoxComponent.prototype, "isDisabled", null);
     tslib_1.__decorate([
         ContentChildren(ComboBoxColumnComponent),
         tslib_1.__metadata("design:type", QueryList)
@@ -191,7 +211,7 @@ var MultiColumnComboBoxComponent = /** @class */ (function (_super) {
                 }
             ],
             selector: 'kendo-multicolumncombobox',
-            template: "\n        <ng-container\n            kendoMultiColumnComboBoxLocalizedMessages\n\n            i18n-noDataText=\"kendo.multicolumncombobox.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.multicolumncombobox.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <span\n            #wrapper\n            unselectable=\"on\"\n            class=\"k-dropdown-wrap\"\n            [class.k-state-disabled]=\"disabled\"\n        >\n            <kendo-searchbar\n                #searchbar\n                [role]=\"'combobox'\"\n                [id]=\"focusableId\"\n                [listId]=\"listBoxId\"\n                [activeDescendant]=\"activeDescendant\"\n                [noDataLabel]=\"noDataLabel\"\n                [userInput]=\"text\"\n                [suggestedText]=\"getSuggestion()\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [tabIndex]=\"tabIndex\"\n                [popupOpen]=\"isOpen\"\n                [placeholder]=\"placeholder\"\n                (onNavigate)=\"handleNavigate($event)\"\n                (valueChange)=\"searchBarChange($event)\"\n                (onBlur)=\"handleBlur()\"\n                (onFocus)=\"handleFocus()\"\n            >\n            </kendo-searchbar>\n\n            <span\n                *ngIf=\"clearButton && !loading && !disabled && !readonly && text?.length\"\n                class=\"k-icon k-clear-value k-i-close\"\n                [style.visibility]=\"clearButtonVisiblity\"\n                aria-hidden=\"true\"\n                [attr.title]=\"clearTitle\"\n                (click)=\"clearValue($event)\"\n                [kendoEventsOutsideAngular]=\"{\n                    mousedown: preventEventDefault\n                }\"\n            >\n            </span>\n\n            <span\n                #select\n                aria-hidden=\"true\"\n                unselectable=\"on\"\n                class=\"k-select\"\n                [kendoEventsOutsideAngular]=\"{\n                    mousedown: preventEventDefault\n                }\"\n            >\n                <span\n                    class=\"k-icon\"\n                    [ngClass]=\"buttonClasses\"\n                >\n                </span>\n            </span>\n        </span>\n\n        <ng-template #popupTemplate>\n            <!--user-defined header template -->\n            <ng-template\n                *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate?.templateRef\n                }\"\n            >\n            </ng-template>\n\n            <!--grid header-->\n            <div\n                #header\n                class=\"k-grid-header\"\n            >\n                <div class=\"k-grid-header-wrap\">\n                    <table role=\"presentation\">\n                        <colgroup>\n                            <ng-container *ngFor=\"let column of columns\">\n                                <col\n                                    *ngIf=\"!column.hidden && column.matchesMedia\"\n                                    [style.width.px]=\"column.width\"\n                                />\n                            </ng-container>\n                        </colgroup>\n                        <tbody>\n                            <tr>\n                                <ng-container *ngFor=\"let column of columns\">\n                                    <th\n                                        *ngIf=\"!column.hidden && column.matchesMedia\"\n                                        class=\"k-header\"\n                                        [ngStyle]=\"column.headerStyle\"\n                                        [ngClass]=\"column.headerClass\"\n                                    >\n                                        <ng-container *ngIf=\"!column.headerTemplate\">\n                                            {{ column.title || column.field }}\n                                        </ng-container>\n                                        <ng-template\n                                            *ngIf=\"column.headerTemplate\"\n                                            [templateContext]=\"{\n                                                templateRef: column.headerTemplate?.templateRef,\n                                                $implicit: column,\n                                                column: column\n                                            }\"\n                                        >\n                                        </ng-template>\n                                    </th>\n                                </ng-container>\n                            </tr>\n                        </tbody>\n                    </table>\n                </div>\n            </div>\n\n            <!-- item template -->\n            <ng-template #rowTemplate let-dataItem>\n                <ng-container *ngFor=\"let column of columns\">\n                    <span\n                        *ngIf=\"!column.hidden && column.matchesMedia\"\n                        class=\"k-cell\"\n                        [ngClass]=\"column.class\"\n                        [style.width.px]=\"column.width\"\n                        [ngStyle]=\"column.style\"\n                    >\n                        <ng-container *ngIf=\"!column.cellTemplate\">\n                            {{ textFrom(dataItem, column.field) }}\n                        </ng-container>\n                        <ng-template\n                            *ngIf=\"column.cellTemplate\"\n                            [templateContext]=\"{\n                                templateRef: column.cellTemplate?.templateRef,\n                                $implicit: dataItem,\n                                dataItem: dataItem,\n                                column: column\n                            }\"\n                        >\n                        </ng-template>\n                    </span>\n                </ng-container>\n            </ng-template>\n\n            <!--list-->\n            <kendo-list\n                #optionsList\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [template]=\"{ templateRef: rowTemplate }\"\n                [groupTemplate]=\"groupTemplate\"\n                [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                [height]=\"listHeight\"\n                [show]=\"isOpen\"\n                [virtual]=\"virtual\"\n                [listClass]=\"'k-reset k-grid-list'\"\n                (pageChange)=\"pageChange($event)\"\n                (listResize)=\"updateHeaderPadding(header)\"\n            >\n            </kendo-list>\n\n            <!--no-data template-->\n            <div\n                class=\"k-nodata\"\n                *ngIf=\"data.length === 0\"\n            >\n                <ng-template\n                    [ngIf]=\"noDataTemplate\"\n                    [templateContext]=\"{\n                        templateRef: noDataTemplate?.templateRef\n                    }\"\n                >\n                </ng-template>\n                <ng-template [ngIf]=\"!noDataTemplate\">\n                    <div>{{ noDataText }}</div>\n                </ng-template>\n            </div>\n\n            <!--user-defined footer template-->\n            <ng-container *ngIf=\"footerTemplate\">\n                <div class=\"k-footer\">\n                    <ng-template\n                        [templateContext]=\"{\n                            templateRef: footerTemplate.templateRef\n                        }\"\n                    >\n                    </ng-template>\n                </div>\n            </ng-container>\n        </ng-template>\n\n        <kendo-resize-sensor\n            *ngIf=\"isOpen\"\n            (resize)=\"onResize()\"\n        >\n        </kendo-resize-sensor>\n\n        <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->\n        <ng-container #container></ng-container>\n    "
+            template: "\n        <ng-container\n            kendoMultiColumnComboBoxLocalizedMessages\n\n            i18n-noDataText=\"kendo.multicolumncombobox.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.multicolumncombobox.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <kendo-searchbar\n            #searchbar\n            [role]=\"'combobox'\"\n            [id]=\"focusableId\"\n            [listId]=\"listBoxId\"\n            [activeDescendant]=\"activeDescendant\"\n            [noDataLabel]=\"noDataLabel\"\n            [userInput]=\"text\"\n            [suggestedText]=\"getSuggestion()\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [tabIndex]=\"tabIndex\"\n            [popupOpen]=\"isOpen\"\n            [placeholder]=\"placeholder\"\n            (onNavigate)=\"handleNavigate($event)\"\n            (valueChange)=\"searchBarChange($event)\"\n            (onBlur)=\"handleBlur()\"\n            (onFocus)=\"handleFocus()\"\n        >\n        </kendo-searchbar>\n\n        <span\n            *ngIf=\"clearButton && !loading && !disabled && !readonly && text?.length\"\n            class=\"k-clear-value\"\n            [style.visibility]=\"clearButtonVisiblity\"\n            aria-hidden=\"true\"\n            [attr.title]=\"clearTitle\"\n            (click)=\"clearValue($event)\"\n            [kendoEventsOutsideAngular]=\"{\n                mousedown: preventEventDefault\n            }\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n\n        <button\n            #select\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            unselectable=\"on\"\n            type=\"button\"\n            class=\"k-input-button k-button k-icon-button\"\n            [ngClass]=\"selectButtonClasses\"\n            [kendoEventsOutsideAngular]=\"{\n                mousedown: preventEventDefault\n            }\"\n        >\n            <span class=\"k-button-icon k-icon\" [ngClass]=\"buttonClasses\"></span>\n        </button>\n\n        <ng-template #popupTemplate>\n            <!--user-defined header template -->\n            <ng-template\n                *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate?.templateRef\n                }\"\n            >\n            </ng-template>\n\n            <!--data table-->\n            <div class=\"k-data-table\" [ngClass]=\"tableSizeClass\">\n\n                <!--grid header-->\n                <div\n                    #header\n                    class=\"k-table-header\"\n                >\n                    <div class=\"k-table-header-wrap\">\n                        <table class=\"k-table\" role=\"presentation\">\n                            <colgroup>\n                                <ng-container *ngFor=\"let column of columns\">\n                                    <col\n                                        *ngIf=\"!column.hidden && column.matchesMedia\"\n                                        [style.width.px]=\"column.width\"\n                                    />\n                                </ng-container>\n                            </colgroup>\n                            <thead class=\"k-table-thead\">\n                                <tr class=\"k-table-row\">\n                                    <ng-container *ngFor=\"let column of columns\">\n                                        <th\n                                            *ngIf=\"!column.hidden && column.matchesMedia\"\n                                            class=\"k-table-th\"\n                                            [ngStyle]=\"column.headerStyle\"\n                                            [ngClass]=\"column.headerClass\"\n                                        >\n                                            <ng-container *ngIf=\"!column.headerTemplate\">\n                                                {{ column.title || column.field }}\n                                            </ng-container>\n                                            <ng-template\n                                                *ngIf=\"column.headerTemplate\"\n                                                [templateContext]=\"{\n                                                    templateRef: column.headerTemplate?.templateRef,\n                                                    $implicit: column,\n                                                    column: column\n                                                }\"\n                                            >\n                                            </ng-template>\n                                        </th>\n                                    </ng-container>\n                                </tr>\n                            </thead>\n                        </table>\n                    </div>\n                </div>\n\n                <!-- item template -->\n                <ng-template #rowTemplate let-dataItem>\n                    <ng-container *ngFor=\"let column of columns\">\n                        <span\n                            *ngIf=\"!column.hidden && column.matchesMedia\"\n                            class=\"k-table-td\"\n                            [ngClass]=\"column.class\"\n                            [style.width.px]=\"column.width\"\n                            [ngStyle]=\"column.style\"\n                        >\n                            <ng-container *ngIf=\"!column.cellTemplate\">\n                                {{ textFrom(dataItem, column.field) }}\n                            </ng-container>\n                            <ng-template\n                                *ngIf=\"column.cellTemplate\"\n                                [templateContext]=\"{\n                                    templateRef: column.cellTemplate?.templateRef,\n                                    $implicit: dataItem,\n                                    dataItem: dataItem,\n                                    column: column\n                                }\"\n                            >\n                            </ng-template>\n                        </span>\n                    </ng-container>\n                </ng-template>\n\n                <!--list-->\n                <kendo-list\n                    #optionsList\n                    [id]=\"listBoxId\"\n                    [optionPrefix]=\"optionPrefix\"\n                    [data]=\"data\"\n                    [textField]=\"textField\"\n                    [valueField]=\"valueField\"\n                    [template]=\"{ templateRef: rowTemplate }\"\n                    [groupTemplate]=\"groupTemplate\"\n                    [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                    [height]=\"listHeight\"\n                    [show]=\"isOpen\"\n                    [virtual]=\"virtual\"\n                    [type]=\"'dropdowngrid'\"\n                    (pageChange)=\"pageChange($event)\"\n                    (listResize)=\"updateHeaderPadding(header)\"\n                >\n                </kendo-list>\n\n                <!--no-data template-->\n                <div\n                    class=\"k-no-data\"\n                    *ngIf=\"data.length === 0\"\n                >\n                    <ng-template\n                        [ngIf]=\"noDataTemplate\"\n                        [templateContext]=\"{\n                            templateRef: noDataTemplate?.templateRef\n                        }\"\n                    >\n                    </ng-template>\n                    <ng-template [ngIf]=\"!noDataTemplate\">\n                        <div>{{ noDataText }}</div>\n                    </ng-template>\n                </div>\n\n                <!--user-defined footer template-->\n                <ng-container *ngIf=\"footerTemplate\">\n                    <div class=\"k-table-footer\">\n                        <table class=\"k-table\">\n                            <tfoot class=\"k-table-tfoot\">\n                                <tr class=\"k-table-row\">\n                                    <td class=\"k-table-td\">\n                                        <ng-template\n                                            [templateContext]=\"{\n                                                templateRef: footerTemplate.templateRef\n                                            }\"\n                                        >\n                                        </ng-template>\n                                    </td>\n                                </tr>\n                            </tfoot>\n                        </table>\n                    </div>\n                </ng-container>\n\n            </div>\n\n        </ng-template>\n\n        <kendo-resize-sensor\n            *ngIf=\"isOpen\"\n            (resize)=\"onResize()\"\n        >\n        </kendo-resize-sensor>\n\n        <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->\n        <ng-container #container></ng-container>\n    "
         }),
         tslib_1.__param(10, Inject(TOUCH_ENABLED)),
         tslib_1.__metadata("design:paramtypes", [LocalizationService,