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

package/esm2020/autocomplete/autocomplete.component.mjs

@@ -16,8 +16,8 @@ import { FixedGroupTemplateDirective } from '../common/templates/fixed-group-tem
 import { SelectionService } from '../common/selection/selection.service';
 import { NavigationService } from '../common/navigation/navigation.service';
 import { DisabledItemsService } from '../common/disabled-items/disabled-items.service';
-import { Subject, merge } from 'rxjs';
-import { isPresent, guid, getter, isUntouched, noop, inDropDown, getSizeClass, getRoundedClass, getFillModeClass } from '../common/util';
+import { Subject, Subscription, merge } from 'rxjs';
+import { isPresent, guid, getter, isUntouched, noop, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, windowSize, isTruthy, setListBoxAriaLabelLebBy, setActionSheetTitle, updateActionSheetAdaptiveAppearance, animationDuration } from '../common/util';
 import { NavigationAction } from '../common/navigation/navigation-action';
 import { NoDataTemplateDirective } from '../common/templates/no-data-template.directive';
 import { PreventableEvent } from '../common/models/preventable-event';
@@ -29,6 +29,7 @@ import { ListComponent } from '../common/list.component';
 import { normalizeVirtualizationSettings } from '../common/models/virtualization-settings';
 import { TOUCH_ENABLED } from '../common/constants/touch-enabled';
 import { 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 "../common/data.service";
@@ -38,11 +39,12 @@ import * as i5 from "../common/navigation/navigation.service";
 import * as i6 from "../common/disabled-items/disabled-items.service";
 import * as i7 from "../common/searchbar.component";
 import * as i8 from "@progress/kendo-angular-icons";
-import * as i9 from "../common/list.component";
-import * as i10 from "@progress/kendo-angular-common";
-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 i9 from "@progress/kendo-angular-common";
+import * as i10 from "../common/action-sheet.component";
+import * as i11 from "../common/list.component";
+import * as i12 from "../common/localization/localized-messages.directive";
+import * as i13 from "@angular/common";
+import * as i14 from "../common/templates/template-context.directive";
 const NO_VALUE = "";
 const DEFAULT_SIZE = 'medium';
 const DEFAULT_ROUNDED = 'medium';
@@ -88,6 +90,10 @@ export class AutoCompleteComponent {
         this.renderer = renderer;
         this.hostElement = hostElement;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.animationDuration = animationDuration;
         /**
          * @hidden
          */
@@ -106,12 +112,15 @@ export class AutoCompleteComponent {
          */
         this.placeholder = "";
         /**
-         * Sets the height of the suggestions list. By default, `listHeight` is 200px.
-         *
-         * > The `listHeight` property affects only the list of suggestions and not the whole popup container.
-         * > To set the height of the popup container, use `popupSettings.height`.
+         * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+         */
+        this.adaptiveMode = 'none';
+        /**
+         * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+         * By default the ActionSheet title uses the text provided for the label of the AutoComplete.
          */
-        this.listHeight = 200;
+        this.title = '';
+        this._listHeight = 200;
         /**
          * @hidden
          *
@@ -180,12 +189,17 @@ export class AutoCompleteComponent {
         this.widgetClasses = true;
         this.listBoxId = `k-${guid()}`;
         this.optionPrefix = `k-${guid()}`;
+        /**
+         * @hidden
+         */
+        this.windowSize = 'large';
         this.onChangeCallback = noop;
         this.onTouchedCallback = noop;
         this.popupMouseDownHandler = (event) => event.preventDefault();
         this._popupSettings = { animate: true };
         this._open = false;
         this._value = "";
+        this.subs = new Subscription();
         this.valueChangeSubject = new Subject();
         this._isFocused = false;
         this._size = 'medium';
@@ -199,6 +213,18 @@ export class AutoCompleteComponent {
         this.subscribeTouchEvents();
         this.selectionService.resetSelection([-1]);
     }
+    /**
+     * @hidden
+     */
+    get actionSheet() {
+        return this.responsiveRendererComponent?.actionSheet;
+    }
+    /**
+     * @hidden
+     */
+    get actionSheetSearchBar() {
+        return this.responsiveRendererComponent?.actionSheetSearchBar;
+    }
     get width() {
         let wrapperOffsetWidth = 0;
         if (isDocumentAvailable()) {
@@ -247,8 +273,8 @@ export class AutoCompleteComponent {
         return this.isOpen ? this.listBoxId : undefined;
     }
     /**
-     * Toggles the visibility of the popup.
-     * If you use the `toggle` method to open or close the popup, the `open` and `close` events will not be fired.
+     * Toggles the visibility of the popup or actionSheet.
+     * If you use the `toggle` method to open or close the popup or actionSheet, the `open` and `close` events will not be fired.
      *
      * @param open - The state of the popup.
      */
@@ -259,10 +285,19 @@ export class AutoCompleteComponent {
         });
     }
     /**
-     * Returns the current open state of the popup.
+     * Returns the current open state. Returns `true` if the popup or actionSheet is open.
      */
     get isOpen() {
-        return this._open;
+        return isTruthy(this._open || this.isActionSheetExpanded);
+    }
+    /**
+     * @hidden
+     */
+    handleClick() {
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.togglePopup(true);
+        }
     }
     /**
      * @hidden
@@ -325,6 +360,22 @@ export class AutoCompleteComponent {
     get value() {
         return this._value || NO_VALUE;
     }
+    /**
+     * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+     * By default the ActionSheet subtitle uses the text provided for the `placeholder` of the AutoComplete.
+    */
+    set subtitle(_subtitle) {
+        this._subtitle = _subtitle;
+    }
+    get subtitle() {
+        return this._subtitle || this.placeholder;
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
+    }
     /**
      * Configures the popup of the AutoComplete.
      *
@@ -341,6 +392,24 @@ export class AutoCompleteComponent {
     get popupSettings() {
         return this._popupSettings;
     }
+    /**
+     * Sets the height of the options list in the popup. By default, `listHeight` is 200px.
+     *
+     * > The `listHeight` property affects only the list of options and not the whole popup container.
+     * > To set the height of the popup container, use `popupSettings.height`.
+     *
+     * > When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
+     */
+    set listHeight(_listHeight) {
+        this._listHeight = _listHeight;
+    }
+    ;
+    get listHeight() {
+        if (this.isAdaptive) {
+            return;
+        }
+        return this._listHeight;
+    }
     /**
      * Defines a Boolean function that is executed for each data item in the component
      * ([see examples]({% slug disableditems_autocomplete %})).
@@ -450,21 +519,39 @@ export class AutoCompleteComponent {
     get dir() {
         return this.direction;
     }
+    /**
+     * @hidden
+     */
+    get isActionSheetExpanded() {
+        return this.actionSheet?.expanded;
+    }
+    ;
+    /**
+     * @hidden
+     */
+    get isAdaptive() {
+        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
+    }
     ngOnInit() {
         this.renderer.removeAttribute(this.wrapper, "tabindex");
-        this.localizationChangeSubscription = this.localization
+        this.subs.add(this.localization
             .changes
             .subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             this.cdr.detectChanges();
-        });
+        }));
         this.setComponentClasses();
     }
