@progress/kendo-angular-dropdowns 12.0.0-develop.1 → 12.0.0-develop.11

package/esm2020/dropdownlist/dropdownlist.component.mjs

@@ -10,7 +10,7 @@ import { merge, interval, Subscription } from 'rxjs';
 import { concatMap, filter, map, skipWhile, take, takeUntil, tap } from 'rxjs/operators';
 import { isDocumentAvailable, KendoInput, hasObservers, anyChanged, isChanged } from '@progress/kendo-angular-common';
 import { Keys } from '@progress/kendo-angular-common';
-import { isPresent, guid, getter, shuffleData, sameCharsOnly, matchText, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass } from '../common/util';
+import { isPresent, guid, getter, shuffleData, sameCharsOnly, matchText, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, isTruthy, windowSize, updateActionSheetAdaptiveAppearance, setListBoxAriaLabelLebBy, setActionSheetTitle, animationDuration } from '../common/util';
 import { SelectionService } from '../common/selection/selection.service';
 import { NavigationService, NavigationEvent } from '../common/navigation/navigation.service';
 import { ItemTemplateDirective } from '../common/templates/item-template.directive';
@@ -31,7 +31,8 @@ import { DataService } from '../common/data.service';
 import { FilterableComponent } from '../common/filtering/filterable-component';
 import { ListComponent } from '../common/list.component';
 import { normalizeVirtualizationSettings } from '../common/models/virtualization-settings';
-import { caretAltDownIcon, searchIcon } from '@progress/kendo-svg-icons';
+import { caretAltDownIcon, searchIcon, xIcon } from '@progress/kendo-svg-icons';
+import { ResponsiveRendererComponent } from '../common/action-sheet.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@progress/kendo-angular-popup";
@@ -40,14 +41,15 @@ import * as i4 from "../common/navigation/navigation.service";
 import * as i5 from "../common/disabled-items/disabled-items.service";
 import * as i6 from "../common/data.service";
 import * as i7 from "@progress/kendo-angular-icons";
-import * as i8 from "../common/list.component";
-import * as i9 from "@progress/kendo-angular-common";
-import * as i10 from "../common/localization/localized-messages.directive";
-import * as i11 from "@angular/common";
-import * as i12 from "../common/templates/template-context.directive";
-import * as i13 from "@angular/forms";
-import * as i14 from "../common/filter-input.directive";
-import * as i15 from "../common/selection/selectable.directive";
+import * as i8 from "@progress/kendo-angular-common";
+import * as i9 from "../common/action-sheet.component";
+import * as i10 from "../common/list.component";
+import * as i11 from "../common/localization/localized-messages.directive";
+import * as i12 from "@angular/common";
+import * as i13 from "../common/templates/template-context.directive";
+import * as i14 from "@angular/forms";
+import * as i15 from "../common/filter-input.directive";
+import * as i16 from "../common/selection/selectable.directive";
 /**
  * @hidden
  */
