@progress/kendo-angular-dropdowns 12.0.0-develop.7 → 12.0.0-develop.8

package/fesm2020/progress-kendo-angular-dropdowns.mjs

@@ -4,22 +4,28 @@
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, Output, ViewChild, HostBinding, Directive, Injectable, HostListener, ViewChildren, InjectionToken, forwardRef, isDevMode, ViewContainerRef, Optional, Inject, ContentChild, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import * as i10 from '@progress/kendo-angular-common';
+import * as i9 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, isSafari, Keys, isChanged, hasObservers, KendoInput, anyChanged, guid as guid$1, ResizeSensorModule, EventsModule } from '@progress/kendo-angular-common';
-import * as i13 from '@angular/forms';
+import * as i14 from '@angular/forms';
 import { NgControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { validatePackage } from '@progress/kendo-licensing';
 import { getter as getter$1, pointers, touchEnabled } from '@progress/kendo-common';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { Subscription, merge, fromEvent, Subject, of, interval } from 'rxjs';
-import * as i2 from '@progress/kendo-angular-popup';
+import * as i2$1 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 export { PopupComponent } from '@progress/kendo-angular-popup';
 import { map, switchMap, take, auditTime, tap, filter, partition, throttleTime, catchError, skipWhile, concatMap, takeUntil, debounceTime } from 'rxjs/operators';
-import * as i12 from '@angular/common';
+import * as i13 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { xIcon, caretAltDownIcon, searchIcon, xCircleIcon, plusIcon } from '@progress/kendo-svg-icons';
+import * as i2 from '@progress/kendo-angular-navigation';
+import { ActionSheetComponent, ActionSheetModule } from '@progress/kendo-angular-navigation';
+import * as i4 from '@progress/kendo-angular-inputs';
+import { TextBoxModule } from '@progress/kendo-angular-inputs';
+import * as i3 from '@progress/kendo-angular-buttons';
+import { ButtonModule } from '@progress/kendo-angular-buttons';
 import * as i8 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i1$1 from '@progress/kendo-angular-treeview';
@@ -32,8 +38,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1681306023,
-    version: '12.0.0-develop.7',
+    publishDate: 1681813981,
+    version: '12.0.0-develop.8',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -389,13 +395,79 @@ const getTextField = (field, level) => {
 /**
  * @hidden
  */
-const getSearchableItems = (treeViewId, popupElement) => {
+const getSearchableItems = (treeViewId, element) => {
     const nodeSeletor = `kendo-treeview[id='${treeViewId}'] li.k-treeview-item`;
-    const liElements = Array.from(popupElement.querySelectorAll(nodeSeletor));
+    const liElements = Array.from(element.querySelectorAll(nodeSeletor));
     return liElements.map((liElement) => {
         return { text: liElement.innerText, index: liElement.getAttribute('data-treeindex') };
     });
 };
+/**
+ * @hidden
+ */
+const windowSize = () => {
+    if (typeof window !== 'undefined') {
+        if (window.innerWidth > 768) {
+            return 'large';
+        }
+        else if (window.innerWidth > 500) {
+            return 'medium';
+        }
+        else {
+            return 'small';
+        }
+    }
+};
+/**
+ * @hidden
+ */
+const isTruthy = (value) => !!value;
+/**
+ * @hidden
+ */
+const updateActionSheetAdaptiveAppearance = (actionSheet, windowSize, renderer) => {
+    const element = actionSheet['element'].nativeElement.querySelector('.k-actionsheet');
+    const animationContainer = actionSheet['element'].nativeElement.querySelector('.k-child-animation-container');
+    if (windowSize === 'medium') {
+        renderer.removeClass(element, 'k-actionsheet-fullscreen');
+        renderer.addClass(element, 'k-actionsheet-bottom');
+        renderer.addClass(element, 'k-adaptive-actionsheet');
+        renderer.removeStyle(animationContainer, 'top');
+        renderer.removeStyle(animationContainer, 'height');
+        renderer.setStyle(animationContainer, 'bottom', '0px');
+    }
+    else if (windowSize === 'small') {
+        renderer.removeClass(element, 'k-actionsheet-bottom');
+        renderer.addClass(element, 'k-actionsheet-fullscreen');
+        renderer.addClass(element, 'k-adaptive-actionsheet');
+        renderer.setStyle(animationContainer, 'bottom', '0px');
+        renderer.setStyle(animationContainer, 'height', '100%');
+    }
+};
+/**
+ * @hidden
+ */
+const setListBoxAriaLabelLebBy = (optionsList, element, renderer) => {
+    const listBox = optionsList.wrapper.nativeElement.querySelector('kendo-list ul');
+    const ariaLabel = element.nativeElement.getAttribute('aria-labelledby');
+    if (ariaLabel) {
+        renderer.setAttribute(listBox, 'aria-labelledby', ariaLabel);
+    }
+};
+/**
+ * @hidden
+ */
+const setActionSheetTitle = (element, actionSheetTitle) => {
+    const ariaLabel = element.nativeElement.getAttribute('aria-labelledby');
+    if (!actionSheetTitle && ariaLabel) {
+        return document.getElementById(ariaLabel).innerText;
+    }
+    return actionSheetTitle;
+};
+/**
+ * @hidden
+ */
+const animationDuration = 300;
 
 /**
  * @hidden
@@ -601,7 +673,7 @@ SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             [attr.aria-busy]="isLoading"
             [attr.aria-invalid]="formControl?.invalid"
         />
-   `, isInline: true, directives: [{ type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+   `, isInline: true, directives: [{ type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -1655,8 +1727,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class SelectableDirective {
     constructor(selectionService) {
         this.checkboxes = { enabled: false };
-        // @HostBinding('attr.offset-index')
-        // @Input() public offsetIndex: number;
         this.multipleSelection = false;
         this.selectionService = selectionService;
     }
@@ -1686,7 +1756,7 @@ class SelectableDirective {
     }
 }
 SelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SelectableDirective, deps: [{ token: SelectionService }], target: i0.ɵɵFactoryTarget.Directive });
-SelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: { index: "index", checkboxes: "checkboxes", height: "height", multipleSelection: "multipleSelection" }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.index": "this.index", "style.height.px": "this.height", "style.minHeight.px": "this.height", "class.k-focus": "this.focusedClassName", "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
+SelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: { index: "index", checkboxes: "checkboxes", height: "height", isMultiselect: "isMultiselect", multipleSelection: "multipleSelection" }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.index": "this.index", "style.height.px": "this.height", "style.minHeight.px": "this.height", "class.k-focus": "this.focusedClassName", "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SelectableDirective, decorators: [{
             type: Directive,
             args: [{
@@ -1707,6 +1777,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['style.minHeight.px']
             }, {
                 type: Input
+            }], isMultiselect: [{
+                type: Input
             }], multipleSelection: [{
                 type: Input
             }], focusedClassName: [{
@@ -2073,13 +2145,16 @@ class ListComponent {
                 this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('list', this.size));
             }
         }
+        if (this.type === 'dropdowngrid') {
+            this.renderer.setStyle(this.wrapper.nativeElement, 'overflow-y', 'scroll');
+        }
         if (isPresent(this.virtual)) {
             this.renderer.addClass(this.wrapper.nativeElement, this.listVirtualClass);
         }
     }
 }
 ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListComponent, deps: [{ token: DataService }, { token: i0.ElementRef }, { token: SelectionService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListComponent, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListComponent, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div *ngIf="dataService.grouped"
         [class]="listGroupStickyHeaderClass"
         [ngStyle]="{
@@ -2146,6 +2221,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
          </ng-template>
          <ng-template *ngIf="dataService.grouped" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
             <li
+                #li
                 *ngIf="dataItem.header && dataItem.index > 0"
                 role="group"
                 [class]="listGroupItemClass"
@@ -2168,6 +2244,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     </span>
             </li>
             <li
+                #li
                 *ngIf="!dataItem.header"
                 role="option"
                 kendoDropDownsSelectable
@@ -2205,7 +2282,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         </div>
     </div>
     </div>
-  `, isInline: true, components: [{ type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ListItemDirective, selector: "\"li[role=option], li[role=group]\"" }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+  `, isInline: true, components: [{ type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ListItemDirective, selector: "\"li[role=option], li[role=group]\"" }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{
@@ -2277,6 +2354,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
          </ng-template>
          <ng-template *ngIf="dataService.grouped" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
             <li
+                #li
                 *ngIf="dataItem.header && dataItem.index > 0"
                 role="group"
                 [class]="listGroupItemClass"
@@ -2299,6 +2377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     </span>
             </li>
             <li
+                #li
                 *ngIf="!dataItem.header"
                 role="option"
                 kendoDropDownsSelectable
@@ -2372,6 +2451,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], isMultiselect: [{
                 type: Input
+            }], isActionSheetExpanded: [{
+                type: Input
             }], data: [{
                 type: Input
             }], size: [{
@@ -2424,13 +2505,240 @@ const normalizeVirtualizationSettings = (settings, defaultOverrides) => {
  */
 const TOUCH_ENABLED = new InjectionToken('dropdowns-touch-enabled');
 
+/**
+ * @hidden
+ */
+class ResponsiveRendererComponent {
+    constructor(localization) {
+        this.localization = localization;
+        this.closePopup = new EventEmitter();
+        this.textInputChange = new EventEmitter();
+        this.navigate = new EventEmitter();
+        this.onExpand = new EventEmitter();
+        this.onCollapse = new EventEmitter();
+        this.onApply = new EventEmitter();
+        this.onCancel = new EventEmitter();
+        this.searchBarValue = '';
+        this.animationDuration = animationDuration;
+        this.xIcon = xIcon;
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    onValueChange(value) {
+        this.searchBarValue = value;
+        this.textInputChange.emit(value);
+    }
+}
+ResponsiveRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ResponsiveRendererComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ResponsiveRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: { title: "title", showActionButtons: "showActionButtons", subtitle: "subtitle", size: "size", showTextInput: "showTextInput", sharedPopupActionSheetTemplate: "sharedPopupActionSheetTemplate", isActionSheetExpanded: "isActionSheetExpanded", text: "text", placeholder: "placeholder" }, outputs: { closePopup: "closePopup", textInputChange: "textInputChange", navigate: "navigate", onExpand: "onExpand", onCollapse: "onCollapse", onApply: "onApply", onCancel: "onCancel" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }], ngImport: i0, template: `
+        <kendo-actionsheet
+            #actionSheet
+            [animation]="{ duration: animationDuration }"
+            [expanded]="isActionSheetExpanded"
+            (overlayClick)="closePopup.emit()"
+            (keydown)="navigate.emit($event)"
+            (expand)="onExpand.emit()"
+            (collapse)="onCollapse.emit()"
+        >
+            <ng-template kendoActionSheetTemplate>
+                <div class="k-text-center k-actionsheet-titlebar">
+                    <div class="k-actionsheet-titlebar-group k-hbox">
+                        <div class="k-actionsheet-title">
+                            <div class="k-text-center">{{ title }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
+                        </div>
+                        <div class="k-actionsheet-actions">
+                            <button
+                                kendoButton
+                                icon="x"
+                                [attr.title]="messageFor('clearTitle')"
+                                [svgIcon]="xIcon"
+                                fillMode="flat"
+                                [size]="size"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
+                                innerCssClass="k-button-icon"
+                                (click)="closePopup.emit()"
+                            ></button>
+                        </div>
+                    </div>
+                    <div class="k-actionsheet-titlebar-group k-actionsheet-filter">
+                        <kendo-textbox
+                            *ngIf="showTextInput"
+                            #actionSheetSearchBar
+                            [value]="searchBarValue"
+                            [size]="size"
+                            placeholder="Filter"
+                            class="k-searchbox"
+                            autocomplete="off"
+                            (valueChange)="onValueChange($event)"
+                        >
+                            <ng-template kendoTextBoxPrefixTemplate>
+                                <kendo-icon name="search"></kendo-icon>
+                            </ng-template>
+                        </kendo-textbox>
+                    </div>
+                </div>
+                <div class="k-actionsheet-content !k-overflow-hidden">
+                    <div class="k-list-container">
+                        <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+                    </div>
+                </div>
+
+                <div *ngIf="showActionButtons" class="k-actionsheet-footer k-actions k-actions-stretched">
+                    <button kendoButton 
+                        tabindex="0"
+                        aria-disabled="false"
+                        [size]="size"
+                        themeColor="base"
+                        (click)="onCancel.emit()"
+                        (keydown.enter)="$event.stopImmediatePropagation()">
+                        {{messageFor('cancelButton')}}
+                    </button>
+                    <button kendoButton
+                        tabindex="0"
+                        aria-disabled="false"
+                        [size]="size"
+                        themeColor="primary"
+                        (click)="onApply.emit()"
+                        (keydown.enter)="$event.stopImmediatePropagation()">
+                        {{messageFor('applyButton')}}
+                    </button>
+                </div>
+            </ng-template>
+        </kendo-actionsheet>
+    `, isInline: true, components: [{ type: i2.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i4.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i8.IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }], directives: [{ type: i2.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]" }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ResponsiveRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'responsive-renderer',
+                    template: `
+        <kendo-actionsheet
+            #actionSheet
+            [animation]="{ duration: animationDuration }"
+            [expanded]="isActionSheetExpanded"
+            (overlayClick)="closePopup.emit()"
+            (keydown)="navigate.emit($event)"
+            (expand)="onExpand.emit()"
+            (collapse)="onCollapse.emit()"
+        >
+            <ng-template kendoActionSheetTemplate>
+                <div class="k-text-center k-actionsheet-titlebar">
+                    <div class="k-actionsheet-titlebar-group k-hbox">
+                        <div class="k-actionsheet-title">
+                            <div class="k-text-center">{{ title }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
+                        </div>
+                        <div class="k-actionsheet-actions">
+                            <button
+                                kendoButton
+                                icon="x"
+                                [attr.title]="messageFor('clearTitle')"
+                                [svgIcon]="xIcon"
+                                fillMode="flat"
+                                [size]="size"
+                                [tabIndex]="-1"
+                                aria-hidden="true"
+                                innerCssClass="k-button-icon"
+                                (click)="closePopup.emit()"
+                            ></button>
+                        </div>
+                    </div>
+                    <div class="k-actionsheet-titlebar-group k-actionsheet-filter">
+                        <kendo-textbox
+                            *ngIf="showTextInput"
+                            #actionSheetSearchBar
+                            [value]="searchBarValue"
+                            [size]="size"
+                            placeholder="Filter"
+                            class="k-searchbox"
+                            autocomplete="off"
+                            (valueChange)="onValueChange($event)"
+                        >
+                            <ng-template kendoTextBoxPrefixTemplate>
+                                <kendo-icon name="search"></kendo-icon>
+                            </ng-template>
+                        </kendo-textbox>
+                    </div>
+                </div>
+                <div class="k-actionsheet-content !k-overflow-hidden">
+                    <div class="k-list-container">
+                        <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+                    </div>
+                </div>
+
+                <div *ngIf="showActionButtons" class="k-actionsheet-footer k-actions k-actions-stretched">
+                    <button kendoButton 
+                        tabindex="0"
+                        aria-disabled="false"
+                        [size]="size"
+                        themeColor="base"
+                        (click)="onCancel.emit()"
+                        (keydown.enter)="$event.stopImmediatePropagation()">
+                        {{messageFor('cancelButton')}}
+                    </button>
+                    <button kendoButton
+                        tabindex="0"
+                        aria-disabled="false"
+                        [size]="size"
+                        themeColor="primary"
+                        (click)="onApply.emit()"
+                        (keydown.enter)="$event.stopImmediatePropagation()">
+                        {{messageFor('applyButton')}}
+                    </button>
+                </div>
+            </ng-template>
+        </kendo-actionsheet>
+    `,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { title: [{
+                type: Input
+            }], showActionButtons: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], showTextInput: [{
+                type: Input
+            }], sharedPopupActionSheetTemplate: [{
+                type: Input
+            }], isActionSheetExpanded: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], closePopup: [{
+                type: Output
+            }], textInputChange: [{
+                type: Output
+            }], navigate: [{
+                type: Output
+            }], onExpand: [{
+                type: Output
+            }], onCollapse: [{
+                type: Output
+            }], onApply: [{
+                type: Output
+            }], onCancel: [{
+                type: Output
+            }], actionSheet: [{
+                type: ViewChild,
+                args: [ActionSheetComponent]
+            }], actionSheetSearchBar: [{
+                type: ViewChild,
+                args: ['actionSheetSearchBar']
+            }] } });
+
 /**
  * @hidden
  */
 class Messages extends ComponentMessages {
 }
 Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, inputs: { noDataText: "noDataText", clearTitle: "clearTitle", checkAllText: "checkAllText", selectButtonText: "selectButtonText", filterInputLabel: "filterInputLabel", popupLabel: "popupLabel" }, usesInheritance: true, ngImport: i0 });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, inputs: { noDataText: "noDataText", clearTitle: "clearTitle", checkAllText: "checkAllText", selectButtonText: "selectButtonText", filterInputLabel: "filterInputLabel", popupLabel: "popupLabel", applyButton: "applyButton", cancelButton: "cancelButton" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive
         }], propDecorators: { noDataText: [{
@@ -2445,6 +2753,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], popupLabel: [{
                 type: Input
+            }], applyButton: [{
+                type: Input
+            }], cancelButton: [{
+                type: Input
             }] } });
 
 /**
@@ -2529,6 +2841,10 @@ class AutoCompleteComponent {
         this.renderer = renderer;
         this.hostElement = hostElement;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.animationDuration = animationDuration;
         /**
          * @hidden
          */