+    ngAfterViewInit() {
+        this.windowSize = windowSize();
+        this.cdr.detectChanges();
+        this.renderer.setAttribute(this.actionSheet?.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
+    }
     ngOnDestroy() {
         this.destroyPopup();
-        this.unsubscribeEvents();
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
+        this.subs.unsubscribe();
+        if (this.touchstartDisposeHandler) {
+            this.touchstartDisposeHandler();
         }
     }
     ngOnChanges(changes) {
@@ -488,6 +575,12 @@ export class AutoCompleteComponent {
     messageFor(key) {
         return this.localization.get(key);
     }
+    /**
+     * @hidden
+     */
+    onAdaptiveTextBoxChange(text) {
+        this.search(text);
+    }
     /**
      * @hidden
      */
@@ -557,7 +650,14 @@ export class AutoCompleteComponent {
      * @hidden
      */
     onResize() {
-        if (this._open) {
+        if (this.isAdaptiveModeEnabled && this.windowSize !== windowSize()) {
+            if (this.isOpen) {
+                this.togglePopup(false);
+            }
+            this.windowSize = windowSize();
+            this.cdr.detectChanges();
+        }
+        if (this._open && !this.isActionSheetExpanded) {
             const popupWrapper = this.popupRef.popupElement;
             const { min, max } = this.width;
             popupWrapper.style.minWidth = min;
@@ -577,13 +677,7 @@ export class AutoCompleteComponent {
         }
     }
     search(text, startFrom = 0) {
-        let index;
-        if (text.length && this.dataService.itemsCount) {
-            index = this.dataService.findIndex(this.findIndexPredicate(text), startFrom);
-        }
-        else {
-            index = -1;
-        }
+        const index = this.findIndex(text, startFrom);
         if (this.disabledItemsService.isIndexDisabled(index)) {
             if (index + 1 < this.dataService.itemsCount) {
                 this.search(text, index + 1);
@@ -631,6 +725,10 @@ export class AutoCompleteComponent {
             ((action === NavigationAction.Enter && this.isOpen) || action !== NavigationAction.Enter)) {
             event.preventDefault();
         }
+        if (action === NavigationAction.Tab && this.isActionSheetExpanded) {
+            event.stopImmediatePropagation();
+            this.togglePopup(false);
+        }
     }
     handleEnter(event) {
         const focused = this.selectionService.focused;
@@ -651,6 +749,9 @@ export class AutoCompleteComponent {
                 value = this.searchbar.value;
             }
         }
+        if (this.isActionSheetExpanded && focused >= 0) {
+            this.togglePopup(false);
+        }
         this.change(value);
     }
     handleEscape() {
@@ -681,6 +782,17 @@ export class AutoCompleteComponent {
             this.search(text);
         }
     }
+    /**
+     * @hidden
+     */
+    onFilterChange(text) {
+        if (this.filterable) {
+            this.filterChange.emit(text);
+        }
+        else if (this.highlightFirst) {
+            this.search(text);
+        }
+    }
     /**
      * @hidden
      */
@@ -696,37 +808,39 @@ export class AutoCompleteComponent {
      * @hidden
      */
     handleBlur() {
-        const focused = this.filterable ? this.selectionService.focused : -1;
-        this.searchbar.input.nativeElement.scrollLeft = 0; // Firefox doesn't auto-scroll to the left on blur like other browsers
-        let dataItem;
-        let text;
-        if (focused !== -1) {
-            dataItem = this.dataService.itemAt(focused);
-            text = getter(dataItem, this.valueField) || "";
-        }
-        else {
-            text = this.searchbar.value;
-        }
-        const exactMatch = text === this.searchbar.value;
-        const insensitiveMatch = text.toLowerCase() === this.searchbar.value.toLowerCase();
-        if (!exactMatch && insensitiveMatch) {
-            this.selectionService.resetSelection([]);
-        }
-        this.isFocused = false;
-        const valueHasChanged = this.value !== this.text;
-        const runInZone = hasObservers(this.onBlur) || hasObservers(this.close) || isUntouched(this.wrapper) || valueHasChanged;
-        if (runInZone) {
-            this._zone.run(() => {
-                if (valueHasChanged) {
-                    this.change(this.searchbar.value);
-                }
-                this.onBlur.emit();
-                this.onTouchedCallback();
+        if (!this.isActionSheetExpanded) {
+            const focused = this.filterable ? this.selectionService.focused : -1;
+            this.searchbar.input.nativeElement.scrollLeft = 0; // Firefox doesn't auto-scroll to the left on blur like other browsers
+            let dataItem;
+            let text;
+            if (focused !== -1) {
+                dataItem = this.dataService.itemAt(focused);
+                text = getter(dataItem, this.valueField) || "";
+            }
+            else {
+                text = this.searchbar.value;
+            }
+            const exactMatch = text === this.searchbar.value;
+            const insensitiveMatch = text.toLowerCase() === this.searchbar.value.toLowerCase();
+            if (!exactMatch && insensitiveMatch) {
+                this.selectionService.resetSelection([]);
+            }
+            this.isFocused = false;
+            const valueHasChanged = this.value !== this.text;
+            const runInZone = hasObservers(this.onBlur) || hasObservers(this.close) || isUntouched(this.wrapper) || valueHasChanged;
+            if (runInZone) {
+                this._zone.run(() => {
+                    if (valueHasChanged) {
+                        this.change(this.searchbar.value);
+                    }
+                    this.onBlur.emit();
+                    this.onTouchedCallback();
+                    this.togglePopup(false);
+                });
+            }
+            else {
                 this.togglePopup(false);
-            });
-        }
-        else {
-            this.togglePopup(false);
+            }
         }
     }
     /**
@@ -744,29 +858,42 @@ export class AutoCompleteComponent {
         if (!isDocumentAvailable()) {
             return;
         }
-        this.valueChangeSubscription = this.valueChangeSubject
+        this.subs.add(this.valueChangeSubject
             .subscribe(value => {
             const hasChange = this.value !== value;
+            const index = this.findIndex(value);
+            this.selectionService.focused = index;
             this.value = value;
             this.text = value;
             // emit change after assigning `this.value` => allows the user to modify the component value on `valueChange`
             if (hasChange) {
                 this.emitChange(value);
             }
-        });
-        this.changeSubscription = this.selectionService.onChange.subscribe(this.handleItemChange.bind(this));
-        this.focusSubscription = this.selectionService.onFocus.subscribe(this.handleItemFocus.bind(this));
-        this.navigationSubscription = merge(this.navigationService.up, this.navigationService.down).subscribe((event) => this.navigate(event.index));
-        this.closeSubscription = this.navigationService.close.subscribe(() => this.togglePopup(false));
-        this.openSubscription = this.navigationService.open.subscribe(() => this.togglePopup(true));
-        this.enterSubscription = this.navigationService.enter.subscribe(this.handleEnter.bind(this));
-        this.escSubscription = this.navigationService.esc.subscribe(this.handleEscape.bind(this));
-        this.scrollSubscription = merge(this.navigationService.pagedown, this.navigationService.pageup).subscribe((event) => {
+        }));
+        this.subs.add(this.selectionService.onChange.subscribe(this.handleItemChange.bind(this)));
+        this.subs.add(this.selectionService.onFocus.subscribe(this.handleItemFocus.bind(this)));
+        this.subs.add(merge(this.navigationService.up, this.navigationService.down).subscribe((event) => this.navigate(event.index)));
+        this.subs.add(this.navigationService.close.subscribe(() => this.togglePopup(false)));
+        this.subs.add(this.navigationService.open.subscribe(() => this.togglePopup(true)));
+        this.subs.add(this.navigationService.enter.subscribe(this.handleEnter.bind(this)));
+        this.subs.add(this.navigationService.esc.subscribe(this.handleEscape.bind(this)));
+        this.subs.add(merge(this.navigationService.pagedown, this.navigationService.pageup).subscribe((event) => {
             if (this.isOpen) {
                 event.originalEvent.preventDefault();
                 this.optionsList.scrollWithOnePage(NavigationAction[event.originalEvent.code]);
             }
-        });
+        }));
+    }
+    findIndex(value, startFrom = 0) {
+        let index;
+        if (value && value.length && this.dataService.itemsCount) {
+            index = this.dataService.findIndex(this.findIndexPredicate(value), startFrom);
+        }
+        else {
+            index = -1;
+        }
+        ;
+        return index;
     }
     subscribeTouchEvents() {
         if (!isDocumentAvailable() || !this.touchEnabled) {
@@ -781,23 +908,6 @@ export class AutoCompleteComponent {
             }
         }));
     }
-    unsubscribeEvents() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        this.changeSubscription.unsubscribe();
-        this.navigationSubscription.unsubscribe();
-        this.closeSubscription.unsubscribe();
-        this.openSubscription.unsubscribe();
-        this.enterSubscription.unsubscribe();
-        this.escSubscription.unsubscribe();
-        this.scrollSubscription.unsubscribe();
-        this.valueChangeSubscription.unsubscribe();
-        this.focusSubscription.unsubscribe();
-        if (this.touchstartDisposeHandler) {
-            this.touchstartDisposeHandler();
-        }
-    }
     handleItemChange(event) {
         const index = event.indices.length ? event.indices[0] : undefined;
         this.selectionService.resetSelection([-1]);
@@ -806,6 +916,9 @@ export class AutoCompleteComponent {
         }
         const text = getter(this.dataService.itemAt(index), this.valueField);
         this.change(text);
+        if (this.isActionSheetExpanded) {
+            this.togglePopup(false);
+        }
     }
     handleItemFocus(_event) {
         const focused = this.selectionService.focused;
@@ -818,9 +931,14 @@ export class AutoCompleteComponent {
         if (this.virtual) {
             this.virtual.skip = 0;
         }
-        const horizontalAlign = this.direction === 'rtl' ? 'right' : 'left';
-        const anchorPosition = { horizontal: horizontalAlign, vertical: 'bottom' };
-        const popupPosition = { horizontal: horizontalAlign, vertical: 'top' };
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.openActionSheet();
+            return;
+        }
+        const horizontalAlign = this.direction === "rtl" ? "right" : "left";
+        const anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
+        const popupPosition = { horizontal: horizontalAlign, vertical: "top" };
         this.popupRef = this.popupService.open({
             anchor: this.wrapper,
             animate: this.popupSettings.animate,
@@ -842,20 +960,17 @@ export class AutoCompleteComponent {
             this.renderer.setAttribute(popupWrapper, 'role', 'region');
             this.renderer.setAttribute(popupWrapper, 'aria-label', this.messageFor('popupLabel'));
         }
-        const listBox = popupWrapper.querySelector('ul.k-list-ul');
-        const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby');
-        if (ariaLabel) {
-            listBox.setAttribute('aria-labelledby', ariaLabel);
-        }
-        this.popupRef.popupOpen.subscribe(() => {
+        this.subs.add(this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
+            setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
             this.optionsList.scrollToItem(this.selectionService.focused);
+            this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
-        });
-        this.popupRef.popupClose.subscribe(() => {
+        }));
+        this.subs.add(this.popupRef.popupClose.subscribe(() => {
             this.closed.emit();
-        });
-        this.popupRef.popupAnchorViewportLeave.subscribe(() => this.togglePopup(false));
+        }));
+        this.subs.add(this.popupRef.popupAnchorViewportLeave.subscribe(() => this.togglePopup(false)));
     }
     destroyPopup() {
         if (this.popupRef) {
@@ -868,6 +983,9 @@ export class AutoCompleteComponent {
     _toggle(open) {
         this._open = open;
         this.destroyPopup();
+        if (this.isActionSheetExpanded) {
+            this.closeActionSheet();
+        }
         if (this._open) {
             this.createPopup();
         }
@@ -918,9 +1036,28 @@ export class AutoCompleteComponent {
             this.renderer.addClass(this.wrapper, getFillModeClass('input', this.fillMode));
         }
     }
+    closeActionSheet() {
+        this.actionSheet.toggle(false);
+        this.actionSheetSearchBar.value = '';
+        this.filterable && this.filterChange.emit('');
+        this.searchbar.input.nativeElement.focus();
+        this.closed.emit();
+    }
+    openActionSheet() {
+        this.actionSheet.toggle(true);
+        this.cdr.detectChanges();
+        setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+        this.title = setActionSheetTitle(this.searchbar.input, this.title);
+        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
+        this.cdr.detectChanges();
+        this.opened.emit();
+        this.optionsList.scrollToItem(this.selectionService.focused);
+        this.selectionService.focus(this.selectionService.focused);
+        this.actionSheetSearchBar.focus();
+    }
 }
 AutoCompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: i1.LocalizationService }, { token: i2.DataService }, { token: i3.PopupService }, { token: i4.SelectionService }, { token: i5.NavigationService }, { token: i6.DisabledItemsService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AutoCompleteComponent, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", clearButton: "clearButton", suggest: "suggest", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-autocomplete": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
+AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AutoCompleteComponent, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", clearButton: "clearButton", suggest: "suggest", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-autocomplete": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
         AUTOCOMPLETE_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -939,7 +1076,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             provide: KendoInput,
             useExisting: forwardRef(() => AutoCompleteComponent)
         }
-    ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoAutoComplete"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoAutoComplete"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoAutoCompleteLocalizedMessages
             i18n-noDataText="kendo.autocomplete.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -954,7 +1091,6 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         <kendo-searchbar #searchbar
             [role]="'combobox'"
             [ariaExpanded]="isOpen"
-            [ariaControls]="ariaControls"
             [isSuggestable]="suggest"
             [isFilterable]="filterable"
             [isLoading]="isLoading"
@@ -964,13 +1100,14 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             [userInput]="text"
             [suggestedText]="suggestion"
             [disabled]="disabled"
-            [readonly]="readonly"
+            [readonly]="readonly || this.isAdaptive"
             [tabIndex]="tabIndex"
             [placeholder]="placeholder"
             (onNavigate)="handleNavigate($event)"
             (valueChange)="searchBarChange($event)"
             (onBlur)="handleBlur()"
             (onFocus)="handleFocus()"
+            (click)="handleClick()"
         ></kendo-searchbar>
         <span
             *ngIf="!loading && !readonly && (clearButton && text?.length)"
@@ -990,6 +1127,26 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </span>
         <span *ngIf="loading" class="k-icon k-i-loading k-input-loading-icon"></span>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <ng-container #container></ng-container>
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="true"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (textInputChange)="onFilterChange($event)"
+            (navigate)="handleNavigate($event)"
+            [placeholder]="placeholder"
+            >
+        </responsive-renderer>
+
+        <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
                 [templateContext]="{
@@ -1033,11 +1190,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 }">
             </ng-template>
         </ng-template>
-        <ng-template [ngIf]="isOpen">
-            <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        </ng-template>
-        <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: i7.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i9.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: 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"] }] });
+  `, isInline: true, components: [{ type: i7.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i10.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i11.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: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -1078,7 +1231,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <kendo-searchbar #searchbar
             [role]="'combobox'"
             [ariaExpanded]="isOpen"
-            [ariaControls]="ariaControls"
             [isSuggestable]="suggest"
             [isFilterable]="filterable"
             [isLoading]="isLoading"
@@ -1088,13 +1240,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [userInput]="text"
             [suggestedText]="suggestion"
             [disabled]="disabled"
-            [readonly]="readonly"
+            [readonly]="readonly || this.isAdaptive"
             [tabIndex]="tabIndex"
             [placeholder]="placeholder"
             (onNavigate)="handleNavigate($event)"
             (valueChange)="searchBarChange($event)"
             (onBlur)="handleBlur()"
             (onFocus)="handleFocus()"
+            (click)="handleClick()"
         ></kendo-searchbar>
         <span
             *ngIf="!loading && !readonly && (clearButton && text?.length)"
@@ -1114,6 +1267,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </span>
         <span *ngIf="loading" class="k-icon k-i-loading k-input-loading-icon"></span>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <ng-container #container></ng-container>
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="true"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (textInputChange)="onFilterChange($event)"
+            (navigate)="handleNavigate($event)"
+            [placeholder]="placeholder"
+            >
+        </responsive-renderer>
+
+        <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
                 [templateContext]="{
@@ -1157,10 +1330,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: i1.LocalizationService }, { type: i2.DataService }, { type: i3.PopupService }, { type: i4.SelectionService }, { type: i5.NavigationService }, { type: i6.DisabledItemsService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: undefined, decorators: [{
@@ -1168,7 +1337,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }, {
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }]; }, propDecorators: { highlightFirst: [{
+                }] }]; }, propDecorators: { responsiveRendererComponent: [{
+                type: ViewChild,
+                args: [ResponsiveRendererComponent]
+            }], highlightFirst: [{
                 type: Input
             }], focusableId: [{
                 type: Input
@@ -1180,6 +1352,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], placeholder: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
             }], popupSettings: [{
                 type: Input
             }], listHeight: [{