@@ -90,6 +92,14 @@ export class DropDownListComponent {
         this.cdr = cdr;
         this.touchEnabled = touchEnabled;
         this.injector = injector;
+        /**
+         * @hidden
+         */
+        this.animationDuration = animationDuration;
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
         /**
          * @hidden
          */
@@ -100,12 +110,24 @@ export class DropDownListComponent {
         this.caretAltDownIcon = caretAltDownIcon;
         this.listBoxId = `k-${guid()}`;
         /**
-         * Sets the height of the options list. By default, `listHeight` is 200px.
-         *
-         * > The `listHeight` property affects only the list of options and not the whole popup container.
-         * > To set the height of the popup container, use `popupSettings.height`.
+         * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
          */
-        this.listHeight = 200;
+        this.adaptiveMode = 'none';
+        /**
+         * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+         * By default the ActionSheet title uses the text provided for the label of the AutoComplete.
+         */
+        this.title = '';
+        /**
+         * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+         * By default the ActionSheet subtitle uses the text provided for the `placeholder` of the AutoComplete.
+        */
+        this.subtitle = '';
+        /**
+        * @hidden
+        */
+        this.windowSize = 'large';
+        this._listHeight = 200;
         /**
          * Sets the read-only state of the component.
          */
@@ -205,6 +227,18 @@ export class DropDownListComponent {
         this.subscribeFocusEvents();
         this.popupMouseDownHandler = this.onMouseDown.bind(this);
     }
+    /**
+     * @hidden
+     */
+    get actionSheet() {
+        return this.responsiveRendererComponent?.actionSheet;
+    }
+    /**
+     * @hidden
+     */
+    get actionSheetSearchBar() {
+        return this.responsiveRendererComponent?.actionSheetSearchBar;
+    }
     get width() {
         const wrapperWidth = isDocumentAvailable() ? this.wrapper.nativeElement.offsetWidth : 0;
         const width = this.popupSettings.width || wrapperWidth;
@@ -246,6 +280,14 @@ export class DropDownListComponent {
         }
         return appendTo === 'component' ? this.container : appendTo;
     }
+    /**
+     * @hidden
+     */
+    onFilterChange(text) {
+        if (this.filterable) {
+            this.filterChange.emit(text);
+        }
+    }
     /**
      * @hidden
      */
@@ -293,6 +335,25 @@ export class DropDownListComponent {
     get value() {
         return this._value;
     }
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
+    }
+    /**
+     * @hidden
+     */
+    get isActionSheetExpanded() {
+        return this.actionSheet?.expanded;
+    }
+    ;
+    /**
+     * @hidden
+     */
+    get isAdaptive() {
+        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
+    }
     /**
      * Configures the popup of the DropDownList.
      *
@@ -309,6 +370,24 @@ export class DropDownListComponent {
     get popupSettings() {
         return this._popupSettings;
     }
+    /**
+     * Sets the height of the options list in the popup. By default, `listHeight` is 200px.
+     *
+     * > The `listHeight` property affects only the list of options and not the whole popup container.
+     * > To set the height of the popup container, use `popupSettings.height`.
+     *
+     * > When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
+     */
+    set listHeight(_listHeight) {
+        this._listHeight = _listHeight;
+    }
+    ;
+    get listHeight() {
+        if (this.isAdaptive) {
+            return;
+        }
+        return this._listHeight;
+    }
     /**
      * Defines a Boolean function that is executed for each data item in the component
      * ([see examples]({% slug disableditems_ddl %})). Determines whether the item will be disabled.
@@ -453,7 +532,13 @@ export class DropDownListComponent {
      * @hidden
      */
     onResize() {
-        if (this._open) {
+        if (this.isAdaptiveModeEnabled && this.windowSize !== windowSize()) {
+            if (this.isOpen) {
+                this.togglePopup(false);
+            }
+            this.windowSize = windowSize();
+        }
+        if (this.isOpen && !this.isActionSheetExpanded) {
             const popupWrapper = this.popupRef.popupElement;
             const { min, max } = this.width;
             popupWrapper.style.minWidth = min;
@@ -496,7 +581,10 @@ export class DropDownListComponent {
     /**
      * @hidden
      */
-    keydown(event) {
+    keydown(event, input) {
+        if (input) {
+            event.stopPropagation();
+        }
         const firstIndex = isPresent(this.defaultItem) ? -1 : 0;
         const focused = isNaN(this.selectionService.focused) ? this.firstFocusableIndex(firstIndex) : this.selectionService.focused;
         let offset = 0;
@@ -538,6 +626,9 @@ export class DropDownListComponent {
         ) {
             eventData.preventDefault();
         }
+        if (action === NavigationAction.Tab && this.isActionSheetExpanded) {
+            this.togglePopup(false);
+        }
     }
     /**
      * @hidden
@@ -551,10 +642,11 @@ export class DropDownListComponent {
     /**
      * @hidden
      */
-    click(event) {
-        event.preventDefault();
-        this.focus();
-        this.togglePopup(!this.isOpen);
+    click() {
+        if (!this.isActionSheetExpanded) {
+            this.focus();
+            this.togglePopup(!this.isOpen);
+        }
     }
     set isFocused(isFocused) {
         this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
@@ -573,6 +665,10 @@ export class DropDownListComponent {
         this.assignAriaDescribedBy();
         this.setComponentClasses();
     }
+    ngAfterViewInit() {
+        this.windowSize = windowSize();
+        this.renderer.setAttribute(this.actionSheet?.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
+    }
     /**
      * @hidden
      * Used by the TextBoxContainer to determine if the component is empty.
@@ -660,7 +756,7 @@ export class DropDownListComponent {
         }
     }
     /**
-     * Toggles the visibility of the popup
+     * Toggles the visibility of the popup or actionSheet
      * ([see example]({% slug openstate_ddl %}#toc-setting-the-initially-opened-component)).
      * If you use the `toggle` method to open or close the popup, the `open` and `close` events will not be fired.
      *
@@ -677,6 +773,9 @@ export class DropDownListComponent {
     _toggle(open) {
         this._open = open;
         this.destroyPopup();
+        if (this.isActionSheetExpanded) {
+            this.closeActionSheet();
+        }
         if (this._open) {
             this.createPopup();
         }
@@ -709,10 +808,10 @@ export class DropDownListComponent {
         }
     }
     /**
-     * Returns the current open state of the popup.
+     * Returns the current open state. Returns `true` if the popup or actionSheet is open.
      */
     get isOpen() {
-        return this._open;
+        return isTruthy(this._open || this.isActionSheetExpanded);
     }
     /**
      * Resets the value of the DropDownList.
@@ -808,6 +907,11 @@ export class DropDownListComponent {
         if (this.virtual) {
             this.virtual.skip = 0;
         }
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.openActionSheet();
+            return;
+        }
         const horizontalAlign = this.direction === "rtl" ? "right" : "left";
         const anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
         const popupPosition = { horizontal: horizontalAlign, vertical: "top" };
@@ -839,7 +943,9 @@ export class DropDownListComponent {
         }
         this.subs.add(this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
+            setListBoxAriaLabelLebBy(this.optionsList, this.wrapper, this.renderer);
             this.optionsList.scrollToItem(this.selectionService.focused);
+            this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
         }));
         this.subs.add(this.popupRef.popupClose.subscribe(() => {
@@ -1048,26 +1154,28 @@ export class DropDownListComponent {
         }
     }
     componentBlur() {
-        this.isFocused = false;
-        const selectionPresent = isPresent(this.selectionService.selected[0]);
-        const valueHasChanged = selectionPresent && getter(this.value, this.valueField) !== getter(this.dataService.itemAt(this.selectionService.selected[0]), this.valueField);
-        if (valueHasChanged ||
-            hasObservers(this.close) ||
-            hasObservers(this.onBlur) ||
-            hasObservers(this.filterChange) ||
-            isUntouched(this.wrapper.nativeElement)) {
-            this._zone.run(() => {
-                if (valueHasChanged) {
-                    this.selectionService.change(this.selectionService.selected[0]);
-                }
+        if (!this.isActionSheetExpanded) {
+            this.isFocused = false;
+            const selectionPresent = isPresent(this.selectionService.selected[0]);
+            const valueHasChanged = selectionPresent && getter(this.value, this.valueField) !== getter(this.dataService.itemAt(this.selectionService.selected[0]), this.valueField);
+            if (valueHasChanged ||
+                hasObservers(this.close) ||
+                hasObservers(this.onBlur) ||
+                hasObservers(this.filterChange) ||
+                isUntouched(this.wrapper.nativeElement)) {
+                this._zone.run(() => {
+                    if (valueHasChanged) {
+                        this.selectionService.change(this.selectionService.selected[0]);
+                    }
+                    this.togglePopup(false);
+                    this.clearFilter();
+                    this.onBlur.emit();
+                    this.onTouchedCallback();
+                });
+            }
+            else {
                 this.togglePopup(false);
-                this.clearFilter();
-                this.onBlur.emit();
-                this.onTouchedCallback();
-            });
-        }
-        else {
-            this.togglePopup(false);
+            }
         }
     }
     /**
@@ -1212,6 +1320,15 @@ export class DropDownListComponent {
     handleFilter(event) {
         this.filterChange.emit(event.target.value);
     }
+    /**
+     * @hidden
+     */
+    handleClick() {
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.togglePopup(true);
+        }
+    }
     /**
      * @hidden
      */
@@ -1239,9 +1356,32 @@ export class DropDownListComponent {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
         }
     }
+    closeActionSheet() {
+        this.actionSheet.toggle(false);
+        if (this.filterable) {
+            this.actionSheetSearchBar.value = '';
+            this.filterChange.emit('');
+        }
+        this.closed.emit();
+    }
+    openActionSheet() {
+        this.windowSize = windowSize();
+        this.actionSheet.toggle(true);
+        this.cdr.detectChanges();
+        setListBoxAriaLabelLebBy(this.optionsList, this.wrapper, this.renderer);
+        this.title = setActionSheetTitle(this.wrapper, this.title);
+        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
+        this.cdr.detectChanges();
+        this.opened.emit();
+        this.optionsList.scrollToItem(this.selectionService.focused);
+        this.selectionService.focus(this.selectionService.focused);
+        if (this.filterable) {
+            this.actionSheetSearchBar.focus();
+        }
+    }
 }
 DropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropDownListComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.SelectionService }, { token: i4.NavigationService }, { token: i5.DisabledItemsService }, { token: i6.DataService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: TOUCH_ENABLED, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: { iconClass: "iconClass", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click($event)" }, properties: { "attr.aria-controls": "this.ariaControls", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-activedescendant": "this.hostAriaActivedescendant" } }, providers: [
+DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: { iconClass: "iconClass", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click()" }, properties: { "attr.aria-controls": "this.ariaControls", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-activedescendant": "this.hostAriaActivedescendant" } }, providers: [
         DROPDOWNLIST_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -1258,7 +1398,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         {
             provide: KendoInput, useExisting: forwardRef(() => DropDownListComponent)
         }
-    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "valueTemplate", first: true, predicate: ValueTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoDropDownList"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "valueTemplate", first: true, predicate: ValueTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoDropDownList"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoDropDownListLocalizedMessages
             i18n-noDataText="kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -1305,8 +1445,26 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <span *ngIf="loading || iconClass" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
             </button>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+        <ng-container #container></ng-container>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="filterable"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (textInputChange)="onFilterChange($event)"
+            >
+        </responsive-renderer>
+
+        <ng-template #sharedPopupActionSheetTemplate>
             <!--filterable-->
-            <ng-template [ngIf]="filterable">
+            <ng-template [ngIf]="filterable && !isActionSheetExpanded">
                 <div class="k-list-filter" (click)="$event.stopImmediatePropagation()">
                     <span
                         class="k-searchbox k-input"
@@ -1318,6 +1476,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                             [svgIcon]="searchIcon">
                         </kendo-icon-wrapper>
                         <input
+                            #searchInput
                             role="searchbox"
                             aria-autocomplete="list"
                             aria-haspopup="listbox"
@@ -1329,10 +1488,11 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                             [dir]="direction"
                             [(ngModel)]="filterText"
                             class="k-input-inner"
-                            (keydown)="keydown($event)"
+                            (keydown)="keydown($event, searchInput)"
                             (input)="handleFilter($event)"
                             (focus)="onFilterFocus()"
-                            (blur)="blurFilterInput()" />
+                            (blur)="blurFilterInput()"
+                            (click)="handleClick()" />
                     </span>
                 </div>
             </ng-template>
@@ -1368,7 +1528,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     templateRef: headerTemplate.templateRef
                 }">
             </ng-template>
-            <!--list-->
+            <!--list-->           
             <kendo-list
                 #optionsList
                 [id]="listBoxId"
@@ -1405,11 +1565,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 }">
             </ng-template>
         </ng-template>
-        <ng-template [ngIf]="isOpen">
-            <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        </ng-template>
-        <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i8.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i10.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i14.FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i15.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
+  `, isInline: true, components: [{ type: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i10.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }], directives: [{ type: i11.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i15.FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i16.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropDownListComponent, decorators: [{
             type: Component,
             args: [{
@@ -1480,8 +1636,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <span *ngIf="loading || iconClass" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
             </button>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+        <ng-container #container></ng-container>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="filterable"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (textInputChange)="onFilterChange($event)"
+            >
+        </responsive-renderer>
+
+        <ng-template #sharedPopupActionSheetTemplate>
             <!--filterable-->
-            <ng-template [ngIf]="filterable">
+            <ng-template [ngIf]="filterable && !isActionSheetExpanded">
                 <div class="k-list-filter" (click)="$event.stopImmediatePropagation()">
                     <span
                         class="k-searchbox k-input"
@@ -1493,6 +1667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             [svgIcon]="searchIcon">
                         </kendo-icon-wrapper>
                         <input
+                            #searchInput
                             role="searchbox"
                             aria-autocomplete="list"
                             aria-haspopup="listbox"
@@ -1504,10 +1679,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             [dir]="direction"
                             [(ngModel)]="filterText"
                             class="k-input-inner"
-                            (keydown)="keydown($event)"
+                            (keydown)="keydown($event, searchInput)"
                             (input)="handleFilter($event)"
                             (focus)="onFilterFocus()"
-                            (blur)="blurFilterInput()" />
+                            (blur)="blurFilterInput()"
+                            (click)="handleClick()" />
                     </span>
                 </div>
             </ng-template>
@@ -1543,7 +1719,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     templateRef: headerTemplate.templateRef
                 }">
             </ng-template>
-            <!--list-->
+            <!--list-->           
             <kendo-list
                 #optionsList
                 [id]="listBoxId"
@@ -1580,10 +1756,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }">
             </ng-template>
         </ng-template>
-        <ng-template [ngIf]="isOpen">
-            <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        </ng-template>
-        <ng-container #container></ng-container>
   `
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.SelectionService }, { type: i4.NavigationService }, { type: i5.DisabledItemsService }, { type: i6.DataService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
@@ -1591,7 +1763,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }, {
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }, { type: i0.Injector }]; }, propDecorators: { ariaControls: [{
+                }] }, { type: i0.Injector }]; }, propDecorators: { responsiveRendererComponent: [{
+                type: ViewChild,
+                args: [ResponsiveRendererComponent]
+            }], ariaControls: [{
                 type: HostBinding,
                 args: ['attr.aria-controls']
             }], iconClass: [{
@@ -1606,6 +1781,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], valueField: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
             }], popupSettings: [{
                 type: Input
             }], listHeight: [{
@@ -1748,5 +1929,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['keypress', ['$event']]
             }], click: [{
                 type: HostListener,
-                args: ['click', ['$event']]
+                args: ['click']
             }] } });