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

package/dist/fesm2015/index.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __metadata, __param } from 'tslib';
-import { EventEmitter, Input, Output, 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 { EventEmitter, Input, Output, 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 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1639043976,
+    publishDate: 1642677856,
     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'
 };
@@ -270,6 +270,43 @@ const valueFrom = ({ dataItem, index, level }, valueField) => {
     const field = fields[normalizedLevel];
     return getter(field)(dataItem);
 };
+/**
+ * @hidden
+ * Returns the size class based on the component and size input.
+ */
+const getSizeClass = (component, size) => {
+    const 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.
+ */
+const getRoundedClass = (rounded) => {
+    const 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.
+ */
+const getFillModeClass = (component, fillMode) => {
+    const FILLMODE_CLASSES = {
+        'solid': `k-${component}-solid`,
+        'flat': `k-${component}-flat`,
+        'outline': `k-${component}-outline`
+    };
+    return FILLMODE_CLASSES[fillMode];
+};
 
 /* tslint:disable:member-ordering */
 /**
@@ -491,7 +528,7 @@ SearchBarComponent = __decorate([
             [disabled]="disabled"
             [readonly]="readonly"
             [placeholder]="placeholder"
-            [class]="'k-input'"
+            [class]="'k-input-inner'"
             (input)="handleInput($event)"
             (keydown)="handleKeydown($event)"
             [kendoEventsOutsideAngular]="{
@@ -1350,8 +1387,9 @@ let ListComponent = class ListComponent {
         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();
@@ -1359,11 +1397,13 @@ let ListComponent = class ListComponent {
         this.lastLoaded = 0;
         this.lastScrollTop = 0;
         this.scrollToFocused = false;
+        this._size = 'medium';
         this.selectSubscription = merge(this.selectionService.onSelect.pipe(map((args) => args.indices[0])), this.selectionService.onFocus)
             .pipe(
         // handle only the very last onSelect/onFocus emission
         switchMap(event => this.zone.onStable.pipe(take(1), map(() => event))))
             .subscribe(this.scrollToItem.bind(this));
+        this.prepareClasses();
     }
     set data(data) {
         this._data = data[0] && data[0].header ? data.slice(0) : data;
@@ -1371,6 +1411,18 @@ let ListComponent = class ListComponent {
     get data() {
         return this._data;
     }
+    set size(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;
+        }
+    }
+    get size() {
+        return this._size;
+    }
     get pageSize() {
         if (this.virtual.pageSize) {
             return this.virtual.pageSize;
@@ -1387,6 +1439,12 @@ let ListComponent = class ListComponent {
             return overflow;
         }
     }
+    /**
+     * @hidden
+     */
+    get checkboxClasses() {
+        return `${this.size ? getSizeClass('checkbox', this.size) : ''} ${this.rounded ? getRoundedClass(this.rounded) : ''}`;
+    }
     ngOnChanges(changes) {
         if (isChanged('data', changes, false)) {
             if (this.lastLoaded <= 0) {
@@ -1398,8 +1456,12 @@ let ListComponent = class ListComponent {
         if (isChanged('virtual', changes, false)) {
             this.setOverflow();
         }
+        if (isChanged('type', changes, false)) {
+            this.prepareClasses();
+        }
     }
     ngAfterViewInit() {
+        this.setComponentClasses();
         this.zone.runOutsideAngular(() => {
             this.scrollSubscription = fromEvent(this.content.nativeElement, "scroll").pipe(auditTime(100), tap(this.prefetchData.bind(this)), tap(this.findCurrentGroup.bind(this))).subscribe(() => {
                 this.lastScrollTop = this.content.nativeElement.scrollTop;
@@ -1435,6 +1497,28 @@ let ListComponent = class ListComponent {
             this.selectionService.unselect(index);
         }
     }
+    prepareClasses() {
+        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';
+        }
+    }
     isChecked(index) {
         const normalizedIndex = this.virtual ? index + this.virtual.skip : index;
         return this.selectionService.isSelected(normalizedIndex);
@@ -1443,7 +1527,7 @@ let ListComponent = class ListComponent {
         const content = this.content.nativeElement;
         const rect = content.getBoundingClientRect();
         // IE9 hack
-        const disabled = Array.prototype.slice.call(content.querySelectorAll(".k-state-disabled"));
+        const disabled = Array.prototype.slice.call(content.querySelectorAll(".k-disabled"));
         // This is a workaround for finding elements with pointer-events: none;
         disabled.forEach((el) => this.renderer.setStyle(el, "pointer-events", "auto"));
         const item = document.elementFromPoint(rect.left + 1, rect.top + 1);
@@ -1521,6 +1605,9 @@ let ListComponent = class ListComponent {
         }
         return this.disabledItemsService.isIndexDisabled(index);
     }
+    isAltRow(index) {
+        return this.type === 'dropdowngrid' && index % 2 !== 0;
+    }
     scrollToItem(index) {
         let flatIndex = index;
         if (this.dataService.grouped) {
@@ -1611,6 +1698,17 @@ let ListComponent = class ListComponent {
         }
         return this.virtual.skip === 0 && (this.virtual.pageSize > itemIndex);
     }
+    setComponentClasses() {
+        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(),
@@ -1667,7 +1765,7 @@ __decorate([
 __decorate([
     Input(),
     __metadata("design:type", String)
-], ListComponent.prototype, "listClass", void 0);
+], ListComponent.prototype, "type", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Object)
@@ -1677,6 +1775,15 @@ __decorate([
     __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)
@@ -1710,8 +1817,7 @@ ListComponent = __decorate([
         selector: 'kendo-list',
         template: `
     <div *ngIf="dataService.grouped"
-        class='k-outer-group-header k-first'
-        [ngClass]="{'k-virtual-item': virtual}"
+        [class]="listGroupStickyHeaderClass"
         [ngStyle]="{
             'height.px': virtual?.itemHeight,
             'minHeight.px' : virtual?.itemHeight,
@@ -1723,17 +1829,16 @@ ListComponent = __decorate([
                 $implicit: currentGroup
             }">
         </ng-template>
-        <ng-template [ngIf]="!fixedGroupTemplate"><strong>{{ currentGroup }}</strong> </ng-template>
+        <ng-template [ngIf]="!fixedGroupTemplate"><span [class]="listGroupStickyHeaderTextClass">{{ currentGroup }}</span></ng-template>
     </div>
     <div #content
-         [ngClass]="{ 'k-virtual-content': virtual, 'k-list-scroller': !virtual }"
-         [style.overscrollBehavior]="'none'"
-         [style.maxHeight.px]="height"
-         unselectable="on">
+        [class]="listContentClass"
+        [style.overscrollBehavior]="'none'"
+        [style.maxHeight.px]="height"
+        unselectable="on">
     <ul #list
         role="listbox"
         [class]="listClass"
-        [ngClass]="{ 'k-virtual-list': virtual }"
         [attr.id]="id"
         [attr.aria-hidden]="!show">
          <ng-template *ngIf="!dataService.grouped && show" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
@@ -1746,31 +1851,35 @@ ListComponent = __decorate([
                 [multipleSelection]="multipleSelection"
                 [attr.id]="optionPrefix + '-' + getValue(dataItem)"
                 [attr.tabIndex]="-1"
-                class="k-item"
-                [ngClass]="{ 'k-virtual-item': virtual, 'k-state-disabled': isDisabled(itemIndex) }">
-                <label *ngIf="checkboxes.enabled"
-                    class="k-checkbox-label">
-                    <input type="checkbox"
-                        class="k-checkbox"
-                        (change)="onCheckedChange($event, itemIndex)"
-                        [checked]="isChecked(itemIndex)"
-                    />
-                </label>
+                [class]="listItemClass"
+                [ngClass]="{
+                    'k-disabled': isDisabled(itemIndex),
+                    'k-table-alt-row': isAltRow(itemIndex)
+                }"
+            >
+                <input
+                    *ngIf="checkboxes.enabled"
+                    type="checkbox"
+                    class="k-checkbox"
+                    [ngClass]="checkboxClasses"
+                    (change)="onCheckedChange($event, itemIndex)"
+                    [checked]="isChecked(itemIndex)"
+                />
                 <ng-template *ngIf="template"
                     [templateContext]="{
                         templateRef: template.templateRef,
                         $implicit: dataItem
                     }">
                 </ng-template>
-                <ng-template [ngIf]="!template">{{ getText(dataItem) }}</ng-template>
+                <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem) }}</span></ng-template>
             </li>
          </ng-template>
          <ng-template *ngIf="dataService.grouped" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
             <li
                 *ngIf="dataItem.header && dataItem.index > 0"
                 role="group"
-                class='k-outer-group-header'
-                [ngClass]="{ 'k-virtual-item': virtual }"
+                [class]="listGroupItemClass"
+                [class.k-table-alt-row]="isAltRow(itemIndex - 1)"
                 [ngStyle]="{
                     'height.px': virtual?.itemHeight,
                     'minHeight.px' : virtual?.itemHeight,
@@ -1778,15 +1887,17 @@ ListComponent = __decorate([
                 [attr.group-index]="dataItem.index"
                 [attr.id]="optionPrefix + '-' + getValue(dataItem.value)"
                 [attr.tabIndex]="-1">
-                    <ng-template *ngIf="groupTemplate"
-                          [templateContext]="{
-                            templateRef: groupTemplate.templateRef,
-                            $implicit: dataItem.value
-                    }">
-                    </ng-template>
-                    <ng-template [ngIf]="!groupTemplate"><strong> {{ dataItem.value }}</strong> </ng-template>
-              </li>
-              <li
+                    <span [class]="listGroupItemTextClass">
+                        <ng-template *ngIf="groupTemplate"
+                            [templateContext]="{
+                                templateRef: groupTemplate.templateRef,
+                                $implicit: dataItem.value
+                        }">
+                        </ng-template>
+                        <ng-template [ngIf]="!groupTemplate">{{ dataItem.value }}</ng-template>
+                    </span>
+            </li>
+            <li
                 *ngIf="!dataItem.header"
                 role="option"
                 kendoDropDownsSelectable
@@ -1796,15 +1907,19 @@ ListComponent = __decorate([
                 [attr.absolute-index]="dataItem.index"
                 [attr.id]="optionPrefix + '-' + getValue(dataItem.value)"
                 [attr.tabIndex]="-1"
-                class="k-item"
-                [ngClass]="{ 'k-virtual-item': virtual, 'k-state-disabled': isDisabled(dataItem.offsetIndex) }">
+                [class]="listItemClass"
+                [ngClass]="{
+                    'k-disabled': isDisabled(dataItem.offsetIndex),
+                    'k-table-alt-row': isAltRow(itemIndex - 1)
+                }"
+            >
                 <ng-template *ngIf="template"
                     [templateContext]="{
                         templateRef: template.templateRef,
                         $implicit: dataItem.value
                     }">
                 </ng-template>
-                <ng-template [ngIf]="!template">{{ getText(dataItem.value) }}</ng-template>
+                <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem.value) }}</span></ng-template>
             </li>
         </ng-template>
         <kendo-resize-sensor
@@ -1996,6 +2111,9 @@ let AutoCompleteComponent = AutoCompleteComponent_1 = class AutoCompleteComponen
         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;
@@ -2180,16 +2298,80 @@ let AutoCompleteComponent = AutoCompleteComponent_1 = class AutoCompleteComponen
     get virtual() {
         return this._virtualSettings;
     }
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     *
+     */
+    set size(size) {
+        this.renderer.removeClass(this.wrapper, getSizeClass('input', this.size));
+        if (size) {
+            this.renderer.addClass(this.wrapper, getSizeClass('input', size));
+        }
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * Sets the border radius of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     *
+     */
+    set rounded(rounded) {
+        this.renderer.removeClass(this.wrapper, getRoundedClass(this.rounded));
+        if (rounded) {
+            this.renderer.addClass(this.wrapper, getRoundedClass(rounded));
+        }
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * Sets the fillMode of the component.
+     *
+     * The possible values are:
+     * * `'flat'`
+     * * `'solid'` (default)
+     * * `'outline'`
+     * * `null`
+     *
+     */
+    set fillMode(fillMode) {
+        this.renderer.removeClass(this.wrapper, getFillModeClass('input', this.fillMode));
+        if (fillMode) {
+            this.renderer.addClass(this.wrapper, getFillModeClass('input', fillMode));
+        }
+        this._fillMode = fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     get isFocused() {
         return this._isFocused;
     }
     set isFocused(isFocused) {
-        this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper, "k-state-focused");
+        this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper, "k-focus");
         this._isFocused = isFocused;
     }
     get isDisabled() {
         return this.disabled;
     }
+    get isLoading() {
+        return this.loading;
+    }
     get dir() {
         return this.direction;
     }
@@ -2202,6 +2384,7 @@ let AutoCompleteComponent = AutoCompleteComponent_1 = class AutoCompleteComponen
             this.setMessages();
         });
         this.setMessages();
+        this.setComponentClasses();
     }
     ngOnDestroy() {
         this.destroyPopup();
@@ -2629,6 +2812,17 @@ let AutoCompleteComponent = AutoCompleteComponent_1 = class AutoCompleteComponen
             });
         });
     }
+    setComponentClasses() {
+        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));
+        }
+    }
 };
 __decorate([
     Input(),
@@ -2708,6 +2902,21 @@ __decorate([
     __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)
@@ -2781,15 +2990,20 @@ __decorate([
     __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),
@@ -2848,7 +3062,7 @@ AutoCompleteComponent = AutoCompleteComponent_1 = __decorate([
         ></kendo-searchbar>
         <span
             *ngIf="!loading && !readonly && (clearButton && text?.length)"
-            class="k-icon k-clear-value k-i-close"
+            class="k-clear-value"
             [style.visibility]="clearButtonVisiblity"
             [attr.title]="clearTitle"
             role="button"
@@ -2856,7 +3070,8 @@ AutoCompleteComponent = AutoCompleteComponent_1 = __decorate([
             (click)="clearValue($event)"
             (mousedown)="$event.preventDefault()"
         >
-</span>
+            <span class="k-icon k-i-x"></span>
+        </span>
         <span *ngIf="loading" class="k-icon k-i-loading"></span>
         <ng-template #popupTemplate>
             <!--header template-->
@@ -2868,6 +3083,8 @@ AutoCompleteComponent = AutoCompleteComponent_1 = __decorate([
             <!--list-->
             <kendo-list
                 #optionsList
+                [size]="size"
+                [rounded]="rounded"
                 [id]="listBoxId"
                 [optionPrefix]="optionPrefix"
                 [data]="data"
@@ -2883,7 +3100,7 @@ AutoCompleteComponent = AutoCompleteComponent_1 = __decorate([
             >
             </kendo-list>
             <!--no-data template-->
-            <div class="k-nodata" *ngIf="data.length === 0">
+            <div class="k-no-data" *ngIf="data.length === 0">
                 <ng-template [ngIf]="noDataTemplate"
                     [templateContext]="{
                         templateRef: noDataTemplate?.templateRef
@@ -3006,7 +3223,8 @@ const COMBOBOX_VALUE_ACCESSOR = {
  * ```
  */
 let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
-    constructor(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, cdr, renderer, hostElement, touchEnabled$$1) {
+    constructor(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, cdr, renderer, touchEnabled$$1) {
+        this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
         this.selectionService = selectionService;
@@ -3016,7 +3234,6 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         this.zone = zone;
         this.cdr = cdr;
         this.renderer = renderer;
-        this.hostElement = hostElement;
         this.touchEnabled = touchEnabled$$1;
         this.selected = [];
         /**
@@ -3181,6 +3398,9 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         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 = [];
@@ -3335,8 +3555,72 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
     get virtual() {
         return this._virtualSettings;
     }
-    get clearable() {
-        return this.clearButton;
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     *
+     */
+    set size(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;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * Sets the border radius of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     *
+     */
+    set rounded(rounded) {
+        this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        if (rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        }
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * Sets the fillMode of the component.
+     *
+     * The possible values are:
+     * * `'flat'`
+     * * `'solid'` (default)
+     * * `'outline'`
+     * * `null`
+     *
+     */
+    set fillMode(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;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
+    get isDisabled() {
+        return this.disabled;
+    }
+    get isLoading() {
+        return this.loading;
     }
     get dir() {
         return this.direction;
@@ -3345,7 +3629,7 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         return this._isFocused;
     }
     set isFocused(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;
     }
     get clearButtonVisiblity() {
@@ -3368,12 +3652,13 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         return isPresent(popupHeight) ? `${popupHeight}px` : 'auto';
     }
     ngOnInit() {
-        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();
     }
     createValueStream() {
         const valueStream = this.valueSubject.pipe(filter((candidate) => {
@@ -3651,6 +3936,13 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
     get buttonClasses() {
         return this.loading ? 'k-i-loading' : this.iconClass || 'k-i-arrow-s';
     }
+    /**
+     * @hidden
+     */
+    get selectButtonClasses() {
+        return `${this.size ? getSizeClass('button', this.size) : ''} ${this.fillMode ? 'k-button-' + this.fillMode : ''} ${this.fillMode ? 'k-button-' + this.fillMode + '-base' : ''}
+        `;
+    }
     /**
      * @hidden
      */
@@ -3876,7 +4168,7 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         const currentText = this.searchbar.value;
         const textHasChanged = currentText !== (getter$1(this.dataItem, this.textField) || '');
         const valueHasChanged = unresolvedSelection || textHasChanged;
-        const runInZone = valueHasChanged || hasObservers(this.onBlur) || hasObservers(this.close) || isUntouched(this.hostElement.nativeElement);
+        const runInZone = valueHasChanged || hasObservers(this.onBlur) || hasObservers(this.close) || isUntouched(this.wrapper.nativeElement);
         if (runInZone) {
             this.zone.run(() => {
                 if (valueHasChanged) {
@@ -4101,7 +4393,7 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         // Roll up ComboBox on iOS when tapped outside
         this.touchstartDisposeHandler = this.renderer.listen(document, 'touchstart', (e) => {
             const target = e.target;
-            const isInDropDown = inDropDown(this.hostElement, target, this.popupRef);
+            const isInDropDown = inDropDown(this.wrapper, target, this.popupRef);
             if (this.isFocused && !isInDropDown) {
                 // Close popup and mobile keyboard if searchbar is focused
                 this.zone.run(() => this.blur());
@@ -4117,6 +4409,17 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         const event = pointers ? 'pointerdown' : 'click';
         this.selectClickDisposeHandler = this.renderer.listen(selectElement, event, this.selectClick.bind(this));
     }
+    setComponentClasses() {
+        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));
+        }
+    }
 };
 __decorate([
     Input(),
@@ -4213,6 +4516,21 @@ __decorate([
     __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)
@@ -4289,24 +4607,25 @@ __decorate([
     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),
@@ -4343,95 +4662,94 @@ ComboBoxComponent = ComboBoxComponent_1 = __decorate([
             clearTitle="clear"
         >
         </ng-container>
-        <span #wrapper unselectable="on"
-            class="k-dropdown-wrap"
-            [ngClass]="{'k-state-disabled': disabled }"
+        <kendo-searchbar #searchbar
+            [role]="'combobox'"
+            [id]="focusableId"
+            [listId]="listBoxId"
+            [activeDescendant]="activeDescendant"
+            [noDataLabel]="noDataLabel"
+            [userInput]="text"
+            [suggestedText]="getSuggestion()"
+            [disabled]="disabled"
+            [readonly]="readonly"
+            [tabIndex]="tabIndex"
+            [popupOpen]="isOpen"
+            [placeholder]="placeholder"
+            (onNavigate)="handleNavigate($event)"
+            (valueChange)="searchBarChange($event)"
+            (onBlur)="handleBlur()"
+            (onFocus)="handleFocus()"
+        ></kendo-searchbar>
+        <span
+            *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
+            class="k-clear-value"
+            [style.visibility]="clearButtonVisiblity"
+            aria-hidden="true"
+            [attr.title]="clearTitle"
+            (click)="clearValue($event)"
+            [kendoEventsOutsideAngular]="{
+                mousedown: preventEventDefault
+            }"
         >
-          <kendo-searchbar #searchbar
-              [role]="'combobox'"
-              [id]="focusableId"
-              [listId]="listBoxId"
-              [activeDescendant]="activeDescendant"
-              [noDataLabel]="noDataLabel"
-              [userInput]="text"
-              [suggestedText]="getSuggestion()"
-              [disabled]="disabled"
-              [readonly]="readonly"
-              [tabIndex]="tabIndex"
-              [popupOpen]="isOpen"
-              [placeholder]="placeholder"
-              (onNavigate)="handleNavigate($event)"
-              (valueChange)="searchBarChange($event)"
-              (onBlur)="handleBlur()"
-              (onFocus)="handleFocus()"
-          ></kendo-searchbar>
-          <span
-              *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
-              class="k-icon k-clear-value k-i-close"
-              [style.visibility]="clearButtonVisiblity"
-              aria-hidden="true"
-              [attr.title]="clearTitle"
-              (click)="clearValue($event)"
-              [kendoEventsOutsideAngular]="{
-                    mousedown: preventEventDefault
-              }"
-          >
-          </span>
-          <span
-              #select
-              aria-hidden="true"
-              unselectable="on"
-              class="k-select"
-              [kendoEventsOutsideAngular]="{
-                  mousedown: preventEventDefault
-              }"
-          >
-              <span class="k-icon" [ngClass]="buttonClasses">
-               </span>
-          </span>
-          <ng-template #popupTemplate>
-              <!--header template-->
-              <ng-template *ngIf="headerTemplate"
-                  [templateContext]="{
-                      templateRef: headerTemplate.templateRef
-                  }">
-              </ng-template>
-              <!--list-->
-              <kendo-list
-                  #optionsList
-                  [id]="listBoxId"
-                  [optionPrefix]="optionPrefix"
-                  [data]="data"
-                  [textField]="textField"
-                  [valueField]="valueField"
-                  [template]="template"
-                  [groupTemplate]="groupTemplate"
-                  [fixedGroupTemplate]="fixedGroupTemplate"
-                  [height]="listHeight"
-                  [show]="isOpen"
-                  [virtual]="virtual"
-                  (pageChange)="pageChange($event)"
-              >
-              </kendo-list>
-              <!--no-data template-->
-              <div class="k-nodata" *ngIf="data.length === 0">
-                  <ng-template [ngIf]="noDataTemplate"
-                      [templateContext]="{
-                          templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
-                      }">
-                  </ng-template>
-                  <ng-template [ngIf]="!noDataTemplate">
-                      <div>{{ noDataText }}</div>
-                  </ng-template>
-              </div>
-              <!--footer template-->
-              <ng-template *ngIf="footerTemplate"
-                  [templateContext]="{
-                      templateRef: footerTemplate.templateRef
-                  }">
-              </ng-template>
-          </ng-template>
+            <span class="k-icon k-i-x"></span>
         </span>
+        <button
+            #select
+            aria-hidden="true"
+            unselectable="on"
+            type="button"
+            class="k-input-button k-button k-icon-button"
+            [ngClass]="selectButtonClasses"
+            [kendoEventsOutsideAngular]="{
+                mousedown: preventEventDefault
+            }"
+        >
+            <span class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
+        </button>
+        <ng-template #popupTemplate>
+            <!--header template-->
+            <ng-template *ngIf="headerTemplate"
+                [templateContext]="{
+                    templateRef: headerTemplate.templateRef
+                }">
+            </ng-template>
+            <!--list-->
+            <kendo-list
+                #optionsList
+                [size]="size"
+                [rounded]="rounded"
+                [id]="listBoxId"
+                [optionPrefix]="optionPrefix"
+                [data]="data"
+                [textField]="textField"
+                [valueField]="valueField"
+                [template]="template"
+                [groupTemplate]="groupTemplate"
+                [fixedGroupTemplate]="fixedGroupTemplate"
+                [height]="listHeight"
+                [show]="isOpen"
+                [virtual]="virtual"
+                (pageChange)="pageChange($event)"
+            >
+            </kendo-list>
+            <!--no-data template-->
+            <div class="k-no-data" *ngIf="data.length === 0">
+                <ng-template [ngIf]="noDataTemplate"
+                    [templateContext]="{
+                        templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
+                    }">
+                </ng-template>
+                <ng-template [ngIf]="!noDataTemplate">
+                    <div>{{ noDataText }}</div>
+                </ng-template>
+            </div>
+            <!--footer template-->
+            <ng-template *ngIf="footerTemplate"
+                [templateContext]="{
+                    templateRef: footerTemplate.templateRef
+                }">
+            </ng-template>
+        </ng-template>
         <ng-template [ngIf]="isOpen">
             <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         </ng-template>
@@ -4439,7 +4757,8 @@ ComboBoxComponent = ComboBoxComponent_1 = __decorate([
   `
     }),
     __param(10, Optional()), __param(10, Inject(TOUCH_ENABLED)),
-    __metadata("design:paramtypes", [LocalizationService,
+    __metadata("design:paramtypes", [ElementRef,
+        LocalizationService,
         PopupService,
         SelectionService,
         NavigationService,
@@ -4447,8 +4766,7 @@ ComboBoxComponent = ComboBoxComponent_1 = __decorate([
         DataService,
         NgZone,
         ChangeDetectorRef,
-        Renderer2,
-        ElementRef, Boolean])
+        Renderer2, Boolean])
 ], ComboBoxComponent);
 
 /**
@@ -4520,7 +4838,8 @@ const DROPDOWNLIST_VALUE_ACCESSOR = {
  * ```
  */
 let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponent {
-    constructor(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, _zone, renderer, hostElement, cdr, touchEnabled$$1) {
+    constructor(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, _zone, renderer, cdr, touchEnabled$$1) {
+        this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
         this.selectionService = selectionService;
@@ -4529,13 +4848,8 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         this.dataService = dataService;
         this._zone = _zone;
         this.renderer = renderer;
-        this.hostElement = hostElement;
         this.cdr = cdr;
         this.touchEnabled = touchEnabled$$1;
-        /**
-         * @hidden
-         */
-        this.focusableId = `k-${guid$1()}`;
         /**
          * Sets the height of the options list. By default, `listHeight` is 200px.
          *
@@ -4613,7 +4927,12 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
          * Fires each time the DropDownList gets blurred.
          */
         this.onBlur = new EventEmitter();
-        this.widgetClasses = true;
+        this.hostClasses = true;
+        /**
+         * @hidden
+         */
+        this.focusableId = `k-${guid$1()}`;
+        this.role = 'listbox';
         this.groupIndices = [];
         this.listBoxId = guid$1();
         this.optionPrefix = guid$1();
@@ -4625,16 +4944,20 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         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);
     }
     get width() {
@@ -4783,33 +5106,140 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         return this.tabindex;
     }
     /**
-     * @hidden
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     *
      */
-    blurComponent() {
-        this.wrapperBlurred.emit();
+    set size(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;
     }
-    /**
-     * @hidden
-     */
-    blurFilterInput() {
-        this.filterBlurred.emit();
+    get size() {
+        return this._size;
     }
     /**
-     * @hidden
+     * Sets the border radius of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     *
      */
-    focusComponent() {
-        this.wrapperFocused.emit();
-        if (!this.isFocused) {
-            this.isFocused = true;
-            if (hasObservers(this.onFocus)) {
-                this._zone.run(() => {
-                    this.onFocus.emit();
-                });
-            }
+    set rounded(rounded) {
+        this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        if (rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
         }
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
     }
     /**
-     * @hidden
+     * Sets the fillMode of the component.
+     *
+     * The possible values are:
+     * * `'flat'`
+     * * `'solid'` (default)
+     * * `'outline'`
+     * * `null`
+     *
+     */
+    set fillMode(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;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
+    /**
+     * @hidden
+     */
+    blurComponent(event) {
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
+        this.hostElementBlurred.emit();
+    }
+    /**
+     * @hidden
+     */
+    blurFilterInput() {
+        this.filterBlurred.emit();
+    }
+    /**
+     * @hidden
+     */
+    focusComponent(event) {
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
+        this.hostElementFocused.emit();
+        if (!this.isFocused) {
+            this.isFocused = true;
+            if (hasObservers(this.onFocus)) {
+                this._zone.run(() => {
+                    this.onFocus.emit();
+                });
+            }
+        }
+    }
+    /**
+     * @hidden
+     */
+    onResize() {
+        if (this._open) {
+            const popupWrapper = this.popupRef.popupElement;
+            const { min, max } = this.width;
+            popupWrapper.style.minWidth = min;
+            popupWrapper.style.width = max;
+        }
+    }
+    get isDisabled() {
+        return this.disabled;
+    }
+    get isLoading() {
+        return this.loading;
+    }
+    get dir() {
+        return this.direction;
+    }
+    get hostTabIndex() {
+        return this.widgetTabIndex;
+    }
+    get isReadonly() {
+        return this.readonly;
+    }
+    get isAriaExpanded() {
+        return this.ariaExpanded;
+    }
+    get hostAriaOwns() {
+        return this.ariaOwns;
+    }
+    get hostAriaActivedescendant() {
+        return this.ariaActivedescendant;
+    }
+    get hostNoDataLabel() {
+        return this.noDataLabel;
+    }
+    /**
+     * @hidden
      */
     keydown(event) {
         const firstIndex = isPresent(this.defaultItem) ? -1 : 0;
@@ -4868,29 +5298,15 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         this.focus();
         this.togglePopup(!this.isOpen);
     }
-    /**
-     * @hidden
-     */
-    onResize() {
-        if (this._open) {
-            const popupWrapper = this.popupRef.popupElement;
-            const { min, max } = this.width;
-            popupWrapper.style.minWidth = min;
-            popupWrapper.style.width = max;
-        }
-    }
-    get dir() {
-        return this.direction;
-    }
     set isFocused(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;
     }
     get isFocused() {
         return this._isFocused;
     }
     ngOnInit() {
-        this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
+        this.renderer.removeAttribute(this.wrapper.nativeElement, "tabindex");
         this.localizationChangesSubscription = this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
@@ -4898,6 +5314,7 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         });
         this.setMessages();
         this.assignAriaDescribedBy();
+        this.setComponentClasses();
     }
     /**
      * @hidden
@@ -5070,6 +5487,24 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
     get buttonClasses() {
         return this.loading ? 'k-i-loading' : this.iconClass || 'k-i-arrow-s';
     }
+    /**
+     * @hidden
+     */
+    get selectButtonClasses() {
+        return `${this.size ? getSizeClass('button', this.size) : ''} ${this.fillMode ? 'k-button-' + this.fillMode : ''} ${this.fillMode ? 'k-button-' + this.fillMode + '-base' : ''}`;
+    }
+    /**
+     * @hidden
+     */
+    get filterInputClasses() {
+        return `${this.size ? getSizeClass('input', this.size) : ''} ${this.fillMode ? 'k-input-' + this.fillMode : ''} ${this.rounded ? getRoundedClass(this.rounded) : ''}`;
+    }
+    /**
+     * @hidden
+     */
+    get optionLabelSizeClass() {
+        return `${this.size ? getSizeClass('list', this.size) : ''}`;
+    }
     /**
      * @hidden
      */
@@ -5204,13 +5639,13 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
             .subscribe(this.handleEnter.bind(this));
         this.escSubscription = this.navigationService.esc
             .subscribe(this.handleEscape.bind(this));
-        this.filterBlurredSubscription = this.filterBlurred.pipe(concatMap(() => interval(10).pipe(take(1), takeUntil(this.wrapperFocused))))
+        this.filterBlurredSubscription = this.filterBlurred.pipe(concatMap(() => interval(10).pipe(take(1), takeUntil(this.hostElementFocused))))
             .subscribe(() => {
-            this.wrapperBlurred.emit();
+            this.hostElementBlurred.emit();
         });
         this._zone.runOutsideAngular(() => {
             this.componentBlurredSubscription =
-                merge(this.wrapperBlurred.pipe(concatMap(() => interval(10).pipe(take(1), takeUntil(this.filterFocused)))), this.navigationService.tab).pipe(tap(event => event instanceof NavigationEvent && this.focus()), filter(() => this.isFocused))
+                merge(this.hostElementBlurred.pipe(concatMap(() => interval(10).pipe(take(1), takeUntil(this.filterFocused)))), this.navigationService.tab).pipe(tap(event => event instanceof NavigationEvent && this.focus()), filter(() => this.isFocused))
                     .subscribe(() => this.componentBlur());
         });
     }
@@ -5222,7 +5657,7 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         // Roll up DropDownList on iOS when tapped outside
         this.touchstartDisposeHandler = this.renderer.listen(document, 'touchstart', (e) => {
             const target = e.target;
-            if (this.isFocused && !inDropDown(this.hostElement, target, this.popupRef)) {
+            if (this.isFocused && !inDropDown(this.wrapper, target, this.popupRef)) {
                 this._zone.run(() => {
                     if (this.filterFocused) {
                         // Close popup if filter is focused
@@ -5233,6 +5668,24 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
             }
         }));
     }
+    subscribeFocusEvents() {
+        if (isDocumentAvailable()) {
+            this.focusComponent = this.focusComponent.bind(this);
+            this.blurComponent = this.blurComponent.bind(this);
+            this._zone.runOutsideAngular(() => {
+                const useCapture = true;
+                document.addEventListener('focus', this.focusComponent, useCapture);
+                document.addEventListener('blur', this.blurComponent, useCapture);
+            });
+        }
+    }
+    unSubscribeFocusEvents() {
+        if (isDocumentAvailable()) {
+            const useCapture = true;
+            document.removeEventListener('focus', this.focusComponent, useCapture);
+            document.removeEventListener('blur', this.blurComponent, useCapture);
+        }
+    }
     unsubscribeEvents() {
         if (!isDocumentAvailable()) {
             return;
@@ -5244,6 +5697,7 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         this.escSubscription.unsubscribe();
         this.componentBlurredSubscription.unsubscribe();
         this.filterBlurredSubscription.unsubscribe();
+        this.unSubscribeFocusEvents();
         if (this.touchstartDisposeHandler) {
             this.touchstartDisposeHandler();
         }
@@ -5335,7 +5789,7 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
             hasObservers(this.close) ||
             hasObservers(this.onBlur) ||
             hasObservers(this.filterChange) ||
-            isUntouched(this.hostElement.nativeElement)) {
+            isUntouched(this.wrapper.nativeElement)) {
             this._zone.run(() => {
                 if (valueHasChanged) {
                     this.selectionService.change(this.selectionService.selected[0]);
@@ -5515,11 +5969,18 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         const newValue = `${this.valueLabelId} ${trimmed}`.trim();
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-describedby', newValue);
     }
+    setComponentClasses() {
+        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));
+        }
+    }
 };
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], DropDownListComponent.prototype, "focusableId", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String)
@@ -5603,6 +6064,21 @@ __decorate([
     __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)
@@ -5675,24 +6151,90 @@ __decorate([
     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([
+    Input('id'),
+    HostBinding('attr.id'),
+    __metadata("design:type", String)
+], DropDownListComponent.prototype, "focusableId", void 0);
 __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',
@@ -5721,128 +6263,128 @@ DropDownListComponent = DropDownListComponent_1 = __decorate([
             noDataText="NO DATA FOUND"
         >
         </ng-container>
-        <span #wrapper unselectable="on"
-          role="listbox"
-          [id]="focusableId"
-          [ngClass]="{
-            'k-dropdown-wrap': true,
-            'k-state-disabled': this.disabled
-          }"
-          [attr.dir]="direction"
-          [attr.readonly]="readonly"
-          [attr.tabindex]="widgetTabIndex"
-          [attr.aria-disabled]="disabled"
-          [attr.aria-readonly]="readonly"
-          aria-haspopup="listbox"
-          [attr.aria-expanded]="ariaExpanded"
-          [attr.aria-owns]="ariaOwns"
-          [attr.aria-activedescendant]="ariaActivedescendant"
-          [attr.aria-label]="noDataLabel"
-          (keydown)="keydown($event)"
-          (keypress)="keypress($event)"
-          (click)="click($event)"
-          [kendoEventsOutsideAngular]="{
-            focus: focusComponent,
-            blur: blurComponent
+        <span class="k-input-inner" unselectable="on" [id]="valueLabelId">
+            <span class="k-input-value-text">
+                <ng-template *ngIf="valueTemplate"
+                    [templateContext]="{
+                        templateRef: valueTemplate.templateRef,
+                        $implicit: dataItem
+                    }">
+                </ng-template>
+                <ng-template [ngIf]="!valueTemplate">{{ getText() }}</ng-template>
+            </span>
+        </span>
+        <button
+            tabindex="-1"
+            unselectable="on"
+            type="button"
+            class="k-input-button k-button k-icon-button"
+            [ngClass]="selectButtonClasses"
+            [kendoEventsOutsideAngular]="{
+                mousedown: onMouseDown
             }"
-          [scope]="this"
         >
-            <span class="k-input" unselectable="on" [id]="valueLabelId">
-               <ng-template *ngIf="valueTemplate"
-                   [templateContext]="{
-                       templateRef: valueTemplate.templateRef,
-                       $implicit: dataItem
-                   }">
-               </ng-template>
-               <ng-template [ngIf]="!valueTemplate">{{ getText() }}</ng-template>
-           </span>
-           <span class="k-select" unselectable="on">
-               <span
-                    class="k-icon"
-                    unselectable="on"
-                    [ngClass]="buttonClasses"
-                >
-                </span>
-           </span>
-           <ng-template #popupTemplate>
-               <!--filterable-->
+            <span
+                class="k-button-icon k-icon"
+                unselectable="on"
+                [ngClass]="buttonClasses"
+            ></span>
+        </button>
+        <ng-template #popupTemplate>
+            <!--filterable-->
 
-               <ng-template [ngIf]="filterable">
-                   <span class="k-list-filter" (click)="$event.stopImmediatePropagation()">
-                       <input
-                           [attr.aria-owns]="ariaOwns"
-                           [attr.aria-activedescendant]="ariaActivedescendant"
-                           [attr.aria-label]="noDataLabel"
-                           tabindex="-1"
-                           [filterInput]="isFocused && !touchEnabled"
-                           [dir]="direction"
-                           [(ngModel)]="filterText"
-                           class="k-textbox"
-                           (keydown)="keydown($event)"
-                           (input)="handleFilter($event)"
-                           (focus)="onFilterFocus()"
-                           (blur)="blurFilterInput()" />
-                       <span class="k-icon k-i-search" unselectable="on"></span>
-                   </span>
-               </ng-template>
-               <!--default item-->
-               <ng-template [ngIf]="defaultItem && !itemTemplate">
-                   <div class="k-list-optionlabel" [ngClass]="{ 'k-state-disabled': isDisabledDefaultItem }" kendoDropDownsSelectable [index]="-1">
-                       {{ getDefaultItemText() }}
-                   </div>
-               </ng-template>
-               <ng-template [ngIf]="defaultItem && itemTemplate">
-                   <div class="k-list-optionlabel" [ngClass]="{ 'k-state-disabled': isDisabledDefaultItem }" kendoDropDownsSelectable [index]="-1">
-                       <ng-template
-                           [templateContext]="{
-                               templateRef: itemTemplate.templateRef,
-                               $implicit: defaultItem
-                           }">
-                       </ng-template>
-                   </div>
-               </ng-template>
-               <!--header template-->
-               <ng-template *ngIf="headerTemplate"
-                   [templateContext]="{
-                       templateRef: headerTemplate.templateRef
-                   }">
-               </ng-template>
-               <!--list-->
-               <kendo-list
-                   #optionsList
-                   [id]="listBoxId"
-                   [optionPrefix]="optionPrefix"
-                   [data]="data"
-                   [textField]="textField"
-                   [valueField]="valueField"
-                   [template]="itemTemplate"
-                   [groupTemplate]="groupTemplate"
-                   [fixedGroupTemplate]="fixedGroupTemplate"
-                   [height]="listHeight"
-                   [show]="isOpen"
-                   [virtual]="virtual"
-                   (pageChange)="pageChange($event)"
-                   >
-               </kendo-list>
-               <!--no-data template-->
-               <div class="k-nodata" *ngIf="data.length === 0">
-                   <ng-template [ngIf]="noDataTemplate"
-                       [templateContext]="{
-                           templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
-                       }">
-                   </ng-template>
-                   <ng-template [ngIf]="!noDataTemplate">
-                       <div>{{ noDataText }}</div>
-                   </ng-template>
-               </div>
-               <!--footer template-->
-               <ng-template *ngIf="footerTemplate"
-                   [templateContext]="{
-                       templateRef: footerTemplate.templateRef
-                   }">
-               </ng-template>
+            <ng-template [ngIf]="filterable">
+                <div class="k-list-filter" (click)="$event.stopImmediatePropagation()">
+                    <span
+                        class="k-searchbox k-input"
+                        [ngClass]="filterInputClasses"
+                    >
+                        <span class="k-input-icon k-icon k-i-search" unselectable="on"></span>
+                        <input
+                            [attr.aria-owns]="ariaOwns"
+                            [attr.aria-activedescendant]="ariaActivedescendant"
+                            [attr.aria-label]="noDataLabel"
+                            tabindex="-1"
+                            [filterInput]="isFocused && !touchEnabled"
+                            [dir]="direction"
+                            [(ngModel)]="filterText"
+                            class="k-input-inner"
+                            (keydown)="keydown($event)"
+                            (input)="handleFilter($event)"
+                            (focus)="onFilterFocus()"
+                            (blur)="blurFilterInput()" />
+                    </span>
+                </div>
             </ng-template>
-        </span>
+            <!--default item-->
+            <ng-template [ngIf]="defaultItem && !itemTemplate">
+                <div
+                    class="k-list"
+                    [ngClass]="optionLabelSizeClass"
+                >
+                    <div class="k-list-optionlabel k-list-item" [ngClass]="{ 'k-disabled': isDisabledDefaultItem }" kendoDropDownsSelectable [index]="-1">
+                        {{ getDefaultItemText() }}
+                    </div>
+                </div>
+            </ng-template>
+            <ng-template [ngIf]="defaultItem && itemTemplate">
+                <div
+                    class="k-list"
+                    [ngClass]="optionLabelSizeClass"
+                >
+                    <div class="k-list-optionlabel k-list-item" [ngClass]="{ 'k-disabled': isDisabledDefaultItem }" kendoDropDownsSelectable [index]="-1">
+                        <ng-template
+                            [templateContext]="{
+                                templateRef: itemTemplate.templateRef,
+                                $implicit: defaultItem
+                            }">
+                        </ng-template>
+                    </div>
+                </div>
+            </ng-template>
+            <!--header template-->
+            <ng-template *ngIf="headerTemplate"
+                [templateContext]="{
+                    templateRef: headerTemplate.templateRef
+                }">
+            </ng-template>
+            <!--list-->
+            <kendo-list
+                #optionsList
+                [size]="size"
+                [rounded]="rounded"
+                [id]="listBoxId"
+                [optionPrefix]="optionPrefix"
+                [data]="data"
+                [textField]="textField"
+                [valueField]="valueField"
+                [template]="itemTemplate"
+                [groupTemplate]="groupTemplate"
+                [fixedGroupTemplate]="fixedGroupTemplate"
+                [height]="listHeight"
+                [show]="isOpen"
+                [virtual]="virtual"
+                (pageChange)="pageChange($event)"
+                >
+            </kendo-list>
+            <!--no-data template-->
+            <div class="k-no-data" *ngIf="data.length === 0">
+                <ng-template [ngIf]="noDataTemplate"
+                    [templateContext]="{
+                        templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
+                    }">
+                </ng-template>
+                <ng-template [ngIf]="!noDataTemplate">
+                    <div>{{ noDataText }}</div>
+                </ng-template>
+            </div>
+            <!--footer template-->
+            <ng-template *ngIf="footerTemplate"
+                [templateContext]="{
+                    templateRef: footerTemplate.templateRef
+                }">
+            </ng-template>
+        </ng-template>
         <ng-template [ngIf]="isOpen">
             <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         </ng-template>
@@ -5850,7 +6392,8 @@ DropDownListComponent = DropDownListComponent_1 = __decorate([
   `
     }),
     __param(10, Optional()), __param(10, Inject(TOUCH_ENABLED)),
-    __metadata("design:paramtypes", [LocalizationService,
+    __metadata("design:paramtypes", [ElementRef,
+        LocalizationService,
         PopupService,
         SelectionService,
         NavigationService,
@@ -5858,7 +6401,6 @@ DropDownListComponent = DropDownListComponent_1 = __decorate([
         DataService,
         NgZone,
         Renderer2,
-        ElementRef,
         ChangeDetectorRef, Boolean])
 ], DropDownListComponent);
 
@@ -6028,7 +6570,8 @@ const MULTISELECT_VALUE_ACCESSOR = {
  * ```
  */
 let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
-    constructor(localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, hostElement, _zone, touchEnabled$$1) {
+    constructor(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, touchEnabled$$1) {
+        this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
         this.dataService = dataService;
@@ -6038,7 +6581,6 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
         this.cdr = cdr;
         this.differs = differs;
         this.renderer = renderer;
-        this.hostElement = hostElement;
         this._zone = _zone;
         this.touchEnabled = touchEnabled$$1;
         this.listBoxId = guid$1();
@@ -6199,8 +6741,11 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
          * 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 = (_) => { };
         this.onTouchedCallback = (_) => { };
         this._placeholder = '';
@@ -6274,7 +6819,7 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
         if (hasObservers(this.onBlur) ||
             hasObservers(this.filterChange) ||
             hasObservers(this.close) ||
-            isUntouched(this.hostElement.nativeElement)) {
+            isUntouched(this.wrapper.nativeElement)) {
             this._zone.run(() => {
                 this.closePopup();
                 if (!(this.isOpen && this.allowCustom)) {
@@ -6291,22 +6836,6 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
             this.closePopup();
         }
     }
-    /**
-     * @hidden
-     */
-    wrapperMousedown(event) {
-        const 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
      */
@@ -6385,11 +6914,72 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
         return this.tabindex;
     }
     /**
-     * The hint which is displayed when the component is empty.
-     * When the values are selected, it disappears.
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     *
      */
-    set placeholder(text) {
-        this._placeholder = text || '';
+    set size(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;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * Sets the border radius of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     *
+     */
+    set rounded(rounded) {
+        this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        if (rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        }
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * Sets the fillMode of the component.
+     *
+     * The possible values are:
+     * * `'flat'`
+     * * `'solid'` (default)
+     * * `'outline'`
+     * * `null`
+     *
+     */
+    set fillMode(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;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
+    /**
+     * The hint which is displayed when the component is empty.
+     * When the values are selected, it disappears.
+     */
+    set placeholder(text) {
+        this._placeholder = text || '';
     }
     get placeholder() {
         return this.selectedDataItems.length ? '' : this._placeholder;
@@ -6458,6 +7048,25 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
     get disabledClass() {
         return this.disabled;
     }
+    get isLoading() {
+        return this.loading;
+    }
+    /**
+     * @hidden
+     */
+    hostMousedown(event) {
+        const 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();
+        }
+    }
     get listContainerClasses() {
         const containerClasses = ['k-list-container', 'k-reset'];
         if (this.popupSettings.popupClass) {
@@ -6465,6 +7074,12 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
         }
         return containerClasses;
     }
+    /**
+     * @hidden
+     */
+    get customItemSizeClass() {
+        return `${this.size ? getSizeClass('list', this.size) : ''}`;
+    }
     get width() {
         let wrapperOffsetWidth = 0;
         if (isDocumentAvailable()) {
@@ -6709,7 +7324,7 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
         this.valueChangeDetected = false;
     }
     ngOnInit() {
-        this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
+        this.renderer.removeAttribute(this.wrapper.nativeElement, "tabindex");
         this.createCustomValueStream();
         this.localizationChangeSubscription = this.localization
             .changes.subscribe(({ rtl }) => {
@@ -6718,6 +7333,7 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
         });
         this.setMessages();
         this.setState(this.value);
+        this.setComponentClasses();
         this.initialized = true;
     }
     ngOnChanges(changes) {
@@ -6805,7 +7421,7 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
         this.cdr.markForCheck();
     }
     set isFocused(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;
     }
     get isFocused() {
@@ -6842,7 +7458,7 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
         // Roll up MultiSelect on iOS when tapped outside
         this.touchstartDisposeHandler = this.renderer.listen(document, 'touchstart', (e) => {
             const 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(() => {
                     this.blur();
                     if (this.isOpen) {
@@ -7209,6 +7825,17 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
             });
         });
     }
+    setComponentClasses() {
+        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));
+        }
+    }
 };
 __decorate([
     Input(),
@@ -7249,6 +7876,21 @@ __decorate([
     __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),
@@ -7359,10 +8001,6 @@ __decorate([
     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)
@@ -7404,20 +8042,31 @@ __decorate([
     __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',
@@ -7449,24 +8098,22 @@ MultiSelectComponent = MultiSelectComponent_1 = __decorate([
             clearTitle="clear"
         >
         </ng-container>
-        <div class="k-multiselect-wrap k-floatwrap"
-            #wrapper
-            (mousedown)="wrapperMousedown($event)"
+        <kendo-taglist
+            [size]="size"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [id]="tagListId"
+            [tags]="tags"
+            [textField]="textField"
+            [valueField]="valueField"
+            [focused]="focusedTagIndex"
+            [disabled]="disabled"
+            [template]="tagTemplate"
+            [groupTemplate]="groupTagTemplate"
+            [tagPrefix]="tagPrefix"
+            [disabledIndices]="disabledIndices"
+            (removeTag)="handleRemoveTag($event)"
         >
-            <kendo-taglist
-                [id]="tagListId"
-                [tags]="tags"
-                [textField]="textField"
-                [valueField]="valueField"
-                [focused]="focusedTagIndex"
-                [disabled]="disabled"
-                [template]="tagTemplate"
-                [groupTemplate]="groupTagTemplate"
-                [tagPrefix]="tagPrefix"
-                [disabledIndices]="disabledIndices"
-                (removeTag)="handleRemoveTag($event)"
-            >
-            </kendo-taglist>
             <kendo-searchbar
                 #searchbar
                 [id]="focusableId"
@@ -7486,22 +8133,24 @@ MultiSelectComponent = MultiSelectComponent_1 = __decorate([
                 (onFocus)="onSearchBarFocus()"
             >
             </kendo-searchbar>
-            <span
-                *ngIf="!loading && !readonly && clearButton && (tags?.length || text?.length)"
-                class="k-icon k-clear-value k-i-close"
-                [style.visibility]="clearButtonVisiblity"
-                [attr.title]="clearTitle"
-                role="button"
-                tabindex="-1"
-                (mousedown)="clearAll($event)"
-            >
-            </span>
-            <span
-                *ngIf="loading"
-                class="k-icon k-i-loading"
-            >
-            </span>
-        </div>
+        </kendo-taglist>
+
+        <span
+            *ngIf="!loading && !readonly && clearButton && (tags?.length || text?.length)"
+            class="k-clear-value"
+            [style.visibility]="clearButtonVisiblity"
+            [attr.title]="clearTitle"
+            role="button"
+            tabindex="-1"
+            (mousedown)="clearAll($event)"
+        >
+            <span class="k-icon k-i-x"></span>
+        </span>
+        <span
+            *ngIf="loading"
+            class="k-icon k-i-loading"
+        >
+        </span>
         <ng-template #popupTemplate>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
@@ -7510,8 +8159,12 @@ MultiSelectComponent = MultiSelectComponent_1 = __decorate([
                 }">
             </ng-template>
             <!--custom item template-->
-            <div class="k-list" *ngIf="allowCustom && text">
-                <div class="k-item k-custom-item" kendoDropDownsSelectable [multipleSelection]="true" [index]="-1">
+            <div
+                *ngIf="allowCustom && text"
+                class="k-list"
+                [ngClass]="customItemSizeClass"
+            >
+                <div class="k-list-item k-custom-item" kendoDropDownsSelectable [multipleSelection]="true" [index]="-1">
                     <ng-template *ngIf="customItemTemplate;else default_custom_item_template"
                         [templateContext]="{
                             templateRef: customItemTemplate.templateRef,
@@ -7525,6 +8178,8 @@ MultiSelectComponent = MultiSelectComponent_1 = __decorate([
             <!--list-->
             <kendo-list
                 #optionsList
+                [size]="size"
+                [rounded]="rounded"
                 [id]="listBoxId"
                 [optionPrefix]="optionPrefix"
                 [data]="data"
@@ -7542,7 +8197,7 @@ MultiSelectComponent = MultiSelectComponent_1 = __decorate([
                 >
             </kendo-list>
             <!--no data template-->
-            <div class="k-nodata" *ngIf="data.length === 0">
+            <div class="k-no-data" *ngIf="data.length === 0">
                 <ng-template [ngIf]="noDataTemplate"
                     [templateContext]="{
                         templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
@@ -7566,7 +8221,8 @@ MultiSelectComponent = MultiSelectComponent_1 = __decorate([
   `
     }),
     __param(11, Optional()), __param(11, Inject(TOUCH_ENABLED)),
-    __metadata("design:paramtypes", [LocalizationService,
+    __metadata("design:paramtypes", [ElementRef,
+        LocalizationService,
         PopupService,
         DataService,
         SelectionService,
@@ -7575,7 +8231,6 @@ MultiSelectComponent = MultiSelectComponent_1 = __decorate([
         ChangeDetectorRef,
         KeyValueDiffers,
         Renderer2,
-        ElementRef,
         NgZone, Boolean])
 ], MultiSelectComponent);
 
@@ -7749,8 +8404,8 @@ var MultiColumnComboBoxComponent_1;
  * Represents the [Kendo UI MultiColumnComboBox component for Angular]({% slug overview_multicolumncombobox %}).
  */
 let MultiColumnComboBoxComponent = MultiColumnComboBoxComponent_1 = class MultiColumnComboBoxComponent extends ComboBoxComponent {
-    constructor(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, hostElement, touchEnabled$$1) {
-        super(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, hostElement, touchEnabled$$1);
+    constructor(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, wrapper, touchEnabled$$1) {
+        super(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, touchEnabled$$1);
         /**
          * @hidden
          */
@@ -7761,6 +8416,12 @@ let MultiColumnComboBoxComponent = MultiColumnComboBoxComponent_1 = class MultiC
         // use a smaller virtual page size as columns with multiple cells can cause poor performance
         this.defaultVirtualPageSize = 30;
     }
+    /**
+     * @hidden
+     */
+    get isDisabled() {
+        return this.disabled;
+    }
     /**
      * @hidden
      */
@@ -7775,18 +8436,19 @@ let MultiColumnComboBoxComponent = MultiColumnComboBoxComponent_1 = class MultiC
         const max = isNaN(width) ? width : `${width}px`;
         return { min, max };
     }
+    /**
+     * @hidden
+     */
+    get tableSizeClass() {
+        return `${this.size ? getSizeClass('table', this.size) : ''}`;
+    }
     /**
      * @hidden
      */
     get listContainerClasses() {
         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 || []);
     }
     ngAfterViewInit() {
@@ -7862,6 +8524,11 @@ __decorate([
     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)
@@ -7909,63 +8576,56 @@ MultiColumnComboBoxComponent = MultiColumnComboBoxComponent_1 = __decorate([
             clearTitle="clear"
         >
         </ng-container>
-        <span
-            #wrapper
-            unselectable="on"
-            class="k-dropdown-wrap"
-            [class.k-state-disabled]="disabled"
+        <kendo-searchbar
+            #searchbar
+            [role]="'combobox'"
+            [id]="focusableId"
+            [listId]="listBoxId"
+            [activeDescendant]="activeDescendant"
+            [noDataLabel]="noDataLabel"
+            [userInput]="text"
+            [suggestedText]="getSuggestion()"
+            [disabled]="disabled"
+            [readonly]="readonly"
+            [tabIndex]="tabIndex"
+            [popupOpen]="isOpen"
+            [placeholder]="placeholder"
+            (onNavigate)="handleNavigate($event)"
+            (valueChange)="searchBarChange($event)"
+            (onBlur)="handleBlur()"
+            (onFocus)="handleFocus()"
         >
-            <kendo-searchbar
-                #searchbar
-                [role]="'combobox'"
-                [id]="focusableId"
-                [listId]="listBoxId"
-                [activeDescendant]="activeDescendant"
-                [noDataLabel]="noDataLabel"
-                [userInput]="text"
-                [suggestedText]="getSuggestion()"
-                [disabled]="disabled"
-                [readonly]="readonly"
-                [tabIndex]="tabIndex"
-                [popupOpen]="isOpen"
-                [placeholder]="placeholder"
-                (onNavigate)="handleNavigate($event)"
-                (valueChange)="searchBarChange($event)"
-                (onBlur)="handleBlur()"
-                (onFocus)="handleFocus()"
-            >
-            </kendo-searchbar>
-
-            <span
-                *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
-                class="k-icon k-clear-value k-i-close"
-                [style.visibility]="clearButtonVisiblity"
-                aria-hidden="true"
-                [attr.title]="clearTitle"
-                (click)="clearValue($event)"
-                [kendoEventsOutsideAngular]="{
-                    mousedown: preventEventDefault
-                }"
-            >
-            </span>
+        </kendo-searchbar>
 
-            <span
-                #select
-                aria-hidden="true"
-                unselectable="on"
-                class="k-select"
-                [kendoEventsOutsideAngular]="{
-                    mousedown: preventEventDefault
-                }"
-            >
-                <span
-                    class="k-icon"
-                    [ngClass]="buttonClasses"
-                >
-                </span>
-            </span>
+        <span
+            *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
+            class="k-clear-value"
+            [style.visibility]="clearButtonVisiblity"
+            aria-hidden="true"
+            [attr.title]="clearTitle"
+            (click)="clearValue($event)"
+            [kendoEventsOutsideAngular]="{
+                mousedown: preventEventDefault
+            }"
+        >
+            <span class="k-icon k-i-x"></span>
         </span>
 
+        <button
+            #select
+            tabindex="-1"
+            aria-hidden="true"
+            unselectable="on"
+            type="button"
+            class="k-input-button k-button k-icon-button"
+            [ngClass]="selectButtonClasses"
+            [kendoEventsOutsideAngular]="{
+                mousedown: preventEventDefault
+            }"
+        >
+            <span class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
+        </button>
+
         <ng-template #popupTemplate>
             <!--user-defined header template -->
             <ng-template
@@ -7976,125 +8636,139 @@ MultiColumnComboBoxComponent = MultiColumnComboBoxComponent_1 = __decorate([
             >
             </ng-template>
 
-            <!--grid header-->
-            <div
-                #header
-                class="k-grid-header"
-            >
-                <div class="k-grid-header-wrap">
-                    <table role="presentation">
-                        <colgroup>
-                            <ng-container *ngFor="let column of columns">
-                                <col
-                                    *ngIf="!column.hidden && column.matchesMedia"
-                                    [style.width.px]="column.width"
-                                />
-                            </ng-container>
-                        </colgroup>
-                        <tbody>
-                            <tr>
+            <!--data table-->
+            <div class="k-data-table" [ngClass]="tableSizeClass">
+
+                <!--grid header-->
+                <div
+                    #header
+                    class="k-table-header"
+                >
+                    <div class="k-table-header-wrap">
+                        <table class="k-table" role="presentation">
+                            <colgroup>
                                 <ng-container *ngFor="let column of columns">
-                                    <th
+                                    <col
                                         *ngIf="!column.hidden && column.matchesMedia"
-                                        class="k-header"
-                                        [ngStyle]="column.headerStyle"
-                                        [ngClass]="column.headerClass"
-                                    >
-                                        <ng-container *ngIf="!column.headerTemplate">
-                                            {{ column.title || column.field }}
-                                        </ng-container>
-                                        <ng-template
-                                            *ngIf="column.headerTemplate"
-                                            [templateContext]="{
-                                                templateRef: column.headerTemplate?.templateRef,
-                                                $implicit: column,
-                                                column: column
-                                            }"
-                                        >
-                                        </ng-template>
-                                    </th>
+                                        [style.width.px]="column.width"
+                                    />
                                 </ng-container>
-                            </tr>
-                        </tbody>
-                    </table>
+                            </colgroup>
+                            <thead class="k-table-thead">
+                                <tr class="k-table-row">
+                                    <ng-container *ngFor="let column of columns">
+                                        <th
+                                            *ngIf="!column.hidden && column.matchesMedia"
+                                            class="k-table-th"
+                                            [ngStyle]="column.headerStyle"
+                                            [ngClass]="column.headerClass"
+                                        >
+                                            <ng-container *ngIf="!column.headerTemplate">
+                                                {{ column.title || column.field }}
+                                            </ng-container>
+                                            <ng-template
+                                                *ngIf="column.headerTemplate"
+                                                [templateContext]="{
+                                                    templateRef: column.headerTemplate?.templateRef,
+                                                    $implicit: column,
+                                                    column: column
+                                                }"
+                                            >
+                                            </ng-template>
+                                        </th>
+                                    </ng-container>
+                                </tr>
+                            </thead>
+                        </table>
+                    </div>
                 </div>
-            </div>
 
-            <!-- item template -->
-            <ng-template #rowTemplate let-dataItem>
-                <ng-container *ngFor="let column of columns">
-                    <span
-                        *ngIf="!column.hidden && column.matchesMedia"
-                        class="k-cell"
-                        [ngClass]="column.class"
-                        [style.width.px]="column.width"
-                        [ngStyle]="column.style"
-                    >
-                        <ng-container *ngIf="!column.cellTemplate">
-                            {{ textFrom(dataItem, column.field) }}
-                        </ng-container>
-                        <ng-template
-                            *ngIf="column.cellTemplate"
-                            [templateContext]="{
-                                templateRef: column.cellTemplate?.templateRef,
-                                $implicit: dataItem,
-                                dataItem: dataItem,
-                                column: column
-                            }"
+                <!-- item template -->
+                <ng-template #rowTemplate let-dataItem>
+                    <ng-container *ngFor="let column of columns">
+                        <span
+                            *ngIf="!column.hidden && column.matchesMedia"
+                            class="k-table-td"
+                            [ngClass]="column.class"
+                            [style.width.px]="column.width"
+                            [ngStyle]="column.style"
                         >
-                        </ng-template>
-                    </span>
-                </ng-container>
-            </ng-template>
-
-            <!--list-->
-            <kendo-list
-                #optionsList
-                [id]="listBoxId"
-                [optionPrefix]="optionPrefix"
-                [data]="data"
-                [textField]="textField"
-                [valueField]="valueField"
-                [template]="{ templateRef: rowTemplate }"
-                [groupTemplate]="groupTemplate"
-                [fixedGroupTemplate]="fixedGroupTemplate"
-                [height]="listHeight"
-                [show]="isOpen"
-                [virtual]="virtual"
-                [listClass]="'k-reset k-grid-list'"
-                (pageChange)="pageChange($event)"
-                (listResize)="updateHeaderPadding(header)"
-            >
-            </kendo-list>
+                            <ng-container *ngIf="!column.cellTemplate">
+                                {{ textFrom(dataItem, column.field) }}
+                            </ng-container>
+                            <ng-template
+                                *ngIf="column.cellTemplate"
+                                [templateContext]="{
+                                    templateRef: column.cellTemplate?.templateRef,
+                                    $implicit: dataItem,
+                                    dataItem: dataItem,
+                                    column: column
+                                }"
+                            >
+                            </ng-template>
+                        </span>
+                    </ng-container>
+                </ng-template>
 
-            <!--no-data template-->
-            <div
-                class="k-nodata"
-                *ngIf="data.length === 0"
-            >
-                <ng-template
-                    [ngIf]="noDataTemplate"
-                    [templateContext]="{
-                        templateRef: noDataTemplate?.templateRef
-                    }"
+                <!--list-->
+                <kendo-list
+                    #optionsList
+                    [id]="listBoxId"
+                    [optionPrefix]="optionPrefix"
+                    [data]="data"
+                    [textField]="textField"
+                    [valueField]="valueField"
+                    [template]="{ templateRef: rowTemplate }"
+                    [groupTemplate]="groupTemplate"
+                    [fixedGroupTemplate]="fixedGroupTemplate"
+                    [height]="listHeight"
+                    [show]="isOpen"
+                    [virtual]="virtual"
+                    [type]="'dropdowngrid'"
+                    (pageChange)="pageChange($event)"
+                    (listResize)="updateHeaderPadding(header)"
                 >
-                </ng-template>
-                <ng-template [ngIf]="!noDataTemplate">
-                    <div>{{ noDataText }}</div>
-                </ng-template>
-            </div>
+                </kendo-list>
 
-            <!--user-defined footer template-->
-            <ng-container *ngIf="footerTemplate">
-                <div class="k-footer">
+                <!--no-data template-->
+                <div
+                    class="k-no-data"
+                    *ngIf="data.length === 0"
+                >
                     <ng-template
+                        [ngIf]="noDataTemplate"
                         [templateContext]="{
-                            templateRef: footerTemplate.templateRef
+                            templateRef: noDataTemplate?.templateRef
                         }"
                     >
                     </ng-template>
+                    <ng-template [ngIf]="!noDataTemplate">
+                        <div>{{ noDataText }}</div>
+                    </ng-template>
                 </div>
-            </ng-container>
+
+                <!--user-defined footer template-->
+                <ng-container *ngIf="footerTemplate">
+                    <div class="k-table-footer">
+                        <table class="k-table">
+                            <tfoot class="k-table-tfoot">
+                                <tr class="k-table-row">
+                                    <td class="k-table-td">
+                                        <ng-template
+                                            [templateContext]="{
+                                                templateRef: footerTemplate.templateRef
+                                            }"
+                                        >
+                                        </ng-template>
+                                    </td>
+                                </tr>
+                            </tfoot>
+                        </table>
+                    </div>
+                </ng-container>
+
+            </div>
+
         </ng-template>
 
         <kendo-resize-sensor
@@ -8152,16 +8826,18 @@ const isNodeVisible = () => true;
  * Represents the [Kendo UI DropDownTree component for Angular]({% slug overview_ddt %}).
  */
 let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponent {
-    constructor(popupService, navigationService, renderer, hostElement, _zone, cdr, localization, touchEnabled$$1) {
+    constructor(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 %})).
@@ -8296,29 +8972,66 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
         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();
     }
-    get clearable() {
-        return this.clearButton;
+    get isDisabled() {
+        return this.disabled;
     }
-    set treeview(treeview) {
-        if (treeview) {
-            if (this.isFocused && !this.filterable || this.touchEnabled) {
-                treeview.focus();
-            }
-            // the treeview animations are initially disabled (we don't want expand animations during popup opening)
-            // re-enables the animations for user interaction
-            treeview.animate = true;
-            this._treeview = treeview;
-        }
+    get isLoading() {
+        return this.loading;
     }
-    get treeview() {
-        return this._treeview;
+    get id() {
+        return this.focusableId;
+    }
+    get hostTabIndex() {
+        return this.tabindex;
+    }
+    get isAriaExpanded() {
+        return this.isOpen;
+    }
+    get isReadonly() {
+        return this.readonly;
+    }
+    /**
+     * @hidden
+     */
+    handleClick() {
+        this.togglePopup(!this.isOpen);
+    }
+    /**
+     * @hidden
+     */
+    handleKeydown(event) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        const eventData = event;
+        this.navigationService.process({
+            originalEvent: eventData
+        });
+    }
+    set treeview(treeview) {
+        if (treeview) {
+            if (this.isFocused && !this.filterable || this.touchEnabled) {
+                treeview.focus();
+            }
+            // the treeview animations are initially disabled (we don't want expand animations during popup opening)
+            // re-enables the animations for user interaction
+            treeview.animate = true;
+            this._treeview = treeview;
+        }
+    }
+    get treeview() {
+        return this._treeview;
     }
     /**
      * Sets the data of the DropDownTree.
@@ -8383,8 +9096,69 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
     get tabindex() {
         return this.disabled ? -1 : this._tabindex;
     }
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     *
+     */
+    set size(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;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * Sets the border radius of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     *
+     */
+    set rounded(rounded) {
+        this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        if (rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        }
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * Sets the fillMode of the component.
+     *
+     * The possible values are:
+     * * `'flat'`
+     * * `'solid'` (default)
+     * * `'outline'`
+     * * `null`
+     *
+     */
+    set fillMode(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;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     set isFocused(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;
     }
     get isFocused() {
@@ -8479,13 +9253,14 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
         return this.isNodeVisible;
     }
     ngOnInit() {
-        this.renderer.removeAttribute(this.hostElement.nativeElement, 'tabindex');
+        this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
         this.assignAriaDescribedBy();
         this.subscriptions.push(this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             this.cdr.markForCheck();
         }));
+        this.setComponentClasses();
     }
     /**
      * @hidden
@@ -8536,7 +9311,11 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
     /**
      * @hidden
      */
-    handleFocus() {
+    handleFocus(event) {
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
         if (!this.isFocused) {
             this.isFocused = true;
             if (hasObservers(this.onFocus)) {
@@ -8551,13 +9330,13 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
      */
     handleBlur(e) {
         const 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(() => {
                 this.togglePopup(false);
                 this.onBlur.emit();
@@ -8568,24 +9347,6 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
             this.togglePopup(false);
         }
     }
-    /**
-     * @hidden
-     */
-    handleKeydown(event) {
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        const eventData = event;
-        this.navigationService.process({
-            originalEvent: eventData
-        });
-    }
-    /**
-     * @hidden
-     */
-    handleClick() {
-        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.
@@ -8647,7 +9408,7 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
      * @hidden
      */
     get popupContainerClasses() {
-        const containerClasses = ['k-popup-dropdowntree', 'k-reset', 'k-group', 'k-list-container'];
+        const containerClasses = ['k-popup-dropdowntree'];
         if (this.popupSettings.popupClass) {
             containerClasses.push(this.popupSettings.popupClass);
         }
@@ -8747,6 +9508,18 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
     get buttonClasses() {
         return this.loading ? 'k-i-loading' : 'k-i-arrow-s';
     }
+    /**
+     * @hidden
+     */
+    get selectButtonClasses() {
+        return `${this.size ? getSizeClass('button', this.size) : ''} ${this.fillMode ? 'k-button-' + this.fillMode : ''} ${this.fillMode ? 'k-button-' + this.fillMode + '-base' : ''}`;
+    }
+    /**
+     * @hidden
+     */
+    get filterInputClasses() {
+        return `${this.size ? getSizeClass('input', this.size) : ''} ${this.fillMode ? 'k-input-' + this.fillMode : ''} ${this.rounded ? getRoundedClass(this.rounded) : ''}`;
+    }
     verifySettings() {
         if (!isDevMode()) {
             return;
@@ -8906,7 +9679,7 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
         // Roll up DropDownTree on iOS when tapped outside
         this.touchstartDisposeHandler = this.renderer.listen(document, 'touchstart', (e) => {
             const target = e.target;
-            if (this.isFocused && !inDropDown(this.hostElement, target, this.popupRef)) {
+            if (this.isFocused && !inDropDown(this.wrapper, target, this.popupRef)) {
                 this._zone.run(() => {
                     if (this.isOpen) {
                         this.treeview.blur();
@@ -8916,34 +9689,117 @@ let DropDownTreeComponent = DropDownTreeComponent_1 = class DropDownTreeComponen
             }
         }));
     }
+    subscribeFocusEvents() {
+        if (isDocumentAvailable()) {
+            this.handleFocus = this.handleFocus.bind(this);
+            this.handleDocumentBlur = this.handleDocumentBlur.bind(this);
+            this._zone.runOutsideAngular(() => {
+                const useCapture = true;
+                document.addEventListener('focus', this.handleFocus, useCapture);
+                document.addEventListener('blur', this.handleDocumentBlur, useCapture);
+            });
+        }
+    }
+    unSubscribeFocusEvents() {
+        if (isDocumentAvailable()) {
+            const useCapture = true;
+            document.removeEventListener('focus', this.handleFocus, useCapture);
+            document.removeEventListener('blur', this.handleDocumentBlur, useCapture);
+        }
+    }
     unsubscribeEvents() {
         this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.unSubscribeFocusEvents();
         if (this.touchstartDisposeHandler) {
             this.touchstartDisposeHandler();
         }
     }
+    handleDocumentBlur(event) {
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
+        this.handleBlur(event);
+    }
     assignAriaDescribedBy() {
         const 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)
         const newValue = `${this.valueLabelId} ${currentValue.trim()}`.trim();
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-describedby', newValue);
     }
+    setComponentClasses() {
+        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));
+        }
+    }
 };
 __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)
@@ -8968,10 +9824,6 @@ __decorate([
     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)
@@ -9098,6 +9950,21 @@ __decorate([
     __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)
@@ -9168,30 +10035,10 @@ DropDownTreeComponent = DropDownTreeComponent_1 = __decorate([
         >
         </ng-container>
         <span
-            #wrapper
-            [ngClass]="{
-                'k-dropdown-wrap': true,
-                'k-state-disabled': this.disabled
-            }"
-            [attr.id]="focusableId"
-            role="listbox"
-            aria-haspopup="tree"
-            [attr.aria-expanded]="isOpen"
-            [attr.aria-readonly]="readonly"
-            [attr.tabindex]="tabindex"
-            [attr.dir]="direction"
-            (click)="handleClick()"
-            (keydown)="handleKeydown($event)"
-            [kendoEventsOutsideAngular]="{
-                focus: handleFocus,
-                blur: handleBlur
-            }"
-            [scope]="this"
+            [attr.id]="valueLabelId"
+            class="k-input-inner"
         >
-            <span
-                [attr.id]="valueLabelId"
-                class="k-input"
-            >
+            <span class="k-input-value-text">
                 <ng-template *ngIf="valueTemplate"
                     [templateContext]="{
                         templateRef: valueTemplate.templateRef,
@@ -9200,47 +10047,61 @@ DropDownTreeComponent = DropDownTreeComponent_1 = __decorate([
                 </ng-template>
                 <ng-template [ngIf]="!valueTemplate"> {{ text || placeholder }} </ng-template>
             </span>
-            <span
-                *ngIf="!loading && !readonly && clearButton && text?.length && !disabled"
-                class="k-icon k-clear-value k-i-close"
-                [style.visibility]="clearButtonVisiblity"
-                aria-hidden="true"
-                [attr.title]="messageFor('clearTitle')"
-                (click)="clearValue($event)"
-            >
-            </span>
-            <span class="k-select" aria-hidden="true">
-                <span
-                    class="k-icon k-i-arrow-60-down"
-                    [ngClass]="buttonClasses"
-                ></span>
-            </span>
         </span>
+        <span
+            *ngIf="!loading && !readonly && clearButton && text?.length && !disabled"
+            class="k-clear-value"
+            [style.visibility]="clearButtonVisiblity"
+            aria-hidden="true"
+            [attr.title]="messageFor('clearTitle')"
+            (click)="clearValue($event)"
+        >
+            <span class="k-icon k-i-x"></span>
+        </span>
+        <button
+            tabindex="-1"
+            type="button"
+            aria-hidden="true"
+            class="k-input-button k-button k-icon-button"
+            [ngClass]="selectButtonClasses"
+        >
+            <span
+                class="k-button-icon k-icon"
+                [ngClass]="buttonClasses"
+            ></span>
+        </button>
         <ng-template #popupTemplate>
             <span
                 *ngIf="filterable"
                 class="k-list-filter"
             >
-                <input
-                    #filterInput
-                    (input)="handleFilterInputChange($event.target.value)"
-                    [filterInput]="filterable && !touchEnabled"
-                    (keydown.arrowdown)="handleKeydown($event)"
-                    (keydown.alt.arrowup)="handleKeydown($event)"
-                    [(ngModel)]="filter"
-                    class="k-textbox"
-                    role="textbox"
-                    aria-haspopup="true"
-                    aria-expanded="false"
-                    tabindex="0"
-                    aria-disabled="false"
-                    aria-readonly="false"
-                    [kendoEventsOutsideAngular]="{
-                        blur: handleBlur
-                    }"
-                    [scope]="this"
+                <span
+                    class="k-textbox k-input"
+                    [ngClass]="filterInputClasses"
                 >
-                <span class="k-icon k-i-zoom"></span>
+                    <span class="k-input-prefix">
+                        <span class="k-input-icon k-icon k-i-search"></span>
+                    </span>
+                    <input
+                        #filterInput
+                        (input)="handleFilterInputChange($event.target.value)"
+                        [filterInput]="filterable && !touchEnabled"
+                        (keydown.arrowdown)="handleKeydown($event)"
+                        (keydown.alt.arrowup)="handleKeydown($event)"
+                        [(ngModel)]="filter"
+                        class="k-input-inner"
+                        role="textbox"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        [kendoEventsOutsideAngular]="{
+                            blur: handleBlur
+                        }"
+                        [scope]="this"
+                    >
+                </span>
             </span>
             <!--header template-->
             <ng-template
@@ -9252,6 +10113,7 @@ DropDownTreeComponent = DropDownTreeComponent_1 = __decorate([
             <kendo-treeview
                 #treeview
                 *ngIf="data.length !== 0 && !allNodesHidden"
+                [size]="size"
                 [nodes]="data"
                 [style.maxHeight.px]="listHeight"
                 [animate]="false"
@@ -9282,7 +10144,7 @@ DropDownTreeComponent = DropDownTreeComponent_1 = __decorate([
                 }">
             </ng-template>
             <!--no-data template-->
-            <div class="k-nodata" *ngIf="data.length === 0 || allNodesHidden">
+            <div class="k-no-data" *ngIf="data.length === 0 || allNodesHidden">
                 <ng-template [ngIf]="noDataTemplate"
                     [templateContext]="{
                         templateRef: noDataTemplate?.templateRef
@@ -9298,10 +10160,10 @@ DropDownTreeComponent = DropDownTreeComponent_1 = __decorate([
         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])
@@ -9319,16 +10181,18 @@ const isNodeVisible$1 = () => true;
  * Represents the [Kendo UI MultiSelectTree component for Angular]({% slug overview_multiselecttree %}).
  */
 let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTreeComponent {
-    constructor(popupService, renderer, hostElement, navigationService, _zone, localization, cdr, touchEnabled$$1) {
+    constructor(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.
@@ -9491,12 +10355,63 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
         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();
+    }
+    get isDisabled() {
+        return this.disabled;
+    }
+    get isLoading() {
+        return this.loading;
+    }
+    get id() {
+        return this.focusableId;
+    }
+    get hostTabIndex() {
+        return this.tabindex;
+    }
+    get isReadonly() {
+        return this.readonly;
+    }
+    get ariaDescribedBy() {
+        return this.tagListId;
+    }
+    get ariaActiveDescendant() {
+        return this.focusedTagId;
+    }
+    /**
+     * @hidden
+     */
+    handleClick() {
+        this.togglePopup(!this.isOpen);
+    }
+    /**
+     * @hidden
+     */
+    handleKeydown(event) {
+        const deleteTag = this.isWrapperActive && event.keyCode === Keys.Backspace && this.tags.length > 0;
+        if (deleteTag) {
+            this.handleBackspace();
+            return;
+        }
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        const eventData = event;
+        const action = this.navigationService.process({
+            originalEvent: eventData
+        });
+        if (action === NavigationAction.Open) {
+            eventData.preventDefault();
+        }
     }
     set treeview(treeview) {
         this._treeview = treeview;
@@ -9529,6 +10444,67 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
     get tabindex() {
         return this.disabled ? -1 : this._tabindex;
     }
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     *
+     */
+    set size(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;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * Sets the border radius of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     *
+     */
+    set rounded(rounded) {
+        this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        if (rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+        }
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * Sets the fillMode of the component.
+     *
+     * The possible values are:
+     * * `'flat'`
+     * * `'solid'` (default)
+     * * `'outline'`
+     * * `null`
+     *
+     */
+    set fillMode(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;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     /**
      * Configures the popup of the MultiSelectTree.
      *
@@ -9618,7 +10594,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
         return `${this.tagPrefix}-${valueFrom({ dataItem }, this.valueField)}`;
     }
     set isFocused(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;
     }
     get isFocused() {
@@ -9652,7 +10628,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
      * @hidden
      */
     get popupContainerClasses() {
-        const containerClasses = ['k-popup-dropdowntree', 'k-reset', 'k-group', 'k-list-container'];
+        const containerClasses = ['k-popup-dropdowntree'];
         if (this.popupSettings.popupClass) {
             containerClasses.push(this.popupSettings.popupClass);
         }
@@ -9740,13 +10716,14 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
         return this.checkAllInput && document.activeElement === this.checkAllInput.nativeElement;
     }
     ngOnInit() {
-        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(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             this.cdr.markForCheck();
         }));
+        this.setComponentClasses();
     }
     /**
      * @hidden
@@ -9850,7 +10827,11 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
     /**
      * @hidden
      */
-    handleFocus() {
+    handleFocus(event) {
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
         if (!this.isFocused) {
             this.isFocused = true;
             if (hasObservers(this.onFocus)) {
@@ -9860,7 +10841,9 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
             }
             // 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();
             }
         }
@@ -9870,46 +10853,20 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
      */
     handleBlur(e) {
         const 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(() => {
                 this.onBlur.emit();
                 this.onTouchedCallback();
             });
         }
     }
-    /**
-     * @hidden
-     */
-    handleClick() {
-        this.togglePopup(!this.isOpen);
-    }
-    /**
-     * @hidden
-     */
-    handleKeydown(event) {
-        const deleteTag = this.isWrapperActive && event.keyCode === Keys.Backspace && this.tags.length > 0;
-        if (deleteTag) {
-            this.handleBackspace();
-            return;
-        }
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        const eventData = event;
-        const action = this.navigationService.process({
-            originalEvent: eventData
-        });
-        if (action === NavigationAction.Open) {
-            eventData.preventDefault();
-        }
-    }
     /**
      * @hidden
      */
@@ -10044,6 +11001,18 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
         this.filterChange.next(term);
         this.allNodesHidden = this.nodes.every((node, index) => !this.isVisible(node, String(index)));
     }
+    /**
+     * @hidden
+     */
+    get filterInputClasses() {
+        return `${this.size ? getSizeClass('input', this.size) : ''} ${this.fillMode ? 'k-input-' + this.fillMode : ''} ${this.rounded ? getRoundedClass(this.rounded) : ''}`;
+    }
+    /**
+     * @hidden
+     */
+    get checkAllCheckboxClasses() {
+        return `${this.size ? getSizeClass('checkbox', this.size) : ''}`;
+    }
     /**
      * @hidden
      */
@@ -10156,6 +11125,31 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
             .pipe(filter(() => !this.isTreeViewActive))
             .subscribe(this.direction === 'rtl' ? this.handleLeftKey.bind(this) : this.handleRightKey.bind(this)), this.navigationService.home.pipe(filter(() => !this.isOpen)).subscribe(this.handleHome.bind(this)), this.navigationService.end.pipe(filter(() => !this.isOpen)).subscribe(this.handleEnd.bind(this)), this.navigationService.backspace.pipe(filter(() => this.isTagFocused)).subscribe(this.handleBackspace.bind(this)), this.navigationService.delete.pipe(filter(() => this.isTagFocused)).subscribe(this.handleDelete.bind(this)));
     }
+    subscribeFocusEvents() {
+        if (isDocumentAvailable()) {
+            this.handleFocus = this.handleFocus.bind(this);
+            this.handleDocumentBlur = this.handleDocumentBlur.bind(this);
+            this._zone.runOutsideAngular(() => {
+                const useCapture = true;
+                document.addEventListener('focus', this.handleFocus, useCapture);
+                document.addEventListener('blur', this.handleDocumentBlur, useCapture);
+            });
+        }
+    }
+    unSubscribeFocusEvents() {
+        if (isDocumentAvailable()) {
+            const useCapture = true;
+            document.removeEventListener('focus', this.handleFocus, useCapture);
+            document.removeEventListener('blur', this.handleDocumentBlur, useCapture);
+        }
+    }
+    handleDocumentBlur(event) {
+        if (event.target !== this.wrapper.nativeElement) {
+            return;
+        }
+        event.stopImmediatePropagation();
+        this.handleBlur(event);
+    }
     handleTabKey() {
         this.focus();
         if (this.isOpen) {
@@ -10258,6 +11252,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
     }
     unsubscribeEvents() {
         this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.unSubscribeFocusEvents();
     }
     /**
      * Remove the `TreeView` from the tab order, otherwise a focus loop between the page elements will occur
@@ -10304,16 +11299,84 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
             return indices;
         }, []));
     }
+    setComponentClasses() {
+        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));
+        }
+    }
 };
 __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)
@@ -10342,10 +11405,6 @@ __decorate([
     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)
@@ -10368,6 +11427,21 @@ __decorate([
     __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),
@@ -10561,87 +11635,75 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = __decorate([
             checkAllText="Check all"
         >
         </ng-container>
-        <div #wrapper
-            [ngClass]="{
-                'k-multiselect-wrap': true,
-                'k-floatwrap': true,
-                'k-state-disabled': this.disabled
-            }"
-            role="listbox"
-            aria-haspopup="tree"
-            [attr.aria-describedby]="tagListId"
-            [attr.aria-readonly]="readonly"
-            [attr.aria-activedescendant]="focusedTagId"
-            [attr.tabindex]="tabindex"
-            [attr.id]="focusableId"
-            [attr.dir]="direction"
-            (click)="handleClick()"
-            (keydown)="handleKeydown($event)"
-            [kendoEventsOutsideAngular]="{
-                focus: handleFocus,
-                blur: handleBlur
-            }"
-            [scope]="this"
+        <kendo-taglist
+            [size]="size"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [id]="tagListId"
+            [tags]="tags"
+            [focused]="focusedTagIndex"
+            [textField]="textField"
+            [valueField]="valueField"
+            [valueDepth]="valueDepth"
+            [disabled]="disabled"
+            [tagPrefix]="tagPrefix"
+            [template]="tagTemplate"
+            [groupTemplate]="groupTagTemplate"
+            [disabledIndices]="disabledIndices"
+            (removeTag)="handleRemoveTag($event)"
         >
-            <kendo-taglist
-                [id]="tagListId"
-                [tags]="tags"
-                [focused]="focusedTagIndex"
-                [textField]="textField"
-                [valueField]="valueField"
-                [valueDepth]="valueDepth"
-                [disabled]="disabled"
-                [tagPrefix]="tagPrefix"
-                [template]="tagTemplate"
-                [groupTemplate]="groupTagTemplate"
-                [disabledIndices]="disabledIndices"
-                (removeTag)="handleRemoveTag($event)"
-            >
-            </kendo-taglist>
             <span *ngIf="!tags || !tags.length"
-                class="k-input k-readonly"
-            >
-                {{ placeholder }}
-            </span>
-            <span
-                *ngIf="!disabled && !loading && !readonly && clearButton && tags?.length"
-                class="k-icon k-clear-value k-i-close"
-                [attr.title]="messageFor('clearTitle')"
-                role="button"
-                tabindex="-1"
-                (click)="clearAll($event)"
+                class="k-input-inner k-readonly"
             >
+                <span class="k-input-value-text">{{ placeholder }}</span>
             </span>
-            <span
-                *ngIf="loading"
-                class="k-icon k-i-loading"
-            >
-            </span>
-        </div>
+        </kendo-taglist>
+        <span
+            *ngIf="!disabled && !loading && !readonly && clearButton && tags?.length"
+            class="k-clear-value"
+            [attr.title]="messageFor('clearTitle')"
+            role="button"
+            tabindex="-1"
+            (click)="clearAll($event)"
+        >
+            <span class="k-icon k-i-x"></span>
+        </span>
+        <span
+            *ngIf="loading"
+            class="k-icon k-i-loading"
+        >
+        </span>
         <ng-template #popupTemplate>
             <span
                 *ngIf="filterable"
                 class="k-list-filter"
             >
-                <input
-                    #filterInput
-                    (input)="handleFilterInputChange($event.target.value)"
-                    [filterInput]="filterable && !touchEnabled"
-                    (keydown)="handleKeydown($event)"
-                    [(ngModel)]="filter"
-                    class="k-textbox"
-                    role="textbox"
-                    aria-haspopup="true"
-                    aria-expanded="false"
-                    tabindex="0"
-                    aria-disabled="false"
-                    aria-readonly="false"
-                    [kendoEventsOutsideAngular]="{
-                        blur: handleBlur
-                    }"
-                    [scope]="this"
+                <span
+                    class="k-textbox k-input"
+                    [ngClass]="filterInputClasses"
                 >
-                <span class="k-icon k-i-zoom"></span>
+                    <span class="k-input-prefix">
+                        <span class="k-input-icon k-icon k-i-search"></span>
+                    </span>
+                    <input
+                        #filterInput
+                        (input)="handleFilterInputChange($event.target.value)"
+                        [filterInput]="filterable && !touchEnabled"
+                        (keydown)="handleKeydown($event)"
+                        [(ngModel)]="filter"
+                        class="k-input-inner"
+                        role="textbox"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        tabindex="0"
+                        aria-disabled="false"
+                        aria-readonly="false"
+                        [kendoEventsOutsideAngular]="{
+                            blur: handleBlur
+                        }"
+                        [scope]="this"
+                    >
+                </span>
             </span>
             <!--header template-->
             <ng-template
@@ -10656,6 +11718,7 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = __decorate([
                     [checkAll]="!filterable && !touchEnabled"
                     type="checkbox"
                     class="k-checkbox"
+                    [ngClass]="checkAllCheckboxClasses"
                     role="checkbox"
                     tabindex="0"
                     aria-disabled="false"
@@ -10681,6 +11744,7 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = __decorate([
             </div>
             <kendo-treeview
                 #treeview
+                [size]="size"
                 [nodes]="data"
                 [style.maxHeight.px]="listHeight"
                 [animate]="false"
@@ -10716,7 +11780,7 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = __decorate([
                 }">
             </ng-template>
             <!--no-data template-->
-            <div class="k-nodata" *ngIf="data?.length === 0 || allNodesHidden">
+            <div class="k-no-data" *ngIf="data?.length === 0 || allNodesHidden">
                 <ng-template [ngIf]="noDataTemplate"
                     [templateContext]="{
                         templateRef: noDataTemplate?.templateRef
@@ -10731,9 +11795,9 @@ MultiSelectTreeComponent = MultiSelectTreeComponent_1 = __decorate([
     `
     }),
     __param(7, Optional()), __param(7, Inject(TOUCH_ENABLED)),
-    __metadata("design:paramtypes", [PopupService,
+    __metadata("design:paramtypes", [ElementRef,
+        PopupService,
         Renderer2,
-        ElementRef,
         NavigationService,
         NgZone,
         LocalizationService,
@@ -10865,15 +11929,31 @@ DropDownTreesExpandDirective = __decorate([
  * @hidden
  */
 let TagListComponent = class TagListComponent {
-    /**
-     * @hidden
-     */
-    constructor() {
+    constructor(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';
+    }
+    set size(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;
+    }
+    get size() {
+        return this._size;
+    }
+    get hostId() {
+        return this.id;
     }
     tagProp(tag, prop, index) {
         const propField = prop && this.getPropField(tag, prop, index);
@@ -10964,6 +12044,19 @@ __decorate([
     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)
@@ -10972,56 +12065,82 @@ __decorate([
     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: `
-        <ul [attr.id]="id" class="k-reset">
-            <li
-                *ngFor="let tag of tags; let index = index;"
-                role="option"
-                [attr.id]="itemId(tag, index)"
-                [attr.aria-hidden]="tagAriaHidden(index)"
-                aria-selected="true"
-                [attr.aria-setsize]="tags?.length"
-                class="k-button"
-                [ngClass]="{
-                    'k-state-focused': index === focused,
-                    'k-state-disabled': isTagDisabled(tag, index)
-                }"
-            >
+        <div
+            *ngFor="let tag of tags; let index = index;"
+            role="option"
+            [attr.id]="itemId(tag, index)"
+            [attr.aria-hidden]="tagAriaHidden(index)"
+            aria-selected="true"
+            [attr.aria-setsize]="tags?.length"
+            class="k-chip"
+            [ngClass]="{
+                'k-focus': index === focused,
+                'k-disabled': isTagDisabled(tag, index),
+                'k-chip-sm': size === 'small',
+                'k-chip-md': size === 'medium',
+                'k-chip-lg': size === 'large',
+                'k-rounded-sm': rounded === 'small',
+                'k-rounded-md': rounded === 'medium',
+                'k-rounded-lg': rounded === 'large',
+                'k-rounded-full': rounded === 'full',
+                'k-chip-solid k-chip-solid-base': fillMode === 'solid',
+                'k-chip-flat k-chip-flat-base': fillMode === 'flat',
+                'k-chip-outline k-chip-outline-base': fillMode === 'outline'
+            }"
+        >
+            <span class="k-chip-content">
                 <ng-template *ngIf="isGroupTag(tag); then groupTag else singleTag"></ng-template>
-                    <ng-template #groupTag>
-                        <span>
-                            <ng-template *ngIf="groupTemplate"
-                                [templateContext]="{
-                                templateRef: groupTemplate.templateRef,
-                                $implicit: tag
-                            }">
-                            </ng-template>
-                            <ng-template [ngIf]="!groupTemplate">{{ tag.length }} {{ tag.length === 1 ? 'item' : 'items' }} selected</ng-template>
-                        </span>
-                    </ng-template>
-                    <ng-template #singleTag>
-                        <span>
-                            <ng-template *ngIf="template"
-                                [templateContext]="{
-                                templateRef: template.templateRef,
-                                $implicit: tag
-                            }">
-                            </ng-template>
-                            <ng-template [ngIf]="!template">{{ tagProp(tag, textField, index) }}</ng-template>
-                        </span>
-                    </ng-template>
+                <ng-template #groupTag>
+                    <span class="k-chip-label k-text-ellipsis">
+                        <ng-template *ngIf="groupTemplate"
+                            [templateContext]="{
+                            templateRef: groupTemplate.templateRef,
+                            $implicit: tag
+                        }">
+                        </ng-template>
+                        <ng-template [ngIf]="!groupTemplate">{{ tag.length }} {{ tag.length === 1 ? 'item' : 'items' }} selected</ng-template>
+                    </span>
+                </ng-template>
+                <ng-template #singleTag>
+                    <span class="k-chip-label k-text-ellipsis">
+                        <ng-template *ngIf="template"
+                            [templateContext]="{
+                            templateRef: template.templateRef,
+                            $implicit: tag
+                        }">
+                        </ng-template>
+                        <ng-template [ngIf]="!template">{{ tagProp(tag, textField, index) }}</ng-template>
+                    </span>
+                </ng-template>
+            </span>
 
-                <span aria-label="delete" [attr.aria-hidden]="index !== focused" class="k-select">
-                    <span class="k-icon k-i-close" (mousedown)="deleteTag($event, tag, index)">
+            <span class="k-chip-actions">
+                <span aria-label="delete" [attr.aria-hidden]="index !== focused" class="k-chip-action k-chip-remove-action">
+                    <span class="k-icon k-i-x-circle" (mousedown)="deleteTag($event, tag, index)">
                     </span>
                 </span>
-            </li>
-        </ul>
+            </span>
+        </div>
+        <ng-content></ng-content>
   `
-    })
+    }),
+    __metadata("design:paramtypes", [Renderer2,
+        ElementRef])
 ], TagListComponent);
 
 /**
@@ -11345,12 +12464,12 @@ __decorate([
     __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);