@progress/kendo-angular-dropdowns 19.0.0-develop.3 → 19.0.0-develop.31

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

@@ -5,7 +5,7 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, HostBinding, Output, Directive, Injectable, HostListener, ViewChildren, ViewChild, forwardRef, isDevMode, ViewContainerRef, ContentChild, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import * as i10 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, isObjectPresent, removeHTMLAttributes, parseAttributes, isSafari, Keys, setHTMLAttributes, EventsOutsideAngularDirective, isChanged, TemplateContextDirective, ResizeSensorComponent, closest as closest$1, isControlRequired, hasObservers, KendoInput, SuffixTemplateDirective, PrefixTemplateDirective, SeparatorComponent, MultiTabStop, anyChanged, guid as guid$1, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_ADORNMENTS, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, isObjectPresent, removeHTMLAttributes, parseAttributes, isSafari, Keys, setHTMLAttributes, isChanged, TemplateContextDirective, ResizeSensorComponent, closest as closest$1, isControlRequired, hasObservers, KendoInput, SuffixTemplateDirective, PrefixTemplateDirective, SeparatorComponent, MultiTabStop, anyChanged, EventsOutsideAngularDirective, guid as guid$1, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_ADORNMENTS, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
 export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective, ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
 import * as i7 from '@progress/kendo-angular-utils';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
@@ -20,7 +20,7 @@ import * as i2 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { map, switchMap, take, auditTime, tap, filter, partition, throttleTime, catchError, skipWhile, concatMap, takeUntil, debounceTime } from 'rxjs/operators';
 import { NgIf, NgStyle, NgFor, NgClass, NgTemplateOutlet } from '@angular/common';
-import { xIcon, caretAltDownIcon, searchIcon, xCircleIcon, plusIcon } from '@progress/kendo-svg-icons';
+import { checkIcon, xIcon, caretAltDownIcon, searchIcon, xCircleIcon } from '@progress/kendo-svg-icons';
 import { IconComponent, IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
 import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
 import { TextBoxComponent, TextBoxPrefixTemplateDirective } from '@progress/kendo-angular-inputs';
@@ -37,8 +37,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1745498596,
-    version: '19.0.0-develop.3',
+    publishDate: 1747923818,
+    version: '19.0.0-develop.31',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -405,28 +405,6 @@ const getSearchableItems = (treeViewId, element) => {
  * @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
  */
@@ -748,8 +726,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     selector: 'input[kendoSearchbar]',
                     template: ``,
-                    standalone: true,
-                    imports: [EventsOutsideAngularDirective]
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { tagListId: [{
                 type: Input
@@ -1894,6 +1871,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['click', ['$event']]
             }] } });
 
+/**
+ * Renders the content of the custom list item in the MultiSelect
+ * ([see example](slug:templates_multiselect#toc-rendering-custom-item-content)).
+ * The template context is set to the current component.
+ * To get a reference to the current text that is typed by the
+ * user, use the `let-customItem` directive.
+ *
+ * > The `CustomItemTemplate` directive can only be used with the MultiSelect component.
+ *
+ * @example
+ * ```ts
+ * _@Component({
+ * selector: 'my-app',
+ * template: `
+ *  <kendo-multiselect [data]="listItems" [allowCustom]="true">
+ *    <ng-template kendoMultiSelectCustomItemTemplate let-customItem>
+ *      <span>New Item: {{customItem}}</span>
+ *    </ng-template>
+ *  </kendo-multiselect>
+ * `
+ * })
+ * class AppComponent {
+ *   public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
+ * }
+ * ```
+ *
+ */
+class CustomItemTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CustomItemTemplateDirective, isStandalone: true, selector: "[kendoMultiSelectCustomItemTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoMultiSelectCustomItemTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
 /**
  * @hidden
  */
@@ -1925,6 +1945,10 @@ class ListComponent {
     isActionSheetExpanded;
     showStickyHeader;
     rowWidth;
+    customItemTemplate;
+    text;
+    allowCustom;
+    defaultItem;
     set data(data) {
         this._data = data[0] && data[0].header ? data.slice(0) : data;
     }
@@ -2269,6 +2293,12 @@ class ListComponent {
     isItemSelected(index) {
         return this.selectionService.isSelected(index) || null;
     }
+    get isDisabledDefaultItem() {
+        return this.disabledItemsService.isItemDisabled(this.defaultItem);
+    }
+    getDefaultItemText() {
+        return getter(this.defaultItem, this.textField);
+    }
     /**
      * Sets the list's content overflow (hides/shows scrollbar)
      */
@@ -2316,7 +2346,41 @@ class ListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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 });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListComponent, isStandalone: true, 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", showStickyHeader: "showStickyHeader", rowWidth: "rowWidth", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize", popupListScroll: "popupListScroll" }, 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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListComponent, isStandalone: true, 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", showStickyHeader: "showStickyHeader", rowWidth: "rowWidth", customItemTemplate: "customItemTemplate", text: "text", allowCustom: "allowCustom", defaultItem: "defaultItem", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize", popupListScroll: "popupListScroll" }, 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="defaultItem && !template"
+        class="k-list-optionlabel"
+        [ngClass]="{ 'k-disabled': isDisabledDefaultItem }"
+        kendoDropDownsSelectable
+        [index]="-1">
+        {{ getDefaultItemText() }}
+    </div>
+    <div *ngIf="defaultItem && template"
+        class="k-list-optionlabel"
+        [ngClass]="{ 'k-disabled': isDisabledDefaultItem }"
+        kendoDropDownsSelectable
+        [index]="-1">
+        <ng-template
+            [templateContext]="{
+                templateRef: template.templateRef,
+                $implicit: defaultItem
+            }">
+        </ng-template>
+    </div>
+    <div *ngIf="allowCustom && text"
+        kendoDropDownsSelectable
+        [multipleSelection]="true"
+        [index]="-1"
+        class="k-list-custom-value">
+        <ng-template *ngIf="customItemTemplate; else default_custom_item_template"
+            [templateContext]="{
+                templateRef: customItemTemplate.templateRef,
+                $implicit: text
+            }">
+        </ng-template>
+        <ng-template #default_custom_item_template>
+            Use "{{text}}"
+        </ng-template>
+    </div>
     <div *ngIf="dataService.grouped && showStickyHeader"
         [class]="listGroupStickyHeaderClass"
         [ngStyle]="{
@@ -2337,116 +2401,116 @@ class ListComponent {
         [style.maxHeight.px]="height"
         unselectable="on"
         (scroll)="popupListScroll.emit($event)">
-    <ul #list
-        role="listbox"
-        [class]="listClass"
-        [attr.id]="id"
-        [attr.aria-live]="ariaLive"
-        [attr.aria-multiselectable]="isMultiselect"
-        [attr.aria-hidden]="!show">
-         <ng-template *ngIf="!dataService.grouped && show" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
-            <li
-                role="option"
-                kendoDropDownsSelectable
-                [checkboxes]="checkboxes"
-                [height]="virtual?.itemHeight"
-                [index]="itemIndex + startFrom"
-                [multipleSelection]="multipleSelection"
-                [attr.id]="optionPrefix + '-' + itemIndex"
-                [attr.tabIndex]="-1"
-                [attr.aria-selected]="isItemSelected(itemIndex)"
-                [class]="listItemClass"
-                [ngClass]="{
-                    'k-disabled': isDisabled(itemIndex),
-                    'k-table-alt-row': isAltRow(itemIndex)
-                }"
-                [style.width.px]="rowWidth ?? null"
-            >
-                <input
-                    *ngIf="checkboxes.enabled"
-                    type="checkbox"
-                    class="k-checkbox"
-                    role="presentation"
-                    tabindex="-1"
-                    aria-hidden="true"
-                    [ngClass]="checkboxClasses"
-                    (change)="onCheckedChange($event, itemIndex + startFrom)"
-                    [checked]="isChecked(itemIndex)"
-                />
-                <ng-template *ngIf="template"
-                    [templateContext]="{
-                        templateRef: template.templateRef,
-                        $implicit: dataItem
-                    }">
-                </ng-template>
-                <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem) }}</span></ng-template>
-            </li>
-         </ng-template>
-         <ng-template *ngIf="dataService.grouped" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
-            <li
-                #li
-                *ngIf="dataItem.header"
-                role="group"
-                [class]="listGroupItemClass"
-                [class.k-table-alt-row]="isAltRow(itemIndex - 1)"
-                [ngStyle]="{
-                    'height.px': virtual?.itemHeight,
-                    'minHeight.px' : virtual?.itemHeight,
-                    'boxSizing' : virtual ? 'border-box' : 'inherit'}"
-                [attr.group-index]="dataItem.index"
-                [attr.id]="optionPrefix + '-' + dataItem.groupIndex + '-' + dataItem.value.toString().split(' ').join('')"
-                [attr.tabIndex]="-1"
-                [style.width.px]="rowWidth ?? null">
-                    <span [class]="listGroupItemTextClass">
-                        <ng-template *ngIf="groupTemplate"
-                            [templateContext]="{
-                                templateRef: groupTemplate.templateRef,
-                                $implicit: dataItem.value
+        <ul #list
+            role="listbox"
+            [class]="listClass"
+            [attr.id]="id"
+            [attr.aria-live]="ariaLive"
+            [attr.aria-multiselectable]="isMultiselect"
+            [attr.aria-hidden]="!show">
+            <ng-template *ngIf="!dataService.grouped && show" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
+                <li
+                    role="option"
+                    kendoDropDownsSelectable
+                    [checkboxes]="checkboxes"
+                    [height]="virtual?.itemHeight"
+                    [index]="itemIndex + startFrom"
+                    [multipleSelection]="multipleSelection"
+                    [attr.id]="optionPrefix + '-' + itemIndex"
+                    [attr.tabIndex]="-1"
+                    [attr.aria-selected]="isItemSelected(itemIndex)"
+                    [class]="listItemClass"
+                    [ngClass]="{
+                        'k-disabled': isDisabled(itemIndex),
+                        'k-table-alt-row': isAltRow(itemIndex)
+                    }"
+                    [style.width.px]="rowWidth ?? null"
+                >
+                    <input
+                        *ngIf="checkboxes.enabled"
+                        type="checkbox"
+                        class="k-checkbox"
+                        role="presentation"
+                        tabindex="-1"
+                        aria-hidden="true"
+                        [ngClass]="checkboxClasses"
+                        (change)="onCheckedChange($event, itemIndex + startFrom)"
+                        [checked]="isChecked(itemIndex)"
+                    />
+                    <ng-template *ngIf="template"
+                        [templateContext]="{
+                            templateRef: template.templateRef,
+                            $implicit: dataItem
                         }">
-                        </ng-template>
-                        <ng-template [ngIf]="!groupTemplate">{{ dataItem.value }}</ng-template>
-                    </span>
-            </li>
-            <li
-                #li
-                *ngIf="!dataItem.header"
-                role="option"
-                kendoDropDownsSelectable
-                [height]="virtual?.itemHeight"
-                [index]="dataItem.offsetIndex"
-                [multipleSelection]="multipleSelection"
-                [attr.absolute-index]="dataItem.index"
-                [attr.id]="optionPrefix + '-' + (itemIndex - 1 - dataItem.groupIndex)"
-                [attr.tabIndex]="-1"
-                [attr.aria-selected]="isItemSelected(dataItem.offsetIndex)"
-                [class]="listItemClass"
-                [ngClass]="{
-                    'k-disabled': isDisabled(dataItem.offsetIndex),
-                    'k-table-alt-row': isAltRow(itemIndex - 1)
-                }"
-                [style.width.px]="rowWidth ?? null"
+                    </ng-template>
+                    <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem) }}</span></ng-template>
+                </li>
+            </ng-template>
+            <ng-template *ngIf="dataService.grouped" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
+                <li
+                    #li
+                    *ngIf="dataItem.header"
+                    role="group"
+                    [class]="listGroupItemClass"
+                    [class.k-table-alt-row]="isAltRow(itemIndex - 1)"
+                    [ngStyle]="{
+                        'height.px': virtual?.itemHeight,
+                        'minHeight.px' : virtual?.itemHeight,
+                        'boxSizing' : virtual ? 'border-box' : 'inherit'}"
+                    [attr.group-index]="dataItem.index"
+                    [attr.id]="optionPrefix + '-' + dataItem.groupIndex + '-' + dataItem.value.toString().split(' ').join('')"
+                    [attr.tabIndex]="-1"
+                    [style.width.px]="rowWidth ?? null">
+                        <span [class]="listGroupItemTextClass">
+                            <ng-template *ngIf="groupTemplate"
+                                [templateContext]="{
+                                    templateRef: groupTemplate.templateRef,
+                                    $implicit: dataItem.value
+                            }">
+                            </ng-template>
+                            <ng-template [ngIf]="!groupTemplate">{{ dataItem.value }}</ng-template>
+                        </span>
+                </li>
+                <li
+                    #li
+                    *ngIf="!dataItem.header"
+                    role="option"
+                    kendoDropDownsSelectable
+                    [height]="virtual?.itemHeight"
+                    [index]="dataItem.offsetIndex"
+                    [multipleSelection]="multipleSelection"
+                    [attr.absolute-index]="dataItem.index"
+                    [attr.id]="optionPrefix + '-' + (itemIndex - 1 - dataItem.groupIndex)"
+                    [attr.tabIndex]="-1"
+                    [attr.aria-selected]="isItemSelected(dataItem.offsetIndex)"
+                    [class]="listItemClass"
+                    [ngClass]="{
+                        'k-disabled': isDisabled(dataItem.offsetIndex),
+                        'k-table-alt-row': isAltRow(itemIndex - 1)
+                    }"
+                    [style.width.px]="rowWidth ?? null"
+                >
+                    <ng-template *ngIf="template"
+                        [templateContext]="{
+                            templateRef: template.templateRef,
+                            $implicit: dataItem.value
+                        }">
+                    </ng-template>
+                    <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem.value) }}</span></ng-template>
+                </li>
+            </ng-template>
+            <kendo-resize-sensor
+                *ngIf="!virtual"
+                (resize)="listResize.emit()"
             >