@@ -2547,12 +2863,15 @@ class AutoCompleteComponent {
          */
         this.placeholder = "";
         /**
-         * Sets the height of the suggestions list. By default, `listHeight` is 200px.
-         *
-         * > The `listHeight` property affects only the list of suggestions and not the whole popup container.
-         * > To set the height of the popup container, use `popupSettings.height`.
+         * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
          */
-        this.listHeight = 200;
+        this.adaptiveMode = 'none';
+        /**
+         * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+         * By default the ActionSheet title uses the text provided for the label of the AutoComplete.
+         */
+        this.title = '';
+        this._listHeight = 200;
         /**
          * @hidden
          *
@@ -2621,12 +2940,17 @@ class AutoCompleteComponent {
         this.widgetClasses = true;
         this.listBoxId = `k-${guid()}`;
         this.optionPrefix = `k-${guid()}`;
+        /**
+         * @hidden
+         */
+        this.windowSize = 'large';
         this.onChangeCallback = noop;
         this.onTouchedCallback = noop;
         this.popupMouseDownHandler = (event) => event.preventDefault();
         this._popupSettings = { animate: true };
         this._open = false;
         this._value = "";
+        this.subs = new Subscription();
         this.valueChangeSubject = new Subject();
         this._isFocused = false;
         this._size = 'medium';
@@ -2640,6 +2964,18 @@ class AutoCompleteComponent {
         this.subscribeTouchEvents();
         this.selectionService.resetSelection([-1]);
     }
+    /**
+     * @hidden
+     */
+    get actionSheet() {
+        return this.responsiveRendererComponent?.actionSheet;
+    }
+    /**
+     * @hidden
+     */
+    get actionSheetSearchBar() {
+        return this.responsiveRendererComponent?.actionSheetSearchBar;
+    }
     get width() {
         let wrapperOffsetWidth = 0;
         if (isDocumentAvailable()) {
@@ -2688,8 +3024,8 @@ class AutoCompleteComponent {
         return this.isOpen ? this.listBoxId : undefined;
     }
     /**
-     * Toggles the visibility of the popup.
-     * If you use the `toggle` method to open or close the popup, the `open` and `close` events will not be fired.
+     * Toggles the visibility of the popup or actionSheet.
+     * If you use the `toggle` method to open or close the popup or actionSheet, the `open` and `close` events will not be fired.
      *
      * @param open - The state of the popup.
      */
@@ -2700,10 +3036,19 @@ class AutoCompleteComponent {
         });
     }
     /**
-     * Returns the current open state of the popup.
+     * Returns the current open state. Returns `true` if the popup or actionSheet is open.
      */
     get isOpen() {
-        return this._open;
+        return isTruthy(this._open || this.isActionSheetExpanded);
+    }
+    /**
+     * @hidden
+     */
+    handleClick() {
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.togglePopup(true);
+        }
     }
     /**
      * @hidden
@@ -2766,6 +3111,22 @@ class AutoCompleteComponent {
     get value() {
         return this._value || NO_VALUE;
     }
+    /**
+     * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+     * By default the ActionSheet subtitle uses the text provided for the `placeholder` of the AutoComplete.
+    */
+    set subtitle(_subtitle) {
+        this._subtitle = _subtitle;
+    }
+    get subtitle() {
+        return this._subtitle || this.placeholder;
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
+    }
     /**
      * Configures the popup of the AutoComplete.
      *
@@ -2782,6 +3143,24 @@ class AutoCompleteComponent {
     get popupSettings() {
         return this._popupSettings;
     }
+    /**
+     * Sets the height of the options list in the popup. By default, `listHeight` is 200px.
+     *
+     * > The `listHeight` property affects only the list of options and not the whole popup container.
+     * > To set the height of the popup container, use `popupSettings.height`.
+     *
+     * > When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
+     */
+    set listHeight(_listHeight) {
+        this._listHeight = _listHeight;
+    }
+    ;
+    get listHeight() {
+        if (this.isAdaptive) {
+            return;
+        }
+        return this._listHeight;
+    }
     /**
      * Defines a Boolean function that is executed for each data item in the component
      * ([see examples]({% slug disableditems_autocomplete %})).
@@ -2891,21 +3270,39 @@ class AutoCompleteComponent {
     get dir() {
         return this.direction;
     }
+    /**
+     * @hidden
+     */
+    get isActionSheetExpanded() {
+        return this.actionSheet?.expanded;
+    }
+    ;
+    /**
+     * @hidden
+     */
+    get isAdaptive() {
+        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
+    }
     ngOnInit() {
         this.renderer.removeAttribute(this.wrapper, "tabindex");
-        this.localizationChangeSubscription = this.localization
+        this.subs.add(this.localization
             .changes
             .subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             this.cdr.detectChanges();
-        });
+        }));
         this.setComponentClasses();
     }
