@progress/kendo-angular-dropdowns 5.5.0 → 6.0.0-dev.202201171002

package/dist/fesm5/index.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __metadata, __assign, __param, __extends } from 'tslib';
-import { Input, Output, EventEmitter, ViewChild, ElementRef, HostBinding, Component, Renderer2, Directive, TemplateRef, Injectable, ViewChildren, QueryList, ChangeDetectorRef, NgZone, InjectionToken, forwardRef, isDevMode, ContentChild, ViewContainerRef, Optional, Inject, KeyValueDiffers, ContentChildren, ChangeDetectionStrategy, NgModule, HostListener } from '@angular/core';
+import { Input, Output, EventEmitter, ViewChild, ElementRef, HostBinding, Component, Renderer2, Directive, TemplateRef, Injectable, ViewChildren, QueryList, ChangeDetectorRef, NgZone, InjectionToken, forwardRef, isDevMode, ContentChild, ViewContainerRef, Optional, Inject, HostListener, KeyValueDiffers, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { isDocumentAvailable, Keys, isChanged, hasObservers, KendoInput, anyChanged, guid, ResizeSensorModule, EventsModule } from '@progress/kendo-angular-common';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -23,7 +23,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635947106,
+    publishDate: 1642413450,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -279,6 +279,43 @@ var valueFrom = function (_a, valueField) {
     var field = fields[normalizedLevel];
     return getter(field)(dataItem);
 };
+/**
+ * @hidden
+ * Returns the size class based on the component and size input.
+ */
+var getSizeClass = function (component, size) {
+    var SIZE_CLASSES = {
+        'small': "k-" + component + "-sm",
+        'medium': "k-" + component + "-md",
+        'large': "k-" + component + "-lg"
+    };
+    return SIZE_CLASSES[size];
+};
+/**
+ * @hidden
+ * Returns the rounded class based on the rounded input.
+ */
+var getRoundedClass = function (rounded) {
+    var ROUNDED_CLASSES = {
+        'small': 'k-rounded-sm',
+        'medium': 'k-rounded-md',
+        'large': 'k-rounded-lg',
+        'full': 'k-rounded-full'
+    };
+    return ROUNDED_CLASSES[rounded];
+};
+/**
+ * @hidden
+ * Return the fillMode class based on the component and fillMode input.
+ */
+var getFillModeClass = function (component, fillMode) {
+    var FILLMODE_CLASSES = {
+        'solid': "k-" + component + "-solid",
+        'flat': "k-" + component + "-flat",
+        'outline': "k-" + component + "-outline"
+    };
+    return FILLMODE_CLASSES[fillMode];
+};
 
 /* tslint:disable:member-ordering */
 /**
@@ -508,7 +545,7 @@ var SearchBarComponent = /** @class */ (function () {
     SearchBarComponent = __decorate([
         Component({
             selector: 'kendo-searchbar',
-            template: "\n        <input #input\n            autocomplete=\"off\"\n            [id]=\"id\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [placeholder]=\"placeholder\"\n            [class]=\"'k-input'\"\n            (input)=\"handleInput($event)\"\n            (keydown)=\"handleKeydown($event)\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleFocus,\n                blur: handleBlur\n            }\"\n            [scope]=\"this\"\n            [attr.tabIndex]=\"tabIndex\"\n            [attr.dir]=\"direction\"\n            [attr.role]=\"role\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-readonly]=\"readonly\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"popupOpen\"\n            [attr.aria-owns]=\"listId\"\n            [attr.aria-describedby]=\"tagListId\"\n            [attr.aria-activedescendant]=\"activeDescendant\"\n            [attr.aria-label]=\"noDataLabel\"\n        />\n   "
+            template: "\n        <input #input\n            autocomplete=\"off\"\n            [id]=\"id\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [placeholder]=\"placeholder\"\n            [class]=\"'k-input-inner'\"\n            (input)=\"handleInput($event)\"\n            (keydown)=\"handleKeydown($event)\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleFocus,\n                blur: handleBlur\n            }\"\n            [scope]=\"this\"\n            [attr.tabIndex]=\"tabIndex\"\n            [attr.dir]=\"direction\"\n            [attr.role]=\"role\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-readonly]=\"readonly\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"popupOpen\"\n            [attr.aria-owns]=\"listId\"\n            [attr.aria-describedby]=\"tagListId\"\n            [attr.aria-activedescendant]=\"activeDescendant\"\n            [attr.aria-label]=\"noDataLabel\"\n        />\n   "
         }),
         __metadata("design:paramtypes", [LocalizationService,
             Renderer2])
@@ -1381,8 +1418,9 @@ var ListComponent = /** @class */ (function () {
         this.focused = -1;
         this.show = true;
         this.multipleSelection = false;
-        this.listClass = 'k-list k-reset';
+        this.type = 'list';
         this.checkboxes = { enabled: false };
+        this.rounded = 'medium';
         this.onClick = new EventEmitter();
         this.pageChange = new EventEmitter();
         this.listResize = new EventEmitter();
@@ -1390,11 +1428,13 @@ var ListComponent = /** @class */ (function () {
         this.lastLoaded = 0;
         this.lastScrollTop = 0;
         this.scrollToFocused = false;
+        this._size = 'medium';
         this.selectSubscription = merge(this.selectionService.onSelect.pipe(map(function (args) { return args.indices[0]; })), this.selectionService.onFocus)
             .pipe(
         // handle only the very last onSelect/onFocus emission
         switchMap(function (event) { return _this.zone.onStable.pipe(take(1), map(function () { return event; })); }))
             .subscribe(this.scrollToItem.bind(this));
+        this.prepareClasses();
     }
     Object.defineProperty(ListComponent.prototype, "data", {
         get: function () {
@@ -1406,6 +1446,22 @@ var ListComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ListComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        set: function (size) {
+            if (this.type === 'list') {
+                this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('list', this.size));
+                if (size) {
+                    this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('list', size));
+                }
+                this._size = size;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ListComponent.prototype, "pageSize", {
         get: function () {
             if (this.virtual.pageSize) {
@@ -1434,21 +1490,40 @@ var ListComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ListComponent.prototype, "checkboxClasses", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return (this.size ? getSizeClass('checkbox', this.size) : '') + " " + (this.rounded ? getRoundedClass(this.rounded) : '');
+        },
+        enumerable: true,
+        configurable: true
+    });
     ListComponent.prototype.ngOnChanges = function (changes) {
         if (isChanged('data', changes, false)) {
             if (this.lastLoaded <= 0) {
                 this.lastLoaded = this.data.length - 1;
                 this.scrollToFocused = !changes.data.isFirstChange();
             }
+            this.setOverflow();
+        }
+        if (isChanged('virtual', changes, false)) {
+            this.setOverflow();
+        }
+        if (isChanged('type', changes, false)) {
+            this.prepareClasses();
         }
     };
     ListComponent.prototype.ngAfterViewInit = function () {
         var _this = this;
+        this.setComponentClasses();
         this.zone.runOutsideAngular(function () {
             _this.scrollSubscription = fromEvent(_this.content.nativeElement, "scroll").pipe(auditTime(100), tap(_this.prefetchData.bind(_this)), tap(_this.findCurrentGroup.bind(_this))).subscribe(function () {
                 _this.lastScrollTop = _this.content.nativeElement.scrollTop;
             });
         });
+        this.setOverflow();
     };
     ListComponent.prototype.ngAfterViewChecked = function () {
         if (this.virtual) {
@@ -1478,6 +1553,28 @@ var ListComponent = /** @class */ (function () {
             this.selectionService.unselect(index);
         }
     };
+    ListComponent.prototype.prepareClasses = function () {
+        if (this.type === 'list') {
+            this.listContentClass = 'k-list-content';
+            this.listClass = 'k-list-ul';
+            this.listItemClass = 'k-list-item';
+            this.listVirtualClass = 'k-virtual-list';
+            this.listGroupStickyHeaderClass = 'k-list-group-sticky-header';
+            this.listGroupStickyHeaderTextClass = 'k-list-header-text';
+            this.listGroupItemClass = 'k-list-group-item';
+            this.listGroupItemTextClass = 'k-list-item-text';
+        }
+        else {
+            this.listContentClass = 'k-table-body k-table-scroller';
+            this.listClass = 'k-table k-table-list';
+            this.listItemClass = 'k-table-row';
+            this.listVirtualClass = 'k-virtual-table';
+            this.listGroupStickyHeaderClass = 'k-table-group-sticky-header';
+            this.listGroupStickyHeaderTextClass = 'k-table-th';
+            this.listGroupItemClass = 'k-table-group-row';
+            this.listGroupItemTextClass = 'k-table-th';
+        }
+    };
     ListComponent.prototype.isChecked = function (index) {
         var normalizedIndex = this.virtual ? index + this.virtual.skip : index;
         return this.selectionService.isSelected(normalizedIndex);
@@ -1487,7 +1584,7 @@ var ListComponent = /** @class */ (function () {
         var content = this.content.nativeElement;
         var rect = content.getBoundingClientRect();
         // IE9 hack
-        var disabled = Array.prototype.slice.call(content.querySelectorAll(".k-state-disabled"));
+        var disabled = Array.prototype.slice.call(content.querySelectorAll(".k-disabled"));
         // This is a workaround for finding elements with pointer-events: none;
         disabled.forEach(function (el) { return _this.renderer.setStyle(el, "pointer-events", "auto"); });
         var item = document.elementFromPoint(rect.left + 1, rect.top + 1);
@@ -1566,6 +1663,9 @@ var ListComponent = /** @class */ (function () {
         }
         return this.disabledItemsService.isIndexDisabled(index);
     };
+    ListComponent.prototype.isAltRow = function (index) {
+        return this.type === 'dropdowngrid' && index % 2 !== 0;
+    };
     ListComponent.prototype.scrollToItem = function (index) {
         var flatIndex = index;
         if (this.dataService.grouped) {
@@ -1624,6 +1724,15 @@ var ListComponent = /** @class */ (function () {
         var hasVirtualScroll = isPresent(this.virtual) && this.hasVirtualScrollbar();
         return hasVirtualScroll || this.list.nativeElement.scrollHeight > this.content.nativeElement.offsetHeight;
     };
+    /**
+     * Sets the list's content overflow (hides/shows scrollbar)
+     */
+    ListComponent.prototype.setOverflow = function () {
+        if (this.virtual) {
+            var overflow = this.hasVirtualScrollbar() ? 'scroll' : 'hidden';
+            this.renderer.setStyle(this.content.nativeElement, 'overflow-y', overflow);
+        }
+    };
     /**
      * Indicates whether the scrollbar should be visible in virtual mode.
      */
@@ -1648,6 +1757,17 @@ var ListComponent = /** @class */ (function () {
         }
         return this.virtual.skip === 0 && (this.virtual.pageSize > itemIndex);
     };
+    ListComponent.prototype.setComponentClasses = function () {
+        if (this.type === 'list') {
+            this.renderer.addClass(this.wrapper.nativeElement, 'k-list');
+            if (this.size) {
+                this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('list', this.size));
+            }
+        }
+        if (isPresent(this.virtual)) {
+            this.renderer.addClass(this.wrapper.nativeElement, this.listVirtualClass);
+        }
+    };
     __decorate([
         Input(),
         __metadata("design:type", Array)
@@ -1703,7 +1823,7 @@ var ListComponent = /** @class */ (function () {
     __decorate([
         Input(),
         __metadata("design:type", String)
-    ], ListComponent.prototype, "listClass", void 0);
+    ], ListComponent.prototype, "type", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Object)
@@ -1713,6 +1833,15 @@ var ListComponent = /** @class */ (function () {
         __metadata("design:type", Array),
         __metadata("design:paramtypes", [Array])
     ], ListComponent.prototype, "data", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], ListComponent.prototype, "size", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], ListComponent.prototype, "rounded", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
@@ -1744,7 +1873,7 @@ var ListComponent = /** @class */ (function () {
     ListComponent = __decorate([
         Component({
             selector: 'kendo-list',
-            template: "\n    <div *ngIf=\"dataService.grouped\"\n        class='k-outer-group-header k-first'\n        [ngClass]=\"{'k-virtual-item': virtual}\"\n        [ngStyle]=\"{\n            'height.px': virtual?.itemHeight,\n            'minHeight.px' : virtual?.itemHeight,\n            'boxSizing' : virtual ? 'border-box' : 'inherit'}\"\n        >\n        <ng-template *ngIf=\"fixedGroupTemplate\"\n            [templateContext]=\"{\n                templateRef: fixedGroupTemplate.templateRef,\n                $implicit: currentGroup\n            }\">\n        </ng-template>\n        <ng-template [ngIf]=\"!fixedGroupTemplate\"><strong>{{ currentGroup }}</strong> </ng-template>\n    </div>\n    <div #content\n         [ngClass]=\"{ 'k-virtual-content': virtual, 'k-list-scroller': !virtual }\"\n         [style.maxHeight.px]=\"height\"\n         [style.overflowY]=\"overflowY\"\n         unselectable=\"on\">\n    <ul #list\n        role=\"listbox\"\n        [class]=\"listClass\"\n        [ngClass]=\"{ 'k-virtual-list': virtual }\"\n        [attr.id]=\"id\"\n        [attr.aria-hidden]=\"!show\">\n         <ng-template *ngIf=\"!dataService.grouped && show\" ngFor let-dataItem let-itemIndex=\"index\" [ngForOf]=\"data\">\n            <li\n                role=\"option\"\n                kendoDropDownsSelectable\n                [checkboxes]=\"checkboxes\"\n                [height]=\"virtual?.itemHeight\"\n                [index]=\"itemIndex + startFrom\"\n                [multipleSelection]=\"multipleSelection\"\n                [attr.id]=\"optionPrefix + '-' + getValue(dataItem)\"\n                [attr.tabIndex]=\"-1\"\n                class=\"k-item\"\n                [ngClass]=\"{ 'k-virtual-item': virtual, 'k-state-disabled': isDisabled(itemIndex) }\">\n                <label *ngIf=\"checkboxes.enabled\"\n                    class=\"k-checkbox-label\">\n                    <input type=\"checkbox\"\n                        class=\"k-checkbox\"\n                        (change)=\"onCheckedChange($event, itemIndex)\"\n                        [checked]=\"isChecked(itemIndex)\"\n                    />\n                </label>\n                <ng-template *ngIf=\"template\"\n                    [templateContext]=\"{\n                        templateRef: template.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!template\">{{ getText(dataItem) }}</ng-template>\n            </li>\n         </ng-template>\n         <ng-template *ngIf=\"dataService.grouped\" ngFor let-dataItem let-itemIndex=\"index\" [ngForOf]=\"data\">\n            <li\n                *ngIf=\"dataItem.header && dataItem.index > 0\"\n                role=\"group\"\n                class='k-outer-group-header'\n                [ngClass]=\"{ 'k-virtual-item': virtual }\"\n                [ngStyle]=\"{\n                    'height.px': virtual?.itemHeight,\n                    'minHeight.px' : virtual?.itemHeight,\n                    'boxSizing' : virtual ? 'border-box' : 'inherit'}\"\n                [attr.group-index]=\"dataItem.index\"\n                [attr.id]=\"optionPrefix + '-' + getValue(dataItem.value)\"\n                [attr.tabIndex]=\"-1\">\n                    <ng-template *ngIf=\"groupTemplate\"\n                          [templateContext]=\"{\n                            templateRef: groupTemplate.templateRef,\n                            $implicit: dataItem.value\n                    }\">\n                    </ng-template>\n                    <ng-template [ngIf]=\"!groupTemplate\"><strong> {{ dataItem.value }}</strong> </ng-template>\n              </li>\n              <li\n                *ngIf=\"!dataItem.header\"\n                role=\"option\"\n                kendoDropDownsSelectable\n                [height]=\"virtual?.itemHeight\"\n                [index]=\"dataItem.offsetIndex\"\n                [multipleSelection]=\"multipleSelection\"\n                [attr.absolute-index]=\"dataItem.index\"\n                [attr.id]=\"optionPrefix + '-' + getValue(dataItem.value)\"\n                [attr.tabIndex]=\"-1\"\n                class=\"k-item\"\n                [ngClass]=\"{ 'k-virtual-item': virtual, 'k-state-disabled': isDisabled(dataItem.offsetIndex) }\">\n                <ng-template *ngIf=\"template\"\n                    [templateContext]=\"{\n                        templateRef: template.templateRef,\n                        $implicit: dataItem.value\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!template\">{{ getText(dataItem.value) }}</ng-template>\n            </li>\n        </ng-template>\n        <kendo-resize-sensor\n            *ngIf=\"!virtual\"\n            (resize)=\"listResize.emit()\"\n        >\n        </kendo-resize-sensor>\n    </ul>\n    <div *ngIf=\"virtual\" #virtualContainer class=\"k-height-container\" role=\"presentation\">\n        <div [style.height.px]=\"scrollHeight\">\n            <kendo-resize-sensor (resize)=\"listResize.emit()\"></kendo-resize-sensor>\n        </div>\n    </div>\n    </div>\n  "
+            template: "\n    <div *ngIf=\"dataService.grouped\"\n        [class]=\"listGroupStickyHeaderClass\"\n        [ngStyle]=\"{\n            'height.px': virtual?.itemHeight,\n            'minHeight.px' : virtual?.itemHeight,\n            'boxSizing' : virtual ? 'border-box' : 'inherit'}\"\n        >\n        <ng-template *ngIf=\"fixedGroupTemplate\"\n            [templateContext]=\"{\n                templateRef: fixedGroupTemplate.templateRef,\n                $implicit: currentGroup\n            }\">\n        </ng-template>\n        <ng-template [ngIf]=\"!fixedGroupTemplate\"><span [class]=\"listGroupStickyHeaderTextClass\">{{ currentGroup }}</span></ng-template>\n    </div>\n    <div #content\n        [class]=\"listContentClass\"\n        [style.overscrollBehavior]=\"'none'\"\n        [style.maxHeight.px]=\"height\"\n        unselectable=\"on\">\n    <ul #list\n        role=\"listbox\"\n        [class]=\"listClass\"\n        [attr.id]=\"id\"\n        [attr.aria-hidden]=\"!show\">\n         <ng-template *ngIf=\"!dataService.grouped && show\" ngFor let-dataItem let-itemIndex=\"index\" [ngForOf]=\"data\">\n            <li\n                role=\"option\"\n                kendoDropDownsSelectable\n                [checkboxes]=\"checkboxes\"\n                [height]=\"virtual?.itemHeight\"\n                [index]=\"itemIndex + startFrom\"\n                [multipleSelection]=\"multipleSelection\"\n                [attr.id]=\"optionPrefix + '-' + getValue(dataItem)\"\n                [attr.tabIndex]=\"-1\"\n                [class]=\"listItemClass\"\n                [ngClass]=\"{\n                    'k-disabled': isDisabled(itemIndex),\n                    'k-table-alt-row': isAltRow(itemIndex)\n                }\"\n            >\n                <input\n                    *ngIf=\"checkboxes.enabled\"\n                    type=\"checkbox\"\n                    class=\"k-checkbox\"\n                    [ngClass]=\"checkboxClasses\"\n                    (change)=\"onCheckedChange($event, itemIndex)\"\n                    [checked]=\"isChecked(itemIndex)\"\n                />\n                <ng-template *ngIf=\"template\"\n                    [templateContext]=\"{\n                        templateRef: template.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!template\"><span class=\"k-list-item-text\">{{ getText(dataItem) }}</span></ng-template>\n            </li>\n         </ng-template>\n         <ng-template *ngIf=\"dataService.grouped\" ngFor let-dataItem let-itemIndex=\"index\" [ngForOf]=\"data\">\n            <li\n                *ngIf=\"dataItem.header && dataItem.index > 0\"\n                role=\"group\"\n                [class]=\"listGroupItemClass\"\n                [class.k-table-alt-row]=\"isAltRow(itemIndex - 1)\"\n                [ngStyle]=\"{\n                    'height.px': virtual?.itemHeight,\n                    'minHeight.px' : virtual?.itemHeight,\n                    'boxSizing' : virtual ? 'border-box' : 'inherit'}\"\n                [attr.group-index]=\"dataItem.index\"\n                [attr.id]=\"optionPrefix + '-' + getValue(dataItem.value)\"\n                [attr.tabIndex]=\"-1\">\n                    <span [class]=\"listGroupItemTextClass\">\n                        <ng-template *ngIf=\"groupTemplate\"\n                            [templateContext]=\"{\n                                templateRef: groupTemplate.templateRef,\n                                $implicit: dataItem.value\n                        }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!groupTemplate\">{{ dataItem.value }}</ng-template>\n                    </span>\n            </li>\n            <li\n                *ngIf=\"!dataItem.header\"\n                role=\"option\"\n                kendoDropDownsSelectable\n                [height]=\"virtual?.itemHeight\"\n                [index]=\"dataItem.offsetIndex\"\n                [multipleSelection]=\"multipleSelection\"\n                [attr.absolute-index]=\"dataItem.index\"\n                [attr.id]=\"optionPrefix + '-' + getValue(dataItem.value)\"\n                [attr.tabIndex]=\"-1\"\n                [class]=\"listItemClass\"\n                [ngClass]=\"{\n                    'k-disabled': isDisabled(dataItem.offsetIndex),\n                    'k-table-alt-row': isAltRow(itemIndex - 1)\n                }\"\n            >\n                <ng-template *ngIf=\"template\"\n                    [templateContext]=\"{\n                        templateRef: template.templateRef,\n                        $implicit: dataItem.value\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!template\"><span class=\"k-list-item-text\">{{ getText(dataItem.value) }}</span></ng-template>\n            </li>\n        </ng-template>\n        <kendo-resize-sensor\n            *ngIf=\"!virtual\"\n            (resize)=\"listResize.emit()\"\n        >\n        </kendo-resize-sensor>\n    </ul>\n    <div *ngIf=\"virtual\" #virtualContainer class=\"k-height-container\" role=\"presentation\">\n        <div [style.height.px]=\"scrollHeight\">\n            <kendo-resize-sensor (resize)=\"listResize.emit()\"></kendo-resize-sensor>\n        </div>\n    </div>\n    </div>\n  "
         }),
         __metadata("design:paramtypes", [DataService,
             ElementRef,
@@ -1922,6 +2051,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;
@@ -2172,12 +2304,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,
@@ -2190,6 +2395,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;
@@ -2208,6 +2420,7 @@ var AutoCompleteComponent = /** @class */ (function () {
             _this.setMessages();
         });
         this.setMessages();
+        this.setComponentClasses();
     };
     AutoCompleteComponent.prototype.ngOnDestroy = function () {
         this.destroyPopup();
@@ -2644,6 +2857,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;
     __decorate([
         Input(),
@@ -2723,6 +2947,21 @@ var AutoCompleteComponent = /** @class */ (function () {
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [Object])
     ], AutoCompleteComponent.prototype, "virtual", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], AutoCompleteComponent.prototype, "size", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], AutoCompleteComponent.prototype, "rounded", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], AutoCompleteComponent.prototype, "fillMode", null);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
@@ -2796,15 +3035,20 @@ var AutoCompleteComponent = /** @class */ (function () {
         __metadata("design:type", ListComponent)
     ], AutoCompleteComponent.prototype, "optionsList", void 0);
     __decorate([
-        HostBinding('class.k-widget'),
         HostBinding('class.k-autocomplete'),
+        HostBinding('class.k-input'),
         __metadata("design:type", Boolean)
     ], AutoCompleteComponent.prototype, "widgetClasses", void 0);
     __decorate([
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], AutoCompleteComponent.prototype, "isDisabled", null);
+    __decorate([
+        HostBinding('class.k-loading'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], AutoCompleteComponent.prototype, "isLoading", null);
     __decorate([
         HostBinding('attr.dir'),
         __metadata("design:type", Object),
@@ -2834,7 +3078,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  "
         }),
         __param(10, Optional()), __param(10, Inject(TOUCH_ENABLED)),
         __metadata("design:paramtypes", [LocalizationService,
@@ -2937,7 +3181,8 @@ var COMBOBOX_VALUE_ACCESSOR = {
  * ```
  */
 var ComboBoxComponent = /** @class */ (function () {
-    function ComboBoxComponent(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, cdr, renderer, hostElement, touchEnabled$$1) {
+    function ComboBoxComponent(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, cdr, renderer, touchEnabled$$1) {
+        this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
         this.selectionService = selectionService;
@@ -2947,7 +3192,6 @@ var ComboBoxComponent = /** @class */ (function () {
         this.zone = zone;
         this.cdr = cdr;
         this.renderer = renderer;
-        this.hostElement = hostElement;
         this.touchEnabled = touchEnabled$$1;
         this.selected = [];
         /**
@@ -3114,6 +3358,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 = [];
@@ -3317,9 +3564,89 @@ var ComboBoxComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ComboBoxComponent.prototype, "clearable", {
+    Object.defineProperty(ComboBoxComponent.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.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.clearButton;
+            return this.loading;
         },
         enumerable: true,
         configurable: true
@@ -3336,7 +3663,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,
@@ -3374,12 +3701,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;
@@ -3669,6 +3997,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
      */
@@ -3900,7 +4238,7 @@ var ComboBoxComponent = /** @class */ (function () {
         var currentText = this.searchbar.value;
         var textHasChanged = currentText !== (getter$1(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) {
@@ -4138,7 +4476,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(); });
@@ -4155,6 +4493,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;
     __decorate([
         Input(),
@@ -4251,6 +4600,21 @@ var ComboBoxComponent = /** @class */ (function () {
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [Object])
     ], ComboBoxComponent.prototype, "virtual", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], ComboBoxComponent.prototype, "size", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], ComboBoxComponent.prototype, "rounded", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], ComboBoxComponent.prototype, "fillMode", null);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
@@ -4327,24 +4691,25 @@ var ComboBoxComponent = /** @class */ (function () {
         ViewChild('optionsList', { static: false }),
         __metadata("design:type", ListComponent)
     ], ComboBoxComponent.prototype, "optionsList", void 0);
-    __decorate([
-        ViewChild('wrapper', { static: true }),
-        __metadata("design:type", ElementRef)
-    ], ComboBoxComponent.prototype, "wrapper", void 0);
     __decorate([
         ViewChild('select', { static: true }),
         __metadata("design:type", ElementRef)
     ], ComboBoxComponent.prototype, "select", void 0);
     __decorate([
-        HostBinding('class.k-widget'),
         HostBinding('class.k-combobox'),
+        HostBinding('class.k-input'),
         __metadata("design:type", Boolean)
     ], ComboBoxComponent.prototype, "widgetClasses", void 0);
     __decorate([
-        HostBinding('class.k-combobox-clearable'),
+        HostBinding('class.k-disabled'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], ComboBoxComponent.prototype, "isDisabled", null);
+    __decorate([
+        HostBinding('class.k-loading'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
-    ], ComboBoxComponent.prototype, "clearable", null);
+    ], ComboBoxComponent.prototype, "isLoading", null);
     __decorate([
         HostBinding('attr.dir'),
         __metadata("design:type", Object),
@@ -4372,10 +4737,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  "
         }),
         __param(10, Optional()), __param(10, Inject(TOUCH_ENABLED)),
-        __metadata("design:paramtypes", [LocalizationService,
+        __metadata("design:paramtypes", [ElementRef,
+            LocalizationService,
             PopupService,
             SelectionService,
             NavigationService,
@@ -4383,8 +4749,7 @@ var ComboBoxComponent = /** @class */ (function () {
             DataService,
             NgZone,
             ChangeDetectorRef,
-            Renderer2,
-            ElementRef, Boolean])
+            Renderer2, Boolean])
     ], ComboBoxComponent);
     return ComboBoxComponent;
 }());
@@ -4458,7 +4823,8 @@ var DROPDOWNLIST_VALUE_ACCESSOR = {
  * ```
  */
 var DropDownListComponent = /** @class */ (function () {
-    function DropDownListComponent(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, _zone, renderer, hostElement, cdr, touchEnabled$$1) {
+    function DropDownListComponent(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, _zone, renderer, cdr, touchEnabled$$1) {
+        this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
         this.selectionService = selectionService;
@@ -4467,7 +4833,6 @@ var DropDownListComponent = /** @class */ (function () {
         this.dataService = dataService;
         this._zone = _zone;
         this.renderer = renderer;
-        this.hostElement = hostElement;
         this.cdr = cdr;
         this.touchEnabled = touchEnabled$$1;
         /**
@@ -4551,7 +4916,8 @@ var DropDownListComponent = /** @class */ (function () {
          * Fires each time the DropDownList gets blurred.
          */
         this.onBlur = new EventEmitter();
-        this.widgetClasses = true;
+        this.hostClasses = true;
+        this.role = 'listbox';
         this.groupIndices = [];
         this.listBoxId = guid$1();
         this.optionPrefix = guid$1();
@@ -4563,16 +4929,20 @@ var DropDownListComponent = /** @class */ (function () {
         this.last = "";
         this.filterFocused = new EventEmitter();
         this.filterBlurred = new EventEmitter();
-        this.wrapperFocused = new EventEmitter();
-        this.wrapperBlurred = new EventEmitter();
+        this.hostElementFocused = new EventEmitter();
+        this.hostElementBlurred = new EventEmitter();
         this.selectionSubscription = new Subscription();
         this._open = false;
         this._popupSettings = { animate: true };
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.data = [];
         this.subscribeEvents();
         this.subscribeTouchEvents();
+        this.subscribeFocusEvents();
         this.popupMouseDownHandler = this.onMouseDown.bind(this);
     }
     DropDownListComponent_1 = DropDownListComponent;
@@ -4781,11 +5151,88 @@ var DropDownListComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(DropDownListComponent.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.nativeElement, getSizeClass('picker', this.size));
+            if (size) {
+                this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', size));
+            }
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.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(DropDownListComponent.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('picker', this.fillMode));
+            if (fillMode) {
+                this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', fillMode));
+            }
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @hidden
      */
-    DropDownListComponent.prototype.blurComponent = function () {
-        this.wrapperBlurred.emit();
+    DropDownListComponent.prototype.blurComponent = function (event) {
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
+        this.hostElementBlurred.emit();
     };
     /**
      * @hidden
@@ -4796,9 +5243,13 @@ var DropDownListComponent = /** @class */ (function () {
     /**
      * @hidden
      */
-    DropDownListComponent.prototype.focusComponent = function () {
+    DropDownListComponent.prototype.focusComponent = function (event) {
         var _this = this;
-        this.wrapperFocused.emit();
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
+        this.hostElementFocused.emit();
         if (!this.isFocused) {
             this.isFocused = true;
             if (hasObservers(this.onFocus)) {
@@ -4811,27 +5262,108 @@ var DropDownListComponent = /** @class */ (function () {
     /**
      * @hidden
      */
-    DropDownListComponent.prototype.keydown = function (event) {
-        var firstIndex = isPresent(this.defaultItem) ? -1 : 0;
-        var focused = isNaN(this.selectionService.focused) ? this.firstFocusableIndex(firstIndex) : this.selectionService.focused;
-        var offset = 0;
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        var isHomeEnd = event.keyCode === Keys.Home || event.keyCode === Keys.End;
-        var isFilterFocused = this.filterable && this.isFocused && this.isOpen;
-        if (isFilterFocused && isHomeEnd) {
-            return;
-        }
-        var hasSelected = isPresent(this.selectionService.selected[0]);
-        var focusedItemNotSelected = isPresent(this.selectionService.focused) && !this.selectionService.isSelected(this.selectionService.focused);
-        if (!hasSelected || focusedItemNotSelected) {
-            if (event.keyCode === Keys.ArrowDown || event.keyCode === Keys.ArrowRight) {
-                offset = -1;
-            }
-            else if (event.keyCode === Keys.ArrowUp || event.keyCode === Keys.ArrowLeft) {
-                offset = 1;
-            }
+    DropDownListComponent.prototype.onResize = function () {
+        if (this._open) {
+            var popupWrapper = this.popupRef.popupElement;
+            var _a = this.width, min = _a.min, max = _a.max;
+            popupWrapper.style.minWidth = min;
+            popupWrapper.style.width = max;
+        }
+    };
+    Object.defineProperty(DropDownListComponent.prototype, "isDisabled", {
+        get: function () {
+            return this.disabled;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "isLoading", {
+        get: function () {
+            return this.loading;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "id", {
+        get: function () {
+            return this.focusableId;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "dir", {
+        get: function () {
+            return this.direction;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "hostTabIndex", {
+        get: function () {
+            return this.widgetTabIndex;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "isReadonly", {
+        get: function () {
+            return this.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "isAriaExpanded", {
+        get: function () {
+            return this.ariaExpanded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "hostAriaOwns", {
+        get: function () {
+            return this.ariaOwns;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "hostAriaActivedescendant", {
+        get: function () {
+            return this.ariaActivedescendant;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "hostNoDataLabel", {
+        get: function () {
+            return this.noDataLabel;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @hidden
+     */
+    DropDownListComponent.prototype.keydown = function (event) {
+        var firstIndex = isPresent(this.defaultItem) ? -1 : 0;
+        var focused = isNaN(this.selectionService.focused) ? this.firstFocusableIndex(firstIndex) : this.selectionService.focused;
+        var offset = 0;
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        var isHomeEnd = event.keyCode === Keys.Home || event.keyCode === Keys.End;
+        var isFilterFocused = this.filterable && this.isFocused && this.isOpen;
+        if (isFilterFocused && isHomeEnd) {
+            return;
+        }
+        var hasSelected = isPresent(this.selectionService.selected[0]);
+        var focusedItemNotSelected = isPresent(this.selectionService.focused) && !this.selectionService.isSelected(this.selectionService.focused);
+        if (!hasSelected || focusedItemNotSelected) {
+            if (event.keyCode === Keys.ArrowDown || event.keyCode === Keys.ArrowRight) {
+                offset = -1;
+            }
+            else if (event.keyCode === Keys.ArrowUp || event.keyCode === Keys.ArrowLeft) {
+                offset = 1;
+            }
         }
         var eventData = event;
         var action = this.navigationService.process({
@@ -4868,30 +5400,12 @@ var DropDownListComponent = /** @class */ (function () {
         this.focus();
         this.togglePopup(!this.isOpen);
     };
-    /**
-     * @hidden
-     */
-    DropDownListComponent.prototype.onResize = function () {
-        if (this._open) {
-            var popupWrapper = this.popupRef.popupElement;
-            var _a = this.width, min = _a.min, max = _a.max;
-            popupWrapper.style.minWidth = min;
-            popupWrapper.style.width = max;
-        }
-    };
-    Object.defineProperty(DropDownListComponent.prototype, "dir", {
-        get: function () {
-            return this.direction;
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(DropDownListComponent.prototype, "isFocused", {
         get: function () {
             return this._isFocused;
         },
         set: function (isFocused) {
-            this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-state-focused');
+            this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
             this._isFocused = isFocused;
         },
         enumerable: true,
@@ -4899,7 +5413,7 @@ var DropDownListComponent = /** @class */ (function () {
     });
     DropDownListComponent.prototype.ngOnInit = function () {
         var _this = this;
-        this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
+        this.renderer.removeAttribute(this.wrapper.nativeElement, "tabindex");
         this.localizationChangesSubscription = this.localization
             .changes.subscribe(function (_a) {
             var rtl = _a.rtl;
@@ -4908,6 +5422,7 @@ var DropDownListComponent = /** @class */ (function () {
         });
         this.setMessages();
         this.assignAriaDescribedBy();
+        this.setComponentClasses();
     };
     /**
      * @hidden
@@ -5089,6 +5604,36 @@ var DropDownListComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(DropDownListComponent.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' : '');
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "filterInputClasses", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return (this.size ? getSizeClass('input', this.size) : '') + " " + (this.fillMode ? 'k-input-' + this.fillMode : '') + " " + (this.rounded ? getRoundedClass(this.rounded) : '');
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownListComponent.prototype, "optionLabelSizeClass", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return "" + (this.size ? getSizeClass('list', this.size) : '');
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(DropDownListComponent.prototype, "listContainerClasses", {
         /**
          * @hidden
@@ -5236,13 +5781,13 @@ var DropDownListComponent = /** @class */ (function () {
             .subscribe(this.handleEnter.bind(this));
         this.escSubscription = this.navigationService.esc
             .subscribe(this.handleEscape.bind(this));
-        this.filterBlurredSubscription = this.filterBlurred.pipe(concatMap(function () { return interval(10).pipe(take(1), takeUntil(_this.wrapperFocused)); }))
+        this.filterBlurredSubscription = this.filterBlurred.pipe(concatMap(function () { return interval(10).pipe(take(1), takeUntil(_this.hostElementFocused)); }))
             .subscribe(function () {
-            _this.wrapperBlurred.emit();
+            _this.hostElementBlurred.emit();
         });
         this._zone.runOutsideAngular(function () {
             _this.componentBlurredSubscription =
-                merge(_this.wrapperBlurred.pipe(concatMap(function () { return interval(10).pipe(take(1), takeUntil(_this.filterFocused)); })), _this.navigationService.tab).pipe(tap(function (event) { return event instanceof NavigationEvent && _this.focus(); }), filter(function () { return _this.isFocused; }))
+                merge(_this.hostElementBlurred.pipe(concatMap(function () { return interval(10).pipe(take(1), takeUntil(_this.filterFocused)); })), _this.navigationService.tab).pipe(tap(function (event) { return event instanceof NavigationEvent && _this.focus(); }), filter(function () { return _this.isFocused; }))
                     .subscribe(function () { return _this.componentBlur(); });
         });
     };
@@ -5255,7 +5800,7 @@ var DropDownListComponent = /** @class */ (function () {
             // Roll up DropDownList on iOS when tapped outside
             return _this.touchstartDisposeHandler = _this.renderer.listen(document, 'touchstart', function (e) {
                 var target = e.target;
-                if (_this.isFocused && !inDropDown(_this.hostElement, target, _this.popupRef)) {
+                if (_this.isFocused && !inDropDown(_this.wrapper, target, _this.popupRef)) {
                     _this._zone.run(function () {
                         if (_this.filterFocused) {
                             // Close popup if filter is focused
@@ -5267,6 +5812,25 @@ var DropDownListComponent = /** @class */ (function () {
             });
         });
     };
+    DropDownListComponent.prototype.subscribeFocusEvents = function () {
+        var _this = this;
+        if (isDocumentAvailable()) {
+            this.focusComponent = this.focusComponent.bind(this);
+            this.blurComponent = this.blurComponent.bind(this);
+            this._zone.runOutsideAngular(function () {
+                var useCapture = true;
+                document.addEventListener('focus', _this.focusComponent, useCapture);
+                document.addEventListener('blur', _this.blurComponent, useCapture);
+            });
+        }
+    };
+    DropDownListComponent.prototype.unSubscribeFocusEvents = function () {
+        if (isDocumentAvailable()) {
+            var useCapture = true;
+            document.removeEventListener('focus', this.focusComponent, useCapture);
+            document.removeEventListener('blur', this.blurComponent, useCapture);
+        }
+    };
     DropDownListComponent.prototype.unsubscribeEvents = function () {
         if (!isDocumentAvailable()) {
             return;
@@ -5278,6 +5842,7 @@ var DropDownListComponent = /** @class */ (function () {
         this.escSubscription.unsubscribe();
         this.componentBlurredSubscription.unsubscribe();
         this.filterBlurredSubscription.unsubscribe();
+        this.unSubscribeFocusEvents();
         if (this.touchstartDisposeHandler) {
             this.touchstartDisposeHandler();
         }
@@ -5370,7 +5935,7 @@ var DropDownListComponent = /** @class */ (function () {
             hasObservers(this.close) ||
             hasObservers(this.onBlur) ||
             hasObservers(this.filterChange) ||
-            isUntouched(this.hostElement.nativeElement)) {
+            isUntouched(this.wrapper.nativeElement)) {
             this._zone.run(function () {
                 if (valueHasChanged) {
                     _this.selectionService.change(_this.selectionService.selected[0]);
@@ -5554,6 +6119,17 @@ var DropDownListComponent = /** @class */ (function () {
         var newValue = (this.valueLabelId + " " + trimmed).trim();
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-describedby', newValue);
     };
+    DropDownListComponent.prototype.setComponentClasses = function () {
+        if (this.size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', this.size));
+        }
+        if (this.rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        }
+        if (this.fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
+        }
+    };
     var DropDownListComponent_1;
     __decorate([
         Input(),
@@ -5642,6 +6218,21 @@ var DropDownListComponent = /** @class */ (function () {
         __metadata("design:type", Number),
         __metadata("design:paramtypes", [Number])
     ], DropDownListComponent.prototype, "tabIndex", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], DropDownListComponent.prototype, "size", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], DropDownListComponent.prototype, "rounded", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], DropDownListComponent.prototype, "fillMode", null);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
@@ -5714,24 +6305,90 @@ var DropDownListComponent = /** @class */ (function () {
         ViewChild('popupTemplate', { static: true }),
         __metadata("design:type", TemplateRef)
     ], DropDownListComponent.prototype, "popupTemplate", void 0);
-    __decorate([
-        ViewChild('wrapper', { static: true }),
-        __metadata("design:type", ElementRef)
-    ], DropDownListComponent.prototype, "wrapper", void 0);
     __decorate([
         ViewChild('optionsList', { static: false }),
         __metadata("design:type", ListComponent)
     ], DropDownListComponent.prototype, "optionsList", void 0);
     __decorate([
-        HostBinding('class.k-widget'),
-        HostBinding('class.k-dropdown'),
+        HostBinding('class.k-dropdownlist'),
+        HostBinding('class.k-picker'),
         __metadata("design:type", Boolean)
-    ], DropDownListComponent.prototype, "widgetClasses", void 0);
+    ], DropDownListComponent.prototype, "hostClasses", void 0);
+    __decorate([
+        HostBinding('class.k-disabled'),
+        HostBinding('attr.aria-disabled'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], DropDownListComponent.prototype, "isDisabled", null);
+    __decorate([
+        HostBinding('class.k-loading'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], DropDownListComponent.prototype, "isLoading", null);
+    __decorate([
+        HostBinding('attr.id'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [])
+    ], DropDownListComponent.prototype, "id", null);
     __decorate([
         HostBinding('attr.dir'),
         __metadata("design:type", String),
         __metadata("design:paramtypes", [])
     ], DropDownListComponent.prototype, "dir", null);
+    __decorate([
+        HostBinding('attr.tabindex'),
+        __metadata("design:type", Number),
+        __metadata("design:paramtypes", [])
+    ], DropDownListComponent.prototype, "hostTabIndex", null);
+    __decorate([
+        HostBinding('attr.readonly'),
+        HostBinding('attr.aria-readonly'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], DropDownListComponent.prototype, "isReadonly", null);
+    __decorate([
+        HostBinding('attr.role'),
+        HostBinding('attr.aria-haspopup'),
+        __metadata("design:type", String)
+    ], DropDownListComponent.prototype, "role", void 0);
+    __decorate([
+        HostBinding('attr.aria-expanded'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], DropDownListComponent.prototype, "isAriaExpanded", null);
+    __decorate([
+        HostBinding('attr.aria-owns'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [])
+    ], DropDownListComponent.prototype, "hostAriaOwns", null);
+    __decorate([
+        HostBinding('attr.aria-activedescendant'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [])
+    ], DropDownListComponent.prototype, "hostAriaActivedescendant", null);
+    __decorate([
+        HostBinding('attr.aria-label'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [])
+    ], DropDownListComponent.prototype, "hostNoDataLabel", null);
+    __decorate([
+        HostListener('keydown', ['$event']),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], DropDownListComponent.prototype, "keydown", null);
+    __decorate([
+        HostListener('keypress', ['$event']),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], DropDownListComponent.prototype, "keypress", null);
+    __decorate([
+        HostListener('click', ['$event']),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [MouseEvent]),
+        __metadata("design:returntype", void 0)
+    ], DropDownListComponent.prototype, "click", null);
     DropDownListComponent = DropDownListComponent_1 = __decorate([
         Component({
             exportAs: 'kendoDropDownList',
@@ -5754,10 +6411,11 @@ var DropDownListComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-dropdownlist',
-            template: "\n        <ng-container kendoDropDownListLocalizedMessages\n            i18n-noDataText=\"kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n        >\n        </ng-container>\n        <span #wrapper unselectable=\"on\"\n          role=\"listbox\"\n          [id]=\"focusableId\"\n          [ngClass]=\"{\n            'k-dropdown-wrap': true,\n            'k-state-disabled': this.disabled\n          }\"\n          [attr.dir]=\"direction\"\n          [attr.readonly]=\"readonly\"\n          [attr.tabindex]=\"widgetTabIndex\"\n          [attr.aria-disabled]=\"disabled\"\n          [attr.aria-readonly]=\"readonly\"\n          aria-haspopup=\"listbox\"\n          [attr.aria-expanded]=\"ariaExpanded\"\n          [attr.aria-owns]=\"ariaOwns\"\n          [attr.aria-activedescendant]=\"ariaActivedescendant\"\n          [attr.aria-label]=\"noDataLabel\"\n          (keydown)=\"keydown($event)\"\n          (keypress)=\"keypress($event)\"\n          (click)=\"click($event)\"\n          [kendoEventsOutsideAngular]=\"{\n            focus: focusComponent,\n            blur: blurComponent\n            }\"\n          [scope]=\"this\"\n        >\n            <span class=\"k-input\" unselectable=\"on\" [id]=\"valueLabelId\">\n               <ng-template *ngIf=\"valueTemplate\"\n                   [templateContext]=\"{\n                       templateRef: valueTemplate.templateRef,\n                       $implicit: dataItem\n                   }\">\n               </ng-template>\n               <ng-template [ngIf]=\"!valueTemplate\">{{ getText() }}</ng-template>\n           </span>\n           <span class=\"k-select\" unselectable=\"on\">\n               <span\n                    class=\"k-icon\"\n                    unselectable=\"on\"\n                    [ngClass]=\"buttonClasses\"\n                >\n                </span>\n           </span>\n           <ng-template #popupTemplate>\n               <!--filterable-->\n\n               <ng-template [ngIf]=\"filterable\">\n                   <span class=\"k-list-filter\" (click)=\"$event.stopImmediatePropagation()\">\n                       <input\n                           [attr.aria-owns]=\"ariaOwns\"\n                           [attr.aria-activedescendant]=\"ariaActivedescendant\"\n                           [attr.aria-label]=\"noDataLabel\"\n                           tabindex=\"-1\"\n                           [filterInput]=\"isFocused && !touchEnabled\"\n                           [dir]=\"direction\"\n                           [(ngModel)]=\"filterText\"\n                           class=\"k-textbox\"\n                           (keydown)=\"keydown($event)\"\n                           (input)=\"handleFilter($event)\"\n                           (focus)=\"onFilterFocus()\"\n                           (blur)=\"blurFilterInput()\" />\n                       <span class=\"k-icon k-i-search\" unselectable=\"on\"></span>\n                   </span>\n               </ng-template>\n               <!--default item-->\n               <ng-template [ngIf]=\"defaultItem && !itemTemplate\">\n                   <div class=\"k-list-optionlabel\" [ngClass]=\"{ 'k-state-disabled': isDisabledDefaultItem }\" kendoDropDownsSelectable [index]=\"-1\">\n                       {{ getDefaultItemText() }}\n                   </div>\n               </ng-template>\n               <ng-template [ngIf]=\"defaultItem && itemTemplate\">\n                   <div class=\"k-list-optionlabel\" [ngClass]=\"{ 'k-state-disabled': isDisabledDefaultItem }\" kendoDropDownsSelectable [index]=\"-1\">\n                       <ng-template\n                           [templateContext]=\"{\n                               templateRef: itemTemplate.templateRef,\n                               $implicit: defaultItem\n                           }\">\n                       </ng-template>\n                   </div>\n               </ng-template>\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]=\"itemTemplate\"\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 kendoDropDownListLocalizedMessages\n            i18n-noDataText=\"kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n        >\n        </ng-container>\n        <span class=\"k-input-inner\" unselectable=\"on\" [id]=\"valueLabelId\">\n            <span class=\"k-input-value-text\">\n                <ng-template *ngIf=\"valueTemplate\"\n                    [templateContext]=\"{\n                        templateRef: valueTemplate.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!valueTemplate\">{{ getText() }}</ng-template>\n            </span>\n        </span>\n        <button\n            tabindex=\"-1\"\n            unselectable=\"on\"\n            type=\"button\"\n            class=\"k-input-button k-button k-icon-button\"\n            [ngClass]=\"selectButtonClasses\"\n            [kendoEventsOutsideAngular]=\"{\n                mousedown: onMouseDown\n            }\"\n        >\n            <span\n                class=\"k-button-icon k-icon\"\n                unselectable=\"on\"\n                [ngClass]=\"buttonClasses\"\n            ></span>\n        </button>\n        <ng-template #popupTemplate>\n            <!--filterable-->\n\n            <ng-template [ngIf]=\"filterable\">\n                <div class=\"k-list-filter\" (click)=\"$event.stopImmediatePropagation()\">\n                    <span\n                        class=\"k-searchbox k-input\"\n                        [ngClass]=\"filterInputClasses\"\n                    >\n                        <span class=\"k-input-icon k-icon k-i-search\" unselectable=\"on\"></span>\n                        <input\n                            [attr.aria-owns]=\"ariaOwns\"\n                            [attr.aria-activedescendant]=\"ariaActivedescendant\"\n                            [attr.aria-label]=\"noDataLabel\"\n                            tabindex=\"-1\"\n                            [filterInput]=\"isFocused && !touchEnabled\"\n                            [dir]=\"direction\"\n                            [(ngModel)]=\"filterText\"\n                            class=\"k-input-inner\"\n                            (keydown)=\"keydown($event)\"\n                            (input)=\"handleFilter($event)\"\n                            (focus)=\"onFilterFocus()\"\n                            (blur)=\"blurFilterInput()\" />\n                    </span>\n                </div>\n            </ng-template>\n            <!--default item-->\n            <ng-template [ngIf]=\"defaultItem && !itemTemplate\">\n                <div\n                    class=\"k-list\"\n                    [ngClass]=\"optionLabelSizeClass\"\n                >\n                    <div class=\"k-list-optionlabel k-list-item\" [ngClass]=\"{ 'k-disabled': isDisabledDefaultItem }\" kendoDropDownsSelectable [index]=\"-1\">\n                        {{ getDefaultItemText() }}\n                    </div>\n                </div>\n            </ng-template>\n            <ng-template [ngIf]=\"defaultItem && itemTemplate\">\n                <div\n                    class=\"k-list\"\n                    [ngClass]=\"optionLabelSizeClass\"\n                >\n                    <div class=\"k-list-optionlabel k-list-item\" [ngClass]=\"{ 'k-disabled': isDisabledDefaultItem }\" kendoDropDownsSelectable [index]=\"-1\">\n                        <ng-template\n                            [templateContext]=\"{\n                                templateRef: itemTemplate.templateRef,\n                                $implicit: defaultItem\n                            }\">\n                        </ng-template>\n                    </div>\n                </div>\n            </ng-template>\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]=\"itemTemplate\"\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  "
         }),
         __param(10, Optional()), __param(10, Inject(TOUCH_ENABLED)),
-        __metadata("design:paramtypes", [LocalizationService,
+        __metadata("design:paramtypes", [ElementRef,
+            LocalizationService,
             PopupService,
             SelectionService,
             NavigationService,
@@ -5765,7 +6423,6 @@ var DropDownListComponent = /** @class */ (function () {
             DataService,
             NgZone,
             Renderer2,
-            ElementRef,
             ChangeDetectorRef, Boolean])
     ], DropDownListComponent);
     return DropDownListComponent;
@@ -5942,8 +6599,9 @@ var MULTISELECT_VALUE_ACCESSOR = {
  * ```
  */
 var MultiSelectComponent = /** @class */ (function () {
-    function MultiSelectComponent(localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, hostElement, _zone, touchEnabled$$1) {
+    function MultiSelectComponent(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, touchEnabled$$1) {
         var _this = this;
+        this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
         this.dataService = dataService;
@@ -5953,7 +6611,6 @@ var MultiSelectComponent = /** @class */ (function () {
         this.cdr = cdr;
         this.differs = differs;
         this.renderer = renderer;
-        this.hostElement = hostElement;
         this._zone = _zone;
         this.touchEnabled = touchEnabled$$1;
         this.listBoxId = guid$1();
@@ -6114,8 +6771,11 @@ var MultiSelectComponent = /** @class */ (function () {
          * This event is preventable. If you cancel it, the tag will not be removed.
          */
         this.removeTag = new EventEmitter();
-        this.widgetClasses = true;
+        this.hostClasses = true;
         this.initialized = false;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         this.onChangeCallback = function (_) { };
         this.onTouchedCallback = function (_) { };
         this._placeholder = '';
@@ -6192,7 +6852,7 @@ var MultiSelectComponent = /** @class */ (function () {
         if (hasObservers(this.onBlur) ||
             hasObservers(this.filterChange) ||
             hasObservers(this.close) ||
-            isUntouched(this.hostElement.nativeElement)) {
+            isUntouched(this.wrapper.nativeElement)) {
             this._zone.run(function () {
                 _this.closePopup();
                 if (!(_this.isOpen && _this.allowCustom)) {
@@ -6209,22 +6869,6 @@ var MultiSelectComponent = /** @class */ (function () {
             this.closePopup();
         }
     };
-    /**
-     * @hidden
-     */
-    MultiSelectComponent.prototype.wrapperMousedown = function (event) {
-        var inputElement = this.searchbar.input.nativeElement;
-        if (event.button === 0) {
-            if (this.isFocused && this.isOpen && event.target === inputElement) {
-                return;
-            }
-            if (!this.touchEnabled || (this.touchEnabled && event.target.tagName !== 'SPAN')) {
-                this.searchbar.focus();
-            }
-            this.togglePopup(!this.isOpen);
-            event.preventDefault();
-        }
-    };
     /**
      * @hidden
      */
@@ -6318,6 +6962,79 @@ var MultiSelectComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(MultiSelectComponent.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.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(MultiSelectComponent.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(MultiSelectComponent.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(MultiSelectComponent.prototype, "placeholder", {
         get: function () {
             return this.selectedDataItems.length ? '' : this._placeholder;
@@ -6424,6 +7141,29 @@ var MultiSelectComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(MultiSelectComponent.prototype, "isLoading", {
+        get: function () {
+            return this.loading;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @hidden
+     */
+    MultiSelectComponent.prototype.hostMousedown = function (event) {
+        var inputElement = this.searchbar.input.nativeElement;
+        if (event.button === 0) {
+            if (this.isFocused && this.isOpen && event.target === inputElement) {
+                return;
+            }
+            if (!this.touchEnabled || (this.touchEnabled && event.target.tagName !== 'SPAN')) {
+                this.searchbar.focus();
+            }
+            this.togglePopup(!this.isOpen);
+            event.preventDefault();
+        }
+    };
     Object.defineProperty(MultiSelectComponent.prototype, "listContainerClasses", {
         get: function () {
             var containerClasses = ['k-list-container', 'k-reset'];
@@ -6435,6 +7175,16 @@ var MultiSelectComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(MultiSelectComponent.prototype, "customItemSizeClass", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return "" + (this.size ? getSizeClass('list', this.size) : '');
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(MultiSelectComponent.prototype, "width", {
         get: function () {
             var wrapperOffsetWidth = 0;
@@ -6708,7 +7458,7 @@ var MultiSelectComponent = /** @class */ (function () {
     };
     MultiSelectComponent.prototype.ngOnInit = function () {
         var _this = this;
-        this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
+        this.renderer.removeAttribute(this.wrapper.nativeElement, "tabindex");
         this.createCustomValueStream();
         this.localizationChangeSubscription = this.localization
             .changes.subscribe(function (_a) {
@@ -6718,6 +7468,7 @@ var MultiSelectComponent = /** @class */ (function () {
         });
         this.setMessages();
         this.setState(this.value);
+        this.setComponentClasses();
         this.initialized = true;
     };
     MultiSelectComponent.prototype.ngOnChanges = function (changes) {
@@ -6814,7 +7565,7 @@ var MultiSelectComponent = /** @class */ (function () {
             return this._isFocused;
         },
         set: function (isFocused) {
-            this.renderer[isFocused ? 'addClass' : 'removeClass'](this.hostElement.nativeElement, 'k-state-focused');
+            this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
             this._isFocused = isFocused;
         },
         enumerable: true,
@@ -6853,7 +7604,7 @@ var MultiSelectComponent = /** @class */ (function () {
             // Roll up MultiSelect on iOS when tapped outside
             return _this.touchstartDisposeHandler = _this.renderer.listen(document, 'touchstart', function (e) {
                 var target = e.target;
-                if ((_this.isFocused || _this.isOpen) && !inDropDown(_this.hostElement, target, _this.popupRef)) {
+                if ((_this.isFocused || _this.isOpen) && !inDropDown(_this.wrapper, target, _this.popupRef)) {
                     _this._zone.run(function () {
                         _this.blur();
                         if (_this.isOpen) {
@@ -7231,6 +7982,17 @@ var MultiSelectComponent = /** @class */ (function () {
             });
         });
     };
+    MultiSelectComponent.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 MultiSelectComponent_1;
     __decorate([
         Input(),
@@ -7271,6 +8033,21 @@ var MultiSelectComponent = /** @class */ (function () {
         __metadata("design:type", Number),
         __metadata("design:paramtypes", [Number])
     ], MultiSelectComponent.prototype, "tabIndex", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], MultiSelectComponent.prototype, "size", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], MultiSelectComponent.prototype, "rounded", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], MultiSelectComponent.prototype, "fillMode", null);
     __decorate([
         Input(),
         __metadata("design:type", String),
@@ -7381,10 +8158,6 @@ var MultiSelectComponent = /** @class */ (function () {
         ViewChild('popupTemplate', { static: true }),
         __metadata("design:type", TemplateRef)
     ], MultiSelectComponent.prototype, "popupTemplate", void 0);
-    __decorate([
-        ViewChild('wrapper', { static: true }),
-        __metadata("design:type", ElementRef)
-    ], MultiSelectComponent.prototype, "wrapper", void 0);
     __decorate([
         ViewChild('optionsList', { static: false }),
         __metadata("design:type", ListComponent)
@@ -7426,20 +8199,31 @@ var MultiSelectComponent = /** @class */ (function () {
         __metadata("design:type", NoDataTemplateDirective)
     ], MultiSelectComponent.prototype, "noDataTemplate", void 0);
     __decorate([
-        HostBinding('class.k-widget'),
         HostBinding('class.k-multiselect'),
+        HostBinding('class.k-input'),
         __metadata("design:type", Boolean)
-    ], MultiSelectComponent.prototype, "widgetClasses", void 0);
+    ], MultiSelectComponent.prototype, "hostClasses", void 0);
     __decorate([
         HostBinding('attr.dir'),
         __metadata("design:type", String),
         __metadata("design:paramtypes", [])
     ], MultiSelectComponent.prototype, "dir", null);
     __decorate([
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], MultiSelectComponent.prototype, "disabledClass", null);
+    __decorate([
+        HostBinding('class.k-loading'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], MultiSelectComponent.prototype, "isLoading", null);
+    __decorate([
+        HostListener('mousedown', ['$event']),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], MultiSelectComponent.prototype, "hostMousedown", null);
     MultiSelectComponent = MultiSelectComponent_1 = __decorate([
         Component({
             exportAs: 'kendoMultiSelect',
@@ -7462,10 +8246,11 @@ var MultiSelectComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-multiselect',
-            template: "\n        <ng-container kendoMultiSelectLocalizedMessages\n            i18n-noDataText=\"kendo.multiselect.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        <div class=\"k-multiselect-wrap k-floatwrap\"\n            #wrapper\n            (mousedown)=\"wrapperMousedown($event)\"\n        >\n            <kendo-taglist\n                [id]=\"tagListId\"\n                [tags]=\"tags\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [focused]=\"focusedTagIndex\"\n                [disabled]=\"disabled\"\n                [template]=\"tagTemplate\"\n                [groupTemplate]=\"groupTagTemplate\"\n                [tagPrefix]=\"tagPrefix\"\n                [disabledIndices]=\"disabledIndices\"\n                (removeTag)=\"handleRemoveTag($event)\"\n            >\n            </kendo-taglist>\n            <kendo-searchbar\n                #searchbar\n                [id]=\"focusableId\"\n                [role]=\"'listbox'\"\n                [tagListId]=\"tagListId\"\n                [activeDescendant]=\"activeDescendant\"\n                [noDataLabel]=\"noDataLabel\"\n                [userInput]=\"text\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [tabIndex]=\"tabIndex\"\n                [popupOpen]=\"isOpen\"\n                [placeholder]=\"placeholder\"\n                (onNavigate)=\"handleNavigate($event)\"\n                (valueChange)=\"handleFilter($event)\"\n                (onBlur)=\"onSearchBarBlur()\"\n                (onFocus)=\"onSearchBarFocus()\"\n            >\n            </kendo-searchbar>\n            <span\n                *ngIf=\"!loading && !readonly && clearButton && (tags?.length || 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                (mousedown)=\"clearAll($event)\"\n            >\n            </span>\n            <span\n                *ngIf=\"loading\"\n                class=\"k-icon k-i-loading\"\n            >\n            </span>\n        </div>\n        <ng-template #popupTemplate>\n            <!--header template-->\n            <ng-template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </ng-template>\n            <!--custom item template-->\n            <div class=\"k-list\" *ngIf=\"allowCustom && text\">\n                <div class=\"k-item k-custom-item\" kendoDropDownsSelectable [multipleSelection]=\"true\" [index]=\"-1\">\n                    <ng-template *ngIf=\"customItemTemplate;else default_custom_item_template\"\n                        [templateContext]=\"{\n                            templateRef: customItemTemplate.templateRef,\n                            $implicit: text\n                        }\">\n                    </ng-template>\n                    <ng-template #default_custom_item_template>{{ text }}</ng-template>\n                    <span class=\"k-icon k-i-plus\" style=\"float: right\"></span>\n                </div>\n            </div>\n            <!--list-->\n            <kendo-list\n                #optionsList\n                [id]=\"listBoxId\"\n                [optionPrefix]=\"optionPrefix\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [height]=\"listHeight\"\n                [template]=\"template\"\n                [groupTemplate]=\"groupTemplate\"\n                [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                [show]=\"isOpen\"\n                [multipleSelection]=\"true\"\n                [virtual]=\"virtual\"\n                (pageChange)=\"pageChange($event)\"\n                [checkboxes]=\"checkboxes\"\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        <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 kendoMultiSelectLocalizedMessages\n            i18n-noDataText=\"kendo.multiselect.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-taglist\n            [size]=\"size\"\n            [rounded]=\"rounded\"\n            [fillMode]=\"fillMode\"\n            [id]=\"tagListId\"\n            [tags]=\"tags\"\n            [textField]=\"textField\"\n            [valueField]=\"valueField\"\n            [focused]=\"focusedTagIndex\"\n            [disabled]=\"disabled\"\n            [template]=\"tagTemplate\"\n            [groupTemplate]=\"groupTagTemplate\"\n            [tagPrefix]=\"tagPrefix\"\n            [disabledIndices]=\"disabledIndices\"\n            (removeTag)=\"handleRemoveTag($event)\"\n        >\n            <kendo-searchbar\n                #searchbar\n                [id]=\"focusableId\"\n                [role]=\"'listbox'\"\n                [tagListId]=\"tagListId\"\n                [activeDescendant]=\"activeDescendant\"\n                [noDataLabel]=\"noDataLabel\"\n                [userInput]=\"text\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [tabIndex]=\"tabIndex\"\n                [popupOpen]=\"isOpen\"\n                [placeholder]=\"placeholder\"\n                (onNavigate)=\"handleNavigate($event)\"\n                (valueChange)=\"handleFilter($event)\"\n                (onBlur)=\"onSearchBarBlur()\"\n                (onFocus)=\"onSearchBarFocus()\"\n            >\n            </kendo-searchbar>\n        </kendo-taglist>\n\n        <span\n            *ngIf=\"!loading && !readonly && clearButton && (tags?.length || text?.length)\"\n            class=\"k-clear-value\"\n            [style.visibility]=\"clearButtonVisiblity\"\n            [attr.title]=\"clearTitle\"\n            role=\"button\"\n            tabindex=\"-1\"\n            (mousedown)=\"clearAll($event)\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n        <span\n            *ngIf=\"loading\"\n            class=\"k-icon k-i-loading\"\n        >\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            <!--custom item template-->\n            <div\n                *ngIf=\"allowCustom && text\"\n                class=\"k-list\"\n                [ngClass]=\"customItemSizeClass\"\n            >\n                <div class=\"k-list-item k-custom-item\" kendoDropDownsSelectable [multipleSelection]=\"true\" [index]=\"-1\">\n                    <ng-template *ngIf=\"customItemTemplate;else default_custom_item_template\"\n                        [templateContext]=\"{\n                            templateRef: customItemTemplate.templateRef,\n                            $implicit: text\n                        }\">\n                    </ng-template>\n                    <ng-template #default_custom_item_template>{{ text }}</ng-template>\n                    <span class=\"k-icon k-i-plus\" style=\"float: right\"></span>\n                </div>\n            </div>\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                [height]=\"listHeight\"\n                [template]=\"template\"\n                [groupTemplate]=\"groupTemplate\"\n                [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                [show]=\"isOpen\"\n                [multipleSelection]=\"true\"\n                [virtual]=\"virtual\"\n                (pageChange)=\"pageChange($event)\"\n                [checkboxes]=\"checkboxes\"\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  "
         }),
         __param(11, Optional()), __param(11, Inject(TOUCH_ENABLED)),
-        __metadata("design:paramtypes", [LocalizationService,
+        __metadata("design:paramtypes", [ElementRef,
+            LocalizationService,
             PopupService,
             DataService,
             SelectionService,
@@ -7474,7 +8259,6 @@ var MultiSelectComponent = /** @class */ (function () {
             ChangeDetectorRef,
             KeyValueDiffers,
             Renderer2,
-            ElementRef,
             NgZone, Boolean])
     ], MultiSelectComponent);
     return MultiSelectComponent;
@@ -7649,8 +8433,8 @@ var getRowWidthFromColumnsMeta = function (columns) {
  */
 var MultiColumnComboBoxComponent = /** @class */ (function (_super) {
     __extends(MultiColumnComboBoxComponent, _super);
-    function MultiColumnComboBoxComponent(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, hostElement, touchEnabled$$1) {
-        var _this = _super.call(this, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, hostElement, touchEnabled$$1) || this;
+    function MultiColumnComboBoxComponent(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, wrapper, touchEnabled$$1) {
+        var _this = _super.call(this, wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, touchEnabled$$1) || this;
         /**
          * @hidden
          */
@@ -7663,6 +8447,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
@@ -7685,19 +8479,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,
@@ -7780,6 +8579,11 @@ var MultiColumnComboBoxComponent = /** @class */ (function (_super) {
         HostBinding('class.k-dropdowngrid'),
         __metadata("design:type", Boolean)
     ], MultiColumnComboBoxComponent.prototype, "hostClasses", void 0);
+    __decorate([
+        HostBinding('class.k-disabled'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], MultiColumnComboBoxComponent.prototype, "isDisabled", null);
     __decorate([
         ContentChildren(ComboBoxColumnComponent),
         __metadata("design:type", QueryList)
@@ -7816,7 +8620,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    "
         }),
         __param(10, Inject(TOUCH_ENABLED)),
         __metadata("design:paramtypes", [LocalizationService,
@@ -7865,16 +8669,18 @@ var isNodeVisible = function () { return true; };
  * Represents the [Kendo UI DropDownTree component for Angular]({% slug overview_ddt %}).
  */
 var DropDownTreeComponent = /** @class */ (function () {
-    function DropDownTreeComponent(popupService, navigationService, renderer, hostElement, _zone, cdr, localization, touchEnabled$$1) {
+    function DropDownTreeComponent(wrapper, popupService, navigationService, renderer, _zone, cdr, localization, touchEnabled$$1) {
+        this.wrapper = wrapper;
         this.popupService = popupService;
         this.navigationService = navigationService;
         this.renderer = renderer;
-        this.hostElement = hostElement;
         this._zone = _zone;
         this.cdr = cdr;
         this.localization = localization;
         this.touchEnabled = touchEnabled$$1;
         this.hostClasses = true;
+        this.role = 'listbox';
+        this.ariaHasPopup = 'tree';
         /**
          * Fires each time the popup is about to open
          * ([see example]({% slug openstate_ddt %})).
@@ -8009,21 +8815,78 @@ var DropDownTreeComponent = /** @class */ (function () {
         this._popupSettings = DEFAULT_POPUP_SETTINGS;
         this._tabindex = 0;
         this._isFocused = false;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         this.subscriptions = [];
         this.onTouchedCallback = noop;
         this.onChangeCallback = noop;
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.subscribeEvents();
         this.subscribeTouchEvents();
+        this.subscribeFocusEvents();
     }
     DropDownTreeComponent_1 = DropDownTreeComponent;
-    Object.defineProperty(DropDownTreeComponent.prototype, "clearable", {
+    Object.defineProperty(DropDownTreeComponent.prototype, "isDisabled", {
+        get: function () {
+            return this.disabled;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownTreeComponent.prototype, "isLoading", {
+        get: function () {
+            return this.loading;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownTreeComponent.prototype, "id", {
+        get: function () {
+            return this.focusableId;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownTreeComponent.prototype, "hostTabIndex", {
+        get: function () {
+            return this.tabindex;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownTreeComponent.prototype, "isAriaExpanded", {
+        get: function () {
+            return this.isOpen;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownTreeComponent.prototype, "isReadonly", {
         get: function () {
-            return this.clearButton;
+            return this.readonly;
         },
         enumerable: true,
         configurable: true
     });
+    /**
+     * @hidden
+     */
+    DropDownTreeComponent.prototype.handleClick = function () {
+        this.togglePopup(!this.isOpen);
+    };
+    /**
+     * @hidden
+     */
+    DropDownTreeComponent.prototype.handleKeydown = function (event) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        var eventData = event;
+        this.navigationService.process({
+            originalEvent: eventData
+        });
+    };
     Object.defineProperty(DropDownTreeComponent.prototype, "treeview", {
         get: function () {
             return this._treeview;
@@ -8125,12 +8988,85 @@ var DropDownTreeComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(DropDownTreeComponent.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.nativeElement, getSizeClass('picker', this.size));
+            if (size) {
+                this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', size));
+            }
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownTreeComponent.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(DropDownTreeComponent.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('picker', this.fillMode));
+            if (fillMode) {
+                this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', fillMode));
+            }
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(DropDownTreeComponent.prototype, "isFocused", {
         get: function () {
             return this._isFocused;
         },
         set: function (isFocused) {
-            this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-state-focused');
+            this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
             this._isFocused = isFocused;
         },
         enumerable: true,
@@ -8266,7 +9202,7 @@ var DropDownTreeComponent = /** @class */ (function () {
     });
     DropDownTreeComponent.prototype.ngOnInit = function () {
         var _this = this;
-        this.renderer.removeAttribute(this.hostElement.nativeElement, 'tabindex');
+        this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
         this.assignAriaDescribedBy();
         this.subscriptions.push(this.localization
             .changes.subscribe(function (_a) {
@@ -8274,6 +9210,7 @@ var DropDownTreeComponent = /** @class */ (function () {
             _this.direction = rtl ? 'rtl' : 'ltr';
             _this.cdr.markForCheck();
         }));
+        this.setComponentClasses();
     };
     /**
      * @hidden
@@ -8324,8 +9261,12 @@ var DropDownTreeComponent = /** @class */ (function () {
     /**
      * @hidden
      */
-    DropDownTreeComponent.prototype.handleFocus = function () {
+    DropDownTreeComponent.prototype.handleFocus = function (event) {
         var _this = this;
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
         if (!this.isFocused) {
             this.isFocused = true;
             if (hasObservers(this.onFocus)) {
@@ -8341,13 +9282,13 @@ var DropDownTreeComponent = /** @class */ (function () {
     DropDownTreeComponent.prototype.handleBlur = function (e) {
         var _this = this;
         var relatedTarget = e && e.relatedTarget;
-        if (this.hostElement.nativeElement.contains(relatedTarget) ||
+        if (this.wrapper.nativeElement.contains(relatedTarget) ||
             (this.isOpen && this.popupRef.popupElement.contains(relatedTarget))) {
             return;
         }
         this.isFocused = false;
         if (hasObservers(this.onBlur) ||
-            isUntouched(this.hostElement.nativeElement)) {
+            isUntouched(this.wrapper.nativeElement)) {
             this._zone.run(function () {
                 _this.togglePopup(false);
                 _this.onBlur.emit();
@@ -8358,24 +9299,6 @@ var DropDownTreeComponent = /** @class */ (function () {
             this.togglePopup(false);
         }
     };
-    /**
-     * @hidden
-     */
-    DropDownTreeComponent.prototype.handleKeydown = function (event) {
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        var eventData = event;
-        this.navigationService.process({
-            originalEvent: eventData
-        });
-    };
-    /**
-     * @hidden
-     */
-    DropDownTreeComponent.prototype.handleClick = function () {
-        this.togglePopup(!this.isOpen);
-    };
     /**
      * Focuses a specific item of the DropDownTree based on a provided index in the format of `1_1`.
      * The targeted item should be expanded in order for it to be focused.
@@ -8439,7 +9362,7 @@ var DropDownTreeComponent = /** @class */ (function () {
          * @hidden
          */
         get: function () {
-            var containerClasses = ['k-popup-dropdowntree', 'k-reset', 'k-group', 'k-list-container'];
+            var containerClasses = ['k-popup-dropdowntree'];
             if (this.popupSettings.popupClass) {
                 containerClasses.push(this.popupSettings.popupClass);
             }
@@ -8552,6 +9475,26 @@ var DropDownTreeComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(DropDownTreeComponent.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' : '');
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DropDownTreeComponent.prototype, "filterInputClasses", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return (this.size ? getSizeClass('input', this.size) : '') + " " + (this.fillMode ? 'k-input-' + this.fillMode : '') + " " + (this.rounded ? getRoundedClass(this.rounded) : '');
+        },
+        enumerable: true,
+        configurable: true
+    });
     DropDownTreeComponent.prototype.verifySettings = function () {
         if (!isDevMode()) {
             return;
@@ -8715,7 +9658,7 @@ var DropDownTreeComponent = /** @class */ (function () {
             // Roll up DropDownTree on iOS when tapped outside
             return _this.touchstartDisposeHandler = _this.renderer.listen(document, 'touchstart', function (e) {
                 var target = e.target;
-                if (_this.isFocused && !inDropDown(_this.hostElement, target, _this.popupRef)) {
+                if (_this.isFocused && !inDropDown(_this.wrapper, target, _this.popupRef)) {
                     _this._zone.run(function () {
                         if (_this.isOpen) {
                             _this.treeview.blur();
@@ -8726,34 +9669,118 @@ var DropDownTreeComponent = /** @class */ (function () {
             });
         });
     };
+    DropDownTreeComponent.prototype.subscribeFocusEvents = function () {
+        var _this = this;
+        if (isDocumentAvailable()) {
+            this.handleFocus = this.handleFocus.bind(this);
+            this.handleDocumentBlur = this.handleDocumentBlur.bind(this);
+            this._zone.runOutsideAngular(function () {
+                var useCapture = true;
+                document.addEventListener('focus', _this.handleFocus, useCapture);
+                document.addEventListener('blur', _this.handleDocumentBlur, useCapture);
+            });
+        }
+    };
+    DropDownTreeComponent.prototype.unSubscribeFocusEvents = function () {
+        if (isDocumentAvailable()) {
+            var useCapture = true;
+            document.removeEventListener('focus', this.handleFocus, useCapture);
+            document.removeEventListener('blur', this.handleDocumentBlur, useCapture);
+        }
+    };
     DropDownTreeComponent.prototype.unsubscribeEvents = function () {
         this.subscriptions.forEach(function (sub) { return sub.unsubscribe(); });
+        this.unSubscribeFocusEvents();
         if (this.touchstartDisposeHandler) {
             this.touchstartDisposeHandler();
         }
     };
+    DropDownTreeComponent.prototype.handleDocumentBlur = function (event) {
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
+        this.handleBlur(event);
+    };
     DropDownTreeComponent.prototype.assignAriaDescribedBy = function () {
         var currentValue = this.wrapper.nativeElement.getAttribute('aria-describedby') || '';
         // add to the current value - don't replace it (the aria-describedby is used by the FormField component as well)
         var newValue = (this.valueLabelId + " " + currentValue.trim()).trim();
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-describedby', newValue);
     };
+    DropDownTreeComponent.prototype.setComponentClasses = function () {
+        if (this.size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', this.size));
+        }
+        if (this.rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        }
+        if (this.fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
+        }
+    };
     var DropDownTreeComponent_1;
     __decorate([
-        HostBinding('class.k-widget'),
         HostBinding('class.k-dropdowntree'),
-        HostBinding('class.k-dropdowntree-clearable'),
+        HostBinding('class.k-picker'),
         __metadata("design:type", Boolean)
     ], DropDownTreeComponent.prototype, "hostClasses", void 0);
+    __decorate([
+        HostBinding('class.k-disabled'),
+        HostBinding('attr.aria-disabled'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], DropDownTreeComponent.prototype, "isDisabled", null);
+    __decorate([
+        HostBinding('class.k-loading'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], DropDownTreeComponent.prototype, "isLoading", null);
+    __decorate([
+        HostBinding('attr.id'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [])
+    ], DropDownTreeComponent.prototype, "id", null);
     __decorate([
         HostBinding('attr.dir'),
         __metadata("design:type", String)
     ], DropDownTreeComponent.prototype, "direction", void 0);
     __decorate([
-        HostBinding('class.k-dropdowntree-clearable'),
+        HostBinding('attr.tabindex'),
+        __metadata("design:type", Number),
+        __metadata("design:paramtypes", [])
+    ], DropDownTreeComponent.prototype, "hostTabIndex", null);
+    __decorate([
+        HostBinding('attr.role'),
+        __metadata("design:type", String)
+    ], DropDownTreeComponent.prototype, "role", void 0);
+    __decorate([
+        HostBinding('attr.aria-haspopup'),
+        __metadata("design:type", String)
+    ], DropDownTreeComponent.prototype, "ariaHasPopup", void 0);
+    __decorate([
+        HostBinding('attr.aria-expanded'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], DropDownTreeComponent.prototype, "isAriaExpanded", null);
+    __decorate([
+        HostBinding('attr.readonly'),
+        HostBinding('attr.aria-readonly'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
-    ], DropDownTreeComponent.prototype, "clearable", null);
+    ], DropDownTreeComponent.prototype, "isReadonly", null);
+    __decorate([
+        HostListener('click'),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], DropDownTreeComponent.prototype, "handleClick", null);
+    __decorate([
+        HostListener('keydown', ['$event']),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], DropDownTreeComponent.prototype, "handleKeydown", null);
     __decorate([
         ContentChild(NoDataTemplateDirective, { static: false }),
         __metadata("design:type", NoDataTemplateDirective)
@@ -8778,10 +9805,6 @@ var DropDownTreeComponent = /** @class */ (function () {
         ViewChild('popupTemplate', { static: true }),
         __metadata("design:type", TemplateRef)
     ], DropDownTreeComponent.prototype, "popupTemplate", void 0);
-    __decorate([
-        ViewChild('wrapper', { static: true }),
-        __metadata("design:type", ElementRef)
-    ], DropDownTreeComponent.prototype, "wrapper", void 0);
     __decorate([
         ViewChild('container', { read: ViewContainerRef, static: true }),
         __metadata("design:type", ViewContainerRef)
@@ -8908,6 +9931,21 @@ var DropDownTreeComponent = /** @class */ (function () {
         __metadata("design:type", Number),
         __metadata("design:paramtypes", [Number])
     ], DropDownTreeComponent.prototype, "tabindex", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], DropDownTreeComponent.prototype, "size", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], DropDownTreeComponent.prototype, "rounded", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], DropDownTreeComponent.prototype, "fillMode", null);
     __decorate([
         Input(),
         __metadata("design:type", Function)
@@ -8968,14 +10006,14 @@ var DropDownTreeComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-dropdowntree',
-            template: "\n        <ng-container kendoDropDownTreeLocalizedMessages\n            i18n-noDataText=\"kendo.dropdowntree.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.dropdowntree.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <span\n            #wrapper\n            [ngClass]=\"{\n                'k-dropdown-wrap': true,\n                'k-state-disabled': this.disabled\n            }\"\n            [attr.id]=\"focusableId\"\n            role=\"listbox\"\n            aria-haspopup=\"tree\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-readonly]=\"readonly\"\n            [attr.tabindex]=\"tabindex\"\n            [attr.dir]=\"direction\"\n            (click)=\"handleClick()\"\n            (keydown)=\"handleKeydown($event)\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleFocus,\n                blur: handleBlur\n            }\"\n            [scope]=\"this\"\n        >\n            <span\n                [attr.id]=\"valueLabelId\"\n                class=\"k-input\"\n            >\n                <ng-template *ngIf=\"valueTemplate\"\n                    [templateContext]=\"{\n                        templateRef: valueTemplate.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!valueTemplate\"> {{ text || placeholder }} </ng-template>\n            </span>\n            <span\n                *ngIf=\"!loading && !readonly && clearButton && text?.length && !disabled\"\n                class=\"k-icon k-clear-value k-i-close\"\n                [style.visibility]=\"clearButtonVisiblity\"\n                aria-hidden=\"true\"\n                [attr.title]=\"messageFor('clearTitle')\"\n                (click)=\"clearValue($event)\"\n            >\n            </span>\n            <span class=\"k-select\" aria-hidden=\"true\">\n                <span\n                    class=\"k-icon k-i-arrow-60-down\"\n                    [ngClass]=\"buttonClasses\"\n                ></span>\n            </span>\n        </span>\n        <ng-template #popupTemplate>\n            <span\n                *ngIf=\"filterable\"\n                class=\"k-list-filter\"\n            >\n                <input\n                    #filterInput\n                    (input)=\"handleFilterInputChange($event.target.value)\"\n                    [filterInput]=\"filterable && !touchEnabled\"\n                    (keydown.arrowdown)=\"handleKeydown($event)\"\n                    (keydown.alt.arrowup)=\"handleKeydown($event)\"\n                    [(ngModel)]=\"filter\"\n                    class=\"k-textbox\"\n                    role=\"textbox\"\n                    aria-haspopup=\"true\"\n                    aria-expanded=\"false\"\n                    tabindex=\"0\"\n                    aria-disabled=\"false\"\n                    aria-readonly=\"false\"\n                    [kendoEventsOutsideAngular]=\"{\n                        blur: handleBlur\n                    }\"\n                    [scope]=\"this\"\n                >\n                <span class=\"k-icon k-i-zoom\"></span>\n            </span>\n            <!--header template-->\n            <ng-template\n                *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <kendo-treeview\n                #treeview\n                *ngIf=\"data.length !== 0 && !allNodesHidden\"\n                [nodes]=\"data\"\n                [style.maxHeight.px]=\"listHeight\"\n                [animate]=\"false\"\n                [(selectedKeys)]=\"selectedKeys\"\n                [selectBy]=\"selectBy\"\n                [textField]=\"textField\"\n                kendoTreeViewSelectable\n                [children]=\"children\"\n                [hasChildren]=\"hasChildren\"\n                [loadOnDemand]=\"loadOnDemand\"\n                [isExpanded]=\"isNodeExpanded\"\n                [isDisabled]=\"itemDisabled\"\n                [nodeTemplate]=\"nodeTemplate\"\n                [filter]=\"filter\"\n                [isVisible]=\"isNodeVisible\"\n                (focusout)=\"handleBlur($event)\"\n                (keydown)=\"handleKeydown($event)\"\n                (selectionChange)=\"onSelectionChange($event)\"\n                (expand)=\"nodeExpand.emit($event)\"\n                (collapse)=\"nodeCollapse.emit($event)\"\n            >\n            </kendo-treeview>\n            <!--footer template-->\n            <ng-template\n                *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <!--no-data template-->\n            <div class=\"k-nodata\" *ngIf=\"data.length === 0 || allNodesHidden\">\n                <ng-template [ngIf]=\"noDataTemplate\"\n                    [templateContext]=\"{\n                        templateRef: noDataTemplate?.templateRef\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!noDataTemplate\">\n                    <div>{{ messageFor('noDataText') }}</div>\n                </ng-template>\n            </div>\n        </ng-template>\n        <ng-container #container></ng-container>\n    ",
+            template: "\n        <ng-container kendoDropDownTreeLocalizedMessages\n            i18n-noDataText=\"kendo.dropdowntree.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.dropdowntree.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <span\n            [attr.id]=\"valueLabelId\"\n            class=\"k-input-inner\"\n        >\n            <span class=\"k-input-value-text\">\n                <ng-template *ngIf=\"valueTemplate\"\n                    [templateContext]=\"{\n                        templateRef: valueTemplate.templateRef,\n                        $implicit: dataItem\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!valueTemplate\"> {{ text || placeholder }} </ng-template>\n            </span>\n        </span>\n        <span\n            *ngIf=\"!loading && !readonly && clearButton && text?.length && !disabled\"\n            class=\"k-clear-value\"\n            [style.visibility]=\"clearButtonVisiblity\"\n            aria-hidden=\"true\"\n            [attr.title]=\"messageFor('clearTitle')\"\n            (click)=\"clearValue($event)\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n        <button\n            tabindex=\"-1\"\n            type=\"button\"\n            aria-hidden=\"true\"\n            class=\"k-input-button k-button k-icon-button\"\n            [ngClass]=\"selectButtonClasses\"\n        >\n            <span\n                class=\"k-button-icon k-icon\"\n                [ngClass]=\"buttonClasses\"\n            ></span>\n        </button>\n        <ng-template #popupTemplate>\n            <span\n                *ngIf=\"filterable\"\n                class=\"k-list-filter\"\n            >\n                <span\n                    class=\"k-textbox k-input\"\n                    [ngClass]=\"filterInputClasses\"\n                >\n                    <span class=\"k-input-prefix\">\n                        <span class=\"k-input-icon k-icon k-i-search\"></span>\n                    </span>\n                    <input\n                        #filterInput\n                        (input)=\"handleFilterInputChange($event.target.value)\"\n                        [filterInput]=\"filterable && !touchEnabled\"\n                        (keydown.arrowdown)=\"handleKeydown($event)\"\n                        (keydown.alt.arrowup)=\"handleKeydown($event)\"\n                        [(ngModel)]=\"filter\"\n                        class=\"k-input-inner\"\n                        role=\"textbox\"\n                        aria-haspopup=\"true\"\n                        aria-expanded=\"false\"\n                        tabindex=\"0\"\n                        aria-disabled=\"false\"\n                        aria-readonly=\"false\"\n                        [kendoEventsOutsideAngular]=\"{\n                            blur: handleBlur\n                        }\"\n                        [scope]=\"this\"\n                    >\n                </span>\n            </span>\n            <!--header template-->\n            <ng-template\n                *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <kendo-treeview\n                #treeview\n                *ngIf=\"data.length !== 0 && !allNodesHidden\"\n                [size]=\"size\"\n                [nodes]=\"data\"\n                [style.maxHeight.px]=\"listHeight\"\n                [animate]=\"false\"\n                [(selectedKeys)]=\"selectedKeys\"\n                [selectBy]=\"selectBy\"\n                [textField]=\"textField\"\n                kendoTreeViewSelectable\n                [children]=\"children\"\n                [hasChildren]=\"hasChildren\"\n                [loadOnDemand]=\"loadOnDemand\"\n                [isExpanded]=\"isNodeExpanded\"\n                [isDisabled]=\"itemDisabled\"\n                [nodeTemplate]=\"nodeTemplate\"\n                [filter]=\"filter\"\n                [isVisible]=\"isNodeVisible\"\n                (focusout)=\"handleBlur($event)\"\n                (keydown)=\"handleKeydown($event)\"\n                (selectionChange)=\"onSelectionChange($event)\"\n                (expand)=\"nodeExpand.emit($event)\"\n                (collapse)=\"nodeCollapse.emit($event)\"\n            >\n            </kendo-treeview>\n            <!--footer template-->\n            <ng-template\n                *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <!--no-data template-->\n            <div class=\"k-no-data\" *ngIf=\"data.length === 0 || allNodesHidden\">\n                <ng-template [ngIf]=\"noDataTemplate\"\n                    [templateContext]=\"{\n                        templateRef: noDataTemplate?.templateRef\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!noDataTemplate\">\n                    <div>{{ messageFor('noDataText') }}</div>\n                </ng-template>\n            </div>\n        </ng-template>\n        <ng-container #container></ng-container>\n    ",
             changeDetection: ChangeDetectionStrategy.OnPush
         }),
         __param(7, Optional()), __param(7, Inject(TOUCH_ENABLED)),
-        __metadata("design:paramtypes", [PopupService,
+        __metadata("design:paramtypes", [ElementRef,
+            PopupService,
             NavigationService,
             Renderer2,
-            ElementRef,
             NgZone,
             ChangeDetectorRef,
             LocalizationService, Boolean])
@@ -8994,16 +10032,18 @@ var isNodeVisible$1 = function () { return true; };
  * Represents the [Kendo UI MultiSelectTree component for Angular]({% slug overview_multiselecttree %}).
  */
 var MultiSelectTreeComponent = /** @class */ (function () {
-    function MultiSelectTreeComponent(popupService, renderer, hostElement, navigationService, _zone, localization, cdr, touchEnabled$$1) {
+    function MultiSelectTreeComponent(wrapper, popupService, renderer, navigationService, _zone, localization, cdr, touchEnabled$$1) {
+        this.wrapper = wrapper;
         this.popupService = popupService;
         this.renderer = renderer;
-        this.hostElement = hostElement;
         this.navigationService = navigationService;
         this._zone = _zone;
         this.localization = localization;
         this.cdr = cdr;
         this.touchEnabled = touchEnabled$$1;
         this.hostClasses = true;
+        this.role = 'listbox';
+        this.ariaHasPopup = 'tree';
         /**
          * Sets the levels in the data set where the values can be found when `valueField` is an Array.
          * The field serves to correctly allocate a data item used when the MultiSelectTree is initialized with a value.
@@ -9166,14 +10206,93 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         this._popupSettings = DEFAULT_POPUP_SETTINGS$1;
         this._checkableSettings = DEFAULT_CHECKABLE_SETTINGS;
         this._isFocused = false;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         this.subscriptions = [];
         this.lastAction = 'check';
         this.onTouchedCallback = noop;
         this.onChangeCallback = noop;
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.subscribeEvents();
+        this.subscribeFocusEvents();
     }
     MultiSelectTreeComponent_1 = MultiSelectTreeComponent;
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "isDisabled", {
+        get: function () {
+            return this.disabled;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "isLoading", {
+        get: function () {
+            return this.loading;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "id", {
+        get: function () {
+            return this.focusableId;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "hostTabIndex", {
+        get: function () {
+            return this.tabindex;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "isReadonly", {
+        get: function () {
+            return this.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "ariaDescribedBy", {
+        get: function () {
+            return this.tagListId;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "ariaActiveDescendant", {
+        get: function () {
+            return this.focusedTagId;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @hidden
+     */
+    MultiSelectTreeComponent.prototype.handleClick = function () {
+        this.togglePopup(!this.isOpen);
+    };
+    /**
+     * @hidden
+     */
+    MultiSelectTreeComponent.prototype.handleKeydown = function (event) {
+        var deleteTag = this.isWrapperActive && event.keyCode === Keys.Backspace && this.tags.length > 0;
+        if (deleteTag) {
+            this.handleBackspace();
+            return;
+        }
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        var eventData = event;
+        var action = this.navigationService.process({
+            originalEvent: eventData
+        });
+        if (action === NavigationAction.Open) {
+            eventData.preventDefault();
+        }
+    };
     Object.defineProperty(MultiSelectTreeComponent.prototype, "treeview", {
         get: function () {
             return this._treeview;
@@ -9214,6 +10333,79 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(MultiSelectTreeComponent.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.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(MultiSelectTreeComponent.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(MultiSelectTreeComponent.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(MultiSelectTreeComponent.prototype, "popupSettings", {
         get: function () {
             return this._popupSettings;
@@ -9333,7 +10525,7 @@ var MultiSelectTreeComponent = /** @class */ (function () {
             return this._isFocused;
         },
         set: function (isFocused) {
-            this.renderer[isFocused ? 'addClass' : 'removeClass'](this.hostElement.nativeElement, 'k-state-focused');
+            this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
             this._isFocused = isFocused;
         },
         enumerable: true,
@@ -9384,7 +10576,7 @@ var MultiSelectTreeComponent = /** @class */ (function () {
          * @hidden
          */
         get: function () {
-            var containerClasses = ['k-popup-dropdowntree', 'k-reset', 'k-group', 'k-list-container'];
+            var containerClasses = ['k-popup-dropdowntree'];
             if (this.popupSettings.popupClass) {
                 containerClasses.push(this.popupSettings.popupClass);
             }
@@ -9520,7 +10712,7 @@ var MultiSelectTreeComponent = /** @class */ (function () {
     });
     MultiSelectTreeComponent.prototype.ngOnInit = function () {
         var _this = this;
-        this.renderer.removeAttribute(this.hostElement.nativeElement, 'tabindex');
+        this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', String(this.isOpen));
         this.subscriptions.push(this.localization
             .changes.subscribe(function (_a) {
@@ -9528,6 +10720,7 @@ var MultiSelectTreeComponent = /** @class */ (function () {
             _this.direction = rtl ? 'rtl' : 'ltr';
             _this.cdr.markForCheck();
         }));
+        this.setComponentClasses();
     };
     /**
      * @hidden
@@ -9633,8 +10826,12 @@ var MultiSelectTreeComponent = /** @class */ (function () {
     /**
      * @hidden
      */
-    MultiSelectTreeComponent.prototype.handleFocus = function () {
+    MultiSelectTreeComponent.prototype.handleFocus = function (event) {
         var _this = this;
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
         if (!this.isFocused) {
             this.isFocused = true;
             if (hasObservers(this.onFocus)) {
@@ -9644,7 +10841,9 @@ var MultiSelectTreeComponent = /** @class */ (function () {
             }
             // Re-focus the treeview if `close` is prevented
             if (this.isOpen && this.treeview) {
-                this.lastNodeOnFocus.setAttribute('tabindex', '0');
+                if (this.lastNodeOnFocus) {
+                    this.lastNodeOnFocus.setAttribute('tabindex', '0');
+                }
                 this.treeview.focus();
             }
         }
@@ -9655,46 +10854,20 @@ var MultiSelectTreeComponent = /** @class */ (function () {
     MultiSelectTreeComponent.prototype.handleBlur = function (e) {
         var _this = this;
         var relatedTarget = e && e.relatedTarget;
-        if (this.hostElement.nativeElement.contains(relatedTarget) ||
+        if (this.wrapper.nativeElement.contains(relatedTarget) ||
             (this.isOpen && this.popupRef.popupElement.contains(relatedTarget))) {
             return;
         }
         this.isFocused = false;
         this.togglePopup(false);
         if (hasObservers(this.onBlur) ||
-            isUntouched(this.hostElement.nativeElement)) {
+            isUntouched(this.wrapper.nativeElement)) {
             this._zone.run(function () {
                 _this.onBlur.emit();
                 _this.onTouchedCallback();
             });
         }
     };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.handleClick = function () {
-        this.togglePopup(!this.isOpen);
-    };
-    /**
-     * @hidden
-     */
-    MultiSelectTreeComponent.prototype.handleKeydown = function (event) {
-        var deleteTag = this.isWrapperActive && event.keyCode === Keys.Backspace && this.tags.length > 0;
-        if (deleteTag) {
-            this.handleBackspace();
-            return;
-        }
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        var eventData = event;
-        var action = this.navigationService.process({
-            originalEvent: eventData
-        });
-        if (action === NavigationAction.Open) {
-            eventData.preventDefault();
-        }
-    };
     /**
      * @hidden
      */
@@ -9834,6 +11007,26 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         this.filterChange.next(term);
         this.allNodesHidden = this.nodes.every(function (node, index) { return !_this.isVisible(node, String(index)); });
     };
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "filterInputClasses", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return (this.size ? getSizeClass('input', this.size) : '') + " " + (this.fillMode ? 'k-input-' + this.fillMode : '') + " " + (this.rounded ? getRoundedClass(this.rounded) : '');
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiSelectTreeComponent.prototype, "checkAllCheckboxClasses", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return "" + (this.size ? getSizeClass('checkbox', this.size) : '');
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @hidden
      */
@@ -9949,6 +11142,32 @@ var MultiSelectTreeComponent = /** @class */ (function () {
             .pipe(filter(function () { return !_this.isTreeViewActive; }))
             .subscribe(this.direction === 'rtl' ? this.handleLeftKey.bind(this) : this.handleRightKey.bind(this)), this.navigationService.home.pipe(filter(function () { return !_this.isOpen; })).subscribe(this.handleHome.bind(this)), this.navigationService.end.pipe(filter(function () { return !_this.isOpen; })).subscribe(this.handleEnd.bind(this)), this.navigationService.backspace.pipe(filter(function () { return _this.isTagFocused; })).subscribe(this.handleBackspace.bind(this)), this.navigationService.delete.pipe(filter(function () { return _this.isTagFocused; })).subscribe(this.handleDelete.bind(this)));
     };
+    MultiSelectTreeComponent.prototype.subscribeFocusEvents = function () {
+        var _this = this;
+        if (isDocumentAvailable()) {
+            this.handleFocus = this.handleFocus.bind(this);
+            this.handleDocumentBlur = this.handleDocumentBlur.bind(this);
+            this._zone.runOutsideAngular(function () {
+                var useCapture = true;
+                document.addEventListener('focus', _this.handleFocus, useCapture);
+                document.addEventListener('blur', _this.handleDocumentBlur, useCapture);
+            });
+        }
+    };
+    MultiSelectTreeComponent.prototype.unSubscribeFocusEvents = function () {
+        if (isDocumentAvailable()) {
+            var useCapture = true;
+            document.removeEventListener('focus', this.handleFocus, useCapture);
+            document.removeEventListener('blur', this.handleDocumentBlur, useCapture);
+        }
+    };
+    MultiSelectTreeComponent.prototype.handleDocumentBlur = function (event) {
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
+        this.handleBlur(event);
+    };
     MultiSelectTreeComponent.prototype.handleTabKey = function () {
         this.focus();
         if (this.isOpen) {
@@ -10051,6 +11270,7 @@ var MultiSelectTreeComponent = /** @class */ (function () {
     };
     MultiSelectTreeComponent.prototype.unsubscribeEvents = function () {
         this.subscriptions.forEach(function (sub) { return sub.unsubscribe(); });
+        this.unSubscribeFocusEvents();
     };
     /**
      * Remove the `TreeView` from the tab order, otherwise a focus loop between the page elements will occur
@@ -10100,16 +11320,84 @@ var MultiSelectTreeComponent = /** @class */ (function () {
             return indices;
         }, []));
     };
+    MultiSelectTreeComponent.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 MultiSelectTreeComponent_1;
     __decorate([
-        HostBinding('class.k-widget'),
         HostBinding('class.k-dropdowntree'),
+        HostBinding('class.k-input'),
         __metadata("design:type", Boolean)
     ], MultiSelectTreeComponent.prototype, "hostClasses", void 0);
+    __decorate([
+        HostBinding('class.k-disabled'),
+        HostBinding('attr.aria-disabled'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], MultiSelectTreeComponent.prototype, "isDisabled", null);
+    __decorate([
+        HostBinding('class.k-loading'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], MultiSelectTreeComponent.prototype, "isLoading", null);
+    __decorate([
+        HostBinding('attr.id'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [])
+    ], MultiSelectTreeComponent.prototype, "id", null);
     __decorate([
         HostBinding('attr.dir'),
         __metadata("design:type", String)
     ], MultiSelectTreeComponent.prototype, "direction", void 0);
+    __decorate([
+        HostBinding('attr.tabindex'),
+        __metadata("design:type", Number),
+        __metadata("design:paramtypes", [])
+    ], MultiSelectTreeComponent.prototype, "hostTabIndex", null);
+    __decorate([
+        HostBinding('attr.role'),
+        __metadata("design:type", String)
+    ], MultiSelectTreeComponent.prototype, "role", void 0);
+    __decorate([
+        HostBinding('attr.aria-haspopup'),
+        __metadata("design:type", String)
+    ], MultiSelectTreeComponent.prototype, "ariaHasPopup", void 0);
+    __decorate([
+        HostBinding('attr.readonly'),
+        HostBinding('attr.aria-readonly'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], MultiSelectTreeComponent.prototype, "isReadonly", null);
+    __decorate([
+        HostBinding('attr.aria-describedby'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [])
+    ], MultiSelectTreeComponent.prototype, "ariaDescribedBy", null);
+    __decorate([
+        HostBinding('attr.aria-activedescendant'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [])
+    ], MultiSelectTreeComponent.prototype, "ariaActiveDescendant", null);
+    __decorate([
+        HostListener('click'),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], MultiSelectTreeComponent.prototype, "handleClick", null);
+    __decorate([
+        HostListener('keydown', ['$event']),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], MultiSelectTreeComponent.prototype, "handleKeydown", null);
     __decorate([
         ContentChild(HeaderTemplateDirective, { static: false }),
         __metadata("design:type", HeaderTemplateDirective)
@@ -10138,10 +11426,6 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         ViewChild('popupTemplate', { static: true }),
         __metadata("design:type", TemplateRef)
     ], MultiSelectTreeComponent.prototype, "popupTemplate", void 0);
-    __decorate([
-        ViewChild('wrapper', { static: true }),
-        __metadata("design:type", ElementRef)
-    ], MultiSelectTreeComponent.prototype, "wrapper", void 0);
     __decorate([
         ViewChild('container', { read: ViewContainerRef, static: true }),
         __metadata("design:type", ViewContainerRef)
@@ -10164,6 +11448,21 @@ var MultiSelectTreeComponent = /** @class */ (function () {
         __metadata("design:type", Number),
         __metadata("design:paramtypes", [Number])
     ], MultiSelectTreeComponent.prototype, "tabindex", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], MultiSelectTreeComponent.prototype, "size", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], MultiSelectTreeComponent.prototype, "rounded", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], MultiSelectTreeComponent.prototype, "fillMode", null);
     __decorate([
         Input(),
         __metadata("design:type", Object),
@@ -10345,12 +11644,12 @@ var MultiSelectTreeComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-multiselecttree',
-            template: "\n        <ng-container kendoMultiSelectTreeLocalizedMessages\n            i18n-noDataText=\"kendo.multiselecttree.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.multiselecttree.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n\n            i18n-checkAllText=\"kendo.multiselecttree.checkAllText|The text displayed for the check-all checkbox\"\n            checkAllText=\"Check all\"\n        >\n        </ng-container>\n        <div #wrapper\n            [ngClass]=\"{\n                'k-multiselect-wrap': true,\n                'k-floatwrap': true,\n                'k-state-disabled': this.disabled\n            }\"\n            role=\"listbox\"\n            aria-haspopup=\"tree\"\n            [attr.aria-describedby]=\"tagListId\"\n            [attr.aria-readonly]=\"readonly\"\n            [attr.aria-activedescendant]=\"focusedTagId\"\n            [attr.tabindex]=\"tabindex\"\n            [attr.id]=\"focusableId\"\n            [attr.dir]=\"direction\"\n            (click)=\"handleClick()\"\n            (keydown)=\"handleKeydown($event)\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleFocus,\n                blur: handleBlur\n            }\"\n            [scope]=\"this\"\n        >\n            <kendo-taglist\n                [id]=\"tagListId\"\n                [tags]=\"tags\"\n                [focused]=\"focusedTagIndex\"\n                [textField]=\"textField\"\n                [valueField]=\"valueField\"\n                [valueDepth]=\"valueDepth\"\n                [disabled]=\"disabled\"\n                [tagPrefix]=\"tagPrefix\"\n                [template]=\"tagTemplate\"\n                [groupTemplate]=\"groupTagTemplate\"\n                [disabledIndices]=\"disabledIndices\"\n                (removeTag)=\"handleRemoveTag($event)\"\n            >\n            </kendo-taglist>\n            <span *ngIf=\"!tags || !tags.length\"\n                class=\"k-input k-readonly\"\n            >\n                {{ placeholder }}\n            </span>\n            <span\n                *ngIf=\"!disabled && !loading && !readonly && clearButton && tags?.length\"\n                class=\"k-icon k-clear-value k-i-close\"\n                [attr.title]=\"messageFor('clearTitle')\"\n                role=\"button\"\n                tabindex=\"-1\"\n                (click)=\"clearAll($event)\"\n            >\n            </span>\n            <span\n                *ngIf=\"loading\"\n                class=\"k-icon k-i-loading\"\n            >\n            </span>\n        </div>\n        <ng-template #popupTemplate>\n            <span\n                *ngIf=\"filterable\"\n                class=\"k-list-filter\"\n            >\n                <input\n                    #filterInput\n                    (input)=\"handleFilterInputChange($event.target.value)\"\n                    [filterInput]=\"filterable && !touchEnabled\"\n                    (keydown)=\"handleKeydown($event)\"\n                    [(ngModel)]=\"filter\"\n                    class=\"k-textbox\"\n                    role=\"textbox\"\n                    aria-haspopup=\"true\"\n                    aria-expanded=\"false\"\n                    tabindex=\"0\"\n                    aria-disabled=\"false\"\n                    aria-readonly=\"false\"\n                    [kendoEventsOutsideAngular]=\"{\n                        blur: handleBlur\n                    }\"\n                    [scope]=\"this\"\n                >\n                <span class=\"k-icon k-i-zoom\"></span>\n            </span>\n            <!--header template-->\n            <ng-template\n                *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <div *ngIf=\"checkAll\" class=\"k-check-all\">\n                <input\n                    #checkAllInput\n                    [checkAll]=\"!filterable && !touchEnabled\"\n                    type=\"checkbox\"\n                    class=\"k-checkbox\"\n                    role=\"checkbox\"\n                    tabindex=\"0\"\n                    aria-disabled=\"false\"\n                    aria-readonly=\"false\"\n                    [treeview]=\"treeview\"\n                    [checkedItems]=\"checkedItems\"\n                    [valueField]=\"valueField\"\n                    [lastAction]=\"lastAction\"\n                    (checkedItemsChange)=\"handleCheckedItemsChange($event)\"\n                    (keydown)=\"handleKeydown($event)\"\n                    [kendoEventsOutsideAngular]=\"{\n                        blur: handleBlur\n                    }\"\n                    [scope]=\"this\"\n                >\n                <span\n                    class=\"k-checkbox-label\"\n                    (click)=\"toggleCheckAll()\"\n                    (mousedown)=\"$event.preventDefault()\"\n                >\n                    {{ messageFor('checkAllText') }}\n                </span>\n            </div>\n            <kendo-treeview\n                #treeview\n                [nodes]=\"data\"\n                [style.maxHeight.px]=\"listHeight\"\n                [animate]=\"false\"\n                kendoMultiSelectTreeCheckable\n                [checkable]=\"checkableSettings\"\n                [checkedItems]=\"checkedItems\"\n                [valueField]=\"valueField\"\n                [textField]=\"textField\"\n                [children]=\"children\"\n                [hasChildren]=\"hasChildren\"\n                [isExpanded]=\"isNodeExpanded\"\n                [isDisabled]=\"itemDisabled\"\n                [nodeTemplate]=\"nodeTemplate\"\n                [loadOnDemand]=\"loadOnDemand\"\n                [filter]=\"filter\"\n                [isVisible]=\"isNodeVisible\"\n                (keydown)=\"handleKeydown($event)\"\n                (nodeClick)=\"handleNodeClick($event)\"\n                (expand)=\"nodeExpand.emit($event)\"\n                (collapse)=\"nodeCollapse.emit($event)\"\n                (checkedItemsChange)=\"handleCheckedItemsChange($event)\"\n                [kendoEventsOutsideAngular]=\"{\n                    focusout: handleBlur\n                }\"\n                [scope]=\"this\"\n            >\n            </kendo-treeview>\n            <!--footer template-->\n            <ng-template\n                *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <!--no-data template-->\n            <div class=\"k-nodata\" *ngIf=\"data?.length === 0 || allNodesHidden\">\n                <ng-template [ngIf]=\"noDataTemplate\"\n                    [templateContext]=\"{\n                        templateRef: noDataTemplate?.templateRef\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!noDataTemplate\">\n                    <div>{{ messageFor('noDataText') }}</div>\n                </ng-template>\n            </div>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
+            template: "\n        <ng-container kendoMultiSelectTreeLocalizedMessages\n            i18n-noDataText=\"kendo.multiselecttree.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.multiselecttree.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n\n            i18n-checkAllText=\"kendo.multiselecttree.checkAllText|The text displayed for the check-all checkbox\"\n            checkAllText=\"Check all\"\n        >\n        </ng-container>\n        <kendo-taglist\n            [size]=\"size\"\n            [rounded]=\"rounded\"\n            [fillMode]=\"fillMode\"\n            [id]=\"tagListId\"\n            [tags]=\"tags\"\n            [focused]=\"focusedTagIndex\"\n            [textField]=\"textField\"\n            [valueField]=\"valueField\"\n            [valueDepth]=\"valueDepth\"\n            [disabled]=\"disabled\"\n            [tagPrefix]=\"tagPrefix\"\n            [template]=\"tagTemplate\"\n            [groupTemplate]=\"groupTagTemplate\"\n            [disabledIndices]=\"disabledIndices\"\n            (removeTag)=\"handleRemoveTag($event)\"\n        >\n            <span *ngIf=\"!tags || !tags.length\"\n                class=\"k-input-inner k-readonly\"\n            >\n                <span class=\"k-input-value-text\">{{ placeholder }}</span>\n            </span>\n        </kendo-taglist>\n        <span\n            *ngIf=\"!disabled && !loading && !readonly && clearButton && tags?.length\"\n            class=\"k-clear-value\"\n            [attr.title]=\"messageFor('clearTitle')\"\n            role=\"button\"\n            tabindex=\"-1\"\n            (click)=\"clearAll($event)\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n        <span\n            *ngIf=\"loading\"\n            class=\"k-icon k-i-loading\"\n        >\n        </span>\n        <ng-template #popupTemplate>\n            <span\n                *ngIf=\"filterable\"\n                class=\"k-list-filter\"\n            >\n                <span\n                    class=\"k-textbox k-input\"\n                    [ngClass]=\"filterInputClasses\"\n                >\n                    <span class=\"k-input-prefix\">\n                        <span class=\"k-input-icon k-icon k-i-search\"></span>\n                    </span>\n                    <input\n                        #filterInput\n                        (input)=\"handleFilterInputChange($event.target.value)\"\n                        [filterInput]=\"filterable && !touchEnabled\"\n                        (keydown)=\"handleKeydown($event)\"\n                        [(ngModel)]=\"filter\"\n                        class=\"k-input-inner\"\n                        role=\"textbox\"\n                        aria-haspopup=\"true\"\n                        aria-expanded=\"false\"\n                        tabindex=\"0\"\n                        aria-disabled=\"false\"\n                        aria-readonly=\"false\"\n                        [kendoEventsOutsideAngular]=\"{\n                            blur: handleBlur\n                        }\"\n                        [scope]=\"this\"\n                    >\n                </span>\n            </span>\n            <!--header template-->\n            <ng-template\n                *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <div *ngIf=\"checkAll\" class=\"k-check-all\">\n                <input\n                    #checkAllInput\n                    [checkAll]=\"!filterable && !touchEnabled\"\n                    type=\"checkbox\"\n                    class=\"k-checkbox\"\n                    [ngClass]=\"checkAllCheckboxClasses\"\n                    role=\"checkbox\"\n                    tabindex=\"0\"\n                    aria-disabled=\"false\"\n                    aria-readonly=\"false\"\n                    [treeview]=\"treeview\"\n                    [checkedItems]=\"checkedItems\"\n                    [valueField]=\"valueField\"\n                    [lastAction]=\"lastAction\"\n                    (checkedItemsChange)=\"handleCheckedItemsChange($event)\"\n                    (keydown)=\"handleKeydown($event)\"\n                    [kendoEventsOutsideAngular]=\"{\n                        blur: handleBlur\n                    }\"\n                    [scope]=\"this\"\n                >\n                <span\n                    class=\"k-checkbox-label\"\n                    (click)=\"toggleCheckAll()\"\n                    (mousedown)=\"$event.preventDefault()\"\n                >\n                    {{ messageFor('checkAllText') }}\n                </span>\n            </div>\n            <kendo-treeview\n                #treeview\n                [size]=\"size\"\n                [nodes]=\"data\"\n                [style.maxHeight.px]=\"listHeight\"\n                [animate]=\"false\"\n                kendoMultiSelectTreeCheckable\n                [checkable]=\"checkableSettings\"\n                [checkedItems]=\"checkedItems\"\n                [valueField]=\"valueField\"\n                [textField]=\"textField\"\n                [children]=\"children\"\n                [hasChildren]=\"hasChildren\"\n                [isExpanded]=\"isNodeExpanded\"\n                [isDisabled]=\"itemDisabled\"\n                [nodeTemplate]=\"nodeTemplate\"\n                [loadOnDemand]=\"loadOnDemand\"\n                [filter]=\"filter\"\n                [isVisible]=\"isNodeVisible\"\n                (keydown)=\"handleKeydown($event)\"\n                (nodeClick)=\"handleNodeClick($event)\"\n                (expand)=\"nodeExpand.emit($event)\"\n                (collapse)=\"nodeCollapse.emit($event)\"\n                (checkedItemsChange)=\"handleCheckedItemsChange($event)\"\n                [kendoEventsOutsideAngular]=\"{\n                    focusout: handleBlur\n                }\"\n                [scope]=\"this\"\n            >\n            </kendo-treeview>\n            <!--footer template-->\n            <ng-template\n                *ngIf=\"footerTemplate\"\n                [templateContext]=\"{\n                    templateRef: footerTemplate?.templateRef\n                }\">\n            </ng-template>\n            <!--no-data template-->\n            <div class=\"k-no-data\" *ngIf=\"data?.length === 0 || allNodesHidden\">\n                <ng-template [ngIf]=\"noDataTemplate\"\n                    [templateContext]=\"{\n                        templateRef: noDataTemplate?.templateRef\n                    }\">\n                </ng-template>\n                <ng-template [ngIf]=\"!noDataTemplate\">\n                    <div>{{ messageFor('noDataText') }}</div>\n                </ng-template>\n            </div>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
         }),
         __param(7, Optional()), __param(7, Inject(TOUCH_ENABLED)),
-        __metadata("design:paramtypes", [PopupService,
+        __metadata("design:paramtypes", [ElementRef,
+            PopupService,
             Renderer2,
-            ElementRef,
             NavigationService,
             NgZone,
             LocalizationService,
@@ -10504,13 +11803,40 @@ var DropDownTreesExpandDirective = /** @class */ (function (_super) {
  * @hidden
  */
 var TagListComponent = /** @class */ (function () {
-    function TagListComponent() {
+    function TagListComponent(renderer, hostElement) {
+        this.renderer = renderer;
+        this.hostElement = hostElement;
+        this.rounded = 'medium';
+        this.fillMode = 'solid';
         /**
          * A collection with the disabled tags' indices.
          */
         this.disabledIndices = new Set();
         this.removeTag = new EventEmitter();
+        this.hostClasses = true;
+        this._size = 'medium';
     }
+    Object.defineProperty(TagListComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        set: function (size) {
+            this.renderer.removeClass(this.hostElement.nativeElement, getSizeClass('chip-list', this.size));
+            if (size) {
+                this.renderer.addClass(this.hostElement.nativeElement, getSizeClass('chip-list', size));
+            }
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TagListComponent.prototype, "hostId", {
+        get: function () {
+            return this.id;
+        },
+        enumerable: true,
+        configurable: true
+    });
     TagListComponent.prototype.tagProp = function (tag, prop, index) {
         var propField = prop && this.getPropField(tag, prop, index);
         return getter$1(tag, propField);
@@ -10600,6 +11926,19 @@ var TagListComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", String)
     ], TagListComponent.prototype, "id", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], TagListComponent.prototype, "size", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], TagListComponent.prototype, "rounded", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], TagListComponent.prototype, "fillMode", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Set)
@@ -10608,11 +11947,24 @@ var TagListComponent = /** @class */ (function () {
         Output(),
         __metadata("design:type", EventEmitter)
     ], TagListComponent.prototype, "removeTag", void 0);
+    __decorate([
+        HostBinding('class.k-input-values'),
+        HostBinding('class.k-chip-list'),
+        HostBinding('class.k-selection-multiple'),
+        __metadata("design:type", Boolean)
+    ], TagListComponent.prototype, "hostClasses", void 0);
+    __decorate([
+        HostBinding('attr.id'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [])
+    ], TagListComponent.prototype, "hostId", null);
     TagListComponent = __decorate([
         Component({
             selector: 'kendo-taglist',
-            template: "\n        <ul [attr.id]=\"id\" class=\"k-reset\">\n            <li\n                *ngFor=\"let tag of tags; let index = index;\"\n                role=\"option\"\n                [attr.id]=\"itemId(tag, index)\"\n                [attr.aria-hidden]=\"tagAriaHidden(index)\"\n                aria-selected=\"true\"\n                [attr.aria-setsize]=\"tags?.length\"\n                class=\"k-button\"\n                [ngClass]=\"{\n                    'k-state-focused': index === focused,\n                    'k-state-disabled': isTagDisabled(tag, index)\n                }\"\n            >\n                <ng-template *ngIf=\"isGroupTag(tag); then groupTag else singleTag\"></ng-template>\n                    <ng-template #groupTag>\n                        <span>\n                            <ng-template *ngIf=\"groupTemplate\"\n                                [templateContext]=\"{\n                                templateRef: groupTemplate.templateRef,\n                                $implicit: tag\n                            }\">\n                            </ng-template>\n                            <ng-template [ngIf]=\"!groupTemplate\">{{ tag.length }} {{ tag.length === 1 ? 'item' : 'items' }} selected</ng-template>\n                        </span>\n                    </ng-template>\n                    <ng-template #singleTag>\n                        <span>\n                            <ng-template *ngIf=\"template\"\n                                [templateContext]=\"{\n                                templateRef: template.templateRef,\n                                $implicit: tag\n                            }\">\n                            </ng-template>\n                            <ng-template [ngIf]=\"!template\">{{ tagProp(tag, textField, index) }}</ng-template>\n                        </span>\n                    </ng-template>\n\n                <span aria-label=\"delete\" [attr.aria-hidden]=\"index !== focused\" class=\"k-select\">\n                    <span class=\"k-icon k-i-close\" (mousedown)=\"deleteTag($event, tag, index)\">\n                    </span>\n                </span>\n            </li>\n        </ul>\n  "
-        })
+            template: "\n        <div\n            *ngFor=\"let tag of tags; let index = index;\"\n            role=\"option\"\n            [attr.id]=\"itemId(tag, index)\"\n            [attr.aria-hidden]=\"tagAriaHidden(index)\"\n            aria-selected=\"true\"\n            [attr.aria-setsize]=\"tags?.length\"\n            class=\"k-chip\"\n            [ngClass]=\"{\n                'k-focus': index === focused,\n                'k-disabled': isTagDisabled(tag, index),\n                'k-chip-sm': size === 'small',\n                'k-chip-md': size === 'medium',\n                'k-chip-lg': size === 'large',\n                'k-rounded-sm': rounded === 'small',\n                'k-rounded-md': rounded === 'medium',\n                'k-rounded-lg': rounded === 'large',\n                'k-rounded-full': rounded === 'full',\n                'k-chip-solid k-chip-solid-base': fillMode === 'solid',\n                'k-chip-flat k-chip-flat-base': fillMode === 'flat',\n                'k-chip-outline k-chip-outline-base': fillMode === 'outline'\n            }\"\n        >\n            <span class=\"k-chip-content\">\n                <ng-template *ngIf=\"isGroupTag(tag); then groupTag else singleTag\"></ng-template>\n                <ng-template #groupTag>\n                    <span class=\"k-chip-label k-text-ellipsis\">\n                        <ng-template *ngIf=\"groupTemplate\"\n                            [templateContext]=\"{\n                            templateRef: groupTemplate.templateRef,\n                            $implicit: tag\n                        }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!groupTemplate\">{{ tag.length }} {{ tag.length === 1 ? 'item' : 'items' }} selected</ng-template>\n                    </span>\n                </ng-template>\n                <ng-template #singleTag>\n                    <span class=\"k-chip-label k-text-ellipsis\">\n                        <ng-template *ngIf=\"template\"\n                            [templateContext]=\"{\n                            templateRef: template.templateRef,\n                            $implicit: tag\n                        }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!template\">{{ tagProp(tag, textField, index) }}</ng-template>\n                    </span>\n                </ng-template>\n            </span>\n\n            <span class=\"k-chip-actions\">\n                <span aria-label=\"delete\" [attr.aria-hidden]=\"index !== focused\" class=\"k-chip-action k-chip-remove-action\">\n                    <span class=\"k-icon k-i-x-circle\" (mousedown)=\"deleteTag($event, tag, index)\">\n                    </span>\n                </span>\n            </span>\n        </div>\n        <ng-content></ng-content>\n  "
+        }),
+        __metadata("design:paramtypes", [Renderer2,
+            ElementRef])
     ], TagListComponent);
     return TagListComponent;
 }());
@@ -10970,12 +12322,12 @@ var SelectableDirective = /** @class */ (function () {
         __metadata("design:type", Boolean)
     ], SelectableDirective.prototype, "multipleSelection", void 0);
     __decorate([
-        HostBinding('class.k-state-focused'),
+        HostBinding('class.k-focus'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], SelectableDirective.prototype, "focusedClassName", null);
     __decorate([
-        HostBinding('class.k-state-selected'),
+        HostBinding('class.k-selected'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], SelectableDirective.prototype, "selectedClassName", null);