-                <ng-template *ngIf="template"
-                    [templateContext]="{
-                        templateRef: template.templateRef,
-                        $implicit: dataItem.value
-                    }">
-                </ng-template>
-                <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem.value) }}</span></ng-template>
-            </li>
-        </ng-template>
-        <kendo-resize-sensor
-            *ngIf="!virtual"
-            (resize)="listResize.emit()"
-        >
-        </kendo-resize-sensor>
-    </ul>
-    <div *ngIf="virtual" #virtualContainer class="k-height-container" role="presentation">
-        <div [style.height.px]="scrollHeight">
-            <kendo-resize-sensor (resize)="listResize.emit()"></kendo-resize-sensor>
+            </kendo-resize-sensor>
+        </ul>
+        <div *ngIf="virtual" #virtualContainer class="k-height-container" role="presentation">
+            <div [style.height.px]="scrollHeight">
+                <kendo-resize-sensor (resize)="listResize.emit()"></kendo-resize-sensor>
+            </div>
         </div>
     </div>
-    </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ListItemDirective, selector: "\"li[role=option], li[role=group]\"" }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListComponent, decorators: [{
@@ -2454,6 +2518,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     selector: 'kendo-list',
                     template: `
+    <div *ngIf="defaultItem && !template"
+        class="k-list-optionlabel"
+        [ngClass]="{ 'k-disabled': isDisabledDefaultItem }"
+        kendoDropDownsSelectable
+        [index]="-1">
+        {{ getDefaultItemText() }}
+    </div>
+    <div *ngIf="defaultItem && template"
+        class="k-list-optionlabel"
+        [ngClass]="{ 'k-disabled': isDisabledDefaultItem }"
+        kendoDropDownsSelectable
+        [index]="-1">
+        <ng-template
+            [templateContext]="{
+                templateRef: template.templateRef,
+                $implicit: defaultItem
+            }">
+        </ng-template>
+    </div>
+    <div *ngIf="allowCustom && text"
+        kendoDropDownsSelectable
+        [multipleSelection]="true"
+        [index]="-1"
+        class="k-list-custom-value">
+        <ng-template *ngIf="customItemTemplate; else default_custom_item_template"
+            [templateContext]="{
+                templateRef: customItemTemplate.templateRef,
+                $implicit: text
+            }">
+        </ng-template>
+        <ng-template #default_custom_item_template>
+            Use "{{text}}"
+        </ng-template>
+    </div>
     <div *ngIf="dataService.grouped && showStickyHeader"
         [class]="listGroupStickyHeaderClass"
         [ngStyle]="{
@@ -2474,116 +2572,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [style.maxHeight.px]="height"
         unselectable="on"
         (scroll)="popupListScroll.emit($event)">
-    <ul #list
-        role="listbox"
-        [class]="listClass"
-        [attr.id]="id"
-        [attr.aria-live]="ariaLive"
-        [attr.aria-multiselectable]="isMultiselect"
-        [attr.aria-hidden]="!show">
-         <ng-template *ngIf="!dataService.grouped && show" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
-            <li
-                role="option"
-                kendoDropDownsSelectable
-                [checkboxes]="checkboxes"
-                [height]="virtual?.itemHeight"
-                [index]="itemIndex + startFrom"
-                [multipleSelection]="multipleSelection"
-                [attr.id]="optionPrefix + '-' + itemIndex"
-                [attr.tabIndex]="-1"
-                [attr.aria-selected]="isItemSelected(itemIndex)"
-                [class]="listItemClass"
-                [ngClass]="{
-                    'k-disabled': isDisabled(itemIndex),
-                    'k-table-alt-row': isAltRow(itemIndex)
-                }"
-                [style.width.px]="rowWidth ?? null"
-            >
-                <input
-                    *ngIf="checkboxes.enabled"
-                    type="checkbox"
-                    class="k-checkbox"
-                    role="presentation"
-                    tabindex="-1"
-                    aria-hidden="true"
-                    [ngClass]="checkboxClasses"
-                    (change)="onCheckedChange($event, itemIndex + startFrom)"
-                    [checked]="isChecked(itemIndex)"
-                />
-                <ng-template *ngIf="template"
-                    [templateContext]="{
-                        templateRef: template.templateRef,
-                        $implicit: dataItem
-                    }">
-                </ng-template>
-                <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem) }}</span></ng-template>
-            </li>
-         </ng-template>
-         <ng-template *ngIf="dataService.grouped" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
-            <li
-                #li
-                *ngIf="dataItem.header"
-                role="group"
-                [class]="listGroupItemClass"
-                [class.k-table-alt-row]="isAltRow(itemIndex - 1)"
-                [ngStyle]="{
-                    'height.px': virtual?.itemHeight,
-                    'minHeight.px' : virtual?.itemHeight,
-                    'boxSizing' : virtual ? 'border-box' : 'inherit'}"
-                [attr.group-index]="dataItem.index"
-                [attr.id]="optionPrefix + '-' + dataItem.groupIndex + '-' + dataItem.value.toString().split(' ').join('')"
-                [attr.tabIndex]="-1"
-                [style.width.px]="rowWidth ?? null">
-                    <span [class]="listGroupItemTextClass">
-                        <ng-template *ngIf="groupTemplate"
-                            [templateContext]="{
-                                templateRef: groupTemplate.templateRef,
-                                $implicit: dataItem.value
+        <ul #list
+            role="listbox"
+            [class]="listClass"
+            [attr.id]="id"
+            [attr.aria-live]="ariaLive"
+            [attr.aria-multiselectable]="isMultiselect"
+            [attr.aria-hidden]="!show">
+            <ng-template *ngIf="!dataService.grouped && show" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
+                <li
+                    role="option"
+                    kendoDropDownsSelectable
+                    [checkboxes]="checkboxes"
+                    [height]="virtual?.itemHeight"
+                    [index]="itemIndex + startFrom"
+                    [multipleSelection]="multipleSelection"
+                    [attr.id]="optionPrefix + '-' + itemIndex"
+                    [attr.tabIndex]="-1"
+                    [attr.aria-selected]="isItemSelected(itemIndex)"
+                    [class]="listItemClass"
+                    [ngClass]="{
+                        'k-disabled': isDisabled(itemIndex),
+                        'k-table-alt-row': isAltRow(itemIndex)
+                    }"
+                    [style.width.px]="rowWidth ?? null"
+                >
+                    <input
+                        *ngIf="checkboxes.enabled"
+                        type="checkbox"
+                        class="k-checkbox"
+                        role="presentation"
+                        tabindex="-1"
+                        aria-hidden="true"
+                        [ngClass]="checkboxClasses"
+                        (change)="onCheckedChange($event, itemIndex + startFrom)"
+                        [checked]="isChecked(itemIndex)"
+                    />
+                    <ng-template *ngIf="template"
+                        [templateContext]="{
+                            templateRef: template.templateRef,
+                            $implicit: dataItem
                         }">
-                        </ng-template>
-                        <ng-template [ngIf]="!groupTemplate">{{ dataItem.value }}</ng-template>
-                    </span>
-            </li>
-            <li
-                #li
-                *ngIf="!dataItem.header"
-                role="option"
-                kendoDropDownsSelectable
-                [height]="virtual?.itemHeight"
-                [index]="dataItem.offsetIndex"
-                [multipleSelection]="multipleSelection"
-                [attr.absolute-index]="dataItem.index"
-                [attr.id]="optionPrefix + '-' + (itemIndex - 1 - dataItem.groupIndex)"
-                [attr.tabIndex]="-1"
-                [attr.aria-selected]="isItemSelected(dataItem.offsetIndex)"
-                [class]="listItemClass"
-                [ngClass]="{
-                    'k-disabled': isDisabled(dataItem.offsetIndex),
-                    'k-table-alt-row': isAltRow(itemIndex - 1)
-                }"
-                [style.width.px]="rowWidth ?? null"
+                    </ng-template>
+                    <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem) }}</span></ng-template>
+                </li>
+            </ng-template>
+            <ng-template *ngIf="dataService.grouped" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
+                <li
+                    #li
+                    *ngIf="dataItem.header"
+                    role="group"
+                    [class]="listGroupItemClass"
+                    [class.k-table-alt-row]="isAltRow(itemIndex - 1)"
+                    [ngStyle]="{
+                        'height.px': virtual?.itemHeight,
+                        'minHeight.px' : virtual?.itemHeight,
+                        'boxSizing' : virtual ? 'border-box' : 'inherit'}"
+                    [attr.group-index]="dataItem.index"
+                    [attr.id]="optionPrefix + '-' + dataItem.groupIndex + '-' + dataItem.value.toString().split(' ').join('')"
+                    [attr.tabIndex]="-1"
+                    [style.width.px]="rowWidth ?? null">
+                        <span [class]="listGroupItemTextClass">
+                            <ng-template *ngIf="groupTemplate"
+                                [templateContext]="{
+                                    templateRef: groupTemplate.templateRef,
+                                    $implicit: dataItem.value
+                            }">
+                            </ng-template>
+                            <ng-template [ngIf]="!groupTemplate">{{ dataItem.value }}</ng-template>
+                        </span>
+                </li>
+                <li
+                    #li
+                    *ngIf="!dataItem.header"
+                    role="option"
+                    kendoDropDownsSelectable
+                    [height]="virtual?.itemHeight"
+                    [index]="dataItem.offsetIndex"
+                    [multipleSelection]="multipleSelection"
+                    [attr.absolute-index]="dataItem.index"
+                    [attr.id]="optionPrefix + '-' + (itemIndex - 1 - dataItem.groupIndex)"
+                    [attr.tabIndex]="-1"
+                    [attr.aria-selected]="isItemSelected(dataItem.offsetIndex)"
+                    [class]="listItemClass"
+                    [ngClass]="{
+                        'k-disabled': isDisabled(dataItem.offsetIndex),
+                        'k-table-alt-row': isAltRow(itemIndex - 1)
+                    }"
+                    [style.width.px]="rowWidth ?? null"
+                >
+                    <ng-template *ngIf="template"
+                        [templateContext]="{
+                            templateRef: template.templateRef,
+                            $implicit: dataItem.value
+                        }">
+                    </ng-template>
+                    <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem.value) }}</span></ng-template>
+                </li>
+            </ng-template>
+            <kendo-resize-sensor
+                *ngIf="!virtual"
+                (resize)="listResize.emit()"
             >
-                <ng-template *ngIf="template"
-                    [templateContext]="{
-                        templateRef: template.templateRef,
-                        $implicit: dataItem.value
-                    }">
-                </ng-template>
-                <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem.value) }}</span></ng-template>
-            </li>
-        </ng-template>
-        <kendo-resize-sensor
-            *ngIf="!virtual"
-            (resize)="listResize.emit()"
-        >
-        </kendo-resize-sensor>
-    </ul>
-    <div *ngIf="virtual" #virtualContainer class="k-height-container" role="presentation">
-        <div [style.height.px]="scrollHeight">
-            <kendo-resize-sensor (resize)="listResize.emit()"></kendo-resize-sensor>
+            </kendo-resize-sensor>
+        </ul>
+        <div *ngIf="virtual" #virtualContainer class="k-height-container" role="presentation">
+            <div [style.height.px]="scrollHeight">
+                <kendo-resize-sensor (resize)="listResize.emit()"></kendo-resize-sensor>
+            </div>
         </div>
     </div>
-    </div>
   `,
                     standalone: true,
                     imports: [NgIf, NgStyle, TemplateContextDirective, NgFor, ListItemDirective, SelectableDirective, NgClass, ResizeSensorComponent]
@@ -2628,6 +2726,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], rowWidth: [{
                 type: Input
+            }], customItemTemplate: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], allowCustom: [{
+                type: Input
+            }], defaultItem: [{
+                type: Input
             }], data: [{
                 type: Input
             }], size: [{
@@ -2680,32 +2786,29 @@ const normalizeVirtualizationSettings = (settings, defaultOverrides) => {
 /**
  * @hidden
  */
-class ResponsiveRendererComponent {
+class AdaptiveRendererComponent {
     localization;
+    adaptiveService;
     title;
-    showActionButtons;
     subtitle;
-    size;
     showTextInput;
     sharedPopupActionSheetTemplate;
-    isActionSheetExpanded;
     text;
     placeholder;
+    searchBarValue;
+    filterable;
     closePopup = new EventEmitter();
     textInputChange = new EventEmitter();
     navigate = new EventEmitter();
     onExpand = new EventEmitter();
-    onCollapse = new EventEmitter();
-    onApply = new EventEmitter();
-    onCancel = new EventEmitter();
     actionSheet;
     actionSheetSearchBar;
-    constructor(localization) {
+    constructor(localization, adaptiveService) {
         this.localization = localization;
+        this.adaptiveService = adaptiveService;
     }
-    searchBarValue = '';
     animationDuration = animationDuration;
-    xIcon = xIcon;
+    checkIcon = checkIcon;
     expanded = false;
     messageFor(key) {
         return this.localization.get(key);
@@ -2727,33 +2830,45 @@ class ResponsiveRendererComponent {
         this.closePopup.emit();
         this.expanded = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResponsiveRendererComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ResponsiveRendererComponent, isStandalone: true, 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: `
+    get windowSize() {
+        return this.adaptiveService.size;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-adaptive-renderer", inputs: { title: "title", subtitle: "subtitle", showTextInput: "showTextInput", sharedPopupActionSheetTemplate: "sharedPopupActionSheetTemplate", text: "text", placeholder: "placeholder", searchBarValue: "searchBarValue", filterable: "filterable" }, outputs: { closePopup: "closePopup", textInputChange: "textInputChange", navigate: "navigate", onExpand: "onExpand" }, 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"
+            [initialFocus]="false"
+            [cssClass]="{
+                'k-adaptive-actionsheet': true,
+                'k-actionsheet-fullscreen': windowSize === 'small',
+                'k-actionsheet-bottom': windowSize === 'medium'
+            }"
+            [cssStyle]="{
+                height: windowSize === 'small' ? '100vh' : '60vh'
+            }"
             (overlayClick)="onOverlayClick()"
             (keydown)="navigate.emit($event)"
             (expand)="handleExpand()"
-            (collapse)="onCollapse.emit()"
+            (collapse)="closePopup.emit()"
         >
             <ng-template kendoActionSheetTemplate>
                 <div class="k-text-center k-actionsheet-titlebar">
-                    <div class="k-actionsheet-titlebar-group k-hbox">
+                    <div class="k-actionsheet-titlebar-group">
                         <div class="k-actionsheet-title">
-                            <div class="k-text-center">{{ title }}</div>
-                            <div class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
+                            <div class="k-text-center" *ngIf="title">{{ title }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center" *ngIf="subtitle">{{ subtitle }}</div>
                         </div>
                         <div class="k-actionsheet-actions">
                             <button
                                 kendoButton
-                                icon="x"
+                                icon="check"
                                 type="button"
-                                [attr.title]="messageFor('clearTitle')"
-                                [svgIcon]="xIcon"
+                                [attr.title]="messageFor('adaptiveCloseButtonTitle')"
+                                [svgIcon]="checkIcon"
                                 fillMode="flat"
-                                [size]="size"
+                                themeColor="primary"
+                                size="large"
                                 [tabIndex]="-1"
                                 aria-hidden="true"
                                 innerCssClass="k-button-icon"
@@ -2761,85 +2876,70 @@ class ResponsiveRendererComponent {
                             ></button>
                         </div>
                     </div>
-                    <div class="k-actionsheet-titlebar-group k-actionsheet-filter">
+                    <div class="k-actionsheet-titlebar-group k-actionsheet-filter" *ngIf="showTextInput">
                         <kendo-textbox
-                            *ngIf="showTextInput"
                             #actionSheetSearchBar
-                            [value]="searchBarValue"
-                            [size]="size"
-                            placeholder="Filter"
+                            [value]="searchBarValue || ''"
+                            size="large"
+                            [placeholder]="filterable ? messageFor('filterInputPlaceholder') : placeholder"
                             class="k-searchbox"
                             autocomplete="off"
                             (valueChange)="onValueChange($event)"
                         >
-                            <ng-template kendoTextBoxPrefixTemplate>
+                            <ng-template kendoTextBoxPrefixTemplate *ngIf="filterable">
                                 <kendo-icon name="search"></kendo-icon>
                             </ng-template>
                         </kendo-textbox>
                     </div>
                 </div>
-                <div class="k-actionsheet-content !k-overflow-hidden">
+                <div class="k-actionsheet-content">
                     <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"
-                        type="button"
-                        [size]="size"
-                        themeColor="base"
-                        (click)="onCancel.emit()"
-                        (keydown.enter)="$event.stopImmediatePropagation()">
-                        {{messageFor('cancelButton')}}
-                    </button>
-                    <button kendoButton
-                        tabindex="0"
-                        aria-disabled="false"
-                        type="button"
-                        [size]="size"
-                        themeColor="primary"
-                        (click)="onApply.emit()"
-                        (keydown.enter)="$event.stopImmediatePropagation()">
-                        {{messageFor('applyButton')}}
-                    </button>
-                </div>
             </ng-template>
         </kendo-actionsheet>
-    `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResponsiveRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'responsive-renderer',
+                    selector: 'kendo-adaptive-renderer',
                     template: `
         <kendo-actionsheet
             #actionSheet
             [animation]="{ duration: animationDuration }"
-            [expanded]="isActionSheetExpanded"
+            [initialFocus]="false"
+            [cssClass]="{
+                'k-adaptive-actionsheet': true,
+                'k-actionsheet-fullscreen': windowSize === 'small',
+                'k-actionsheet-bottom': windowSize === 'medium'
+            }"
+            [cssStyle]="{
+                height: windowSize === 'small' ? '100vh' : '60vh'
+            }"
             (overlayClick)="onOverlayClick()"
             (keydown)="navigate.emit($event)"
             (expand)="handleExpand()"
-            (collapse)="onCollapse.emit()"
+            (collapse)="closePopup.emit()"
         >
             <ng-template kendoActionSheetTemplate>
                 <div class="k-text-center k-actionsheet-titlebar">
-                    <div class="k-actionsheet-titlebar-group k-hbox">
+                    <div class="k-actionsheet-titlebar-group">
                         <div class="k-actionsheet-title">
-                            <div class="k-text-center">{{ title }}</div>
-                            <div class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
+                            <div class="k-text-center" *ngIf="title">{{ title }}</div>
+                            <div class="k-actionsheet-subtitle k-text-center" *ngIf="subtitle">{{ subtitle }}</div>
                         </div>
                         <div class="k-actionsheet-actions">
                             <button
                                 kendoButton
-                                icon="x"
+                                icon="check"
                                 type="button"
-                                [attr.title]="messageFor('clearTitle')"
-                                [svgIcon]="xIcon"
+                                [attr.title]="messageFor('adaptiveCloseButtonTitle')"
+                                [svgIcon]="checkIcon"
                                 fillMode="flat"
-                                [size]="size"
+                                themeColor="primary"
+                                size="large"
                                 [tabIndex]="-1"
                                 aria-hidden="true"
                                 innerCssClass="k-button-icon"
@@ -2847,75 +2947,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             ></button>
                         </div>
                     </div>
-                    <div class="k-actionsheet-titlebar-group k-actionsheet-filter">
+                    <div class="k-actionsheet-titlebar-group k-actionsheet-filter" *ngIf="showTextInput">
                         <kendo-textbox
-                            *ngIf="showTextInput"
                             #actionSheetSearchBar
-                            [value]="searchBarValue"
-                            [size]="size"
-                            placeholder="Filter"
+                            [value]="searchBarValue || ''"
+                            size="large"
+                            [placeholder]="filterable ? messageFor('filterInputPlaceholder') : placeholder"
                             class="k-searchbox"
                             autocomplete="off"
                             (valueChange)="onValueChange($event)"
                         >
-                            <ng-template kendoTextBoxPrefixTemplate>
+                            <ng-template kendoTextBoxPrefixTemplate *ngIf="filterable">
                                 <kendo-icon name="search"></kendo-icon>
                             </ng-template>
                         </kendo-textbox>
                     </div>
                 </div>
-                <div class="k-actionsheet-content !k-overflow-hidden">
+                <div class="k-actionsheet-content">
                     <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"
-                        type="button"
-                        [size]="size"
-                        themeColor="base"
-                        (click)="onCancel.emit()"
-                        (keydown.enter)="$event.stopImmediatePropagation()">
-                        {{messageFor('cancelButton')}}
-                    </button>
-                    <button kendoButton
-                        tabindex="0"
-                        aria-disabled="false"
-                        type="button"
-                        [size]="size"
-                        themeColor="primary"
-                        (click)="onApply.emit()"
-                        (keydown.enter)="$event.stopImmediatePropagation()">
-                        {{messageFor('applyButton')}}
-                    </button>
-                </div>
             </ng-template>
         </kendo-actionsheet>
     `,
                     standalone: true,
                     imports: [ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, NgIf, TextBoxComponent, TextBoxPrefixTemplateDirective, IconComponent, NgTemplateOutlet]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { title: [{
-                type: Input
-            }], showActionButtons: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i7.AdaptiveService }]; }, propDecorators: { title: [{
                 type: Input
             }], subtitle: [{
                 type: Input
-            }], size: [{
-                type: Input
             }], showTextInput: [{
                 type: Input
             }], sharedPopupActionSheetTemplate: [{
                 type: Input
-            }], isActionSheetExpanded: [{
-                type: Input
             }], text: [{
                 type: Input
             }], placeholder: [{
                 type: Input
+            }], searchBarValue: [{
+                type: Input
+            }], filterable: [{
+                type: Input
             }], closePopup: [{
                 type: Output
             }], textInputChange: [{
@@ -2924,12 +2998,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], onExpand: [{
                 type: Output
-            }], onCollapse: [{
-                type: Output
-            }], onApply: [{
-                type: Output
-            }], onCancel: [{
-                type: Output
             }], actionSheet: [{
                 type: ViewChild,
                 args: [ActionSheetComponent]
@@ -3061,15 +3129,15 @@ class Messages extends ComponentMessages {
      */
     popupLabel;
     /**
-     * The text of the Apply button in the MultiSelect action sheet.
+     * The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode.
      */
-    applyButton;
+    adaptiveCloseButtonTitle;
     /**
-     * The text of the Cancel button in the MultiSelect action sheet.
+     * The text for the input's placeholder when filtering is enabled.
      */
-    cancelButton;
+    filterInputPlaceholder;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, inputs: { noDataText: "noDataText", clearTitle: "clearTitle", checkAllText: "checkAllText", selectButtonText: "selectButtonText", filterInputLabel: "filterInputLabel", popupLabel: "popupLabel", applyButton: "applyButton", cancelButton: "cancelButton" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, inputs: { noDataText: "noDataText", clearTitle: "clearTitle", checkAllText: "checkAllText", selectButtonText: "selectButtonText", filterInputLabel: "filterInputLabel", popupLabel: "popupLabel", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", filterInputPlaceholder: "filterInputPlaceholder" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive
@@ -3085,9 +3153,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], popupLabel: [{
                 type: Input
-            }], applyButton: [{
+            }], adaptiveCloseButtonTitle: [{
                 type: Input
-            }], cancelButton: [{
+            }], filterInputPlaceholder: [{
                 type: Input
             }] } });
 
@@ -3186,18 +3254,18 @@ class AutoCompleteComponent {
     /**
      * @hidden
      */
-    responsiveRendererComponent;
+    adaptiveRendererComponent;
     /**
      * @hidden
      */
     get actionSheet() {
-        return this.responsiveRendererComponent?.actionSheet;
+        return this.adaptiveRendererComponent?.actionSheet;
     }
     /**
      * @hidden
      */
     get actionSheetSearchBar() {
-        return this.responsiveRendererComponent?.actionSheetSearchBar;
+        return this.adaptiveRendererComponent?.actionSheetSearchBar;
     }
     get width() {
         let wrapperOffsetWidth = 0;
@@ -3373,17 +3441,12 @@ class AutoCompleteComponent {
      * 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.
      */
-    title = '';
+    adaptiveTitle = '';
     /**
      * 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.
+     * By default the ActionSheet does not render a subtitle.
     */
-    set subtitle(_subtitle) {
-        this._subtitle = _subtitle;
-    }
-    get subtitle() {
-        return this._subtitle || this.placeholder;
-    }
+    adaptiveSubtitle;
     /**
      * @hidden
      */
@@ -3702,11 +3765,6 @@ class AutoCompleteComponent {
     ngAfterViewInit() {
         this.windowSize = this.adaptiveService.size;
         this.cdr.detectChanges();
-        if (this.actionSheet && isDocumentAvailable()) {
-            // The following syntax is used as it does not violate CSP compliance
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
-        }
     }
     ngOnDestroy() {
         this.destroyPopup();
@@ -3736,12 +3794,6 @@ class AutoCompleteComponent {
     messageFor(key) {
         return this.localization.get(key);
     }
-    /**
-     * @hidden
-     */
-    onAdaptiveTextBoxChange(text) {
-        this.search(text);
-    }
     /**
      * @hidden
      */
@@ -3932,7 +3984,7 @@ class AutoCompleteComponent {
      */
     searchBarChange(text) {
         const currentTextLength = isPresent(this.text) ? this.text.length : 0;
-        this.backspacePressed = (text.length < currentTextLength) ? true : false;
+        this.backspacePressed = Boolean(text.length < currentTextLength);
         this.text = text;
         this.togglePopup(text.length > 0);
         if (!this.highlightFirst) {
@@ -3945,17 +3997,6 @@ class AutoCompleteComponent {
             this.search(text);
         }
     }
-    /**
-     * @hidden
-     */
-    onFilterChange(text) {
-        if (this.filterable) {
-            this.filterChange.emit(text);
-        }
-        else if (this.highlightFirst) {
-            this.search(text);
-        }
-    }
     /**
      * @hidden
      */
@@ -3983,25 +4024,7 @@ class AutoCompleteComponent {
      */
     handleBlur() {
         if (!this.isActionSheetExpanded) {
-            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);
-            }
+            this.blurComponent();
         }
     }
     /**
@@ -4053,6 +4076,13 @@ class AutoCompleteComponent {
         const virtual = this.virtual;
         virtual.skip = event.skip;
     }
+    /**
+     * @hidden
+     */
+    closeActionSheet() {
+        this.blurComponent();
+        this.closed.emit();
+    }
     change(value) {
         this.togglePopup(false);
         this.valueChangeSubject.next(value);
@@ -4067,7 +4097,6 @@ class AutoCompleteComponent {
     subs = new Subscription();
     valueChangeSubject = new Subject();
     touchstartDisposeHandler;
-    _subtitle;
     wrapper;
     _isFocused = false;
     direction;
@@ -4201,7 +4230,8 @@ class AutoCompleteComponent {
         this._open = open;
         this.destroyPopup();
         if (this.isActionSheetExpanded) {
-            this.closeActionSheet();
+            this.actionSheet.toggle(false);
+            this.focus();
         }
         if (this._open) {
             this.createPopup();
@@ -4253,27 +4283,40 @@ class AutoCompleteComponent {
             this.renderer.addClass(this.wrapper, getFillModeClass('input', this.fillMode));
         }
     }
-    closeActionSheet() {
-        this.actionSheet.toggle(false);
-        this.filterable && this.filterChange.emit('');
-        this.searchbar.input.nativeElement.focus();
-        this.responsiveRendererComponent.searchBarValue = '';
-        this.closed.emit();
-    }
     openActionSheet() {
         this.actionSheet.toggle(true);
         this.cdr.detectChanges();
         setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
-        this.title = setActionSheetTitle(this.searchbar.input, this.title);
-        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
+        this.adaptiveTitle = setActionSheetTitle(this.searchbar.input, this.adaptiveTitle);
         this.cdr.detectChanges();
         this.opened.emit();
         this.optionsList.scrollToItem(this.selectionService.focused);
         this.selectionService.focus(this.selectionService.focused);
         this.actionSheetSearchBar.focus();
     }
+    blurComponent() {
+        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);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AutoCompleteComponent, isStandalone: true, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", showStickyHeader: "showStickyHeader", 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", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.k-readonly": "this.readonly", "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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AutoCompleteComponent, isStandalone: true, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", showStickyHeader: "showStickyHeader", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", 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", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.k-readonly": "this.readonly", "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,
@@ -4292,7 +4335,7 @@ class AutoCompleteComponent {
                 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 }, { propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, 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: `
+        ], 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 }, { propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "adaptiveRendererComponent", first: true, predicate: AdaptiveRendererComponent, 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"
@@ -4302,6 +4345,9 @@ class AutoCompleteComponent {
 
             i18n-popupLabel="kendo.autocomplete.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
+
+            i18n-adaptiveCloseButtonTitle="kendo.autocomplete.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
         >
         </ng-container>
 
@@ -4370,19 +4416,17 @@ class AutoCompleteComponent {
         <ng-container #container></ng-container>
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
 
-        <!--adaptive rendering-->
-        <responsive-renderer
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="true"
-            [subtitle]="subtitle"
-            (closePopup)="togglePopup(false)"
-            (textInputChange)="onFilterChange($event)"
+            [subtitle]="adaptiveSubtitle"
+            (closePopup)="closeActionSheet()"
+            (textInputChange)="searchBarChange($event)"
             (navigate)="handleNavigate($event)"
             [placeholder]="placeholder"
-            >
-        </responsive-renderer>
+            [searchBarValue]="text">
+        </kendo-adaptive-renderer>
 
         <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
@@ -4394,7 +4438,7 @@ class AutoCompleteComponent {
             <!--list-->
             <kendo-list
                 #optionsList
-                [size]="size"
+                [size]="isAdaptive ? 'large' : size"
                 [rounded]="rounded"
                 [id]="listBoxId"
                 [optionPrefix]="optionPrefix"
@@ -4429,7 +4473,7 @@ class AutoCompleteComponent {
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
@@ -4466,6 +4510,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             i18n-popupLabel="kendo.autocomplete.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
+
+            i18n-adaptiveCloseButtonTitle="kendo.autocomplete.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
         >
         </ng-container>
 
@@ -4534,19 +4581,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <ng-container #container></ng-container>
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
 
-        <!--adaptive rendering-->
-        <responsive-renderer
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="true"
-            [subtitle]="subtitle"
-            (closePopup)="togglePopup(false)"
-            (textInputChange)="onFilterChange($event)"
+            [subtitle]="adaptiveSubtitle"
+            (closePopup)="closeActionSheet()"
+            (textInputChange)="searchBarChange($event)"
             (navigate)="handleNavigate($event)"
             [placeholder]="placeholder"
-            >
-        </responsive-renderer>
+            [searchBarValue]="text">
+        </kendo-adaptive-renderer>
 
         <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
@@ -4558,7 +4603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <!--list-->
             <kendo-list
                 #optionsList
-                [size]="size"
+                [size]="isAdaptive ? 'large' : size"
                 [rounded]="rounded"
                 [id]="listBoxId"
                 [optionPrefix]="optionPrefix"
@@ -4595,11 +4640,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </ng-template>
   `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, SharedDropDownEventsDirective, NgIf, NgTemplateOutlet, SeparatorComponent, SearchBarComponent, IconWrapperComponent, ResizeSensorComponent, ResponsiveRendererComponent, TemplateContextDirective, ListComponent]
+                    imports: [LocalizedMessagesDirective, SharedDropDownEventsDirective, NgIf, NgTemplateOutlet, SeparatorComponent, SearchBarComponent, IconWrapperComponent, ResizeSensorComponent, AdaptiveRendererComponent, TemplateContextDirective, ListComponent]
                 }]
-        }], 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: i0.Injector }, { type: i7.AdaptiveService }]; }, propDecorators: { responsiveRendererComponent: [{
+        }], 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: i0.Injector }, { type: i7.AdaptiveService }]; }, propDecorators: { adaptiveRendererComponent: [{
                 type: ViewChild,
-                args: [ResponsiveRendererComponent]
+                args: [AdaptiveRendererComponent]
             }], highlightFirst: [{
                 type: Input
             }], showStickyHeader: [{
@@ -4616,9 +4661,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], adaptiveMode: [{
                 type: Input
-            }], title: [{
+            }], adaptiveTitle: [{
                 type: Input
-            }], subtitle: [{
+            }], adaptiveSubtitle: [{
                 type: Input
             }], popupSettings: [{
                 type: Input
@@ -4854,18 +4899,18 @@ class ComboBoxComponent extends MultiTabStop {
     /**
      * @hidden
      */
-    responsiveRendererComponent;
+    adaptiveRendererComponent;
     /**
      * @hidden
      */
     get actionSheet() {
-        return this.responsiveRendererComponent?.actionSheet;
+        return this.adaptiveRendererComponent?.actionSheet;
     }
     /**
      * @hidden
      */
     get actionSheetSearchBar() {
-        return this.responsiveRendererComponent?.actionSheetSearchBar;
+        return this.adaptiveRendererComponent?.actionSheetSearchBar;
     }
     /**
      * @hidden
@@ -5065,19 +5110,14 @@ class ComboBoxComponent extends MultiTabStop {
     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.
+     * By default the ActionSheet title uses the text provided for the label of the Combobox.
      */
-    title = '';
+    adaptiveTitle = '';
     /**
      * 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.
+     * By default the ActionSheet does not render a subtitle.
     */
-    set subtitle(_subtitle) {
-        this._subtitle = _subtitle;
-    }
-    get subtitle() {
-        return this._subtitle || this.placeholder;
-    }
+    adaptiveSubtitle;
     /**
      * @hidden
      */
@@ -5407,7 +5447,6 @@ class ComboBoxComponent extends MultiTabStop {
     backspacePressed;
     _popupSettings = { animate: true };
     _virtualSettings;
-    _subtitle;
     popupMouseDownHandler = (event) => event.preventDefault();
     customValueSubject = new Subject();
     valueSubject = new Subject();
@@ -5449,11 +5488,6 @@ class ComboBoxComponent extends MultiTabStop {
     ngAfterViewInit() {
         this.windowSize = this.adaptiveService.size;
         this.cdr.detectChanges();
-        if (this.actionSheet && isDocumentAvailable()) {
-            // The following syntax is used as it does not violate CSP compliance
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
-        }
     }
     createValueStream() {
         const valueStream = this.valueSubject.pipe(filter((candidate) => {
@@ -5888,18 +5922,6 @@ class ComboBoxComponent extends MultiTabStop {
             }
         }
     }
-    /**
-     * @hidden
-     */
-    onAdaptiveTextBoxChange(text) {
-        if (this.filterable && this.filterText !== text) {
-            this.filterText = text;
-            this.filterChange.emit(text);
-        }
-        else {
-            this.search(text);
-        }
-    }
     /**
      * @hidden
      */
@@ -6004,36 +6026,7 @@ class ComboBoxComponent extends MultiTabStop {
      */
     handleBlur() {
         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.togglePopup(false);
-                });
-            }
-            else {
-                this.togglePopup(false);
-            }
+            this.blurComponent();
         }
     }
     /**
@@ -6098,7 +6091,7 @@ class ComboBoxComponent extends MultiTabStop {
      */
     searchBarChange(text) {
         const currentTextLength = this.text ? this.text.length : 0;
-        this.backspacePressed = (text.length < currentTextLength) ? true : false;
+        this.backspacePressed = Boolean(text.length < currentTextLength);
         this.text = text;
         // Reset the selection prior to filter. If a match is present, it will be resolved. If a match is not present, it is not needed.
         this.selectionService.resetSelection([]);
@@ -6128,6 +6121,13 @@ class ComboBoxComponent extends MultiTabStop {
         const virtual = this.virtual;
         virtual.skip = event.skip;
     }
+    /**
+     * @hidden
+     */
+    closeActionSheet() {
+        this.blurComponent();
+        this.closed.emit();
+    }
     change(candidate, isCustom = false) {
         if (isCustom) {
             this.customValueSubject.next(candidate);
@@ -6257,7 +6257,8 @@ class ComboBoxComponent extends MultiTabStop {
         this._open = open;
         this.destroyPopup();
         if (this.isActionSheetExpanded) {
-            this.closeActionSheet();
+            this.actionSheet.toggle(false);
+            this.focus();
         }
         if (this._open) {
             this.windowSize = this.adaptiveService.size;
@@ -6326,27 +6327,52 @@ class ComboBoxComponent extends MultiTabStop {
         }
         return index;
     }
-    closeActionSheet() {
-        this.actionSheet.toggle(false);
-        this.searchbar.input.nativeElement.focus();
-        this.responsiveRendererComponent.searchBarValue = '';
-        this.closed.emit();
-    }
     openActionSheet() {
         this.windowSize = this.adaptiveService.size;
         this.actionSheet.toggle(true);
         this.cdr.detectChanges();
         setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
-        this.title = setActionSheetTitle(this.searchbar.input, this.title);
-        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
+        this.adaptiveTitle = setActionSheetTitle(this.searchbar.input, this.adaptiveTitle);
         this.cdr.detectChanges();
         this.opened.emit();
         this.optionsList.scrollToItem(this.selectionService.focused);
         this.selectionService.focus(this.selectionService.focused);
         this.actionSheetSearchBar.focus();
     }
+    blurComponent() {
+        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.togglePopup(false);
+            });
+        }
+        else {
+            this.togglePopup(false);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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: i0.Injector }, { token: i0.ElementRef }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ComboBoxComponent, isStandalone: true, selector: "kendo-combobox", inputs: { icon: "icon", svgIcon: "svgIcon", inputAttributes: "inputAttributes", showStickyHeader: "showStickyHeader", 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", 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", inputFocus: "inputFocus", inputBlur: "inputBlur", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ComboBoxComponent, isStandalone: true, selector: "kendo-combobox", inputs: { icon: "icon", svgIcon: "svgIcon", inputAttributes: "inputAttributes", showStickyHeader: "showStickyHeader", focusableId: "focusableId", allowCustom: "allowCustom", data: "data", value: "value", textField: "textField", valueField: "valueField", valuePrimitive: "valuePrimitive", valueNormalizer: "valueNormalizer", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", 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", inputFocus: "inputFocus", inputBlur: "inputBlur", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "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,
@@ -6366,7 +6392,7 @@ class ComboBoxComponent extends MultiTabStop {
             {
                 provide: MultiTabStop, 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 }, { propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, 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"], usesInheritance: true, 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 }, { propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "adaptiveRendererComponent", first: true, predicate: AdaptiveRendererComponent, 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"], usesInheritance: true, 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"
@@ -6379,6 +6405,9 @@ class ComboBoxComponent extends MultiTabStop {
 
             i18n-popupLabel="kendo.combobox.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
+
+            i18n-adaptiveCloseButtonTitle="kendo.combobox.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
         >
         </ng-container>
 
@@ -6469,19 +6498,18 @@ class ComboBoxComponent extends MultiTabStop {
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
         <ng-container #container></ng-container>
 
-        <!--adaptive rendering-->
-        <responsive-renderer
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="true"
-            [subtitle]="subtitle"
-            (closePopup)="togglePopup(false)"
-            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            [subtitle]="adaptiveSubtitle"
+            (closePopup)="closeActionSheet()"
+            (textInputChange)="searchBarChange($event)"
             (navigate)="handleNavigate($event)"
             [placeholder]="placeholder"
-            >
-        </responsive-renderer>
+            [searchBarValue]="text"
+        >
+        </kendo-adaptive-renderer>
         <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
@@ -6492,7 +6520,7 @@ class ComboBoxComponent extends MultiTabStop {
             <!--list-->
             <kendo-list
                 #optionsList
-                [size]="size"
+                [size]="isAdaptive ? 'large' : size"
                 [rounded]="rounded"
                 [id]="listBoxId"
                 [optionPrefix]="optionPrefix"
@@ -6527,7 +6555,7 @@ class ComboBoxComponent extends MultiTabStop {
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
@@ -6568,6 +6596,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             i18n-popupLabel="kendo.combobox.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
+
+            i18n-adaptiveCloseButtonTitle="kendo.combobox.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
         >
         </ng-container>
 
@@ -6658,19 +6689,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
         <ng-container #container></ng-container>
 
-        <!--adaptive rendering-->
-        <responsive-renderer
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="true"
-            [subtitle]="subtitle"
-            (closePopup)="togglePopup(false)"
-            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            [subtitle]="adaptiveSubtitle"
+            (closePopup)="closeActionSheet()"
+            (textInputChange)="searchBarChange($event)"
             (navigate)="handleNavigate($event)"
             [placeholder]="placeholder"
-            >
-        </responsive-renderer>
+            [searchBarValue]="text"
+        >
+        </kendo-adaptive-renderer>
         <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
@@ -6681,7 +6711,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <!--list-->
             <kendo-list
                 #optionsList
-                [size]="size"
+                [size]="isAdaptive ? 'large' : size"
                 [rounded]="rounded"
                 [id]="listBoxId"
                 [optionPrefix]="optionPrefix"
@@ -6718,7 +6748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </ng-template>
   `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, SharedDropDownEventsDirective, NgIf, NgTemplateOutlet, SeparatorComponent, SearchBarComponent, EventsOutsideAngularDirective, IconWrapperComponent, NgClass, ResizeSensorComponent, ResponsiveRendererComponent, TemplateContextDirective, ListComponent]
+                    imports: [LocalizedMessagesDirective, SharedDropDownEventsDirective, NgIf, NgTemplateOutlet, SeparatorComponent, SearchBarComponent, EventsOutsideAngularDirective, IconWrapperComponent, NgClass, ResizeSensorComponent, AdaptiveRendererComponent, TemplateContextDirective, ListComponent]
                 }]
         }], 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: i0.Injector }, { type: i0.ElementRef }, { type: i7.AdaptiveService }]; }, propDecorators: { icon: [{
                 type: Input
@@ -6726,9 +6756,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], inputAttributes: [{
                 type: Input
-            }], responsiveRendererComponent: [{
+            }], adaptiveRendererComponent: [{
                 type: ViewChild,
-                args: [ResponsiveRendererComponent]
+                args: [AdaptiveRendererComponent]
             }], showStickyHeader: [{
                 type: Input
             }], focusableId: [{
@@ -6751,9 +6781,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], adaptiveMode: [{
                 type: Input
-            }], title: [{
+            }], adaptiveTitle: [{
                 type: Input
-            }], subtitle: [{
+            }], adaptiveSubtitle: [{
                 type: Input
             }], popupSettings: [{
                 type: Input
@@ -7018,18 +7048,18 @@ class DropDownListComponent {
     /**
      * @hidden
      */
-    responsiveRendererComponent;
+    adaptiveRenderer;
     /**
      * @hidden
      */
     get actionSheet() {
-        return this.responsiveRendererComponent?.actionSheet;
+        return this.adaptiveRenderer?.actionSheet;
     }
     /**
      * @hidden
      */
     get actionSheetSearchBar() {
-        return this.responsiveRendererComponent?.actionSheetSearchBar;
+        return this.adaptiveRenderer?.actionSheetSearchBar;
     }
     get width() {
         const wrapperWidth = isDocumentAvailable() ? this.wrapper.nativeElement.offsetWidth : 0;
@@ -7155,14 +7185,14 @@ class DropDownListComponent {
     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.
+     * By default the ActionSheet title uses the text provided for the label of the DropDownList.
      */
-    title = '';
+    adaptiveTitle = '';
     /**
      * 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.
+     * By default the ActionSheet does not render a subtitle.
     */
-    subtitle = '';
+    adaptiveSubtitle = '';
     /**
      * @hidden
      */
@@ -7646,11 +7676,6 @@ class DropDownListComponent {
     }
     ngAfterViewInit() {
         this.windowSize = this.adaptiveService.size;
-        if (this.actionSheet && isDocumentAvailable()) {
-            // The following syntax is used as it does not violate CSP compliance
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
-        }
     }
     /**
      * @hidden
@@ -7847,12 +7872,6 @@ class DropDownListComponent {
     get filterInputClasses() {
         return `${this.size ? getSizeClass('input', this.size) : ''} ${this.fillMode ? 'k-input-' + this.fillMode : ''} ${this.rounded ? getRoundedClass(this.rounded) : ''}`;
     }
-    /**
-     * @hidden
-     */
-    get optionLabelSizeClass() {
-        return `${this.size ? getSizeClass('list', this.size) : ''}`;
-    }
     /**
      * @hidden
      */
@@ -7863,24 +7882,12 @@ class DropDownListComponent {
         }
         return containerClasses;
     }
-    /**
-     * @hidden
-     */
-    get isDisabledDefaultItem() {
-        return this.disabledItemsService.isItemDisabled(this.defaultItem);
-    }
     /**
      * @hidden
      */
     getText() {
         return this.text;
     }
-    /**
-     * @hidden
-     */
-    getDefaultItemText() {
-        return getter(this.defaultItem, this.textField);
-    }
     createPopup() {
         if (this.virtual) {
             this.virtual.skip = 0;
@@ -8361,31 +8368,26 @@ class DropDownListComponent {
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
         this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
         if (this.filterable) {
-            this.responsiveRendererComponent.searchBarValue = '';
+            this.adaptiveRenderer.searchBarValue = '';
             this.filterChange.emit('');
         }
         this.closed.emit();
     }
     openActionSheet() {
-        this.windowSize = this.adaptiveService.size;
         this.actionSheet.toggle(true);
         this.cdr.detectChanges();
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.listBoxId);
         setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
         this.setAriaactivedescendant();
-        this.title = setActionSheetTitle(this.wrapper, this.title);
-        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
+        this.adaptiveTitle = setActionSheetTitle(this.wrapper, this.adaptiveTitle);
         this.cdr.detectChanges();
-        this.opened.emit();
         this.optionsList.scrollToItem(this.selectionService.focused);
         this.selectionService.focus(this.selectionService.focused);
-        if (this.filterable) {
-            this.actionSheetSearchBar.focus();
-        }
+        this.opened.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropDownListComponent, isStandalone: true, selector: "kendo-dropdownlist", inputs: { customIconClass: "customIconClass", showStickyHeader: "showStickyHeader", icon: "icon", svgIcon: "svgIcon", 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", leftRightArrowsNavigation: "leftRightArrowsNavigation", 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: { "class.k-readonly": "this.readonly", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.aria-disabled": "this.isDisabledClass", "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-invalid": "this.hostAriaInvalid" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropDownListComponent, isStandalone: true, selector: "kendo-dropdownlist", inputs: { customIconClass: "customIconClass", showStickyHeader: "showStickyHeader", icon: "icon", svgIcon: "svgIcon", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", 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", leftRightArrowsNavigation: "leftRightArrowsNavigation", 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: { "class.k-readonly": "this.readonly", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.aria-disabled": "this.isDisabledClass", "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-invalid": "this.hostAriaInvalid" } }, providers: [
             DROPDOWNLIST_VALUE_ACCESSOR,
             DataService,
             SelectionService,
@@ -8402,7 +8404,7 @@ class DropDownListComponent {
             {
                 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: "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: `
+        ], 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: "adaptiveRenderer", first: true, predicate: AdaptiveRendererComponent, 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"
@@ -8415,6 +8417,12 @@ class DropDownListComponent {
 
             i18n-popupLabel="kendo.dropdownlist.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
+
+            i18n-adaptiveCloseButtonTitle="kendo.dropdownlist.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
+
+            i18n-filterPlaceholder="kendo.dropdownlist.filterPlaceholder|The text for the input's placeholder when filtering is enabled"
+            filterInputPlaceholder="Filter"
         >
         </ng-container>
         <span class="k-input-inner" unselectable="on" [id]="valueLabelId" (click)="$event.preventDefault()">
@@ -8446,8 +8454,7 @@ class DropDownListComponent {
                 [name]="icon || 'caret-alt-down'"
                 innerCssClass="k-button-icon"
                 [customFontClass]="customIconClass"
-                [svgIcon]="svgIcon || caretAltDownSVGIcon"
-            >
+                [svgIcon]="svgIcon || caretAltDownSVGIcon">
             </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
@@ -8456,17 +8463,15 @@ class DropDownListComponent {
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
         <ng-container #container></ng-container>
 
-        <!--adaptive rendering-->
-        <responsive-renderer
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="filterable"
-            [subtitle]="subtitle"
+            [subtitle]="adaptiveSubtitle"
             (closePopup)="togglePopup(false)"
             (textInputChange)="onFilterChange($event)"
-            >
-        </responsive-renderer>
+            [filterable]="filterable">
+        </kendo-adaptive-renderer>
 
         <ng-template #sharedPopupActionSheetTemplate>
             <!--filterable-->
@@ -8501,32 +8506,6 @@ class DropDownListComponent {
                     </span>
                 </div>
             </ng-template>
-            <!--default item-->
-            <ng-template [ngIf]="defaultItem && !itemTemplate">
-                <div
-                    class="k-list"
-                    [ngClass]="optionLabelSizeClass"
-                >
-                    <div class="k-list-optionlabel" [ngClass]="{ 'k-disabled': isDisabledDefaultItem }" kendoDropDownsSelectable [index]="-1">
-                        {{ getDefaultItemText() }}
-                    </div>
-                </div>
-            </ng-template>
-            <ng-template [ngIf]="defaultItem && itemTemplate">
-                <div
-                    class="k-list"
-                    [ngClass]="optionLabelSizeClass"
-                >
-                    <div class="k-list-optionlabel" [ngClass]="{ 'k-disabled': isDisabledDefaultItem }" kendoDropDownsSelectable [index]="-1">
-                        <ng-template
-                            [templateContext]="{
-                                templateRef: itemTemplate.templateRef,
-                                $implicit: defaultItem
-                            }">
-                        </ng-template>
-                    </div>
-                </div>
-            </ng-template>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
                 [templateContext]="{
@@ -8537,7 +8516,7 @@ class DropDownListComponent {
             <kendo-list
                 #optionsList
                 [id]="listBoxId"
-                [size]="size"
+                [size]="isAdaptive ? 'large' : size"
                 [rounded]="rounded"
                 [optionPrefix]="optionPrefix"
                 [data]="data"
@@ -8551,7 +8530,8 @@ class DropDownListComponent {
                 [virtual]="virtual"
                 [ariaLive]="ariaLive"
                 [showStickyHeader]="showStickyHeader"
-                (pageChange)="pageChange($event)">
+                (pageChange)="pageChange($event)"
+                [defaultItem]="defaultItem">
             </kendo-list>
             <!--no-data template-->
             <div class="k-no-data" *ngIf="data.length === 0">
@@ -8571,7 +8551,7 @@ class DropDownListComponent {
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownListComponent, decorators: [{
             type: Component,
@@ -8609,6 +8589,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             i18n-popupLabel="kendo.dropdownlist.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
+
+            i18n-adaptiveCloseButtonTitle="kendo.dropdownlist.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
+
+            i18n-filterPlaceholder="kendo.dropdownlist.filterPlaceholder|The text for the input's placeholder when filtering is enabled"
+            filterInputPlaceholder="Filter"
         >
         </ng-container>
         <span class="k-input-inner" unselectable="on" [id]="valueLabelId" (click)="$event.preventDefault()">
@@ -8640,8 +8626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [name]="icon || 'caret-alt-down'"
                 innerCssClass="k-button-icon"
                 [customFontClass]="customIconClass"
-                [svgIcon]="svgIcon || caretAltDownSVGIcon"
-            >
+                [svgIcon]="svgIcon || caretAltDownSVGIcon">
             </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
@@ -8650,17 +8635,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
         <ng-container #container></ng-container>
 
-        <!--adaptive rendering-->
-        <responsive-renderer
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="filterable"
-            [subtitle]="subtitle"
+            [subtitle]="adaptiveSubtitle"
             (closePopup)="togglePopup(false)"
             (textInputChange)="onFilterChange($event)"
-            >
-        </responsive-renderer>
+            [filterable]="filterable">
+        </kendo-adaptive-renderer>
 
         <ng-template #sharedPopupActionSheetTemplate>
             <!--filterable-->
@@ -8695,32 +8678,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     </span>
                 </div>
             </ng-template>
-            <!--default item-->
-            <ng-template [ngIf]="defaultItem && !itemTemplate">
-                <div
-                    class="k-list"
-                    [ngClass]="optionLabelSizeClass"
-                >
-                    <div class="k-list-optionlabel" [ngClass]="{ 'k-disabled': isDisabledDefaultItem }" kendoDropDownsSelectable [index]="-1">
-                        {{ getDefaultItemText() }}
-                    </div>
-                </div>
-            </ng-template>
-            <ng-template [ngIf]="defaultItem && itemTemplate">
-                <div
-                    class="k-list"
-                    [ngClass]="optionLabelSizeClass"
-                >
-                    <div class="k-list-optionlabel" [ngClass]="{ 'k-disabled': isDisabledDefaultItem }" kendoDropDownsSelectable [index]="-1">
-                        <ng-template
-                            [templateContext]="{
-                                templateRef: itemTemplate.templateRef,
-                                $implicit: defaultItem
-                            }">
-                        </ng-template>
-                    </div>
-                </div>
-            </ng-template>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
                 [templateContext]="{
@@ -8731,7 +8688,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <kendo-list
                 #optionsList
                 [id]="listBoxId"
-                [size]="size"
+                [size]="isAdaptive ? 'large' : size"
                 [rounded]="rounded"
                 [optionPrefix]="optionPrefix"
                 [data]="data"
@@ -8745,7 +8702,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [virtual]="virtual"
                 [ariaLive]="ariaLive"
                 [showStickyHeader]="showStickyHeader"
-                (pageChange)="pageChange($event)">
+                (pageChange)="pageChange($event)"
+                [defaultItem]="defaultItem">
             </kendo-list>
             <!--no-data template-->
             <div class="k-no-data" *ngIf="data.length === 0">
@@ -8767,13 +8725,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </ng-template>
   `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, NgIf, TemplateContextDirective, NgClass, EventsOutsideAngularDirective, IconWrapperComponent, NgTemplateOutlet, ResizeSensorComponent, ResponsiveRendererComponent, ReactiveFormsModule, FilterInputDirective, FormsModule, SelectableDirective, ListComponent]
+                    imports: [LocalizedMessagesDirective, NgIf, TemplateContextDirective, NgClass, EventsOutsideAngularDirective, IconWrapperComponent, NgTemplateOutlet, ResizeSensorComponent, AdaptiveRendererComponent, ReactiveFormsModule, FilterInputDirective, FormsModule, ListComponent]
                 }]
         }], 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: i0.Injector }, { type: i7.AdaptiveService }]; }, propDecorators: { customIconClass: [{
                 type: Input
-            }], responsiveRendererComponent: [{
+            }], adaptiveRenderer: [{
                 type: ViewChild,
-                args: [ResponsiveRendererComponent]
+                args: [AdaptiveRendererComponent]
             }], showStickyHeader: [{
                 type: Input
             }], icon: [{
@@ -8792,9 +8750,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], adaptiveMode: [{
                 type: Input
-            }], title: [{
+            }], adaptiveTitle: [{
                 type: Input
-            }], subtitle: [{
+            }], adaptiveSubtitle: [{
                 type: Input
             }], popupSettings: [{
                 type: Input
@@ -8917,71 +8875,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], readonlyAttr: [{
                 type: HostBinding,
                 args: ['attr.readonly']
-            }], isBusy: [{
-                type: HostBinding,
-                args: ['attr.aria-busy']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], haspopup: [{
-                type: HostBinding,
-                args: ['attr.aria-haspopup']
-            }], hostAriaInvalid: [{
-                type: HostBinding,
-                args: ['attr.aria-invalid']
-            }], keydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], keypress: [{
-                type: HostListener,
-                args: ['keypress', ['$event']]
-            }], click: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
-/**
- * Renders the content of the custom list item in the MultiSelect
- * ([see example](slug:templates_multiselect#toc-rendering-custom-item-content)).
- * The template context is set to the current component.
- * To get a reference to the current text that is typed by the
- * user, use the `let-customItem` directive.
- *
- * > The `CustomItemTemplate` directive can only be used with the MultiSelect component.
- *
- * @example
- * ```ts
- * _@Component({
- * selector: 'my-app',
- * template: `
- *  <kendo-multiselect [data]="listItems" [allowCustom]="true">
- *    <ng-template kendoMultiSelectCustomItemTemplate let-customItem>
- *      <span>New Item: {{customItem}}</span>
- *    </ng-template>
- *  </kendo-multiselect>
- * `
- * })
- * class AppComponent {
- *   public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
- * }
- * ```
- *
- */
-class CustomItemTemplateDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CustomItemTemplateDirective, isStandalone: true, selector: "[kendoMultiSelectCustomItemTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomItemTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoMultiSelectCustomItemTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+            }], isBusy: [{
+                type: HostBinding,
+                args: ['attr.aria-busy']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], haspopup: [{
+                type: HostBinding,
+                args: ['attr.aria-haspopup']
+            }], hostAriaInvalid: [{
+                type: HostBinding,
+                args: ['attr.aria-invalid']
+            }], keydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], keypress: [{
+                type: HostListener,
+                args: ['keypress', ['$event']]
+            }], click: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
 
 /**
  * Renders the selected tag value of the MultiSelect
@@ -9413,10 +9328,6 @@ class MultiSelectComponent {
      * @hidden
      */
     xIcon = xIcon;
-    /**
-     * @hidden
-     */
-    plusIcon = plusIcon;
     listBoxId = `k-${guid()}`;
     tagListId = `k-${guid()}`;
     tagPrefix = "tag-" + guid();
@@ -9428,18 +9339,18 @@ class MultiSelectComponent {
     /**
      * @hidden
      */
-    responsiveRendererComponent;
+    adaptiveRendererComponent;
     /**
      * @hidden
      */
     get actionSheet() {
-        return this.responsiveRendererComponent?.actionSheet;
+        return this.adaptiveRendererComponent?.actionSheet;
     }
     /**
      * @hidden
      */
     get actionSheetSearchBar() {
-        return this.responsiveRendererComponent?.actionSheetSearchBar;
+        return this.adaptiveRendererComponent?.actionSheetSearchBar;
     }
     /**
      * @hidden
@@ -9494,16 +9405,6 @@ class MultiSelectComponent {
             });
         }
     }
-    /**
-     * @hidden
-     */
-    onAdaptiveTextBoxChange(text) {
-        if (this.filterable) {
-            this.filterChange.emit(text);
-            return;
-        }
-        this.searchTextAndFocus(text);
-    }
     /**
      * Blurs the MultiSelect.
      */
@@ -9528,29 +9429,7 @@ class MultiSelectComponent {
      */
     handleBlur() {
         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.closePopup();
-            }
+            this.blurComponent();
         }
     }
     /**
@@ -9785,19 +9664,14 @@ class MultiSelectComponent {
     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.
+     * By default the ActionSheet title uses the text provided for the label of the MultiSelect.
      */
-    title = '';
+    adaptiveTitle = '';
     /**
      * 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.
+     * By default the ActionSheet does not render a subtitle.
     */
-    set subtitle(_subtitle) {
-        this._subtitle = _subtitle;
-    }
-    get subtitle() {
-        return this._subtitle || this.placeholder;
-    }
+    adaptiveSubtitle;
     /**
      * @hidden
      */
@@ -10077,13 +9951,32 @@ class MultiSelectComponent {
     get isAdaptive() {
         return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
     }
+    /**
+     * @hidden
+     */
+    applyValue() {
+        if (!this.isActionSheetExpanded) {
+            return;
+        }
+        const isValueChanged = !(this.value.every(i => this._valueHolder.find(item => i === item)) && this._valueHolder.length === this.value.length);
+        if (isValueChanged) {
+            this.value = this._valueHolder;
+            this._valueHolder = [];
+            this.emitValueChange();
+        }
+        this.clearFilter();
+        this.togglePopup(false);
+        if (this.allowCustom && this.isCustomValueSelected) {
+            this.isCustomValueSelected = false;
+        }
+    }
     disabledIndices;
     initialized = false;
     _size = 'medium';
     _rounded = 'medium';
     _fillMode = 'solid';
-    _subtitle;
     _valueHolder = [];
+    isCustomValueSelected = false;
     constructor(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, injector, hostElement, adaptiveService) {
         this.wrapper = wrapper;
         this.localization = localization;
@@ -10117,7 +10010,8 @@ class MultiSelectComponent {
      * @hidden
      */
     get customItemSizeClass() {
-        return `${this.size ? getSizeClass('list', this.size) : ''}`;
+        const currentSize = this.isAdaptive ? 'large' : this.size;
+        return `${currentSize ? getSizeClass('list', currentSize) : ''}`;
     }
     get width() {
         let wrapperOffsetWidth = 0;
@@ -10156,22 +10050,6 @@ class MultiSelectComponent {
             return 'visible';
         }
     }
-    /**
-     * @hidden
-     */
-    applyValue() {
-        this.value = this._valueHolder;
-        this._valueHolder = [];
-        this.emitValueChange();
-        this.togglePopup(false);
-    }
-    /**
-     * @hidden
-     */
-    cancelValue() {
-        this._valueHolder = [];
-        this.togglePopup(false);
-    }
     /**
      * @hidden
      */
@@ -10277,6 +10155,9 @@ class MultiSelectComponent {
         if (this.isOpen && this.selectionService.focused === undefined) {
             if (this.dataService.itemsCount > 0) {
                 this.selectionService.focused = this.firstFocusableIndex(0);
+                if (this.allowCustom) {
+                    this.selectionService.focused = 0;
+                }
             }
             else if (this.allowCustom) {
                 this.selectionService.focused = -1;
@@ -10304,6 +10185,10 @@ class MultiSelectComponent {
      * @hidden
      */
     handleFilter(text) {
+        if (this.isActionSheetExpanded && this.allowCustom && this.isCustomValueSelected) {
+            this.addCustomValue(this.text);
+            this.addCustomValue(text);
+        }
         this.text = text;
         if (text && !this.isOpen) {
             this.openPopup();
@@ -10450,11 +10335,6 @@ class MultiSelectComponent {
         this.searchbar.setInputSize();
         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)));
-        if (this.actionSheet && isDocumentAvailable()) {
-            // The following syntax is used as it does not violate CSP compliance
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
-        }
         this._zone.onStable.pipe(take(1)).subscribe(() => {
             const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby') ||
                 this.searchbar.input.nativeElement.getAttribute('data-kendo-label-id');
@@ -10714,34 +10594,49 @@ class MultiSelectComponent {
                 const itemIndex = this.dataService.indexOf(newValue);
                 const customItem = itemIndex === -1;
                 if (this.value.indexOf(newValue) === -1) {
-                    this.tags = this.tagMapper([...this.selectedDataItems, normalizedValue]);
+                    !this.isActionSheetExpanded && (this.tags = this.tagMapper([...this.selectedDataItems, normalizedValue]));
                     if (!customItem) {
                         this.selectionService.add(itemIndex);
                     }
+                    else if (this.isActionSheetExpanded) {
+                        const isValueInHolder = this._valueHolder.some(item => getter(item, this.valueField) === newValue);
+                        if (isValueInHolder) {
+                            this._valueHolder = this._valueHolder.filter(item => getter(item, this.valueField) !== newValue);
+                            this.isCustomValueSelected = false;
+                        }
+                        else {
+                            this._valueHolder = [...this._valueHolder, newValue];
+                            this.isCustomValueSelected = true;
+                        }
+                    }
                     else {
                         this.value = [...this.value, newValue];
                     }
                 }
+                else if (!customItem && this.selectionService.isSelected(itemIndex)) {
+                    this.selectionService.deselect(itemIndex);
+                    this.selectionService.focused = itemIndex;
+                }
+                else if (this.isActionSheetExpanded) {
+                    this._valueHolder = this._valueHolder.filter(item => getter(item, this.valueField) !== newValue);
+                    this.isCustomValueSelected = false;
+                }
                 else {
-                    if (!customItem && this.selectionService.isSelected(itemIndex)) {
-                        this.selectionService.deselect(itemIndex);
-                        this.selectionService.focused = itemIndex;
-                    }
-                    else {
-                        this.value = this.value.filter(item => getter(item, this.valueField) !== newValue);
-                    }
+                    this.value = this.value.filter(item => getter(item, this.valueField) !== newValue);
                 }
-                this.emitValueChange();
+                !this.isActionSheetExpanded && this.emitValueChange();
             }
             if (this.autoClose) {
                 this.togglePopup(false);
             }
-            if (this.autoClose || !this.filterable) {
+            if ((this.autoClose || !this.filterable) && !this.isActionSheetExpanded) {
                 this.clearFilter();
             }
-            this.nextTick(() => {
-                this.searchbar.focus();
-            });
+            if (!this.isActionSheetExpanded) {
+                this.nextTick(() => {
+                    this.searchbar.focus();
+                });
+            }
         });
     }
     handleItemChange(event) {
@@ -10749,7 +10644,7 @@ class MultiSelectComponent {
         if (this.autoClose && !event.preventClosingPopup && !this.isActionSheetExpanded) {
             this.togglePopup(false);
         }
-        if (this.autoClose || !this.filterable) {
+        if ((this.autoClose || !this.filterable) && !this.isActionSheetExpanded) {
             this.clearFilter();
         }
     }
@@ -11004,8 +10899,9 @@ class MultiSelectComponent {
         this._open = open;
         this.destroyPopup();
         if (this.isActionSheetExpanded) {
-            this.closeActionSheet();
-            this.focus();
+            this.actionSheet.toggle(false);
+            this.closed.emit();
+            this.isFocused = false;
         }
         if (this._open) {
             this.createPopup();
@@ -11111,29 +11007,46 @@ class MultiSelectComponent {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         }
     }
-    closeActionSheet() {
-        this.actionSheet.toggle(false);
-        this.filterable && this.filterChange.emit('');
-        this.responsiveRendererComponent.searchBarValue = '';
-        this.closed.emit();
-    }
     openActionSheet() {
-        this.windowSize = this.adaptiveService.size;
         this.actionSheet.toggle(true);
         // Stores the current value state until the user either accepts or cancels it
         this._valueHolder = [...this.value];
         this.cdr.detectChanges();
         setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
-        this.title = setActionSheetTitle(this.searchbar.input, this.title);
-        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
+        this.adaptiveTitle = setActionSheetTitle(this.searchbar.input, this.adaptiveTitle);
         this.cdr.detectChanges();
         this.opened.emit();
         this.optionsList.scrollToItem(this.selectionService.focused);
         this.selectionService.focus(this.selectionService.focused);
         this.actionSheetSearchBar.focus();
     }
+    blurComponent() {
+        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.closePopup();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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: i0.Injector }, { token: i0.ElementRef }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectComponent, isStandalone: true, selector: "kendo-multiselect", inputs: { showStickyHeader: "showStickyHeader", 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", inputAttributes: "inputAttributes" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", removeTag: "removeTag" }, host: { properties: { "class.k-readonly": "this.readonly", "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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectComponent, isStandalone: true, selector: "kendo-multiselect", inputs: { showStickyHeader: "showStickyHeader", 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", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", 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", inputAttributes: "inputAttributes" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", removeTag: "removeTag" }, host: { properties: { "class.k-readonly": "this.readonly", "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,
@@ -11150,7 +11063,7 @@ class MultiSelectComponent {
             {
                 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 }, { propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, 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: "tagList", first: true, predicate: TagListComponent, 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 }, { propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "adaptiveRendererComponent", first: true, predicate: AdaptiveRendererComponent, 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: "tagList", first: true, predicate: TagListComponent, 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"
@@ -11161,11 +11074,8 @@ class MultiSelectComponent {
             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"
+            i18n-adaptiveCloseButtonTitle="kendo.multiselect.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode."
+            adaptiveCloseButtonTitle="Close"
         >
         </ng-container>
 
@@ -11257,22 +11167,17 @@ class MultiSelectComponent {
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
         <ng-container #container></ng-container>
 
-        <!--adaptive rendering-->
-        <responsive-renderer
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="true"
-            [showActionButtons]="true"
-            [subtitle]="subtitle"
-            (closePopup)="togglePopup(false)"
-            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            [subtitle]="adaptiveSubtitle"
+            (closePopup)="applyValue()"
+            (textInputChange)="handleFilter($event)"
             [placeholder]="placeholder"
             (navigate)="handleNavigate($event)"
-            (onApply)="applyValue()"
-            (onCancel)="cancelValue()"
-            >
-        </responsive-renderer>
+            [searchBarValue]="text">
+        </kendo-adaptive-renderer>
 
         <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
@@ -11281,32 +11186,10 @@ class MultiSelectComponent {
                     templateRef: headerTemplate.templateRef
                 }">
             </ng-template>
-            <!--custom item template-->
-            <div
-                *ngIf="allowCustom && text"
-                class="k-list"
-                [ngClass]="customItemSizeClass"
-            >
-                <div class="k-list-item k-custom-item" kendoDropDownsSelectable [multipleSelection]="true" [index]="-1">
-                    <ng-template *ngIf="customItemTemplate;else default_custom_item_template"
-                        [templateContext]="{
-                            templateRef: customItemTemplate.templateRef,
-                            $implicit: text
-                        }">
-                    </ng-template>
-                    <ng-template #default_custom_item_template>{{ text }}</ng-template>
-                    <kendo-icon-wrapper
-                        class="k-icon"
-                        name="plus"
-                        [svgIcon]="plusIcon"
-                    >
-                    </kendo-icon-wrapper>
-                </div>
-            </div>
             <!--list-->
             <kendo-list
                 #optionsList
-                [size]="size"
+                [size]="isAdaptive ? 'large' : size"
                 [rounded]="rounded"
                 [id]="listBoxId"
                 [optionPrefix]="optionPrefix"
@@ -11325,6 +11208,9 @@ class MultiSelectComponent {
                 [isMultiselect]="true"
                 [isActionSheetExpanded]="isActionSheetExpanded"
                 [showStickyHeader]="showStickyHeader"
+                [customItemTemplate]="customItemTemplate"
+                [text]="text"
+                [allowCustom]="allowCustom"
             >
             </kendo-list>
             <!--no data template-->
@@ -11345,7 +11231,7 @@ class MultiSelectComponent {
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -11381,11 +11267,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.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"
+            i18n-adaptiveCloseButtonTitle="kendo.multiselect.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode."
+            adaptiveCloseButtonTitle="Close"
         >
         </ng-container>
 
@@ -11477,22 +11360,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
         <ng-container #container></ng-container>
 
-        <!--adaptive rendering-->
-        <responsive-renderer
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="true"
-            [showActionButtons]="true"
-            [subtitle]="subtitle"
-            (closePopup)="togglePopup(false)"
-            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            [subtitle]="adaptiveSubtitle"
+            (closePopup)="applyValue()"
+            (textInputChange)="handleFilter($event)"
             [placeholder]="placeholder"
             (navigate)="handleNavigate($event)"
-            (onApply)="applyValue()"
-            (onCancel)="cancelValue()"
-            >
-        </responsive-renderer>
+            [searchBarValue]="text">
+        </kendo-adaptive-renderer>
 
         <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
@@ -11501,32 +11379,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     templateRef: headerTemplate.templateRef
                 }">
             </ng-template>
-            <!--custom item template-->
-            <div
-                *ngIf="allowCustom && text"
-                class="k-list"
-                [ngClass]="customItemSizeClass"
-            >
-                <div class="k-list-item k-custom-item" kendoDropDownsSelectable [multipleSelection]="true" [index]="-1">
-                    <ng-template *ngIf="customItemTemplate;else default_custom_item_template"
-                        [templateContext]="{
-                            templateRef: customItemTemplate.templateRef,
-                            $implicit: text
-                        }">
-                    </ng-template>
-                    <ng-template #default_custom_item_template>{{ text }}</ng-template>
-                    <kendo-icon-wrapper
-                        class="k-icon"
-                        name="plus"
-                        [svgIcon]="plusIcon"
-                    >
-                    </kendo-icon-wrapper>
-                </div>
-            </div>
             <!--list-->
             <kendo-list
                 #optionsList
-                [size]="size"
+                [size]="isAdaptive ? 'large' : size"
                 [rounded]="rounded"
                 [id]="listBoxId"
                 [optionPrefix]="optionPrefix"
@@ -11545,6 +11401,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [isMultiselect]="true"
                 [isActionSheetExpanded]="isActionSheetExpanded"
                 [showStickyHeader]="showStickyHeader"
+                [customItemTemplate]="customItemTemplate"
+                [text]="text"
+                [allowCustom]="allowCustom"
             >
             </kendo-list>
             <!--no data template-->
@@ -11567,11 +11426,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </ng-template>
   `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, SharedDropDownEventsDirective, NgIf, NgTemplateOutlet, SeparatorComponent, TagListComponent, SearchBarComponent, IconWrapperComponent, ResizeSensorComponent, ResponsiveRendererComponent, TemplateContextDirective, NgClass, SelectableDirective, ListComponent]
+                    imports: [LocalizedMessagesDirective, SharedDropDownEventsDirective, NgIf, NgTemplateOutlet, SeparatorComponent, TagListComponent, SearchBarComponent, IconWrapperComponent, ResizeSensorComponent, AdaptiveRendererComponent, TemplateContextDirective, ListComponent]
                 }]
-        }], 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: i0.Injector }, { type: i0.ElementRef }, { type: i7.AdaptiveService }]; }, propDecorators: { responsiveRendererComponent: [{
+        }], 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: i0.Injector }, { type: i0.ElementRef }, { type: i7.AdaptiveService }]; }, propDecorators: { adaptiveRendererComponent: [{
                 type: ViewChild,
-                args: [ResponsiveRendererComponent]
+                args: [AdaptiveRendererComponent]
             }], showStickyHeader: [{
                 type: Input
             }], focusableId: [{
@@ -11603,9 +11462,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], adaptiveMode: [{
                 type: Input
-            }], title: [{
+            }], adaptiveTitle: [{
                 type: Input
-            }], subtitle: [{
+            }], adaptiveSubtitle: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -12030,11 +11889,6 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
             this.totalColumnsWidth = this.columns.reduce((total, currentColumn) => total + currentColumn.width, 0);
         });
         this.cdr.detectChanges();
-        if (this.actionSheet && isDocumentAvailable()) {
-            // The following syntax is used as it does not violate CSP compliance
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
-        }
     }
     ngOnDestroy() {
         super.ngOnDestroy();
@@ -12163,6 +12017,8 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
                 when its role is 'region'
             "
             popupLabel="Options list"
+            i18n-adaptiveCloseButtonTitle="kendo.multicolumncombobox.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
         ></ng-container>
 
         <ng-container
@@ -12253,19 +12109,17 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
         <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->
         <ng-container #container></ng-container>
 
-        <!--adaptive rendering-->
-        <responsive-renderer
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="true"
-            [subtitle]="subtitle"
-            (closePopup)="togglePopup(false)"
-            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            [subtitle]="adaptiveSubtitle"
+            (closePopup)="closeActionSheet()"
+            (textInputChange)="searchBarChange($event)"
             (navigate)="handleNavigate($event)"
             [placeholder]="placeholder"
-            >
-        </responsive-renderer>
+            [searchBarValue]="text">
+        </kendo-adaptive-renderer>
 
         <ng-template #sharedPopupActionSheetTemplate>
             <!--user-defined header template -->
@@ -12347,6 +12201,7 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
                     #optionsList
                     [optionPrefix]="optionPrefix"
                     [data]="data"
+                    [size]="isAdaptive ? 'large' : size"
                     [textField]="textField"
                     [valueField]="valueField"
                     [template]="{ templateRef: rowTemplate }"
@@ -12400,7 +12255,7 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
                 </ng-container>
             </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
             type: Component,
@@ -12450,6 +12305,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 when its role is 'region'
             "
             popupLabel="Options list"
+            i18n-adaptiveCloseButtonTitle="kendo.multicolumncombobox.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
         ></ng-container>
 
         <ng-container
@@ -12540,19 +12397,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->
         <ng-container #container></ng-container>
 
-        <!--adaptive rendering-->
-        <responsive-renderer
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="true"
-            [subtitle]="subtitle"
-            (closePopup)="togglePopup(false)"
-            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            [subtitle]="adaptiveSubtitle"
+            (closePopup)="closeActionSheet()"
+            (textInputChange)="searchBarChange($event)"
             (navigate)="handleNavigate($event)"
             [placeholder]="placeholder"
-            >
-        </responsive-renderer>
+            [searchBarValue]="text">
+        </kendo-adaptive-renderer>
 
         <ng-template #sharedPopupActionSheetTemplate>
             <!--user-defined header template -->
@@ -12634,6 +12489,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     #optionsList
                     [optionPrefix]="optionPrefix"
                     [data]="data"
+                    [size]="isAdaptive ? 'large' : size"
                     [textField]="textField"
                     [valueField]="valueField"
                     [template]="{ templateRef: rowTemplate }"
@@ -12689,7 +12545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </ng-template>
     `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, SharedDropDownEventsDirective, NgIf, NgTemplateOutlet, SeparatorComponent, SearchBarComponent, EventsOutsideAngularDirective, IconWrapperComponent, NgClass, ResizeSensorComponent, ResponsiveRendererComponent, TemplateContextDirective, NgFor, NgStyle, ListComponent]
+                    imports: [LocalizedMessagesDirective, SharedDropDownEventsDirective, NgIf, NgTemplateOutlet, SeparatorComponent, SearchBarComponent, EventsOutsideAngularDirective, IconWrapperComponent, NgClass, ResizeSensorComponent, AdaptiveRendererComponent, TemplateContextDirective, NgFor, NgStyle, ListComponent]
                 }]
         }], 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: i0.Injector }, { type: i0.ElementRef }, { type: i7.AdaptiveService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -12789,18 +12645,18 @@ class DropDownTreeComponent {
     /**
      * @hidden
      */
-    responsiveRendererComponent;
+    adaptiveRendererComponent;
     /**
      * @hidden
      */
     get actionSheet() {
-        return this.responsiveRendererComponent?.actionSheet;
+        return this.adaptiveRendererComponent?.actionSheet;
     }
     /**
      * @hidden
      */
     get actionSheetSearchBar() {
-        return this.responsiveRendererComponent?.actionSheetSearchBar;
+        return this.adaptiveRendererComponent?.actionSheetSearchBar;
     }
     hostClasses = true;
     get isReadonly() {
@@ -13201,14 +13057,14 @@ class DropDownTreeComponent {
     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.
+     * By default the ActionSheet title uses the text provided for the label of the DropDownTree.
      */
-    title = '';
+    adaptiveTitle = '';
     /**
      * 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.
+     * By default the ActionSheet does not render a subtitle.
     */
-    subtitle = '';
+    adaptiveSubtitle = '';
     /**
      * @hidden
      */
@@ -13222,7 +13078,9 @@ class DropDownTreeComponent {
     /**
      * @hidden
      */
-    isActionSheetExpanded = false;
+    get isActionSheetExpanded() {
+        return this.actionSheet?.expanded;
+    }
     /**
      * @hidden
      */
@@ -13403,11 +13261,6 @@ class DropDownTreeComponent {
         this.windowSize = this.adaptiveService.size;
         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)));
-        if (this.actionSheet && isDocumentAvailable()) {
-            // The following syntax is used as it does not violate CSP compliance
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
-        }
     }
     /**
      * @hidden
@@ -13739,19 +13592,6 @@ class DropDownTreeComponent {
             }
         });
     }
-    /**
-     * @hidden
-     */
-    onExpand() {
-        this._searchableNodes = getSearchableItems(this.treeViewId, this.actionSheet.element.nativeElement);
-        this.isActionSheetExpanded = true;
-    }
-    /**
-     * @hidden
-     */
-    onCollapse() {
-        this.isActionSheetExpanded = false;
-    }
     /**
      * @hidden
      *
@@ -13838,14 +13678,17 @@ class DropDownTreeComponent {
             this.popupRef.popupElement.removeEventListener('click', (event) => stopPropagation(event));
             this.popupRef.close();
             this.popupRef = null;
-            if (this.filter !== "") {
-                this.filter = "";
-                this.allNodesHidden = false;
-                if (hasObservers(this.filterChange)) {
-                    this._zone.run(() => {
-                        this.filterChange.emit("");
-                    });
-                }
+            this.clearFilter();
+        }
+    }
+    clearFilter() {
+        if (this.filter !== "") {
+            this.filter = "";
+            this.allNodesHidden = false;
+            if (hasObservers(this.filterChange)) {
+                this._zone.run(() => {
+                    this.filterChange.emit("");
+                });
             }
         }
     }
@@ -14020,26 +13863,20 @@ class DropDownTreeComponent {
     closeActionSheet() {
         this.actionSheet.toggle(false);
         if (this.filterable) {
-            this.actionSheetSearchBar.value = '';
-            this.filterChange.emit('');
+            this.clearFilter();
         }
         this.wrapper.nativeElement.focus();
         this.closed.emit();
     }
     openActionSheet() {
-        this.windowSize = this.adaptiveService.size;
-        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.adaptiveTitle = setActionSheetTitle(this.wrapper, this.adaptiveTitle);
         this.cdr.detectChanges();
         this.opened.emit();
         this.removeTreeViewFromTabOrder();
-        this.filterable && this.actionSheetSearchBar.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropDownTreeComponent, isStandalone: true, selector: "kendo-dropdowntree", inputs: { icon: "icon", svgIcon: "svgIcon", 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.aria-disabled": "this.isDisabled", "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", "class.k-readonly": "this.readonly" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropDownTreeComponent, isStandalone: true, selector: "kendo-dropdowntree", inputs: { icon: "icon", svgIcon: "svgIcon", 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", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle" }, 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.aria-disabled": "this.isDisabled", "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", "class.k-readonly": "this.readonly" } }, providers: [
             DataService,
             SelectionService,
             NavigationService,
@@ -14066,7 +13903,7 @@ class DropDownTreeComponent {
                 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: "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: `
+        ], 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: "adaptiveRendererComponent", first: true, predicate: AdaptiveRendererComponent, 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"
@@ -14082,6 +13919,12 @@ class DropDownTreeComponent {
 
             i18n-popupLabel="kendo.dropdowntree.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
+
+            i18n-adaptiveCloseButtonTitle="kendo.dropdowntree.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
+
+            i18n-filterInputPlaceholder="kendo.dropdowntree.filterInputPlaceholder|The text for the input's placeholder when filtering is enabled"
+            filterInputPlaceholder="Filter"
         >
         </ng-container>
         <span
@@ -14135,19 +13978,18 @@ class DropDownTreeComponent {
         </ng-template>
         <ng-container #container></ng-container>
 
-        <!--adaptive rendering-->
-        <responsive-renderer
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="filterable"
-            [subtitle]="subtitle"
+            [subtitle]="adaptiveSubtitle"
             (closePopup)="togglePopup(false)"
-            (onExpand)="onExpand()"
-            (onCollapse)="onCollapse()"
             (textInputChange)="handleFilterInputChange($event)"
-        >
-        </responsive-renderer>
+            [placeholder]="placeholder"
+            [searchBarValue]="filter"
+            [filterable]="filterable">
+        </kendo-adaptive-renderer>
+
         <ng-template #sharedPopupActionSheetTemplate>
             <span
                 *ngIf="filterable && !isActionSheetExpanded"
@@ -14194,7 +14036,7 @@ class DropDownTreeComponent {
                 #treeview
                 [attr.id]="treeViewId"
                 *ngIf="data.length !== 0 && !allNodesHidden"
-                [size]="size"
+                [size]="windowSize !== 'large' ? 'large' : size"
                 [nodes]="data"
                 [style.maxHeight.px]="listHeight"
                 [animate]="false"
@@ -14239,7 +14081,7 @@ class DropDownTreeComponent {
         </ng-template>
 
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "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"] }, { kind: "directive", type: SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "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"] }, { kind: "directive", type: SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownTreeComponent, decorators: [{
             type: Component,
@@ -14290,6 +14132,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             i18n-popupLabel="kendo.dropdowntree.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
+
+            i18n-adaptiveCloseButtonTitle="kendo.dropdowntree.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
+
+            i18n-filterInputPlaceholder="kendo.dropdowntree.filterInputPlaceholder|The text for the input's placeholder when filtering is enabled"
+            filterInputPlaceholder="Filter"
         >
         </ng-container>
         <span
@@ -14343,19 +14191,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </ng-template>
         <ng-container #container></ng-container>
 
-        <!--adaptive rendering-->
-        <responsive-renderer
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="filterable"
-            [subtitle]="subtitle"
+            [subtitle]="adaptiveSubtitle"
             (closePopup)="togglePopup(false)"
-            (onExpand)="onExpand()"
-            (onCollapse)="onCollapse()"
             (textInputChange)="handleFilterInputChange($event)"
-        >
-        </responsive-renderer>
+            [placeholder]="placeholder"
+            [searchBarValue]="filter"
+            [filterable]="filterable">
+        </kendo-adaptive-renderer>
+
         <ng-template #sharedPopupActionSheetTemplate>
             <span
                 *ngIf="filterable && !isActionSheetExpanded"
@@ -14402,7 +14249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 #treeview
                 [attr.id]="treeViewId"
                 *ngIf="data.length !== 0 && !allNodesHidden"
-                [size]="size"
+                [size]="windowSize !== 'large' ? 'large' : size"
                 [nodes]="data"
                 [style.maxHeight.px]="listHeight"
                 [animate]="false"
@@ -14450,15 +14297,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, NgIf, TemplateContextDirective, IconWrapperComponent, NgClass, NgTemplateOutlet, ResponsiveRendererComponent, FilterInputDirective, EventsOutsideAngularDirective, TreeViewComponent, SelectDirective, ResizeSensorComponent]
+                    imports: [LocalizedMessagesDirective, NgIf, TemplateContextDirective, IconWrapperComponent, NgClass, NgTemplateOutlet, AdaptiveRendererComponent, FilterInputDirective, EventsOutsideAngularDirective, TreeViewComponent, SelectDirective, ResizeSensorComponent]
                 }]
         }], 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: i7.AdaptiveService }]; }, propDecorators: { icon: [{
                 type: Input
             }], svgIcon: [{
                 type: Input
-            }], responsiveRendererComponent: [{
+            }], adaptiveRendererComponent: [{
                 type: ViewChild,
-                args: [ResponsiveRendererComponent]
+                args: [AdaptiveRendererComponent]
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-dropdowntree']
@@ -14615,9 +14462,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], adaptiveMode: [{
                 type: Input
-            }], title: [{
+            }], adaptiveTitle: [{
                 type: Input
-            }], subtitle: [{
+            }], adaptiveSubtitle: [{
                 type: Input
             }] } });
 
@@ -15179,41 +15026,24 @@ class MultiSelectTreeComponent {
      */
     onFilterChange(text) {
         if (this.filterable) {
+            this.filter = text;
             this.filterChange.emit(text);
         }
     }
-    /**
-     * @hidden
-     */
-    onExpand() {
-        this._searchableNodes = getSearchableItems(this.treeViewId, this.actionSheet.element.nativeElement);
-        this.isActionSheetExpanded = true;
-    }
-    /**
-     * @hidden
-     */
-    onCollapse() {
-        this.isActionSheetExpanded = false;
-    }
     /**
      * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
      */
     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.
+     * By default the ActionSheet title uses the text provided for the label of the MultiSelectTree.
      */
-    title = '';
+    adaptiveTitle = '';
     /**
      * 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.
+     * By default the ActionSheet does not render a subtitle.
     */
-    set subtitle(_subtitle) {
-        this._subtitle = _subtitle;
-    }
-    get subtitle() {
-        return this._subtitle || this.placeholder;
-    }
+    adaptiveSubtitle;
     /**
      * @hidden
      */
@@ -15227,7 +15057,9 @@ class MultiSelectTreeComponent {
     /**
      * @hidden
      */
-    isActionSheetExpanded = false;
+    get isActionSheetExpanded() {
+        return this.actionSheet?.expanded;
+    }
     /**
      * @hidden
      */
@@ -15267,18 +15099,18 @@ class MultiSelectTreeComponent {
     /**
      * @hidden
      */
-    responsiveRendererComponent;
+    adaptiveRendererComponent;
     /**
      * @hidden
      */
     get actionSheet() {
-        return this.responsiveRendererComponent?.actionSheet;
+        return this.adaptiveRendererComponent?.actionSheet;
     }
     /**
      * @hidden
      */
     get actionSheetSearchBar() {
-        return this.responsiveRendererComponent?.actionSheetSearchBar;
+        return this.adaptiveRendererComponent?.actionSheetSearchBar;
     }
     /**
      * @hidden
@@ -15836,7 +15668,6 @@ class MultiSelectTreeComponent {
     tags;
     focusedTagIndex = undefined;
     disabledIndices;
-    _subtitle;
     _nodes;
     _value = [];
     _tabindex = 0;
@@ -15845,8 +15676,6 @@ class MultiSelectTreeComponent {
     _isFocused = false;
     _treeview;
     _dataItems;
-    _tempValue;
-    _initiallyCheckedItems = [];
     _size = 'medium';
     _rounded = 'medium';
     _fillMode = 'solid';
@@ -15892,17 +15721,11 @@ class MultiSelectTreeComponent {
             this.cdr.markForCheck();
         }));
         this.setComponentClasses();
-        this._initiallyCheckedItems = [...this.checkedItems];
     }
     ngAfterViewInit() {
         this.windowSize = this.adaptiveService.size;
         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)));
-        if (this.actionSheet && isDocumentAvailable()) {
-            // The following syntax is used as it does not violate CSP compliance
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
-        }
     }
     /**
      * @hidden
@@ -15948,23 +15771,6 @@ class MultiSelectTreeComponent {
             this.allNodesHidden = this.areNodesHidden(this.data);
         }
     }
-    /**
-     * @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
@@ -16388,14 +16194,17 @@ class MultiSelectTreeComponent {
             this.popupRef = null;
             this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
             this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
-            if (this.filter !== "") {
-                this.filter = "";
-                this.allNodesHidden = false;
-                if (hasObservers(this.filterChange)) {
-                    this._zone.run(() => {
-                        this.filterChange.emit("");
-                    });
-                }
+            this.clearFilter();
+        }
+    }
+    clearFilter() {
+        if (this.filter !== "") {
+            this.filter = "";
+            this.allNodesHidden = false;
+            if (hasObservers(this.filterChange)) {
+                this._zone.run(() => {
+                    this.filterChange.emit("");
+                });
             }
         }
     }
@@ -16587,9 +16396,7 @@ class MultiSelectTreeComponent {
     }
     setState() {
         if (isPresent(this.dataItems) && isPresent(this.valueField)) {
-            if (!this.isActionSheetExpanded) {
-                this.setTags();
-            }
+            this.setTags();
             this.checkedItems = this.dataItems.slice();
         }
         this.cdr.markForCheck();
@@ -16612,13 +16419,8 @@ class MultiSelectTreeComponent {
         const newValue = this.valuePrimitive ?
             value.map(item => valueFrom(item, this.valueField)) :
             value.map(item => item.dataItem);
-        if (this.isActionSheetExpanded) {
-            this._tempValue = newValue.slice();
-        }
-        else {
-            this.value = newValue;
-            this.emitValueChange(this.value);
-        }
+        this.value = newValue;
+        this.emitValueChange(this.value);
     }
     /**
      * @hidden
@@ -16700,26 +16502,20 @@ class MultiSelectTreeComponent {
         this.actionSheet.toggle(false);
         this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
-        if (this.filterable) {
-            this.actionSheetSearchBar.value = '';
-            this.filterChange.emit('');
-        }
+        this.clearFilter();
         this.closed.emit();
     }
     openActionSheet() {
-        this.windowSize = this.adaptiveService.size;
         this.actionSheet.toggle(true);
-        this.title = setActionSheetTitle(this.wrapper, this.title);
+        this.adaptiveTitle = setActionSheetTitle(this.wrapper, this.adaptiveTitle);
         this.cdr.detectChanges();
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.treeViewId);
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
-        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
         this.cdr.detectChanges();
         this.opened.emit();
-        this.filterable && this.actionSheetSearchBar.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectTreeComponent, isStandalone: true, 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-multiselecttree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "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-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant", "class.k-readonly": "this.readonly" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectTreeComponent, isStandalone: true, selector: "kendo-multiselecttree", inputs: { adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", 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-multiselecttree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "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-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant", "class.k-readonly": "this.readonly" } }, providers: [
             LocalizationService,
             NavigationService,
             DataService,
@@ -16747,7 +16543,7 @@ class MultiSelectTreeComponent {
                 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: "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: `
+        ], 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: "adaptiveRendererComponent", first: true, predicate: AdaptiveRendererComponent, 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"
@@ -16764,11 +16560,11 @@ class MultiSelectTreeComponent {
             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-adaptiveCloseButtonTitle="kendo.multiselecttree.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
 
-            i18n-cancelButton="kendo.multiselecttree.cancelButton|The text of the Cancel button in the action sheet"
-            cancelButton="Cancel"
+            i18n-filterInputPlaceholder="kendo.multiselecttree.filterInputPlaceholder|The text for the input's placeholder when filtering is enabled"
+            filterInputPlaceholder="Filter"
         >
         </ng-container>
         <kendo-taglist
@@ -16822,22 +16618,19 @@ class MultiSelectTreeComponent {
             <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
         </ng-template>
         <ng-container #container></ng-container>
-        <!--adaptive rendering-->
-        <responsive-renderer
+
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="filterable"
-            [showActionButtons]="true"
-            [subtitle]="subtitle"
+            [subtitle]="adaptiveSubtitle"
             (closePopup)="togglePopup(false)"
-            (onExpand)="onExpand()"
-            (onCollapse)="onCollapse()"
             (textInputChange)="onFilterChange($event)"
-            (onApply)="applyValue()"
-            (onCancel)="cancelValue()"
-            >
-        </responsive-renderer>
+            [searchBarValue]="filter"
+            [placeholder]="placeholder"
+            [filterable]="filterable">
+        </kendo-adaptive-renderer>
+
         <ng-template #sharedPopupActionSheetTemplate>
             <div
                 *ngIf="filterable && !isActionSheetExpanded"
@@ -16915,7 +16708,7 @@ class MultiSelectTreeComponent {
             </div>
             <kendo-treeview
                 #treeview
-                [size]="size"
+                [size]="windowSize !== 'large' ? 'large' : size"
                 [attr.id]="treeViewId"
                 [nodes]="data"
                 [style.maxHeight.px]="listHeight"
@@ -16967,7 +16760,7 @@ class MultiSelectTreeComponent {
         </ng-template>
 
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "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"] }, { kind: "directive", type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "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"] }, { kind: "directive", type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectTreeComponent, decorators: [{
             type: Component,
@@ -17020,11 +16813,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.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-adaptiveCloseButtonTitle="kendo.multiselecttree.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
 
-            i18n-cancelButton="kendo.multiselecttree.cancelButton|The text of the Cancel button in the action sheet"
-            cancelButton="Cancel"
+            i18n-filterInputPlaceholder="kendo.multiselecttree.filterInputPlaceholder|The text for the input's placeholder when filtering is enabled"
+            filterInputPlaceholder="Filter"
         >
         </ng-container>
         <kendo-taglist
@@ -17078,22 +16871,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
         </ng-template>
         <ng-container #container></ng-container>
-        <!--adaptive rendering-->
-        <responsive-renderer
+
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="filterable"
-            [showActionButtons]="true"
-            [subtitle]="subtitle"
+            [subtitle]="adaptiveSubtitle"
             (closePopup)="togglePopup(false)"
-            (onExpand)="onExpand()"
-            (onCollapse)="onCollapse()"
             (textInputChange)="onFilterChange($event)"
-            (onApply)="applyValue()"
-            (onCancel)="cancelValue()"
-            >
-        </responsive-renderer>
+            [searchBarValue]="filter"
+            [placeholder]="placeholder"
+            [filterable]="filterable">
+        </kendo-adaptive-renderer>
+
         <ng-template #sharedPopupActionSheetTemplate>
             <div
                 *ngIf="filterable && !isActionSheetExpanded"
@@ -17171,7 +16961,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </div>
             <kendo-treeview
                 #treeview
-                [size]="size"
+                [size]="windowSize !== 'large' ? 'large' : size"
                 [attr.id]="treeViewId"
                 [nodes]="data"
                 [style.maxHeight.px]="listHeight"
@@ -17225,7 +17015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
     `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, TagListComponent, NgIf, IconWrapperComponent, NgTemplateOutlet, ResponsiveRendererComponent, NgClass, FilterInputDirective, EventsOutsideAngularDirective, TemplateContextDirective, CheckAllDirective, TreeViewComponent, CheckDirective, ResizeSensorComponent]
+                    imports: [LocalizedMessagesDirective, TagListComponent, NgIf, IconWrapperComponent, NgTemplateOutlet, AdaptiveRendererComponent, NgClass, FilterInputDirective, EventsOutsideAngularDirective, TemplateContextDirective, CheckAllDirective, TreeViewComponent, CheckDirective, ResizeSensorComponent]
                 }]
         }], 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: i7.AdaptiveService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -17277,13 +17067,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['attr.aria-activedescendant']
             }], adaptiveMode: [{
                 type: Input
-            }], title: [{
+            }], adaptiveTitle: [{
                 type: Input
-            }], subtitle: [{
+            }], adaptiveSubtitle: [{
                 type: Input
-            }], responsiveRendererComponent: [{
+            }], adaptiveRendererComponent: [{
                 type: ViewChild,
-                args: [ResponsiveRendererComponent]
+                args: [AdaptiveRendererComponent]
             }], headerTemplate: [{
                 type: ContentChild,
                 args: [HeaderTemplateDirective, { static: false }]
@@ -18324,5 +18114,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.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, KENDO_AUTOCOMPLETE, KENDO_COMBOBOX, KENDO_DROPDOWNLIST, KENDO_DROPDOWNS, KENDO_DROPDOWNTREE, KENDO_MULTICOLUMNCOMBOBOX, KENDO_MULTISELECT, KENDO_MULTISELECTTREE, ListComponent, ListItemDirective, LocalizedMessagesDirective, MultiColumnComboBoxComponent, MultiSelectComponent, MultiSelectModule, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, MultiSelectTreeSummaryTagDirective, NoDataTemplateDirective, NodeTemplateDirective, PreventableEvent, RemoveTagEvent, ResponsiveRendererComponent, SearchBarComponent, SelectableDirective, SummaryTagDirective, TagListComponent, TagTemplateDirective, ValueTemplateDirective };
+export { AdaptiveRendererComponent, 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, KENDO_AUTOCOMPLETE, KENDO_COMBOBOX, KENDO_DROPDOWNLIST, KENDO_DROPDOWNS, KENDO_DROPDOWNTREE, KENDO_MULTICOLUMNCOMBOBOX, KENDO_MULTISELECT, KENDO_MULTISELECTTREE, ListComponent, ListItemDirective, LocalizedMessagesDirective, MultiColumnComboBoxComponent, MultiSelectComponent, MultiSelectModule, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, MultiSelectTreeSummaryTagDirective, NoDataTemplateDirective, NodeTemplateDirective, PreventableEvent, RemoveTagEvent, SearchBarComponent, SelectableDirective, SummaryTagDirective, TagListComponent, TagTemplateDirective, ValueTemplateDirective };