+    ngAfterViewInit() {
+        this.windowSize = windowSize();
+        this.cdr.detectChanges();
+        this.renderer.setAttribute(this.actionSheet?.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
+    }
     ngOnDestroy() {
         this.destroyPopup();
-        this.unsubscribeEvents();
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
+        this.subs.unsubscribe();
+        if (this.touchstartDisposeHandler) {
+            this.touchstartDisposeHandler();
         }
     }
     ngOnChanges(changes) {
@@ -2929,6 +3326,12 @@ class AutoCompleteComponent {
     messageFor(key) {
         return this.localization.get(key);
     }
+    /**
+     * @hidden
+     */
+    onAdaptiveTextBoxChange(text) {
+        this.search(text);
+    }
     /**
      * @hidden
      */
@@ -2998,7 +3401,14 @@ class AutoCompleteComponent {
      * @hidden
      */
     onResize() {
-        if (this._open) {
+        if (this.isAdaptiveModeEnabled && this.windowSize !== windowSize()) {
+            if (this.isOpen) {
+                this.togglePopup(false);
+            }
+            this.windowSize = windowSize();
+            this.cdr.detectChanges();
+        }
+        if (this._open && !this.isActionSheetExpanded) {
             const popupWrapper = this.popupRef.popupElement;
             const { min, max } = this.width;
             popupWrapper.style.minWidth = min;
@@ -3018,13 +3428,7 @@ class AutoCompleteComponent {
         }
     }
     search(text, startFrom = 0) {
-        let index;
-        if (text.length && this.dataService.itemsCount) {
-            index = this.dataService.findIndex(this.findIndexPredicate(text), startFrom);
-        }
-        else {
-            index = -1;
-        }
+        const index = this.findIndex(text, startFrom);
         if (this.disabledItemsService.isIndexDisabled(index)) {
             if (index + 1 < this.dataService.itemsCount) {
                 this.search(text, index + 1);
@@ -3072,6 +3476,10 @@ class AutoCompleteComponent {
             ((action === NavigationAction.Enter && this.isOpen) || action !== NavigationAction.Enter)) {
             event.preventDefault();
         }
+        if (action === NavigationAction.Tab && this.isActionSheetExpanded) {
+            event.stopImmediatePropagation();
+            this.togglePopup(false);
+        }
     }
     handleEnter(event) {
         const focused = this.selectionService.focused;
@@ -3092,6 +3500,9 @@ class AutoCompleteComponent {
                 value = this.searchbar.value;
             }
         }
+        if (this.isActionSheetExpanded && focused >= 0) {
+            this.togglePopup(false);
+        }
         this.change(value);
     }
     handleEscape() {
@@ -3122,6 +3533,17 @@ class AutoCompleteComponent {
             this.search(text);
         }
     }
+    /**
+     * @hidden
+     */
+    onFilterChange(text) {
+        if (this.filterable) {
+            this.filterChange.emit(text);
+        }
+        else if (this.highlightFirst) {
+            this.search(text);
+        }
+    }
     /**
      * @hidden
      */
@@ -3137,37 +3559,39 @@ class AutoCompleteComponent {
      * @hidden
      */
     handleBlur() {
-        const focused = this.filterable ? this.selectionService.focused : -1;
-        this.searchbar.input.nativeElement.scrollLeft = 0; // Firefox doesn't auto-scroll to the left on blur like other browsers
-        let dataItem;
-        let text;
-        if (focused !== -1) {
-            dataItem = this.dataService.itemAt(focused);
-            text = getter(dataItem, this.valueField) || "";
-        }
-        else {
-            text = this.searchbar.value;
-        }
-        const exactMatch = text === this.searchbar.value;
-        const insensitiveMatch = text.toLowerCase() === this.searchbar.value.toLowerCase();
-        if (!exactMatch && insensitiveMatch) {
-            this.selectionService.resetSelection([]);
-        }
-        this.isFocused = false;
-        const valueHasChanged = this.value !== this.text;
-        const runInZone = hasObservers(this.onBlur) || hasObservers(this.close) || isUntouched(this.wrapper) || valueHasChanged;
-        if (runInZone) {
-            this._zone.run(() => {
-                if (valueHasChanged) {
-                    this.change(this.searchbar.value);
-                }
-                this.onBlur.emit();
-                this.onTouchedCallback();
+        if (!this.isActionSheetExpanded) {
+            const focused = this.filterable ? this.selectionService.focused : -1;
+            this.searchbar.input.nativeElement.scrollLeft = 0; // Firefox doesn't auto-scroll to the left on blur like other browsers
+            let dataItem;
+            let text;
+            if (focused !== -1) {
+                dataItem = this.dataService.itemAt(focused);
+                text = getter(dataItem, this.valueField) || "";
+            }
+            else {
+                text = this.searchbar.value;
+            }
+            const exactMatch = text === this.searchbar.value;
+            const insensitiveMatch = text.toLowerCase() === this.searchbar.value.toLowerCase();
+            if (!exactMatch && insensitiveMatch) {
+                this.selectionService.resetSelection([]);
+            }
+            this.isFocused = false;
+            const valueHasChanged = this.value !== this.text;
+            const runInZone = hasObservers(this.onBlur) || hasObservers(this.close) || isUntouched(this.wrapper) || valueHasChanged;
+            if (runInZone) {
+                this._zone.run(() => {
+                    if (valueHasChanged) {
+                        this.change(this.searchbar.value);
+                    }
+                    this.onBlur.emit();
+                    this.onTouchedCallback();
+                    this.togglePopup(false);
+                });
+            }
+            else {
                 this.togglePopup(false);
-            });
-        }
-        else {
-            this.togglePopup(false);
+            }
         }
     }
     /**
@@ -3185,29 +3609,42 @@ class AutoCompleteComponent {
         if (!isDocumentAvailable()) {
             return;
         }
-        this.valueChangeSubscription = this.valueChangeSubject
+        this.subs.add(this.valueChangeSubject
             .subscribe(value => {
             const hasChange = this.value !== value;
+            const index = this.findIndex(value);
+            this.selectionService.focused = index;
             this.value = value;
             this.text = value;
             // emit change after assigning `this.value` => allows the user to modify the component value on `valueChange`
             if (hasChange) {
                 this.emitChange(value);
             }
-        });
-        this.changeSubscription = this.selectionService.onChange.subscribe(this.handleItemChange.bind(this));
-        this.focusSubscription = this.selectionService.onFocus.subscribe(this.handleItemFocus.bind(this));
-        this.navigationSubscription = merge(this.navigationService.up, this.navigationService.down).subscribe((event) => this.navigate(event.index));
-        this.closeSubscription = this.navigationService.close.subscribe(() => this.togglePopup(false));
-        this.openSubscription = this.navigationService.open.subscribe(() => this.togglePopup(true));
-        this.enterSubscription = this.navigationService.enter.subscribe(this.handleEnter.bind(this));
-        this.escSubscription = this.navigationService.esc.subscribe(this.handleEscape.bind(this));
-        this.scrollSubscription = merge(this.navigationService.pagedown, this.navigationService.pageup).subscribe((event) => {
+        }));
+        this.subs.add(this.selectionService.onChange.subscribe(this.handleItemChange.bind(this)));
+        this.subs.add(this.selectionService.onFocus.subscribe(this.handleItemFocus.bind(this)));
+        this.subs.add(merge(this.navigationService.up, this.navigationService.down).subscribe((event) => this.navigate(event.index)));
+        this.subs.add(this.navigationService.close.subscribe(() => this.togglePopup(false)));
+        this.subs.add(this.navigationService.open.subscribe(() => this.togglePopup(true)));
+        this.subs.add(this.navigationService.enter.subscribe(this.handleEnter.bind(this)));
+        this.subs.add(this.navigationService.esc.subscribe(this.handleEscape.bind(this)));
+        this.subs.add(merge(this.navigationService.pagedown, this.navigationService.pageup).subscribe((event) => {
             if (this.isOpen) {
                 event.originalEvent.preventDefault();
                 this.optionsList.scrollWithOnePage(NavigationAction[event.originalEvent.code]);
             }
-        });
+        }));
+    }
+    findIndex(value, startFrom = 0) {
+        let index;
+        if (value && value.length && this.dataService.itemsCount) {
+            index = this.dataService.findIndex(this.findIndexPredicate(value), startFrom);
+        }
+        else {
+            index = -1;
+        }
+        ;
+        return index;
     }
     subscribeTouchEvents() {
         if (!isDocumentAvailable() || !this.touchEnabled) {
@@ -3222,23 +3659,6 @@ class AutoCompleteComponent {
             }
         }));
     }
-    unsubscribeEvents() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        this.changeSubscription.unsubscribe();
-        this.navigationSubscription.unsubscribe();
-        this.closeSubscription.unsubscribe();
-        this.openSubscription.unsubscribe();
-        this.enterSubscription.unsubscribe();
-        this.escSubscription.unsubscribe();
-        this.scrollSubscription.unsubscribe();
-        this.valueChangeSubscription.unsubscribe();
-        this.focusSubscription.unsubscribe();
-        if (this.touchstartDisposeHandler) {
-            this.touchstartDisposeHandler();
-        }
-    }
     handleItemChange(event) {
         const index = event.indices.length ? event.indices[0] : undefined;
         this.selectionService.resetSelection([-1]);
@@ -3247,6 +3667,9 @@ class AutoCompleteComponent {
         }
         const text = getter(this.dataService.itemAt(index), this.valueField);
         this.change(text);
+        if (this.isActionSheetExpanded) {
+            this.togglePopup(false);
+        }
     }
     handleItemFocus(_event) {
         const focused = this.selectionService.focused;
@@ -3259,9 +3682,14 @@ class AutoCompleteComponent {
         if (this.virtual) {
             this.virtual.skip = 0;
         }
-        const horizontalAlign = this.direction === 'rtl' ? 'right' : 'left';
-        const anchorPosition = { horizontal: horizontalAlign, vertical: 'bottom' };
-        const popupPosition = { horizontal: horizontalAlign, vertical: 'top' };
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.openActionSheet();
+            return;
+        }
+        const horizontalAlign = this.direction === "rtl" ? "right" : "left";
+        const anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
+        const popupPosition = { horizontal: horizontalAlign, vertical: "top" };
         this.popupRef = this.popupService.open({
             anchor: this.wrapper,
             animate: this.popupSettings.animate,
@@ -3283,20 +3711,17 @@ class AutoCompleteComponent {
             this.renderer.setAttribute(popupWrapper, 'role', 'region');
             this.renderer.setAttribute(popupWrapper, 'aria-label', this.messageFor('popupLabel'));
         }
-        const listBox = popupWrapper.querySelector('ul.k-list-ul');
-        const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby');
-        if (ariaLabel) {
-            listBox.setAttribute('aria-labelledby', ariaLabel);
-        }
-        this.popupRef.popupOpen.subscribe(() => {
+        this.subs.add(this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
+            setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
             this.optionsList.scrollToItem(this.selectionService.focused);
+            this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
-        });
-        this.popupRef.popupClose.subscribe(() => {
+        }));
+        this.subs.add(this.popupRef.popupClose.subscribe(() => {
             this.closed.emit();
-        });
-        this.popupRef.popupAnchorViewportLeave.subscribe(() => this.togglePopup(false));
+        }));
+        this.subs.add(this.popupRef.popupAnchorViewportLeave.subscribe(() => this.togglePopup(false)));
     }
     destroyPopup() {
         if (this.popupRef) {
@@ -3309,6 +3734,9 @@ class AutoCompleteComponent {
     _toggle(open) {
         this._open = open;
         this.destroyPopup();
+        if (this.isActionSheetExpanded) {
+            this.closeActionSheet();
+        }
         if (this._open) {
             this.createPopup();
         }
@@ -3359,9 +3787,28 @@ class AutoCompleteComponent {
             this.renderer.addClass(this.wrapper, getFillModeClass('input', this.fillMode));
         }
     }
+    closeActionSheet() {
+        this.actionSheet.toggle(false);
+        this.actionSheetSearchBar.value = '';
+        this.filterable && this.filterChange.emit('');
+        this.searchbar.input.nativeElement.focus();
+        this.closed.emit();
+    }
+    openActionSheet() {
+        this.actionSheet.toggle(true);
+        this.cdr.detectChanges();
+        setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+        this.title = setActionSheetTitle(this.searchbar.input, this.title);
+        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
+        this.cdr.detectChanges();
+        this.opened.emit();
+        this.optionsList.scrollToItem(this.selectionService.focused);
+        this.selectionService.focus(this.selectionService.focused);
+        this.actionSheetSearchBar.focus();
+    }
 }
-AutoCompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: i1.LocalizationService }, { token: DataService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AutoCompleteComponent, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", clearButton: "clearButton", suggest: "suggest", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-autocomplete": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
+AutoCompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: i1.LocalizationService }, { token: DataService }, { token: i2$1.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AutoCompleteComponent, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", clearButton: "clearButton", suggest: "suggest", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-autocomplete": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
         AUTOCOMPLETE_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -3380,7 +3827,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             provide: KendoInput,
             useExisting: forwardRef(() => AutoCompleteComponent)
         }
-    ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoAutoComplete"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoAutoComplete"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoAutoCompleteLocalizedMessages
             i18n-noDataText="kendo.autocomplete.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -3395,7 +3842,6 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         <kendo-searchbar #searchbar
             [role]="'combobox'"
             [ariaExpanded]="isOpen"
-            [ariaControls]="ariaControls"
             [isSuggestable]="suggest"
             [isFilterable]="filterable"
             [isLoading]="isLoading"
@@ -3405,13 +3851,14 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             [userInput]="text"
             [suggestedText]="suggestion"
             [disabled]="disabled"
-            [readonly]="readonly"
+            [readonly]="readonly || this.isAdaptive"
             [tabIndex]="tabIndex"
             [placeholder]="placeholder"
             (onNavigate)="handleNavigate($event)"
             (valueChange)="searchBarChange($event)"
             (onBlur)="handleBlur()"
             (onFocus)="handleFocus()"
+            (click)="handleClick()"
         ></kendo-searchbar>
         <span
             *ngIf="!loading && !readonly && (clearButton && text?.length)"
@@ -3431,6 +3878,26 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </span>
         <span *ngIf="loading" class="k-icon k-i-loading k-input-loading-icon"></span>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <ng-container #container></ng-container>
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="true"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (textInputChange)="onFilterChange($event)"
+            (navigate)="handleNavigate($event)"
+            [placeholder]="placeholder"
+            >
+        </responsive-renderer>
+
+        <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
                 [templateContext]="{
@@ -3474,11 +3941,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 }">
             </ng-template>
         </ng-template>
-        <ng-template [ngIf]="isOpen">
-            <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        </ng-template>
-        <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -3519,7 +3982,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <kendo-searchbar #searchbar
             [role]="'combobox'"
             [ariaExpanded]="isOpen"
-            [ariaControls]="ariaControls"
             [isSuggestable]="suggest"
             [isFilterable]="filterable"
             [isLoading]="isLoading"
@@ -3529,13 +3991,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [userInput]="text"
             [suggestedText]="suggestion"
             [disabled]="disabled"
-            [readonly]="readonly"
+            [readonly]="readonly || this.isAdaptive"
             [tabIndex]="tabIndex"
             [placeholder]="placeholder"
             (onNavigate)="handleNavigate($event)"
             (valueChange)="searchBarChange($event)"
             (onBlur)="handleBlur()"
             (onFocus)="handleFocus()"
+            (click)="handleClick()"
         ></kendo-searchbar>
         <span
             *ngIf="!loading && !readonly && (clearButton && text?.length)"
@@ -3555,6 +4018,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </span>
         <span *ngIf="loading" class="k-icon k-i-loading k-input-loading-icon"></span>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <ng-container #container></ng-container>
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="true"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (textInputChange)="onFilterChange($event)"
+            (navigate)="handleNavigate($event)"
+            [placeholder]="placeholder"
+            >
+        </responsive-renderer>
+
+        <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
                 [templateContext]="{
@@ -3598,18 +4081,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }">
             </ng-template>
         </ng-template>
-        <ng-template [ngIf]="isOpen">
-            <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        </ng-template>
-        <ng-container #container></ng-container>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: DataService }, { type: i2.PopupService }, { type: SelectionService }, { type: NavigationService }, { type: DisabledItemsService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: DataService }, { type: i2$1.PopupService }, { type: SelectionService }, { type: NavigationService }, { type: DisabledItemsService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }]; }, propDecorators: { highlightFirst: [{
+                }] }]; }, propDecorators: { responsiveRendererComponent: [{
+                type: ViewChild,
+                args: [ResponsiveRendererComponent]
+            }], highlightFirst: [{
                 type: Input
             }], focusableId: [{
                 type: Input
@@ -3621,6 +4103,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], placeholder: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
             }], popupSettings: [{
                 type: Input
             }], listHeight: [{
@@ -3816,6 +4304,10 @@ class ComboBoxComponent {
         this.cdr = cdr;
         this.renderer = renderer;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.animationDuration = animationDuration;
         /**
          * @hidden
          */
@@ -3885,12 +4377,15 @@ class ComboBoxComponent {
          */
         this.placeholder = "";
         /**
-         * Sets the height of the suggestions list. By default, `listHeight` is 200px.
-         *
-         * > The `listHeight` property affects only the list of suggestions and not the whole popup container.
-         * > To set the height of the popup container, use `popupSettings.height`.
+         * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+         */
+        this.adaptiveMode = 'none';
+        /**
+         * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+         * By default the ActionSheet title uses the text provided for the label of the AutoComplete.
          */
-        this.listHeight = 200;
+        this.title = '';
+        this._listHeight = 200;
         /**
          * Enables the auto-completion of the text based on the first data item.
          */
@@ -3965,6 +4460,10 @@ class ComboBoxComponent {
         this.onBlur = new EventEmitter();
         this.widgetClasses = true;
         this._isFocused = false;
+        /**
+         * @hidden
+         */
+        this.windowSize = 'large';
         this.listBoxId = `k-${guid()}`;
         this.optionPrefix = `k-${guid()}`;
         this.onChangeCallback = (_) => { };
@@ -3994,6 +4493,18 @@ class ComboBoxComponent {
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.data = [];
     }
+    /**
+     * @hidden
+     */
+    get actionSheet() {
+        return this.responsiveRendererComponent?.actionSheet;
+    }
+    /**
+     * @hidden
+     */
+    get actionSheetSearchBar() {
+        return this.responsiveRendererComponent?.actionSheetSearchBar;
+    }
     set text(text) {
         this._text = isPresent(text) ? text.toString() : "";
     }
@@ -4095,6 +4606,22 @@ class ComboBoxComponent {
         }
         return this._valuePrimitive;
     }
+    /**
+     * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+     * By default the ActionSheet subtitle uses the text provided for the `placeholder` of the AutoComplete.
+    */
+    set subtitle(_subtitle) {
+        this._subtitle = _subtitle;
+    }
+    get subtitle() {
+        return this._subtitle || this.placeholder;
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
+    }
     /**
      * Configures the popup of the ComboBox.
      *
@@ -4111,6 +4638,24 @@ class ComboBoxComponent {
     get popupSettings() {
         return this._popupSettings;
     }
+    /**
+     * Sets the height of the options list in the popup. By default, `listHeight` is 200px.
+     *
+     * > The `listHeight` property affects only the list of options and not the whole popup container.
+     * > To set the height of the popup container, use `popupSettings.height`.
+     *
+     * > When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
+     */
+    set listHeight(_listHeight) {
+        this._listHeight = _listHeight;
+    }
+    ;
+    get listHeight() {
+        if (this.isAdaptive) {
+            return;
+        }
+        return this._listHeight;
+    }
     /**
      * Defines a Boolean function that is executed for each data item in the component
      * ([see examples]({% slug disableditems_combobox %})). Determines whether the item will be disabled.
@@ -4227,6 +4772,19 @@ class ComboBoxComponent {
             return 'visible';
         }
     }
+    /**
+     * @hidden
+     */
+    get isActionSheetExpanded() {
+        return this.actionSheet?.expanded;
+    }
+    ;
+    /**
+     * @hidden
+     */
+    get isAdaptive() {
+        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
+    }
     get popupWidth() {
         let wrapperOffsetWidth = 0;
         if (isDocumentAvailable()) {
@@ -4249,6 +4807,11 @@ class ComboBoxComponent {
         this.attachSelectClickHandler();
         this.setComponentClasses();
     }
+    ngAfterViewInit() {
+        this.windowSize = windowSize();
+        this.cdr.detectChanges();
+        this.renderer.setAttribute(this.actionSheet?.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
+    }
     createValueStream() {
         const valueStream = this.valueSubject.pipe(filter((candidate) => {
             const current = getter(this.value, this.valueField);
@@ -4449,7 +5012,7 @@ class ComboBoxComponent {
         }
     }
     /**
-     * Toggles the visibility of the popup. If you use the `toggle` method to open or close the popup,
+     * Toggles the visibility of the popup or actionSheet. If you use the `toggle` method to open or close the popup or actionSheet,
      * the `open` and `close` events will not be fired.
      *
      * @param open - The state of the popup.
@@ -4462,10 +5025,19 @@ class ComboBoxComponent {
         });
     }
     /**
-     * Returns the current open state of the popup.
+     * Returns the current open state. Returns `true` if the popup or actionSheet is open.
      */
     get isOpen() {
-        return this._open;
+        return isTruthy(this._open || this.isActionSheetExpanded);
+    }
+    /**
+     * @hidden
+     */
+    handleClick() {
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.togglePopup(true);
+        }
     }
     /**
      * Resets the value of the ComboBox.
@@ -4548,7 +5120,14 @@ class ComboBoxComponent {
      * @hidden
      */
     onResize() {
-        if (this.isOpen) {
+        if (this.isAdaptiveModeEnabled && this.windowSize !== windowSize()) {
+            if (this.isOpen) {
+                this.togglePopup(false);
+            }
+            this.windowSize = windowSize();
+            this.cdr.detectChanges();
+        }
+        if (this.isOpen && !this.isActionSheetExpanded) {
             const popupWrapper = this.popupRef.popupElement;
             const { min, max } = this.popupWidth;
             popupWrapper.style.minWidth = min;
@@ -4654,13 +5233,7 @@ class ComboBoxComponent {
         return result;
     }
     search(text, startFrom = 0) {
-        let index;
-        if (text.length && this.dataService.itemsCount) {
-            index = this.dataService.findIndex(this.findIndexPredicate(text), startFrom);
-        }
-        else {
-            index = -1;
-        }
+        const index = this.findIndex(text, startFrom);
         if (this.disabledItemsService.isIndexDisabled(index)) {
             if (index + 1 < this.dataService.itemsCount) {
                 this.search(text, index + 1);
@@ -4676,6 +5249,18 @@ class ComboBoxComponent {
             }
         }
     }
+    /**
+     * @hidden
+     */
+    onAdaptiveTextBoxChange(text) {
+        if (this.filterable && this.filterText !== text) {
+            this.filterText = text;
+            this.filterChange.emit(text);
+        }
+        else {
+            this.search(text);
+        }
+    }
     /**
      * @hidden
      */
@@ -4733,6 +5318,10 @@ class ComboBoxComponent {
             ((action === NavigationAction.Enter && this.isOpen) || action !== NavigationAction.Enter)) {
             event.preventDefault();
         }
+        if (action === NavigationAction.Tab && this.isActionSheetExpanded) {
+            event.stopImmediatePropagation();
+            this.togglePopup(false);
+        }
     }
     handleEnter() {
         const text = this.text;
@@ -4764,32 +5353,34 @@ class ComboBoxComponent {
      * @hidden
      */
     handleBlur() {
-        this._filtering = false;
-        this.searchbar.input.nativeElement.scrollLeft = 0; // Firefox doesn't auto-scroll to the left on blur like other browsers
-        this.isFocused = false;
-        const unresolvedSelection = getter(this.dataItem, this.valueField) !== getter(this.value, this.valueField);
-        const currentText = this.searchbar.value;
-        const textHasChanged = currentText !== (getter(this.dataItem, this.textField) || '');
-        const valueHasChanged = unresolvedSelection || textHasChanged;
-        const runInZone = valueHasChanged || hasObservers(this.onBlur) || hasObservers(this.close) || isUntouched(this.wrapper.nativeElement);
-        if (runInZone) {
-            this.zone.run(() => {
-                if (valueHasChanged) {
-                    const lowerCaseMatch = isPresent(this.focusedItemText) && this.focusedItemText.toLowerCase() === currentText.toLowerCase();
-                    if (lowerCaseMatch || unresolvedSelection) {
-                        this.selectionService.change(this.selectionService.focused);
-                    }
-                    else {
-                        this.change(currentText, true);
+        if (!this.isActionSheetExpanded) {
+            this._filtering = false;
+            this.searchbar.input.nativeElement.scrollLeft = 0; // Firefox doesn't auto-scroll to the left on blur like other browsers
+            this.isFocused = false;
+            const unresolvedSelection = getter(this.dataItem, this.valueField) !== getter(this.value, this.valueField);
+            const currentText = this.searchbar.value;
+            const textHasChanged = currentText !== (getter(this.dataItem, this.textField) || '');
+            const valueHasChanged = unresolvedSelection || textHasChanged;
+            const runInZone = valueHasChanged || hasObservers(this.onBlur) || hasObservers(this.close) || isUntouched(this.wrapper.nativeElement);
+            if (runInZone) {
+                this.zone.run(() => {
+                    if (valueHasChanged) {
+                        const lowerCaseMatch = isPresent(this.focusedItemText) && this.focusedItemText.toLowerCase() === currentText.toLowerCase();
+                        if (lowerCaseMatch || unresolvedSelection) {
+                            this.selectionService.change(this.selectionService.focused);
+                        }
+                        else {
+                            this.change(currentText, true);
+                        }
                     }
-                }
-                this.onBlur.emit();
-                this.onTouchedCallback();
+                    this.onBlur.emit();
+                    this.onTouchedCallback();
+                    this.togglePopup(false);
+                });
+            }
+            else {
                 this.togglePopup(false);
-            });
-        }
-        else {
-            this.togglePopup(false);
+            }
         }
     }
     /**
@@ -4852,6 +5443,9 @@ class ComboBoxComponent {
         }
         else {
             this.valueSubject.next(candidate);
+            if (this.isActionSheetExpanded) {
+                this.togglePopup(false);
+            }
         }
     }
     emitValueChange() {
@@ -4925,6 +5519,11 @@ class ComboBoxComponent {
         if (this.virtual) {
             this.virtual.skip = 0;
         }
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.openActionSheet();
+            return;
+        }
         const horizontalAlign = this.direction === "rtl" ? "right" : "left";
         const anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
         const popupPosition = { horizontal: horizontalAlign, vertical: "top" };
@@ -4956,7 +5555,9 @@ class ComboBoxComponent {
         }
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
+            setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
             this.optionsList.scrollToItem(this.selectionService.focused);
+            this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
         });
         this.popupRef.popupClose.subscribe(() => {
@@ -4967,7 +5568,11 @@ class ComboBoxComponent {
     _toggle(open) {
         this._open = open;
         this.destroyPopup();
+        if (this.isActionSheetExpanded) {
+            this.closeActionSheet();
+        }
         if (this._open) {
+            this.windowSize = windowSize();
             this.createPopup();
         }
     }
@@ -5023,9 +5628,40 @@ class ComboBoxComponent {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         }
     }
+    findIndex(value, startFrom = 0) {
+        let index;
+        if (value && value.length && this.dataService.itemsCount) {
+            index = this.dataService.findIndex(this.findIndexPredicate(value), startFrom);
+        }
+        else {
+            index = -1;
+        }
+        ;
+        return index;
+    }
+    closeActionSheet() {
+        this.actionSheet.toggle(false);
+        this.actionSheetSearchBar.value = '';
+        this.filterable && this.filterChange.emit('');
+        this.searchbar.input.nativeElement.focus();
+        this.closed.emit();
+    }
+    openActionSheet() {
+        this.windowSize = windowSize();
+        this.actionSheet.toggle(true);
+        this.cdr.detectChanges();
+        setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+        this.title = setActionSheetTitle(this.searchbar.input, this.title);
+        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
+        this.cdr.detectChanges();
+        this.opened.emit();
+        this.optionsList.scrollToItem(this.selectionService.focused);
+        this.selectionService.focus(this.selectionService.focused);
+        this.actionSheetSearchBar.focus();
+    }
 }
-ComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ComboBoxComponent, selector: "kendo-combobox", inputs: { focusableId: "focusableId", allowCustom: "allowCustom", data: "data", value: "value", textField: "textField", valueField: "valueField", valuePrimitive: "valuePrimitive", valueNormalizer: "valueNormalizer", placeholder: "placeholder", popupSettings: "popupSettings", listHeight: "listHeight", iconClass: "iconClass", loading: "loading", suggest: "suggest", clearButton: "clearButton", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-combobox": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
+ComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2$1.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ComboBoxComponent, selector: "kendo-combobox", inputs: { focusableId: "focusableId", allowCustom: "allowCustom", data: "data", value: "value", textField: "textField", valueField: "valueField", valuePrimitive: "valuePrimitive", valueNormalizer: "valueNormalizer", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", iconClass: "iconClass", loading: "loading", suggest: "suggest", clearButton: "clearButton", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-combobox": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
         COMBOBOX_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -5042,7 +5678,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         {
             provide: KendoInput, useExisting: forwardRef(() => ComboBoxComponent)
         }
-    ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], exportAs: ["kendoComboBox"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], exportAs: ["kendoComboBox"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoComboBoxLocalizedMessages
             i18n-noDataText="kendo.combobox.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -5069,13 +5705,14 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [userInput]="text"
             [suggestedText]="getSuggestion()"
             [disabled]="disabled"
-            [readonly]="readonly"
+            [readonly]="readonly || isAdaptive"
             [tabIndex]="tabIndex"
             [placeholder]="placeholder"
             (onNavigate)="handleNavigate($event)"
             (valueChange)="searchBarChange($event)"
             (onBlur)="handleBlur()"
             (onFocus)="handleFocus()"
+            (click)="handleClick()"
         ></kendo-searchbar>
         <span
             *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
@@ -5115,6 +5752,25 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             <span *ngIf="loading || iconClass" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
         </button>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+        <ng-container #container></ng-container>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="true"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            (navigate)="handleNavigate($event)"
+            [placeholder]="placeholder"
+            >
+        </responsive-renderer>
+        <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
                 [templateContext]="{
@@ -5158,11 +5814,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 }">
             </ng-template>
         </ng-template>
-        <ng-template [ngIf]="isOpen">
-            <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        </ng-template>
-        <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -5213,13 +5865,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [userInput]="text"
             [suggestedText]="getSuggestion()"
             [disabled]="disabled"
-            [readonly]="readonly"
+            [readonly]="readonly || isAdaptive"
             [tabIndex]="tabIndex"
             [placeholder]="placeholder"
             (onNavigate)="handleNavigate($event)"
             (valueChange)="searchBarChange($event)"
             (onBlur)="handleBlur()"
             (onFocus)="handleFocus()"
+            (click)="handleClick()"
         ></kendo-searchbar>
         <span
             *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
@@ -5259,6 +5912,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <span *ngIf="loading || iconClass" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
         </button>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+        <ng-container #container></ng-container>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="true"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            (navigate)="handleNavigate($event)"
+            [placeholder]="placeholder"
+            >
+        </responsive-renderer>
+        <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
                 [templateContext]="{
@@ -5302,18 +5974,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }">
             </ng-template>
         </ng-template>
-        <ng-template [ngIf]="isOpen">
-            <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        </ng-template>
-        <ng-container #container></ng-container>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i2.PopupService }, { type: SelectionService }, { type: NavigationService }, { type: DisabledItemsService }, { type: DataService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i2$1.PopupService }, { type: SelectionService }, { type: NavigationService }, { type: DisabledItemsService }, { type: DataService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }]; }, propDecorators: { focusableId: [{
+                }] }]; }, propDecorators: { responsiveRendererComponent: [{
+                type: ViewChild,
+                args: [ResponsiveRendererComponent]
+            }], focusableId: [{
                 type: Input
             }], allowCustom: [{
                 type: Input
@@ -5331,6 +6002,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], placeholder: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
             }], popupSettings: [{
                 type: Input
             }], listHeight: [{
@@ -5548,6 +6225,14 @@ class DropDownListComponent {
         this.cdr = cdr;
         this.touchEnabled = touchEnabled;
         this.injector = injector;
+        /**
+         * @hidden
+         */
+        this.animationDuration = animationDuration;
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
         /**
          * @hidden
          */
@@ -5558,12 +6243,24 @@ class DropDownListComponent {
         this.caretAltDownIcon = caretAltDownIcon;
         this.listBoxId = `k-${guid()}`;
         /**
-         * Sets the height of the options list. By default, `listHeight` is 200px.
-         *
-         * > The `listHeight` property affects only the list of options and not the whole popup container.
-         * > To set the height of the popup container, use `popupSettings.height`.
+         * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+         */
+        this.adaptiveMode = 'none';
+        /**
+         * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+         * By default the ActionSheet title uses the text provided for the label of the AutoComplete.
          */
-        this.listHeight = 200;
+        this.title = '';
+        /**
+         * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+         * By default the ActionSheet subtitle uses the text provided for the `placeholder` of the AutoComplete.
+        */
+        this.subtitle = '';
+        /**
+        * @hidden
+        */
+        this.windowSize = 'large';
+        this._listHeight = 200;
         /**
          * Sets the read-only state of the component.
          */
@@ -5663,6 +6360,18 @@ class DropDownListComponent {
         this.subscribeFocusEvents();
         this.popupMouseDownHandler = this.onMouseDown.bind(this);
     }
+    /**
+     * @hidden
+     */
+    get actionSheet() {
+        return this.responsiveRendererComponent?.actionSheet;
+    }
+    /**
+     * @hidden
+     */
+    get actionSheetSearchBar() {
+        return this.responsiveRendererComponent?.actionSheetSearchBar;
+    }
     get width() {
         const wrapperWidth = isDocumentAvailable() ? this.wrapper.nativeElement.offsetWidth : 0;
         const width = this.popupSettings.width || wrapperWidth;
@@ -5704,6 +6413,14 @@ class DropDownListComponent {
         }
         return appendTo === 'component' ? this.container : appendTo;
     }
+    /**
+     * @hidden
+     */
+    onFilterChange(text) {
+        if (this.filterable) {
+            this.filterChange.emit(text);
+        }
+    }
     /**
      * @hidden
      */
@@ -5751,6 +6468,25 @@ class DropDownListComponent {
     get value() {
         return this._value;
     }
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
+    }
+    /**
+     * @hidden
+     */
+    get isActionSheetExpanded() {
+        return this.actionSheet?.expanded;
+    }
+    ;
+    /**
+     * @hidden
+     */
+    get isAdaptive() {
+        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
+    }
     /**
      * Configures the popup of the DropDownList.
      *
@@ -5767,6 +6503,24 @@ class DropDownListComponent {
     get popupSettings() {
         return this._popupSettings;
     }
+    /**
+     * Sets the height of the options list in the popup. By default, `listHeight` is 200px.
+     *
+     * > The `listHeight` property affects only the list of options and not the whole popup container.
+     * > To set the height of the popup container, use `popupSettings.height`.
+     *
+     * > When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
+     */
+    set listHeight(_listHeight) {
+        this._listHeight = _listHeight;
+    }
+    ;
+    get listHeight() {
+        if (this.isAdaptive) {
+            return;
+        }
+        return this._listHeight;
+    }
     /**
      * Defines a Boolean function that is executed for each data item in the component
      * ([see examples]({% slug disableditems_ddl %})). Determines whether the item will be disabled.
@@ -5911,7 +6665,13 @@ class DropDownListComponent {
      * @hidden
      */
     onResize() {
-        if (this._open) {
+        if (this.isAdaptiveModeEnabled && this.windowSize !== windowSize()) {
+            if (this.isOpen) {
+                this.togglePopup(false);
+            }
+            this.windowSize = windowSize();
+        }
+        if (this.isOpen && !this.isActionSheetExpanded) {
             const popupWrapper = this.popupRef.popupElement;
             const { min, max } = this.width;
             popupWrapper.style.minWidth = min;
@@ -5954,7 +6714,10 @@ class DropDownListComponent {
     /**
      * @hidden
      */
-    keydown(event) {
+    keydown(event, input) {
+        if (input) {
+            event.stopPropagation();
+        }
         const firstIndex = isPresent(this.defaultItem) ? -1 : 0;
         const focused = isNaN(this.selectionService.focused) ? this.firstFocusableIndex(firstIndex) : this.selectionService.focused;
         let offset = 0;
@@ -5996,6 +6759,9 @@ class DropDownListComponent {
         ) {
             eventData.preventDefault();
         }
+        if (action === NavigationAction.Tab && this.isActionSheetExpanded) {
+            this.togglePopup(false);
+        }
     }
     /**
      * @hidden
@@ -6009,10 +6775,11 @@ class DropDownListComponent {
     /**
      * @hidden
      */
-    click(event) {
-        event.preventDefault();
-        this.focus();
-        this.togglePopup(!this.isOpen);
+    click() {
+        if (!this.isActionSheetExpanded) {
+            this.focus();
+            this.togglePopup(!this.isOpen);
+        }
     }
     set isFocused(isFocused) {
         this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
@@ -6031,6 +6798,10 @@ class DropDownListComponent {
         this.assignAriaDescribedBy();
         this.setComponentClasses();
     }
+    ngAfterViewInit() {
+        this.windowSize = windowSize();
+        this.renderer.setAttribute(this.actionSheet?.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
+    }
     /**
      * @hidden
      * Used by the TextBoxContainer to determine if the component is empty.
@@ -6118,7 +6889,7 @@ class DropDownListComponent {
         }
     }
     /**
-     * Toggles the visibility of the popup
+     * Toggles the visibility of the popup or actionSheet
      * ([see example]({% slug openstate_ddl %}#toc-setting-the-initially-opened-component)).
      * If you use the `toggle` method to open or close the popup, the `open` and `close` events will not be fired.
      *
@@ -6135,6 +6906,9 @@ class DropDownListComponent {
     _toggle(open) {
         this._open = open;
         this.destroyPopup();
+        if (this.isActionSheetExpanded) {
+            this.closeActionSheet();
+        }
         if (this._open) {
             this.createPopup();
         }
@@ -6167,10 +6941,10 @@ class DropDownListComponent {
         }
     }
     /**
-     * Returns the current open state of the popup.
+     * Returns the current open state. Returns `true` if the popup or actionSheet is open.
      */
     get isOpen() {
-        return this._open;
+        return isTruthy(this._open || this.isActionSheetExpanded);
     }
     /**
      * Resets the value of the DropDownList.
@@ -6266,6 +7040,11 @@ class DropDownListComponent {
         if (this.virtual) {
             this.virtual.skip = 0;
         }
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.openActionSheet();
+            return;
+        }
         const horizontalAlign = this.direction === "rtl" ? "right" : "left";
         const anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
         const popupPosition = { horizontal: horizontalAlign, vertical: "top" };
@@ -6297,7 +7076,9 @@ class DropDownListComponent {
         }
         this.subs.add(this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
+            setListBoxAriaLabelLebBy(this.optionsList, this.wrapper, this.renderer);
             this.optionsList.scrollToItem(this.selectionService.focused);
+            this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
         }));
         this.subs.add(this.popupRef.popupClose.subscribe(() => {
@@ -6506,26 +7287,28 @@ class DropDownListComponent {
         }
     }
     componentBlur() {
-        this.isFocused = false;
-        const selectionPresent = isPresent(this.selectionService.selected[0]);
-        const valueHasChanged = selectionPresent && getter(this.value, this.valueField) !== getter(this.dataService.itemAt(this.selectionService.selected[0]), this.valueField);
-        if (valueHasChanged ||
-            hasObservers(this.close) ||
-            hasObservers(this.onBlur) ||
-            hasObservers(this.filterChange) ||
-            isUntouched(this.wrapper.nativeElement)) {
-            this._zone.run(() => {
-                if (valueHasChanged) {
-                    this.selectionService.change(this.selectionService.selected[0]);
-                }
+        if (!this.isActionSheetExpanded) {
+            this.isFocused = false;
+            const selectionPresent = isPresent(this.selectionService.selected[0]);
+            const valueHasChanged = selectionPresent && getter(this.value, this.valueField) !== getter(this.dataService.itemAt(this.selectionService.selected[0]), this.valueField);
+            if (valueHasChanged ||
+                hasObservers(this.close) ||
+                hasObservers(this.onBlur) ||
+                hasObservers(this.filterChange) ||
+                isUntouched(this.wrapper.nativeElement)) {
+                this._zone.run(() => {
+                    if (valueHasChanged) {
+                        this.selectionService.change(this.selectionService.selected[0]);
+                    }
+                    this.togglePopup(false);
+                    this.clearFilter();
+                    this.onBlur.emit();
+                    this.onTouchedCallback();
+                });
+            }
+            else {
                 this.togglePopup(false);
-                this.clearFilter();
-                this.onBlur.emit();
-                this.onTouchedCallback();
-            });
-        }
-        else {
-            this.togglePopup(false);
+            }
         }
     }
     /**
@@ -6670,6 +7453,15 @@ class DropDownListComponent {
     handleFilter(event) {
         this.filterChange.emit(event.target.value);
     }
+    /**
+     * @hidden
+     */
+    handleClick() {
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.togglePopup(true);
+        }
+    }
     /**
      * @hidden
      */
@@ -6697,13 +7489,36 @@ class DropDownListComponent {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
         }
     }
-}
-DropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropDownListComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: TOUCH_ENABLED, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: { iconClass: "iconClass", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click($event)" }, properties: { "attr.aria-controls": "this.ariaControls", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-activedescendant": "this.hostAriaActivedescendant" } }, providers: [
-        DROPDOWNLIST_VALUE_ACCESSOR,
-        DataService,
-        SelectionService,
-        NavigationService,
+    closeActionSheet() {
+        this.actionSheet.toggle(false);
+        if (this.filterable) {
+            this.actionSheetSearchBar.value = '';
+            this.filterChange.emit('');
+        }
+        this.closed.emit();
+    }
+    openActionSheet() {
+        this.windowSize = windowSize();
+        this.actionSheet.toggle(true);
+        this.cdr.detectChanges();
+        setListBoxAriaLabelLebBy(this.optionsList, this.wrapper, this.renderer);
+        this.title = setActionSheetTitle(this.wrapper, this.title);
+        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
+        this.cdr.detectChanges();
+        this.opened.emit();
+        this.optionsList.scrollToItem(this.selectionService.focused);
+        this.selectionService.focus(this.selectionService.focused);
+        if (this.filterable) {
+            this.actionSheetSearchBar.focus();
+        }
+    }
+}
+DropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropDownListComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2$1.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: TOUCH_ENABLED, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: { iconClass: "iconClass", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click()" }, properties: { "attr.aria-controls": "this.ariaControls", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-activedescendant": "this.hostAriaActivedescendant" } }, providers: [
+        DROPDOWNLIST_VALUE_ACCESSOR,
+        DataService,
+        SelectionService,
+        NavigationService,
         DisabledItemsService,
         LocalizationService,
         {
@@ -6716,7 +7531,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         {
             provide: KendoInput, useExisting: forwardRef(() => DropDownListComponent)
         }
-    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "valueTemplate", first: true, predicate: ValueTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoDropDownList"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "valueTemplate", first: true, predicate: ValueTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoDropDownList"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoDropDownListLocalizedMessages
             i18n-noDataText="kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -6763,8 +7578,26 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <span *ngIf="loading || iconClass" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
             </button>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+        <ng-container #container></ng-container>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="filterable"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (textInputChange)="onFilterChange($event)"
+            >
+        </responsive-renderer>
+
+        <ng-template #sharedPopupActionSheetTemplate>
             <!--filterable-->
-            <ng-template [ngIf]="filterable">
+            <ng-template [ngIf]="filterable && !isActionSheetExpanded">
                 <div class="k-list-filter" (click)="$event.stopImmediatePropagation()">
                     <span
                         class="k-searchbox k-input"
@@ -6776,6 +7609,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                             [svgIcon]="searchIcon">
                         </kendo-icon-wrapper>
                         <input
+                            #searchInput
                             role="searchbox"
                             aria-autocomplete="list"
                             aria-haspopup="listbox"
@@ -6787,10 +7621,11 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                             [dir]="direction"
                             [(ngModel)]="filterText"
                             class="k-input-inner"
-                            (keydown)="keydown($event)"
+                            (keydown)="keydown($event, searchInput)"
                             (input)="handleFilter($event)"
                             (focus)="onFilterFocus()"
-                            (blur)="blurFilterInput()" />
+                            (blur)="blurFilterInput()"
+                            (click)="handleClick()" />
                     </span>
                 </div>
             </ng-template>
@@ -6826,7 +7661,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     templateRef: headerTemplate.templateRef
                 }">
             </ng-template>
-            <!--list-->
+            <!--list-->           
             <kendo-list
                 #optionsList
                 [id]="listBoxId"
@@ -6863,11 +7698,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 }">
             </ng-template>
         </ng-template>
-        <ng-template [ngIf]="isOpen">
-            <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        </ng-template>
-        <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
+  `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropDownListComponent, decorators: [{
             type: Component,
             args: [{
@@ -6938,8 +7769,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <span *ngIf="loading || iconClass" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
             </button>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+        <ng-container #container></ng-container>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="filterable"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (textInputChange)="onFilterChange($event)"
+            >
+        </responsive-renderer>
+
+        <ng-template #sharedPopupActionSheetTemplate>
             <!--filterable-->
-            <ng-template [ngIf]="filterable">
+            <ng-template [ngIf]="filterable && !isActionSheetExpanded">
                 <div class="k-list-filter" (click)="$event.stopImmediatePropagation()">
                     <span
                         class="k-searchbox k-input"
@@ -6951,6 +7800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             [svgIcon]="searchIcon">
                         </kendo-icon-wrapper>
                         <input
+                            #searchInput
                             role="searchbox"
                             aria-autocomplete="list"
                             aria-haspopup="listbox"
@@ -6962,10 +7812,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             [dir]="direction"
                             [(ngModel)]="filterText"
                             class="k-input-inner"
-                            (keydown)="keydown($event)"
+                            (keydown)="keydown($event, searchInput)"
                             (input)="handleFilter($event)"
                             (focus)="onFilterFocus()"
-                            (blur)="blurFilterInput()" />
+                            (blur)="blurFilterInput()"
+                            (click)="handleClick()" />
                     </span>
                 </div>
             </ng-template>
@@ -7001,7 +7852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     templateRef: headerTemplate.templateRef
                 }">
             </ng-template>
-            <!--list-->
+            <!--list-->           
             <kendo-list
                 #optionsList
                 [id]="listBoxId"
@@ -7038,18 +7889,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }">
             </ng-template>
         </ng-template>
-        <ng-template [ngIf]="isOpen">
-            <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        </ng-template>
-        <ng-container #container></ng-container>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i2.PopupService }, { type: SelectionService }, { type: NavigationService }, { type: DisabledItemsService }, { type: DataService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i2$1.PopupService }, { type: SelectionService }, { type: NavigationService }, { type: DisabledItemsService }, { type: DataService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }, { type: i0.Injector }]; }, propDecorators: { ariaControls: [{
+                }] }, { type: i0.Injector }]; }, propDecorators: { responsiveRendererComponent: [{
+                type: ViewChild,
+                args: [ResponsiveRendererComponent]
+            }], ariaControls: [{
                 type: HostBinding,
                 args: ['attr.aria-controls']
             }], iconClass: [{
@@ -7064,6 +7914,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], valueField: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
             }], popupSettings: [{
                 type: Input
             }], listHeight: [{
@@ -7206,7 +8062,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['keypress', ['$event']]
             }], click: [{
                 type: HostListener,
-                args: ['click', ['$event']]
+                args: ['click']
             }] } });
 
 /**
@@ -7497,7 +8353,7 @@ TagListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             </span>
         </div>
         <ng-content></ng-content>
-  `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TagListComponent, decorators: [{
             type: Component,
             args: [{
@@ -7645,6 +8501,10 @@ class MultiSelectComponent {
         this.renderer = renderer;
         this._zone = _zone;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.animationDuration = animationDuration;
         /**
          * @hidden
          */
@@ -7672,6 +8532,15 @@ class MultiSelectComponent {
          * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
          */
         this.tabindex = 0;
+        /**
+         * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+         */
+        this.adaptiveMode = 'none';
+        /**
+         * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+         * By default the ActionSheet title uses the text provided for the label of the AutoComplete.
+         */
+        this.title = '';
         /**
          * Sets the disabled state of the component.
          */
@@ -7684,13 +8553,7 @@ class MultiSelectComponent {
          * Enables the [filtering]({% slug filtering_multiselect %}) functionality of the MultiSelect.
          */
         this.filterable = false;
-        /**
-         * Sets the height of the suggestions list. By default, `listHeight` is 200px.
-         *
-         * > The `listHeight` property affects only the list of suggestions and not the whole popup container.
-         * > To set the height of the popup container, use `popupSettings.height`.
-         */
-        this.listHeight = 200;
+        this._listHeight = 200;
         /**
          * If set to `true`, renders a button on hovering over the component.
          * Clicking this button resets the value of the component to an empty array and triggers the `change` event.
@@ -7813,6 +8676,10 @@ class MultiSelectComponent {
          */
         this.removeTag = new EventEmitter();
         this.hostClasses = true;
+        /**
+         * @hidden
+         */
+        this.windowSize = 'large';
         this.initialized = false;
         this._size = 'medium';
         this._rounded = 'medium';
@@ -7827,7 +8694,7 @@ class MultiSelectComponent {
         this._isFocused = false;
         this.selectedDataItems = [];
         this.customValueSubject = new Subject();
-        this.observableSubscriptions = new Subscription();
+        this.subs = new Subscription();
         validatePackage(packageMetadata);
         this.popupMouseDownHandler = this.onMouseDown.bind(this);
         this.data = [];
@@ -7835,6 +8702,18 @@ class MultiSelectComponent {
         this.subscribeEvents();
         this.subscribeTouchEvents();
     }
+    /**
+     * @hidden
+     */
+    get actionSheet() {
+        return this.responsiveRendererComponent?.actionSheet;
+    }
+    /**
+     * @hidden
+     */
+    get actionSheetSearchBar() {
+        return this.responsiveRendererComponent?.actionSheetSearchBar;
+    }
     /**
      * @hidden
      */
@@ -7877,6 +8756,16 @@ class MultiSelectComponent {
             }
         }
     }
+    /**
+     * @hidden
+     */
+    onAdaptiveTextBoxChange(text) {
+        if (this.filterable) {
+            this.filterChange.emit(text);
+            return;
+        }
+        this.searchTextAndFocus(text);
+    }
     /**
      * Blurs the MultiSelect.
      */
@@ -7889,28 +8778,30 @@ class MultiSelectComponent {
      * @hidden
      */
     onSearchBarBlur() {
-        if (!this.isFocused) {
-            return;
-        }
-        this.isFocused = false;
-        if (hasObservers(this.onBlur) ||
-            hasObservers(this.filterChange) ||
-            hasObservers(this.close) ||
-            isUntouched(this.wrapper.nativeElement)) {
-            this._zone.run(() => {
-                this.closePopup();
-                if (!(this.isOpen && this.allowCustom)) {
+        if (!this.isActionSheetExpanded) {
+            if (!this.isFocused) {
+                return;
+            }
+            this.isFocused = false;
+            if (hasObservers(this.onBlur) ||
+                hasObservers(this.filterChange) ||
+                hasObservers(this.close) ||
+                isUntouched(this.wrapper.nativeElement)) {
+                this._zone.run(() => {
+                    this.closePopup();
+                    if (!(this.isOpen && this.allowCustom)) {
+                        this.clearFilter();
+                    }
+                    this.onBlur.emit();
+                    this.onTouchedCallback();
+                });
+            }
+            else {
+                if (!this.allowCustom) {
                     this.clearFilter();
                 }
-                this.onBlur.emit();
-                this.onTouchedCallback();
-            });
-        }
-        else {
-            if (!this.allowCustom) {
-                this.clearFilter();
+                this.closePopup();
             }
-            this.closePopup();
         }
     }
     /**
@@ -7923,7 +8814,14 @@ class MultiSelectComponent {
      * @hidden
      */
     onResize() {
-        if (this._open) {
+        if (this.isAdaptiveModeEnabled && this.windowSize !== windowSize()) {
+            if (this.isOpen) {
+                this.togglePopup(false);
+            }
+            this.windowSize = windowSize();
+            this.cdr.detectChanges();
+        }
+        if (this.isOpen && !this.isActionSheetExpanded) {
             const popupWrapper = this.popupRef.popupElement;
             const { min, max } = this.width;
             popupWrapper.style.minWidth = min;
@@ -8064,6 +8962,22 @@ class MultiSelectComponent {
     get placeholder() {
         return this.selectedDataItems.length ? '' : this._placeholder;
     }
+    /**
+     * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+     * By default the ActionSheet subtitle uses the text provided for the `placeholder` of the AutoComplete.
+    */
+    set subtitle(_subtitle) {
+        this._subtitle = _subtitle;
+    }
+    get subtitle() {
+        return this._subtitle || this.placeholder;
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
+    }
     /**
      * Defines a Boolean function that is executed for each data item in the component
      * ([see examples]({% slug disableditems_multiselect %})). Determines whether the item will be disabled.
@@ -8108,6 +9022,24 @@ class MultiSelectComponent {
     get popupSettings() {
         return this._popupSettings;
     }
+    /**
+     * Sets the height of the options list in the popup. By default, `listHeight` is 200px.
+     *
+     * > The `listHeight` property affects only the list of options and not the whole popup container.
+     * > To set the height of the popup container, use `popupSettings.height`.
+     *
+     * > When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
+     */
+    set listHeight(_listHeight) {
+        this._listHeight = _listHeight;
+    }
+    ;
+    get listHeight() {
+        if (this.isAdaptive) {
+            return;
+        }
+        return this._listHeight;
+    }
     /**
      * Specifies the type of the selected value.
      * If set to `true`, the selected value has to be of the primitive type
@@ -8131,6 +9063,19 @@ class MultiSelectComponent {
     get isLoading() {
         return this.loading;
     }
+    /**
+     * @hidden
+     */
+    get isActionSheetExpanded() {
+        return this.actionSheet?.expanded;
+    }
+    ;
+    /**
+     * @hidden
+     */
+    get isAdaptive() {
+        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
+    }
     get listContainerClasses() {
         const containerClasses = ['k-list-container', 'k-reset'];
         if (this.popupSettings.popupClass) {
@@ -8181,6 +9126,21 @@ class MultiSelectComponent {
             return 'visible';
         }
     }
+    /**
+     * @hidden
+     */
+    applyValue() {
+        this.value = this._valueHolder;
+        this.emitValueChange();
+        this.togglePopup(false);
+    }
+    /**
+     * @hidden
+     */
+    cancelValue() {
+        this._valueHolder = [];
+        this.togglePopup(false);
+    }
     /**
      * @hidden
      */
@@ -8212,8 +9172,12 @@ class MultiSelectComponent {
                 event.added.forEach((itemIndex) => {
                     const dataItem = this.dataService.itemAt(itemIndex);
                     const newItem = (this.valuePrimitive && isPresent(dataItem) && isPresent(dataItem[this.valueField])) ? dataItem[this.valueField] : dataItem;
+                    this._valueHolder = this.value.filter(filter);
                     if (newItem) {
-                        this.value = [...this.value, newItem];
+                        this._valueHolder = [...this.value, newItem];
+                        if (!this.isAdaptive) {
+                            this.value = this._valueHolder;
+                        }
                     }
                 });
             }
@@ -8221,7 +9185,10 @@ class MultiSelectComponent {
                 event.removed.forEach((itemIndex) => {
                     const dataItem = this.dataService.itemAt(itemIndex);
                     const filter = (item) => getter(item, this.valueField) !== getter(dataItem, this.valueField);
-                    this.value = this.value.filter(filter);
+                    this._valueHolder = this.value.filter(filter);
+                    if (!this.isAdaptive) {
+                        this.value = this._valueHolder;
+                    }
                 });
                 this.cdr.detectChanges();
             }
@@ -8236,17 +9203,25 @@ class MultiSelectComponent {
             if (isPresent(event.added)) {
                 const dataItem = this.dataService.itemAt(event.added);
                 const newItem = (this.valuePrimitive && isPresent(dataItem) && isPresent(dataItem[this.valueField])) ? dataItem[this.valueField] : dataItem;
-                this.value = [...this.value, newItem];
+                this._valueHolder = [...this.value, newItem];
+                if (!this.isAdaptive) {
+                    this.value = this._valueHolder;
+                }
             }
             if (isPresent(event.removed)) {
                 const dataItem = this.dataService.itemAt(event.removed);
                 const filter = (item) => getter(item, this.valueField) !== getter(dataItem, this.valueField);
-                this.value = this.value.filter(filter);
+                this._valueHolder = this.value.filter(filter);
+                if (!this.isAdaptive) {
+                    this.value = this._valueHolder;
+                }
                 this.selectionService.focused = event.removed;
                 this.cdr.detectChanges();
             }
         }
-        this.emitValueChange();
+        if (!this.isAdaptive) {
+            this.emitValueChange();
+        }
     }
     /**
      * @hidden
@@ -8331,6 +9306,9 @@ class MultiSelectComponent {
         const navigateInput = this.text && event.keyCode !== Keys.ArrowDown && event.keyCode !== Keys.ArrowUp;
         const selectValue = this.text && event.keyCode === Keys.Enter || event.keyCode === Keys.Escape;
         const deleteTag = !this.text && event.keyCode === Keys.Backspace && this.tags.length > 0;
+        if (event.keyCode === Keys.Backspace && this.isActionSheetExpanded) {
+            return;
+        }
         if (deleteTag) {
             this.handleBackspace();
             return;
@@ -8348,7 +9326,8 @@ class MultiSelectComponent {
             originalEvent: eventData
         });
         if (action !== NavigationAction.Undefined &&
-            ((action === NavigationAction.Enter && this.isOpen) || action !== NavigationAction.Enter)) {
+            ((action === NavigationAction.Enter && this.isOpen) || action !== NavigationAction.Enter) &&
+            (!this.isActionSheetExpanded && action === NavigationAction.Tab)) {
             event.preventDefault();
         }
     }
@@ -8405,11 +9384,11 @@ class MultiSelectComponent {
     ngOnInit() {
         this.renderer.removeAttribute(this.wrapper.nativeElement, "tabindex");
         this.createCustomValueStream();
-        this.localizationChangeSubscription = this.localization
+        this.subs.add(this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             this.cdr.markForCheck();
-        });
+        }));
         this.setState(this.value);
         this.setComponentClasses();
         this.initialized = true;
@@ -8428,18 +9407,21 @@ class MultiSelectComponent {
         }
     }
     ngAfterViewInit() {
+        this.windowSize = windowSize();
+        this.cdr.detectChanges();
         this.searchbar.setInputSize();
-        this.observableSubscriptions.add(this.renderer.listen(this.wrapper.nativeElement, 'mousedown', this.handleMousedown.bind(this)));
-        this.observableSubscriptions.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
+        this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'mousedown', this.handleMousedown.bind(this)));
+        this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
+        this.renderer.setAttribute(this.actionSheet?.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
     }
     ngOnDestroy() {
         this._toggle(false);
         this.unsubscribeEvents();
     }
     /**
-     * Toggles the visibility of the popup
+     * Toggles the visibility of the popup or actionSheet
      * ([see example]({% slug openstate_multiselect %}#toc-setting-the-initially-opened-component)).
-     * If you use the `toggle` method to open or close the popup, the respective `open` and `close` events will not be fired.
+     * If you use the `toggle` method to open or close the popup or actionSheet, the respective `open` and `close` events will not be fired.
      *
      * @param open - The state of the popup.
      */
@@ -8453,10 +9435,10 @@ class MultiSelectComponent {
         });
     }
     /**
-     * Returns the current open state of the popup.
+     * Returns the current open state. Returns `true` if the popup or actionSheet is open.
      */
     get isOpen() {
-        return this._open;
+        return isTruthy(this._open || this.isActionSheetExpanded);
     }
     /**
      * Resets the value of the MultiSelect.
@@ -8505,6 +9487,15 @@ class MultiSelectComponent {
         this.tags = this.tagMapper(this.selectedDataItems.slice(0));
         this.cdr.markForCheck();
     }
+    /**
+     * @hidden
+     */
+    handleClick() {
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.togglePopup(true);
+        }
+    }
     set isFocused(isFocused) {
         this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
         this._isFocused = isFocused;
@@ -8543,7 +9534,7 @@ class MultiSelectComponent {
                     this.optionsList.scrollWithOnePage(NavigationAction[event.originalEvent.code]);
                 }
             })
-        ].forEach(s => this.observableSubscriptions.add(s));
+        ].forEach(s => this.subs.add(s));
     }
     subscribeTouchEvents() {
         if (!isDocumentAvailable() || !this.touchEnabled) {
@@ -8567,13 +9558,10 @@ class MultiSelectComponent {
         if (!isDocumentAvailable()) {
             return;
         }
-        this.observableSubscriptions.unsubscribe();
+        this.subs.unsubscribe();
         if (this.customValueSubscription) {
             this.customValueSubscription.unsubscribe();
         }
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
-        }
         if (this.touchstartDisposeHandler) {
             this.touchstartDisposeHandler();
         }
@@ -8688,7 +9676,7 @@ class MultiSelectComponent {
     }
     handleItemChange(event) {
         this.change(event);
-        if (this.autoClose && !event.preventClosingPopup) {
+        if (this.autoClose && !event.preventClosingPopup && !this.isActionSheetExpanded) {
             this.togglePopup(false);
         }
         if (this.autoClose || !this.filterable) {
@@ -8696,21 +9684,23 @@ class MultiSelectComponent {
         }
     }
     handleMousedown(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();
-            }
-            // The check is needed otherwise when appended to the component, the popup reopens on click
-            // https://github.com/telerik/kendo-angular/issues/3738
-            if ((this.popupRef && this.popupRef.popupElement.contains(event.target))) {
-                return;
+        if (!this.isActionSheetExpanded) {
+            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();
+                }
+                // The check is needed otherwise when appended to the component, the popup reopens on click
+                // https://github.com/telerik/kendo-angular/issues/3738
+                if ((this.popupRef && this.popupRef.popupElement.contains(event.target))) {
+                    return;
+                }
+                event.preventDefault();
+                this.togglePopup(!this.isOpen);
             }
-            event.preventDefault();
-            this.togglePopup(!this.isOpen);
         }
     }
     handleKeydown(event) {
@@ -8739,7 +9729,7 @@ class MultiSelectComponent {
         else {
             service.add(focusedIndex);
         }
-        if (this.autoClose) {
+        if (this.autoClose && !this.isActionSheetExpanded) {
             this.togglePopup(false);
         }
         if (this.autoClose || !this.filterable) {
@@ -8910,6 +9900,9 @@ class MultiSelectComponent {
         this.togglePopup(true);
         this.focusedTagIndex = undefined;
     }
+    /**
+     * @hidden
+     */
     togglePopup(open) {
         const isDisabled = this.disabled || this.readonly;
         const sameState = this.isOpen === open;
@@ -8934,6 +9927,10 @@ class MultiSelectComponent {
     _toggle(open) {
         this._open = open;
         this.destroyPopup();
+        if (this.isActionSheetExpanded) {
+            this.closeActionSheet();
+            this.focus();
+        }
         if (this._open) {
             this.createPopup();
         }
@@ -8950,6 +9947,11 @@ class MultiSelectComponent {
         if (this.virtual) {
             this.virtual.skip = 0;
         }
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.openActionSheet();
+            return;
+        }
         const horizontalAlign = this.direction === "rtl" ? "right" : "left";
         const anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
         const popupPosition = { horizontal: horizontalAlign, vertical: "top" };
@@ -8981,7 +9983,9 @@ class MultiSelectComponent {
         }
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
+            setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
             this.optionsList.scrollToItem(this.selectionService.focused);
+            this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
         });
         this.popupRef.popupClose.subscribe(() => {
@@ -9035,9 +10039,28 @@ class MultiSelectComponent {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         }
     }
+    closeActionSheet() {
+        this.actionSheet.toggle(false);
+        this.actionSheetSearchBar.value = '';
+        this.filterable && this.filterChange.emit('');
+        this.closed.emit();
+    }
+    openActionSheet() {
+        this.windowSize = windowSize();
+        this.actionSheet.toggle(true);
+        this.cdr.detectChanges();
+        setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+        this.title = setActionSheetTitle(this.searchbar.input, this.title);
+        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
+        this.cdr.detectChanges();
+        this.opened.emit();
+        this.optionsList.scrollToItem(this.selectionService.focused);
+        this.selectionService.focus(this.selectionService.focused);
+        this.actionSheetSearchBar.focus();
+    }
 }
-MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: DataService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
+MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2$1.PopupService }, { token: DataService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
         MULTISELECT_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -9054,7 +10077,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         {
             provide: KendoInput, useExisting: forwardRef(() => MultiSelectComponent)
         }
-    ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "customItemTemplate", first: true, predicate: CustomItemTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "tagTemplate", first: true, predicate: TagTemplateDirective, descendants: true }, { propertyName: "groupTagTemplate", first: true, predicate: GroupTagTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoMultiSelect"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "customItemTemplate", first: true, predicate: CustomItemTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "tagTemplate", first: true, predicate: TagTemplateDirective, descendants: true }, { propertyName: "groupTagTemplate", first: true, predicate: GroupTagTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoMultiSelect"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoMultiSelectLocalizedMessages
             i18n-noDataText="kendo.multiselect.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -9064,6 +10087,12 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
 
             i18n-popupLabel="kendo.multiselect.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
+
+            i18n-applyButton="kendo.multiselect.applyButton|The text of the Apply button in the action sheet"
+            applyButton="Apply"
+
+            i18n-cancelButton="kendo.multiselect.cancelButton|The text of the Cancel button in the action sheet"
+            cancelButton="Cancel"
         >
         </ng-container>
         <kendo-taglist
@@ -9094,13 +10123,14 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 [activeDescendant]="activeDescendant"
                 [userInput]="text"
                 [disabled]="disabled"
-                [readonly]="readonly"
+                [readonly]="readonly || this.isAdaptive"
                 [tabIndex]="tabIndex"
                 [placeholder]="placeholder"
                 (onNavigate)="handleNavigate($event)"
                 (valueChange)="handleFilter($event)"
                 (onBlur)="onSearchBarBlur()"
                 (onFocus)="onSearchBarFocus()"
+                (click)="handleClick()"
             >
             </kendo-searchbar>
         </kendo-taglist>
@@ -9127,6 +10157,29 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         >
         </span>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+        <ng-container #container></ng-container>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="true"
+            [showActionButtons]="true"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            [placeholder]="placeholder"
+            (navigate)="handleNavigate($event)"
+            (onApply)="applyValue()"
+            (onCancel)="cancelValue()"
+            >
+        </responsive-renderer>
+
+        <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
                 [templateContext]="{
@@ -9165,17 +10218,18 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 [data]="data"
                 [textField]="textField"
                 [valueField]="valueField"
-                [height]="listHeight"
                 [template]="template"
                 [groupTemplate]="groupTemplate"
                 [fixedGroupTemplate]="fixedGroupTemplate"
+                [height]="listHeight"
                 [show]="isOpen"
                 [multipleSelection]="true"
                 [virtual]="virtual"
                 (pageChange)="pageChange($event)"
                 [checkboxes]="checkboxes"
                 [isMultiselect]="true"
-                >
+                [isActionSheetExpanded]="isActionSheetExpanded"
+            >
             </kendo-list>
             <!--no data template-->
             <div class="k-no-data" *ngIf="data.length === 0">
@@ -9195,11 +10249,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 }">
             </ng-template>
         </ng-template>
-        <ng-template [ngIf]="isOpen">
-            <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        </ng-template>
-        <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
+  `, isInline: true, components: [{ type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -9233,6 +10283,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-popupLabel="kendo.multiselect.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
+
+            i18n-applyButton="kendo.multiselect.applyButton|The text of the Apply button in the action sheet"
+            applyButton="Apply"
+
+            i18n-cancelButton="kendo.multiselect.cancelButton|The text of the Cancel button in the action sheet"
+            cancelButton="Cancel"
         >
         </ng-container>
         <kendo-taglist
@@ -9263,13 +10319,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [activeDescendant]="activeDescendant"
                 [userInput]="text"
                 [disabled]="disabled"
-                [readonly]="readonly"
+                [readonly]="readonly || this.isAdaptive"
                 [tabIndex]="tabIndex"
                 [placeholder]="placeholder"
                 (onNavigate)="handleNavigate($event)"
                 (valueChange)="handleFilter($event)"
                 (onBlur)="onSearchBarBlur()"
                 (onFocus)="onSearchBarFocus()"
+                (click)="handleClick()"
             >
             </kendo-searchbar>
         </kendo-taglist>
@@ -9296,6 +10353,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         >
         </span>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+        <ng-container #container></ng-container>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="true"
+            [showActionButtons]="true"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            [placeholder]="placeholder"
+            (navigate)="handleNavigate($event)"
+            (onApply)="applyValue()"
+            (onCancel)="cancelValue()"
+            >
+        </responsive-renderer>
+
+        <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
                 [templateContext]="{
@@ -9334,17 +10414,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [data]="data"
                 [textField]="textField"
                 [valueField]="valueField"
-                [height]="listHeight"
                 [template]="template"
                 [groupTemplate]="groupTemplate"
                 [fixedGroupTemplate]="fixedGroupTemplate"
+                [height]="listHeight"
                 [show]="isOpen"
                 [multipleSelection]="true"
                 [virtual]="virtual"
                 (pageChange)="pageChange($event)"
                 [checkboxes]="checkboxes"
                 [isMultiselect]="true"
-                >
+                [isActionSheetExpanded]="isActionSheetExpanded"
+            >
             </kendo-list>
             <!--no data template-->
             <div class="k-no-data" *ngIf="data.length === 0">
@@ -9364,18 +10445,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }">
             </ng-template>
         </ng-template>
-        <ng-template [ngIf]="isOpen">
-            <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        </ng-template>
-        <ng-container #container></ng-container>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i2.PopupService }, { type: DataService }, { type: SelectionService }, { type: NavigationService }, { type: DisabledItemsService }, { type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i2$1.PopupService }, { type: DataService }, { type: SelectionService }, { type: NavigationService }, { type: DisabledItemsService }, { type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }]; }, propDecorators: { focusableId: [{
+                }] }]; }, propDecorators: { responsiveRendererComponent: [{
+                type: ViewChild,
+                args: [ResponsiveRendererComponent]
+            }], focusableId: [{
                 type: Input
             }], autoClose: [{
                 type: Input
@@ -9402,6 +10482,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], placeholder: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], itemDisabled: [{
@@ -9658,6 +10744,10 @@ const getRowWidthFromColumnsMeta = (columns) => {
 class MultiColumnComboBoxComponent extends ComboBoxComponent {
     constructor(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, wrapper, touchEnabled) {
         super(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, touchEnabled);
+        /**
+         * @hidden
+         */
+        this.animationDuration = animationDuration;
         /**
          * @hidden
          */
@@ -9698,14 +10788,14 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
      * @hidden
      */
     get listContainerClasses() {
-        return [
-            'k-popup',
-            'k-dropdowngrid-popup'
-        ].concat(this.popupSettings.popupClass || []);
+        return ['k-popup', 'k-dropdowngrid-popup'].concat(this.popupSettings.popupClass || []);
     }
     ngAfterViewInit() {
         this.updateColumnsMediaState();
         this.addWindowResizeListener();
+        this.windowSize = windowSize();
+        this.cdr.detectChanges();
+        this.renderer.setAttribute(this.actionSheet?.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
     }
     ngOnDestroy() {
         super.ngOnDestroy();
@@ -9741,7 +10831,7 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
         if (!isDevMode()) {
             return;
         }
-        if (isPresent(this.data) && this.data.length > 0 && this.data.some(item => !isObject(item))) {
+        if (isPresent(this.data) && this.data.length > 0 && this.data.some((item) => !isObject(item))) {
             throw new Error(MultiColumnComboBoxMessages.data);
         }
         if (!isPresent(this.valueField) || !isPresent(this.textField)) {
@@ -9753,26 +10843,26 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
         if (!isDocumentAvailable()) {
             return;
         }
-        this.zone.runOutsideAngular(() => this.removeWindowResizeListener = this.renderer.listen(window, 'resize', this.updateColumnsMediaState.bind(this)));
+        this.zone.runOutsideAngular(() => (this.removeWindowResizeListener = this.renderer.listen(window, 'resize', this.updateColumnsMediaState.bind(this))));
     }
     updateColumnsMediaState() {
-        if (!(isPresent(this.columns) && isDocumentAvailable())) {
+        if (!(isPresent(this.columns) && isDocumentAvailable()) || this.isActionSheetExpanded) {
             return;
         }
-        this.columns.forEach(column => {
+        this.columns.forEach((column) => {
             const matchesMedia = !column.media || window.matchMedia(column.media).matches;
             if (column.matchesMedia !== matchesMedia) {
                 column.matchesMedia = matchesMedia;
                 if (this.isOpen) {
                     // enter the zone only if the popup is actually open
                     // update its width in case it's dependent on the columns' width
-                    this.zone.run(() => this.popupRef.popupElement.style.width = this.popupWidth.max);
+                    this.zone.run(() => (this.popupRef.popupElement.style.width = this.popupWidth.max));
                 }
             }
         });
     }
 }
-MultiColumnComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiColumnComboBoxComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }], target: i0.ɵɵFactoryTarget.Component });
+MultiColumnComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiColumnComboBoxComponent, deps: [{ token: i1.LocalizationService }, { token: i2$1.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TOUCH_ENABLED }], target: i0.ɵɵFactoryTarget.Component });
 MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiColumnComboBoxComponent, selector: "kendo-multicolumncombobox", host: { properties: { "class.k-dropdowngrid": "this.hostClasses", "class.k-disabled": "this.isDisabled" } }, providers: [
         SelectionService,
         DataService,
@@ -9781,35 +10871,36 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
         LocalizationService,
         {
             provide: L10N_PREFIX,
-            useValue: 'kendo.multicolumncombobox'
+            useValue: 'kendo.multicolumncombobox',
         },
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => MultiColumnComboBoxComponent)
+            useExisting: forwardRef(() => MultiColumnComboBoxComponent),
         },
         {
             provide: KendoInput,
-            useExisting: forwardRef(() => MultiColumnComboBoxComponent)
+            useExisting: forwardRef(() => MultiColumnComboBoxComponent),
         },
         {
             provide: FilterableComponent,
-            useExisting: forwardRef(() => MultiColumnComboBoxComponent)
-        }
+            useExisting: forwardRef(() => MultiColumnComboBoxComponent),
+        },
     ], queries: [{ propertyName: "columns", predicate: ComboBoxColumnComponent }], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <ng-container
             kendoMultiColumnComboBoxLocalizedMessages
-
-            i18n-noDataText="kendo.multicolumncombobox.noDataText|The text displayed in the popup when there are no items"
+            i18n-noDataText="
+                kendo.multicolumncombobox.noDataText|The text displayed in the popup when there are no items
+            "
             noDataText="NO DATA FOUND"
-
             i18n-clearTitle="kendo.multicolumncombobox.clearTitle|The title of the clear button"
             clearTitle="clear"
-
             i18n-selectButtonText="kendo.multicolumncombobox.selectButtonText|The title of the select button"
             selectButtonText="Select"
-
-            i18n-popupLabel="kendo.multicolumncombobox.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+            i18n-popupLabel="
+                kendo.multicolumncombobox.popupLabel|The label of the popup element that contains the list of options
+                when its role is 'region'
+            "
             popupLabel="Options list"
         ></ng-container>
         <kendo-searchbar
@@ -9832,11 +10923,12 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             (valueChange)="searchBarChange($event)"
             (onBlur)="handleBlur()"
             (onFocus)="handleFocus()"
+            (click)="handleClick()"
         >
         </kendo-searchbar>
 
         <span
-            *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
+            *ngIf="clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large')  && text?.length"
             class="k-clear-value"
             [style.visibility]="clearButtonVisiblity"
             aria-hidden="true"
@@ -9846,11 +10938,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 mousedown: preventEventDefault
             }"
         >
-            <kendo-icon-wrapper
-                name="x"
-                [svgIcon]="xIcon"
-            >
-            </kendo-icon-wrapper>
+            <kendo-icon-wrapper name="x" [svgIcon]="xIcon"> </kendo-icon-wrapper>
         </span>
 
         <button
@@ -9866,16 +10954,36 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 mousedown: preventEventDefault
             }"
         >
-            <kendo-icon-wrapper
-                *ngIf="!loading && !iconClass"
-                name="caret-alt-down"
-                [svgIcon]="caretAltDownIcon"
-            >
+            <kendo-icon-wrapper *ngIf="!loading && !iconClass" name="caret-alt-down" [svgIcon]="caretAltDownIcon">
             </kendo-icon-wrapper>
             <span *ngIf="loading || iconClass" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
         </button>
 
         <ng-template #popupTemplate>
+            <!--popup/actionsheet content-->
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"> </kendo-resize-sensor>
+
+        <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->
+        <ng-container #container></ng-container>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="true"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            (navigate)="handleNavigate($event)"
+            [placeholder]="placeholder"
+            >
+        </responsive-renderer>
+
+        <ng-template #sharedPopupActionSheetTemplate>
             <!--user-defined header template -->
             <ng-template
                 *ngIf="headerTemplate"
@@ -9884,23 +10992,15 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 }"
             >
             </ng-template>
-
             <!--data table-->
             <div class="k-data-table" [ngClass]="tableSizeClass">
-
                 <!--grid header-->
-                <div
-                    #header
-                    class="k-table-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">
-                                    <col
-                                        *ngIf="!column.hidden && column.matchesMedia"
-                                        [style.width.px]="column.width"
-                                    />
+                                    <col *ngIf="!column.hidden && column.matchesMedia" [style.width.px]="column.width" />
                                 </ng-container>
                             </colgroup>
                             <thead class="k-table-thead">
@@ -9931,7 +11031,6 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                         </table>
                     </div>
                 </div>
-
                 <!-- item template -->
                 <ng-template #rowTemplate let-dataItem>
                     <ng-container *ngFor="let column of columns">
@@ -9958,8 +11057,6 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                         </span>
                     </ng-container>
                 </ng-template>
-
-                <!--list-->
                 <kendo-list
                     #optionsList
                     [optionPrefix]="optionPrefix"
@@ -9979,10 +11076,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 </kendo-list>
 
                 <!--no-data template-->
-                <div
-                    class="k-no-data"
-                    *ngIf="data.length === 0"
-                >
+                <div class="k-no-data" *ngIf="data.length === 0">
                     <ng-template
                         [ngIf]="noDataTemplate"
                         [templateContext]="{
@@ -10013,21 +11107,10 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                             </tfoot>
                         </table>
                     </div>
-                </ng-container>
-
+                </ng-container>    
             </div>
-
         </ng-template>
-
-        <kendo-resize-sensor
-            *ngIf="isOpen"
-            (resize)="onResize()"
-        >
-        </kendo-resize-sensor>
-
-        <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->
-        <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, isInline: true, components: [{ type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -10039,37 +11122,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         LocalizationService,
                         {
                             provide: L10N_PREFIX,
-                            useValue: 'kendo.multicolumncombobox'
+                            useValue: 'kendo.multicolumncombobox',
                         },
                         {
                             multi: true,
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => MultiColumnComboBoxComponent)
+                            useExisting: forwardRef(() => MultiColumnComboBoxComponent),
                         },
                         {
                             provide: KendoInput,
-                            useExisting: forwardRef(() => MultiColumnComboBoxComponent)
+                            useExisting: forwardRef(() => MultiColumnComboBoxComponent),
                         },
                         {
                             provide: FilterableComponent,
-                            useExisting: forwardRef(() => MultiColumnComboBoxComponent)
-                        }
+                            useExisting: forwardRef(() => MultiColumnComboBoxComponent),
+                        },
                     ],
                     selector: 'kendo-multicolumncombobox',
                     template: `
         <ng-container
             kendoMultiColumnComboBoxLocalizedMessages
-
-            i18n-noDataText="kendo.multicolumncombobox.noDataText|The text displayed in the popup when there are no items"
+            i18n-noDataText="
+                kendo.multicolumncombobox.noDataText|The text displayed in the popup when there are no items
+            "
             noDataText="NO DATA FOUND"
-
             i18n-clearTitle="kendo.multicolumncombobox.clearTitle|The title of the clear button"
             clearTitle="clear"
-
             i18n-selectButtonText="kendo.multicolumncombobox.selectButtonText|The title of the select button"
             selectButtonText="Select"
-
-            i18n-popupLabel="kendo.multicolumncombobox.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
+            i18n-popupLabel="
+                kendo.multicolumncombobox.popupLabel|The label of the popup element that contains the list of options
+                when its role is 'region'
+            "
             popupLabel="Options list"
         ></ng-container>
         <kendo-searchbar
@@ -10092,11 +11176,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             (valueChange)="searchBarChange($event)"
             (onBlur)="handleBlur()"
             (onFocus)="handleFocus()"
+            (click)="handleClick()"
         >
         </kendo-searchbar>
 
         <span
-            *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
+            *ngIf="clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large')  && text?.length"
             class="k-clear-value"
             [style.visibility]="clearButtonVisiblity"
             aria-hidden="true"
@@ -10106,11 +11191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 mousedown: preventEventDefault
             }"
         >
-            <kendo-icon-wrapper
-                name="x"
-                [svgIcon]="xIcon"
-            >
-            </kendo-icon-wrapper>
+            <kendo-icon-wrapper name="x" [svgIcon]="xIcon"> </kendo-icon-wrapper>
         </span>
 
         <button
@@ -10126,16 +11207,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 mousedown: preventEventDefault
             }"
         >
-            <kendo-icon-wrapper
-                *ngIf="!loading && !iconClass"
-                name="caret-alt-down"
-                [svgIcon]="caretAltDownIcon"
-            >
+            <kendo-icon-wrapper *ngIf="!loading && !iconClass" name="caret-alt-down" [svgIcon]="caretAltDownIcon">
             </kendo-icon-wrapper>
             <span *ngIf="loading || iconClass" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
         </button>
 
         <ng-template #popupTemplate>
+            <!--popup/actionsheet content-->
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"> </kendo-resize-sensor>
+
+        <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->
+        <ng-container #container></ng-container>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="true"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            (navigate)="handleNavigate($event)"
+            [placeholder]="placeholder"
+            >
+        </responsive-renderer>
+
+        <ng-template #sharedPopupActionSheetTemplate>
             <!--user-defined header template -->
             <ng-template
                 *ngIf="headerTemplate"
@@ -10144,23 +11245,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }"
             >
             </ng-template>
-
             <!--data table-->
             <div class="k-data-table" [ngClass]="tableSizeClass">
-
                 <!--grid header-->
-                <div
-                    #header
-                    class="k-table-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">
-                                    <col
-                                        *ngIf="!column.hidden && column.matchesMedia"
-                                        [style.width.px]="column.width"
-                                    />
+                                    <col *ngIf="!column.hidden && column.matchesMedia" [style.width.px]="column.width" />
                                 </ng-container>
                             </colgroup>
                             <thead class="k-table-thead">
@@ -10191,7 +11284,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         </table>
                     </div>
                 </div>
-
                 <!-- item template -->
                 <ng-template #rowTemplate let-dataItem>
                     <ng-container *ngFor="let column of columns">
@@ -10218,8 +11310,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         </span>
                     </ng-container>
                 </ng-template>
-
-                <!--list-->
                 <kendo-list
                     #optionsList
                     [optionPrefix]="optionPrefix"
@@ -10239,10 +11329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 </kendo-list>
 
                 <!--no-data template-->
-                <div
-                    class="k-no-data"
-                    *ngIf="data.length === 0"
-                >
+                <div class="k-no-data" *ngIf="data.length === 0">
                     <ng-template
                         [ngIf]="noDataTemplate"
                         [templateContext]="{
@@ -10273,23 +11360,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             </tfoot>
                         </table>
                     </div>
-                </ng-container>
-
+                </ng-container>    
             </div>
-
         </ng-template>
-
-        <kendo-resize-sensor
-            *ngIf="isOpen"
-            (resize)="onResize()"
-        >
-        </kendo-resize-sensor>
-
-        <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->
-        <ng-container #container></ng-container>
-    `
+    `,
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: SelectionService }, { type: NavigationService }, { type: DisabledItemsService }, { type: DataService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2$1.PopupService }, { type: SelectionService }, { type: NavigationService }, { type: DisabledItemsService }, { type: DataService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [TOUCH_ENABLED]
                 }] }]; }, propDecorators: { hostClasses: [{
@@ -10351,6 +11427,10 @@ class DropDownTreeComponent {
         this.cdr = cdr;
         this.localization = localization;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.animationDuration = animationDuration;
         /**
          * @hidden
          */
@@ -10428,13 +11508,7 @@ class DropDownTreeComponent {
          * The hint which is displayed when the component is empty.
          */
         this.placeholder = "";
-        /**
-         * Sets the height of the options list. By default, `listHeight` is 200px.
-         *
-         * > The `listHeight` property affects only the list of options and not the whole popup container.
-         * > To set the height of the popup container, use `popupSettings.height`.
-         */
-        this.listHeight = 200;
+        this._listHeight = 200;
         /**
          * Sets the disabled state of the component.
          */
@@ -10483,6 +11557,28 @@ class DropDownTreeComponent {
          * @hidden
          */
         this.selectedKeys = [];
+        /**
+         * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+         */
+        this.adaptiveMode = 'none';
+        /**
+         * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+         * By default the ActionSheet title uses the text provided for the label of the AutoComplete.
+         */
+        this.title = '';
+        /**
+         * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+         * By default the ActionSheet subtitle uses the text provided for the `placeholder` of the AutoComplete.
+        */
+        this.subtitle = '';
+        /**
+        * @hidden
+        */
+        this.windowSize = 'large';
+        /**
+         * @hidden
+         */
+        this.isActionSheetExpanded = false;
         /**
          * @hidden
          */
@@ -10515,6 +11611,21 @@ class DropDownTreeComponent {
         this.subscribeTouchEvents();
         this.subscribeFocusEvents();
     }
+    /**
+     * @hidden
+     */
+    get actionSheet() {
+        return this.responsiveRendererComponent?.actionSheet;
+    }
+    /**
+     * @hidden
+     */
+    get actionSheetSearchBar() {
+        return this.responsiveRendererComponent?.actionSheetSearchBar;
+    }
+    get isReadonly() {
+        return this.readonly ? '' : null;
+    }
     get hostAriaInvalid() {
         return this.formControl ? this.formControl.invalid.toString() : null;
     }
@@ -10545,9 +11656,6 @@ class DropDownTreeComponent {
     get hostAriaAutocomplete() {
         return this.filterable ? 'list' : null;
     }
-    get isReadonly() {
-        return this.readonly ? '' : null;
-    }
     set treeview(treeview) {
         if (treeview) {
             if (this.isFocused && !this.filterable || this.touchEnabled) {
@@ -10614,6 +11722,24 @@ class DropDownTreeComponent {
     get dataItem() {
         return this._dataItem ? this._dataItem : this.value;
     }
+    /**
+     * Sets the height of the options list in the popup. By default, `listHeight` is 200px.
+     *
+     * > The `listHeight` property affects only the list of options and not the whole popup container.
+     * > To set the height of the popup container, use `popupSettings.height`.
+     *
+     * > When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
+     */
+    set listHeight(_listHeight) {
+        this._listHeight = _listHeight;
+    }
+    ;
+    get listHeight() {
+        if (this.isAdaptive) {
+            return;
+        }
+        return this._listHeight;
+    }
     /**
      * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      */
@@ -10708,10 +11834,10 @@ class DropDownTreeComponent {
         return isPresent(popupHeight) ? `${popupHeight}px` : 'auto';
     }
     /**
-     * Returns the current open state of the popup.
+     * Returns the current open state. Returns `true` if the popup or actionSheet is open.
      */
     get isOpen() {
-        return isPresent(this.popupRef);
+        return isTruthy(isPresent(this.popupRef) || this.isActionSheetExpanded);
     }
     get clearButtonVisiblity() {
         if (this.touchEnabled) {
@@ -10721,6 +11847,26 @@ class DropDownTreeComponent {
     get isFilterActive() {
         return this.filterInput && document.activeElement === this.filterInput.nativeElement;
     }
+    /**
+     * @hidden
+     */
+    onFilterChange(text) {
+        if (this.filterable) {
+            this.filterChange.emit(text);
+        }
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptive() {
+        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
+    }
     /**
      * @hidden
      *
@@ -10835,8 +11981,27 @@ class DropDownTreeComponent {
         this.verifySettings();
     }
     ngAfterViewInit() {
+        this.windowSize = windowSize();
         this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'click', this.handleClick.bind(this)));
         this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
+        this.renderer.setAttribute(this.actionSheet?.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
+    }
+    /**
+     * @hidden
+     */
+    onResize() {
+        if (this.isAdaptiveModeEnabled && this.windowSize !== windowSize()) {
+            if (this.isOpen) {
+                this.togglePopup(false);
+            }
+            this.windowSize = windowSize();
+        }
+        if (this.isOpen && !this.isActionSheetExpanded) {
+            const popupWrapper = this.popupRef.popupElement;
+            const { min, max } = this.width;
+            popupWrapper.style.minWidth = min;
+            popupWrapper.style.width = max;
+        }
     }
     /**
      * @hidden
@@ -10887,19 +12052,21 @@ class DropDownTreeComponent {
      * @hidden
      */
     handleBlur(e) {
-        const relatedTarget = e && e.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.wrapper.nativeElement)) {
-            this._zone.run(() => {
-                this.onBlur.emit();
-                this.onTouchedCallback();
-            });
+        if (!this.isActionSheetExpanded) {
+            const relatedTarget = e && e.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.wrapper.nativeElement)) {
+                this._zone.run(() => {
+                    this.onBlur.emit();
+                    this.onTouchedCallback();
+                });
+            }
         }
     }
     /**
@@ -10909,7 +12076,11 @@ class DropDownTreeComponent {
         if (this.disabled || this.readonly) {
             return;
         }
-        if (!this.isFilterActive && isLetter(event.key)) {
+        if (event.keyCode === Keys.Tab && this.isActionSheetExpanded) {
+            this.togglePopup(false);
+            return;
+        }
+        if (!this.isFilterActive && isLetter(event.key) && !this.actionSheetSearchBar?.onFocus) {
             this.printableCharacters.next(event.key);
         }
         const eventData = event;
@@ -10957,9 +12128,9 @@ class DropDownTreeComponent {
         this.dataItem = undefined;
     }
     /**
-     * Toggles the visibility of the popup
+     * Toggles the visibility of the popup or actionSheet.
      * ([see example]({% slug openstate_ddt %})).
-     * If you use the `toggle` method to open or close the popup, the `open` and `close` events will not be fired.
+     * If you use the `toggle` method to open or close the popup or actionSheet, the `open` and `close` events will not be fired.
      *
      * @param open - The state of the popup.
      */
@@ -11069,7 +12240,7 @@ class DropDownTreeComponent {
      * @hidden
      */
     handleFilterInputChange(input) {
-        this.filterChange.next(input.value);
+        this.filterChange.next(typeof (input) === 'string' ? input : input.value);
         this.allNodesHidden = this.nodes.every((node, index) => !this.isVisible(node, String(index)));
     }
     /**
@@ -11129,8 +12300,24 @@ class DropDownTreeComponent {
             if (this.popupRef) {
                 this._searchableNodes = getSearchableItems(this.treeViewId, this.popupRef.popupElement);
             }
+            if (this.isActionSheetExpanded) {
+                this._searchableNodes = getSearchableItems(this.treeViewId, this.actionSheet.element.nativeElement);
+            }
         });
     }
+    /**
+     * @hidden
+     */
+    onExpand() {
+        this._searchableNodes = getSearchableItems(this.treeViewId, this.actionSheet.element.nativeElement);
+        this.isActionSheetExpanded = true;
+    }
+    /**
+     * @hidden
+     */
+    onCollapse() {
+        this.isActionSheetExpanded = false;
+    }
     /**
      * @hidden
      *
@@ -11165,6 +12352,12 @@ class DropDownTreeComponent {
         return eventArgs.isDefaultPrevented();
     }
     createPopup() {
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.openActionSheet();
+            this.cdr.detectChanges();
+            return;
+        }
         const horizontalAlign = this.direction === "rtl" ? "right" : "left";
         const anchorPosition = { horizontal: horizontalAlign, vertical: 'bottom' };
         const popupPosition = { horizontal: horizontalAlign, vertical: 'top' };
@@ -11197,6 +12390,9 @@ class DropDownTreeComponent {
         });
     }
     destroyPopup() {
+        if (this.isActionSheetExpanded) {
+            this.closeActionSheet();
+        }
         if (this.popupRef) {
             this.popupRef.close();
             this.popupRef = null;
@@ -11213,10 +12409,13 @@ class DropDownTreeComponent {
     }
     handleClick(e) {
         // The check is needed otherwise when appended to the component, the popup reopens on click
-        // https://github.com/telerik/kendo-angular/issues/3738        
-        if ((this.popupRef && !this.popupRef.popupElement.contains(e.target))
-            || (!this.popupRef && !e.target.className.includes('k-treeview-leaf'))) {
-            this.togglePopup(!this.isOpen);
+        // https://github.com/telerik/kendo-angular/issues/3738
+        this.windowSize = windowSize();
+        if (!this.isActionSheetExpanded) {
+            if ((this.popupRef && !this.popupRef.popupElement.contains(e.target))
+                || (!this.popupRef && !e.target.className.includes('k-treeview-leaf'))) {
+                this.togglePopup(!this.isOpen);
+            }
         }
     }
     handleEscape() {
@@ -11286,7 +12485,12 @@ class DropDownTreeComponent {
                 }
                 event.originalEvent.preventDefault();
                 if (this.filterable && this.treeview['navigationService']['activeIndex'] === '0') {
-                    this.filterInput.nativeElement.focus();
+                    if (this.isActionSheetExpanded) {
+                        this.actionSheetSearchBar.focus();
+                    }
+                    else {
+                        this.filterInput.nativeElement.focus();
+                    }
                 }
             })
         ].forEach(sub => this.subs.add(sub));
@@ -11371,9 +12575,30 @@ class DropDownTreeComponent {
             }
         });
     }
+    closeActionSheet() {
+        this.actionSheet.toggle(false);
+        if (this.filterable) {
+            this.actionSheetSearchBar.value = '';
+            this.filterChange.emit('');
+        }
+        this.wrapper.nativeElement.focus();
+        this.closed.emit();
+    }
+    openActionSheet() {
+        this.windowSize = windowSize();
+        this.isActionSheetExpanded = true;
+        this.actionSheet.toggle(true);
+        this.title = setActionSheetTitle(this.wrapper, this.title);
+        this.cdr.detectChanges();
+        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
+        this.cdr.detectChanges();
+        this.opened.emit();
+        this.removeTreeViewFromTabOrder();
+        this.filterable && this.actionSheetSearchBar.focus();
+    }
 }
-DropDownTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropDownTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DropDownTreeComponent, selector: "kendo-dropdowntree", inputs: { loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-picker": "this.hostClasses", "attr.aria-invalid": "this.hostAriaInvalid", "class.k-disabled": "this.isDisabled", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.aria-busy": "this.isBusy", "attr.aria-controls": "this.hostAriaControls", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "attr.readonly": "this.isReadonly" } }, providers: [
+DropDownTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropDownTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2$1.PopupService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DropDownTreeComponent, selector: "kendo-dropdowntree", inputs: { loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-picker": "this.hostClasses", "attr.readonly": "this.isReadonly", "attr.aria-invalid": "this.hostAriaInvalid", "class.k-disabled": "this.isDisabled", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.aria-busy": "this.isBusy", "attr.aria-controls": "this.hostAriaControls", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-autocomplete": "this.hostAriaAutocomplete" } }, providers: [
         DataService,
         SelectionService,
         NavigationService,
@@ -11400,7 +12625,7 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             provide: ExpandableComponent,
             useExisting: forwardRef(() => DropDownTreeComponent)
         }
-    ], queries: [{ propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "nodeTemplate", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "valueTemplate", first: true, predicate: ValueTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "treeview", first: true, predicate: ["treeview"], descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], exportAs: ["kendoDropDownTree"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "nodeTemplate", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "valueTemplate", first: true, predicate: ValueTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "treeview", first: true, predicate: ["treeview"], descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], exportAs: ["kendoDropDownTree"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoDropDownTreeLocalizedMessages
             i18n-noDataText="kendo.dropdowntree.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -11464,8 +12689,26 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
-            <span
-                *ngIf="filterable"
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <ng-container #container></ng-container>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="filterable"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (onExpand)="onExpand()"
+            (onCollapse)="onCollapse()"
+            (textInputChange)="handleFilterInputChange($event)"
+        >
+        </responsive-renderer>
+        <ng-template #sharedPopupActionSheetTemplate>
+        <span
+                *ngIf="filterable && !isActionSheetExpanded"
                 class="k-list-filter"
             >
                 <span
@@ -11551,8 +12794,9 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </ng-template>
             </div>
         </ng-template>
-        <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i1$1.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+    `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i1$1.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropDownTreeComponent, decorators: [{
             type: Component,
             args: [{
@@ -11650,8 +12894,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
-            <span
-                *ngIf="filterable"
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <ng-container #container></ng-container>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="filterable"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (onExpand)="onExpand()"
+            (onCollapse)="onCollapse()"
+            (textInputChange)="handleFilterInputChange($event)"
+        >
+        </responsive-renderer>
+        <ng-template #sharedPopupActionSheetTemplate>
+        <span
+                *ngIf="filterable && !isActionSheetExpanded"
                 class="k-list-filter"
             >
                 <span
@@ -11737,21 +12999,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 </ng-template>
             </div>
         </ng-template>
-        <ng-container #container></ng-container>
+
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i2.PopupService }, { type: NavigationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i2$1.PopupService }, { type: NavigationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }]; }, propDecorators: { hostClasses: [{
+                }] }]; }, propDecorators: { responsiveRendererComponent: [{
+                type: ViewChild,
+                args: [ResponsiveRendererComponent]
+            }], hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-dropdowntree']
             }, {
                 type: HostBinding,
                 args: ['class.k-picker']
+            }], isReadonly: [{
+                type: HostBinding,
+                args: ['attr.readonly']
             }], hostAriaInvalid: [{
                 type: HostBinding,
                 args: ['attr.aria-invalid']
@@ -11791,9 +13060,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], hostAriaAutocomplete: [{
                 type: HostBinding,
                 args: ['attr.aria-autocomplete']
-            }], isReadonly: [{
-                type: HostBinding,
-                args: ['attr.readonly']
             }], noDataTemplate: [{
                 type: ContentChild,
                 args: [NoDataTemplateDirective, { static: false }]
@@ -11897,6 +13163,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], focusableId: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
             }] } });
 
 /**
@@ -12351,6 +13623,10 @@ class MultiSelectTreeComponent {
         this.cdr = cdr;
         this.lookup = lookup;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.animationDuration = animationDuration;
         /**
          * @hidden
          */
@@ -12363,6 +13639,23 @@ class MultiSelectTreeComponent {
         this.treeViewId = `k-${guid$1()}`;
         this.role = 'combobox';
         this.ariaHasPopup = 'tree';
+        /**
+         * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+         */
+        this.adaptiveMode = 'none';
+        /**
+         * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+         * By default the ActionSheet title uses the text provided for the label of the AutoComplete.
+         */
+        this.title = '';
+        /**
+        * @hidden
+        */
+        this.windowSize = 'large';
+        /**
+         * @hidden
+         */
+        this.isActionSheetExpanded = false;
         /**
          * 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.
@@ -12371,14 +13664,8 @@ class MultiSelectTreeComponent {
         /**
          * The hint which is displayed when the component is empty.
          */
-        this.placeholder = "";
-        /**
-         * Sets the height of the options list. By default, `listHeight` is 200px.
-         *
-         * > The `listHeight` property affects only the list of options and not the whole popup container.
-         * > To set the height of the popup container, use `popupSettings.height`.
-         */
-        this.listHeight = 200;
+        this.placeholder = '';
+        this._listHeight = 200;
         /**
          * Sets the disabled state of the component.
          */
@@ -12521,6 +13808,7 @@ class MultiSelectTreeComponent {
         this._popupSettings = DEFAULT_POPUP_SETTINGS;
         this._checkableSettings = DEFAULT_CHECKABLE_SETTINGS;
         this._isFocused = false;
+        this._initiallyCheckedItems = [];
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
@@ -12581,7 +13869,47 @@ class MultiSelectTreeComponent {
     /**
      * @hidden
      */
-    handleKeydown(event) {
+    onFilterChange(text) {
+        if (this.filterable) {
+            this.filterChange.emit(text);
+        }
+    }
+    /**
+     * @hidden
+     */
+    onExpand() {
+        this._searchableNodes = getSearchableItems(this.treeViewId, this.actionSheet.element.nativeElement);
+        this.isActionSheetExpanded = true;
+    }
+    /**
+     * @hidden
+     */
+    onCollapse() {
+        this.isActionSheetExpanded = false;
+    }
+    /**
+     * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+     * By default the ActionSheet subtitle uses the text provided for the `placeholder` of the AutoComplete.
+    */
+    set subtitle(_subtitle) {
+        this._subtitle = _subtitle;
+    }
+    get subtitle() {
+        return this._subtitle || this.placeholder;
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
+    }
+    /**
+     * @hidden
+     */
+    handleKeydown(event, input) {
+        if (input) {
+            event.stopImmediatePropagation();
+        }
         const deleteTag = this.isWrapperActive && event.keyCode === Keys.Backspace && this.tags.length > 0;
         if (deleteTag) {
             this.handleBackspace();
@@ -12590,7 +13918,7 @@ class MultiSelectTreeComponent {
         if (this.disabled || this.readonly) {
             return;
         }
-        if (!this.isFilterActive && isLetter(event.key)) {
+        if (!this.isFilterActive && isLetter(event.key) && !this.actionSheetSearchBar?.onFocus) {
             this.printableCharacters.next(event.key);
         }
         const eventData = event;
@@ -12605,6 +13933,24 @@ class MultiSelectTreeComponent {
             this.treeview?.element.nativeElement.dispatchEvent(spaceKeyDownEvent);
         }
     }
+    /**
+     * @hidden
+     */
+    get actionSheet() {
+        return this.responsiveRendererComponent?.actionSheet;
+    }
+    /**
+     * @hidden
+     */
+    get actionSheetSearchBar() {
+        return this.responsiveRendererComponent?.actionSheetSearchBar;
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptive() {
+        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
+    }
     set treeview(treeview) {
         this._treeview = treeview;
         if (treeview) {
@@ -12790,6 +14136,24 @@ class MultiSelectTreeComponent {
             };
         });
     }
+    /**
+     * Sets the height of the options list in the popup. By default, `listHeight` is 200px.
+     *
+     * > The `listHeight` property affects only the list of options and not the whole popup container.
+     * > To set the height of the popup container, use `popupSettings.height`.
+     *
+     * > When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
+     */
+    set listHeight(_listHeight) {
+        this._listHeight = _listHeight;
+    }
+    ;
+    get listHeight() {
+        if (this.isAdaptive) {
+            return;
+        }
+        return this._listHeight;
+    }
     /**
      * @hidden
      */
@@ -12808,10 +14172,10 @@ class MultiSelectTreeComponent {
         return this._isFocused;
     }
     /**
-     * Returns the current open state of the popup.
+     * Returns the current open state. Returns `true` if the popup or actionSheet is open.
      */
     get isOpen() {
-        return isPresent(this.popupRef);
+        return isTruthy(isPresent(this.popupRef) || this.isActionSheetExpanded);
     }
     get width() {
         const wrapperWidth = this.wrapper.nativeElement.offsetWidth;
@@ -12922,6 +14286,23 @@ class MultiSelectTreeComponent {
     get isCheckAllActive() {
         return this.checkAllInput && document.activeElement === this.checkAllInput.nativeElement;
     }
+    /**
+     * @hidden
+     */
+    onResize() {
+        if (this.isAdaptiveModeEnabled && this.windowSize !== windowSize()) {
+            if (this.isOpen) {
+                this.togglePopup(false);
+            }
+            this.windowSize = windowSize();
+        }
+        if (this.isOpen && !this.isActionSheetExpanded) {
+            const popupWrapper = this.popupRef.popupElement;
+            const { min, max } = this.width;
+            popupWrapper.style.minWidth = min;
+            popupWrapper.style.width = max;
+        }
+    }
     ngOnInit() {
         this.subs.add(this.printableCharacters.pipe(tap((char) => {
             this._typedValue += char;
@@ -12940,10 +14321,13 @@ class MultiSelectTreeComponent {
             this.cdr.markForCheck();
         }));
         this.setComponentClasses();
+        this._initiallyCheckedItems = [...this.checkedItems];
     }
     ngAfterViewInit() {
+        this.windowSize = windowSize();
         this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'click', this.handleClick.bind(this)));
         this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
+        this.renderer.setAttribute(this.actionSheet?.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
     }
     /**
      * @hidden
@@ -12986,6 +14370,23 @@ class MultiSelectTreeComponent {
     ngAfterContentChecked() {
         this.verifySettings();
     }
+    /**
+     * @hidden
+     */
+    applyValue() {
+        this.value = this._tempValue;
+        this._initiallyCheckedItems = [...this.checkedItems];
+        this.emitValueChange(this.value);
+        this.setTags();
+        this.toggle(false);
+    }
+    /**
+     * @hidden
+     */
+    cancelValue() {
+        this.checkedItems = [...this._initiallyCheckedItems];
+        this.togglePopup(false);
+    }
     ngAfterContentInit() {
         this.isContentInit = true;
         // Still need to keep the call of 'registerLookupItems()' from ngAfterContentInit in the cases when the data is passed initially
@@ -13042,7 +14443,7 @@ class MultiSelectTreeComponent {
         this.valueDepth = [];
     }
     /**
-     * Toggles the visibility of the popup
+     * Toggles the visibility of the popup or actionSheet
      * ([see example]({% slug openstate_multiselecttree %})).
      * If you use the `toggle` method to open or close the popup, the `open` and `close` events will not be fired.
      *
@@ -13087,19 +14488,21 @@ class MultiSelectTreeComponent {
      * @hidden
      */
     handleBlur(e) {
-        const relatedTarget = e && e.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.wrapper.nativeElement)) {
-            this._zone.run(() => {
-                this.onBlur.emit();
-                this.onTouchedCallback();
-            });
+        if (!this.isActionSheetExpanded) {
+            const relatedTarget = e && e.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.wrapper.nativeElement)) {
+                this._zone.run(() => {
+                    this.onBlur.emit();
+                    this.onTouchedCallback();
+                });
+            }
         }
     }
     /**
@@ -13326,6 +14729,12 @@ class MultiSelectTreeComponent {
         return eventArgs.isDefaultPrevented();
     }
     createPopup() {
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.openActionSheet();
+            this.cdr.detectChanges();
+            return;
+        }
         const horizontalAlign = this.direction === "rtl" ? "right" : "left";
         const anchorPosition = { horizontal: horizontalAlign, vertical: 'bottom' };
         const popupPosition = { horizontal: horizontalAlign, vertical: 'top' };
@@ -13359,6 +14768,9 @@ class MultiSelectTreeComponent {
         });
     }
     destroyPopup() {
+        if (this.isActionSheetExpanded) {
+            this.closeActionSheet();
+        }
         if (this.popupRef) {
             this.popupRef.close();
             this.popupRef = null;
@@ -13377,7 +14789,7 @@ class MultiSelectTreeComponent {
     handleClick(e) {
         // The check is needed otherwise when appended to the component, the popup reopens on click
         // https://github.com/telerik/kendo-angular/issues/3738
-        if ((this.popupRef && this.popupRef.popupElement.contains(e.target))) {
+        if ((this.popupRef && this.popupRef.popupElement.contains(e.target)) || this.isActionSheetExpanded) {
             return;
         }
         this.togglePopup(!this.isOpen);
@@ -13437,7 +14849,9 @@ class MultiSelectTreeComponent {
         this.handleBlur(event);
     }
     handleTabKey() {
-        this.focus();
+        if (!this.isActionSheetExpanded) {
+            this.focus();
+        }
         if (this.isOpen) {
             this.treeview.blur();
             this.removeTreeViewFromTabOrder();
@@ -13465,7 +14879,7 @@ class MultiSelectTreeComponent {
         }
         else if (this.isCheckAllActive || isFirstNodeActive) {
             if (this.filterable) {
-                this.filterInput.nativeElement.focus();
+                this.isActionSheetExpanded ? this.actionSheetSearchBar.focus() : this.filterInput.nativeElement.focus();
             }
             else {
                 this.focus();
@@ -13558,7 +14972,9 @@ class MultiSelectTreeComponent {
     }
     setState() {
         if (isPresent(this.dataItems) && isPresent(this.valueField)) {
-            this.setTags();
+            if (!this.isActionSheetExpanded) {
+                this.setTags();
+            }
             this.checkedItems = this.dataItems.slice();
         }
         this.cdr.markForCheck();
@@ -13572,8 +14988,13 @@ class MultiSelectTreeComponent {
         const newValue = this.valuePrimitive ?
             value.map(item => valueFrom(item, this.valueField)) :
             value.map(item => item.dataItem);
-        this.value = newValue;
-        this.emitValueChange(this.value);
+        if (this.isActionSheetExpanded) {
+            this._tempValue = newValue.slice();
+        }
+        else {
+            this.value = newValue;
+            this.emitValueChange(this.value);
+        }
     }
     /**
      * @hidden
@@ -13583,6 +15004,9 @@ class MultiSelectTreeComponent {
             if (this.popupRef) {
                 this._searchableNodes = getSearchableItems(this.treeViewId, this.popupRef.popupElement);
             }
+            if (this.isActionSheetExpanded) {
+                this._searchableNodes = getSearchableItems(this.treeViewId, this.actionSheet.element.nativeElement);
+            }
         });
     }
     /**
@@ -13647,9 +15071,28 @@ class MultiSelectTreeComponent {
             });
         }
     }
+    closeActionSheet() {
+        this.wrapper.nativeElement.focus();
+        this.actionSheet.toggle(false);
+        if (this.filterable) {
+            this.actionSheetSearchBar.value = '';
+            this.filterChange.emit('');
+        }
+        this.closed.emit();
+    }
+    openActionSheet() {
+        this.windowSize = windowSize();
+        this.actionSheet.toggle(true);
+        this.title = setActionSheetTitle(this.wrapper, this.title);
+        this.cdr.detectChanges();
+        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
+        this.cdr.detectChanges();
+        this.opened.emit();
+        this.filterable && this.actionSheetSearchBar.focus();
+    }
 }
-MultiSelectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: i0.Renderer2 }, { token: NavigationService }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: MultiSelectTreeLookupService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: { tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-multiselect-tree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-controls": "this.hostAriaControls", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant" } }, providers: [
+MultiSelectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2$1.PopupService }, { token: i0.Renderer2 }, { token: NavigationService }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: MultiSelectTreeLookupService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: { adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-multiselect-tree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-controls": "this.hostAriaControls", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant" } }, providers: [
         LocalizationService,
         NavigationService,
         DataService,
@@ -13677,7 +15120,7 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             provide: KendoInput,
             useExisting: forwardRef(() => MultiSelectTreeComponent)
         }
-    ], queries: [{ propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "nodeTemplate", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "tagTemplate", first: true, predicate: TagTemplateDirective, descendants: true }, { propertyName: "groupTagTemplate", first: true, predicate: GroupTagTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "treeview", first: true, predicate: ["treeview"], descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "checkAllInput", first: true, predicate: ["checkAllInput"], descendants: true }], exportAs: ["kendoMultiSelectTree"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "nodeTemplate", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "tagTemplate", first: true, predicate: TagTemplateDirective, descendants: true }, { propertyName: "groupTagTemplate", first: true, predicate: GroupTagTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "treeview", first: true, predicate: ["treeview"], descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "checkAllInput", first: true, predicate: ["checkAllInput"], descendants: true }], exportAs: ["kendoMultiSelectTree"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoMultiSelectTreeLocalizedMessages
             i18n-noDataText="kendo.multiselecttree.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -13693,6 +15136,12 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
 
             i18n-popupLabel="kendo.multiselecttree.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
+
+            i18n-applyButton="kendo.multiselecttree.applyButton|The text of the Apply button in the action sheet"
+            applyButton="Apply"
+
+            i18n-cancelButton="kendo.multiselecttree.cancelButton|The text of the Cancel button in the action sheet"
+            cancelButton="Cancel"
         >
         </ng-container>
         <kendo-taglist
@@ -13739,10 +15188,30 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
         >
         </span>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <ng-container #container></ng-container>
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="filterable"
+            [showActionButtons]="true"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (onExpand)="onExpand()"
+            (onCollapse)="onCollapse()"
+            (textInputChange)="onFilterChange($event)"
+            (onApply)="applyValue()"
+            (onCancel)="cancelValue()"
+            >
+        </responsive-renderer>
+        <ng-template #sharedPopupActionSheetTemplate>
             <span
-                *ngIf="filterable"
+                *ngIf="filterable && !isActionSheetExpanded"
                 class="k-list-filter"
-            >
+                >
                 <span
                     class="k-textbox k-input"
                     [ngClass]="filterInputClasses"
@@ -13760,7 +15229,7 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
                         (input)="handleFilterInputChange($event.target)"
                         [filterInput]="filterable && !touchEnabled"
                         [attr.aria-label]="messageFor('filterInputLabel')"
-                        (keydown)="handleKeydown($event)"
+                        (keydown)="handleKeydown($event, filterInput)"
                         [(ngModel)]="filter"
                         class="k-input-inner"
                         role="textbox"
@@ -13782,7 +15251,7 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
                 [templateContext]="{
                     templateRef: headerTemplate?.templateRef
                 }">
-            </ng-template>
+            </ng-template>            
             <div *ngIf="checkAll" class="k-check-all">
                 <input
                     #checkAllInput
@@ -13865,8 +15334,9 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
                 </ng-template>
             </div>
         </ng-template>
-        <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i1$1.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }] });
+
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+    `, isInline: true, components: [{ type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i1$1.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectTreeComponent, decorators: [{
             type: Component,
             args: [{
@@ -13917,6 +15387,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-popupLabel="kendo.multiselecttree.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
+
+            i18n-applyButton="kendo.multiselecttree.applyButton|The text of the Apply button in the action sheet"
+            applyButton="Apply"
+
+            i18n-cancelButton="kendo.multiselecttree.cancelButton|The text of the Cancel button in the action sheet"
+            cancelButton="Cancel"
         >
         </ng-container>
         <kendo-taglist
@@ -13963,10 +15439,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         >
         </span>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <ng-container #container></ng-container>
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="filterable"
+            [showActionButtons]="true"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (onExpand)="onExpand()"
+            (onCollapse)="onCollapse()"
+            (textInputChange)="onFilterChange($event)"
+            (onApply)="applyValue()"
+            (onCancel)="cancelValue()"
+            >
+        </responsive-renderer>
+        <ng-template #sharedPopupActionSheetTemplate>
             <span
-                *ngIf="filterable"
+                *ngIf="filterable && !isActionSheetExpanded"
                 class="k-list-filter"
-            >
+                >
                 <span
                     class="k-textbox k-input"
                     [ngClass]="filterInputClasses"
@@ -13984,7 +15480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         (input)="handleFilterInputChange($event.target)"
                         [filterInput]="filterable && !touchEnabled"
                         [attr.aria-label]="messageFor('filterInputLabel')"
-                        (keydown)="handleKeydown($event)"
+                        (keydown)="handleKeydown($event, filterInput)"
                         [(ngModel)]="filter"
                         class="k-input-inner"
                         role="textbox"
@@ -14006,7 +15502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [templateContext]="{
                     templateRef: headerTemplate?.templateRef
                 }">
-            </ng-template>
+            </ng-template>            
             <div *ngIf="checkAll" class="k-check-all">
                 <input
                     #checkAllInput
@@ -14089,10 +15585,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 </ng-template>
             </div>
         </ng-template>
-        <ng-container #container></ng-container>
+
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i2.PopupService }, { type: i0.Renderer2 }, { type: NavigationService }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: MultiSelectTreeLookupService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i2$1.PopupService }, { type: i0.Renderer2 }, { type: NavigationService }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: MultiSelectTreeLookupService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -14151,6 +15648,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], ariaActiveDescendant: [{
                 type: HostBinding,
                 args: ['attr.aria-activedescendant']
+            }], adaptiveMode: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], responsiveRendererComponent: [{
+                type: ViewChild,
+                args: [ResponsiveRendererComponent]
             }], headerTemplate: [{
                 type: ContentChild,
                 args: [HeaderTemplateDirective, { static: false }]
@@ -14688,7 +16194,8 @@ const INTERNAL_DIRECTIVES = [
     TemplateContextDirective,
     TagListComponent,
     CheckDirective,
-    CheckAllDirective
+    CheckAllDirective,
+    ResponsiveRendererComponent
 ];
 /**
  * @hidden
@@ -14703,21 +16210,23 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         TemplateContextDirective,
         TagListComponent,
         CheckDirective,
-        CheckAllDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule], exports: [ListComponent,
+        CheckAllDirective,
+        ResponsiveRendererComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule, ActionSheetModule, ButtonModule, TextBoxModule], exports: [ListComponent,
         ListItemDirective,
         SelectableDirective,
         SearchBarComponent,
         TemplateContextDirective,
         TagListComponent,
         CheckDirective,
-        CheckAllDirective, CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule] });
-SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, imports: [[CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule], CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule] });
+        CheckAllDirective,
+        ResponsiveRendererComponent, CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule, ActionSheetModule, ButtonModule, TextBoxModule] });
+SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, imports: [[CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule, ActionSheetModule, ButtonModule, TextBoxModule], CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule, ActionSheetModule, ButtonModule, TextBoxModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [INTERNAL_DIRECTIVES],
-                    exports: [INTERNAL_DIRECTIVES, CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule],
-                    imports: [CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule]
+                    exports: [INTERNAL_DIRECTIVES, CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule, ActionSheetModule, ButtonModule, TextBoxModule],
+                    imports: [CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule, IconsModule, ActionSheetModule, ButtonModule, TextBoxModule]
                 }]
         }] });
 
@@ -15064,5 +16573,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AutoCompleteComponent, AutoCompleteModule, CheckAllDirective, CheckDirective, ColumnCellTemplateDirective, ColumnHeaderTemplateDirective, ComboBoxColumnComponent, ComboBoxComponent, ComboBoxModule, CustomItemTemplateDirective, CustomMessagesComponent, DropDownListComponent, DropDownListModule, DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, DropDownTreesModule, DropDownsModule, FilterDirective, FilterInputDirective, FilterableComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTagTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ListComponent, ListItemDirective, LocalizedMessagesDirective, MultiColumnComboBoxComponent, MultiSelectComponent, MultiSelectModule, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, MultiSelectTreeSummaryTagDirective, NoDataTemplateDirective, NodeTemplateDirective, PreventableEvent, RemoveTagEvent, SearchBarComponent, SelectableDirective, SharedDirectivesModule, SharedModule, SummaryTagDirective, TagListComponent, TagTemplateDirective, TemplateContextDirective, ValueTemplateDirective };
+export { AutoCompleteComponent, AutoCompleteModule, CheckAllDirective, CheckDirective, ColumnCellTemplateDirective, ColumnHeaderTemplateDirective, ComboBoxColumnComponent, ComboBoxComponent, ComboBoxModule, CustomItemTemplateDirective, CustomMessagesComponent, DropDownListComponent, DropDownListModule, DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, DropDownTreesModule, DropDownsModule, FilterDirective, FilterInputDirective, FilterableComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTagTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ListComponent, ListItemDirective, LocalizedMessagesDirective, MultiColumnComboBoxComponent, MultiSelectComponent, MultiSelectModule, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, MultiSelectTreeSummaryTagDirective, NoDataTemplateDirective, NodeTemplateDirective, PreventableEvent, RemoveTagEvent, ResponsiveRendererComponent, SearchBarComponent, SelectableDirective, SharedDirectivesModule, SharedModule, SummaryTagDirective, TagListComponent, TagTemplateDirective, TemplateContextDirective, ValueTemplateDirective };