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

package/esm2020/comboboxes/combobox.component.mjs

@@ -19,7 +19,7 @@ import { DisabledItemsService } from '../common/disabled-items/disabled-items.se
 import { merge, of, Subject, Subscription } from 'rxjs';
 import { catchError, filter, map, partition, tap, throttleTime } from 'rxjs/operators';
 import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged } from '@progress/kendo-angular-common';
-import { isPresent, guid, getter, isEmptyString, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass } from '../common/util';
+import { isPresent, guid, getter, isEmptyString, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, isTruthy, windowSize, setListBoxAriaLabelLebBy, setActionSheetTitle, updateActionSheetAdaptiveAppearance, animationDuration } from '../common/util';
 import { NavigationAction } from '../common/navigation/navigation-action';
 import { Keys } from '@progress/kendo-angular-common';
 import { PreventableEvent } from '../common/models/preventable-event';
@@ -33,6 +33,7 @@ import { ListComponent } from '../common/list.component';
 import { normalizeVirtualizationSettings } from '../common/models/virtualization-settings';
 import { pointers } from '@progress/kendo-common';
 import { caretAltDownIcon, 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";
@@ -42,11 +43,12 @@ import * as i5 from "../common/disabled-items/disabled-items.service";
 import * as i6 from "../common/data.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";
 /**
  * @hidden
  */
@@ -88,6 +90,10 @@ export class ComboBoxComponent {
         this.cdr = cdr;
         this.renderer = renderer;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.animationDuration = animationDuration;
         /**
          * @hidden
          */
@@ -157,12 +163,15 @@ export class ComboBoxComponent {
          */
         this.placeholder = "";
         /**
-         * Sets the height of the suggestions list. By default, `listHeight` is 200px.
-         *
-         * > The `listHeight` property affects only the list of suggestions and not the whole popup container.
-         * > To set the height of the popup container, use `popupSettings.height`.
+         * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
          */
-        this.listHeight = 200;
+        this.adaptiveMode = 'none';
+        /**
+         * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+         * By default the ActionSheet title uses the text provided for the label of the AutoComplete.
+         */
+        this.title = '';
+        this._listHeight = 200;
         /**
          * Enables the auto-completion of the text based on the first data item.
          */
@@ -237,6 +246,10 @@ export class ComboBoxComponent {
         this.onBlur = new EventEmitter();
         this.widgetClasses = true;
         this._isFocused = false;
+        /**
+         * @hidden
+         */
+        this.windowSize = 'large';
         this.listBoxId = `k-${guid()}`;
         this.optionPrefix = `k-${guid()}`;
         this.onChangeCallback = (_) => { };
@@ -266,6 +279,18 @@ export class ComboBoxComponent {
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.data = [];
     }
+    /**
+     * @hidden
+     */
+    get actionSheet() {
+        return this.responsiveRendererComponent?.actionSheet;
+    }
+    /**
+     * @hidden
+     */
+    get actionSheetSearchBar() {
+        return this.responsiveRendererComponent?.actionSheetSearchBar;
+    }
     set text(text) {
         this._text = isPresent(text) ? text.toString() : "";
     }
@@ -367,6 +392,22 @@ export class ComboBoxComponent {
         }
         return this._valuePrimitive;
     }
+    /**
+     * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+     * By default the ActionSheet subtitle uses the text provided for the `placeholder` of the AutoComplete.
+    */
+    set subtitle(_subtitle) {
+        this._subtitle = _subtitle;
+    }
+    get subtitle() {
+        return this._subtitle || this.placeholder;
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
+    }
     /**
      * Configures the popup of the ComboBox.
      *
@@ -383,6 +424,24 @@ export class ComboBoxComponent {
     get popupSettings() {
         return this._popupSettings;
     }
+    /**
+     * Sets the height of the options list in the popup. By default, `listHeight` is 200px.
+     *
+     * > The `listHeight` property affects only the list of options and not the whole popup container.
+     * > To set the height of the popup container, use `popupSettings.height`.
+     *
+     * > When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
+     */
+    set listHeight(_listHeight) {
+        this._listHeight = _listHeight;
+    }
+    ;
+    get listHeight() {
+        if (this.isAdaptive) {
+            return;
+        }
+        return this._listHeight;
+    }
     /**
      * Defines a Boolean function that is executed for each data item in the component
      * ([see examples]({% slug disableditems_combobox %})). Determines whether the item will be disabled.
@@ -499,6 +558,19 @@ export class ComboBoxComponent {
             return 'visible';
         }
     }
+    /**
+     * @hidden
+     */
+    get isActionSheetExpanded() {
+        return this.actionSheet?.expanded;
+    }
+    ;
+    /**
+     * @hidden
+     */
+    get isAdaptive() {
+        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
+    }
     get popupWidth() {
         let wrapperOffsetWidth = 0;
         if (isDocumentAvailable()) {
@@ -521,6 +593,11 @@ export class ComboBoxComponent {
         this.attachSelectClickHandler();
         this.setComponentClasses();
     }
+    ngAfterViewInit() {
+        this.windowSize = windowSize();
+        this.cdr.detectChanges();
+        this.renderer.setAttribute(this.actionSheet?.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
+    }
     createValueStream() {
         const valueStream = this.valueSubject.pipe(filter((candidate) => {
             const current = getter(this.value, this.valueField);
@@ -721,7 +798,7 @@ export class ComboBoxComponent {
         }
     }
     /**
-     * Toggles the visibility of the popup. If you use the `toggle` method to open or close the popup,
+     * Toggles the visibility of the popup or actionSheet. If you use the `toggle` method to open or close the popup or actionSheet,
      * the `open` and `close` events will not be fired.
      *
      * @param open - The state of the popup.
@@ -734,10 +811,19 @@ export class ComboBoxComponent {
         });
     }
     /**
-     * Returns the current open state of the popup.
+     * Returns the current open state. Returns `true` if the popup or actionSheet is open.
      */
     get isOpen() {
-        return this._open;
+        return isTruthy(this._open || this.isActionSheetExpanded);
+    }
+    /**
+     * @hidden
+     */
+    handleClick() {
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.togglePopup(true);
+        }
     }
     /**
      * Resets the value of the ComboBox.
@@ -820,7 +906,14 @@ export class ComboBoxComponent {
      * @hidden
      */
     onResize() {
-        if (this.isOpen) {
+        if (this.isAdaptiveModeEnabled && this.windowSize !== windowSize()) {
+            if (this.isOpen) {
+                this.togglePopup(false);
+            }
+            this.windowSize = windowSize();
+            this.cdr.detectChanges();
+        }
+        if (this.isOpen && !this.isActionSheetExpanded) {
             const popupWrapper = this.popupRef.popupElement;
             const { min, max } = this.popupWidth;
             popupWrapper.style.minWidth = min;
@@ -926,13 +1019,7 @@ export class ComboBoxComponent {
         return result;
     }
     search(text, startFrom = 0) {
-        let index;
-        if (text.length && this.dataService.itemsCount) {
-            index = this.dataService.findIndex(this.findIndexPredicate(text), startFrom);
-        }
-        else {
-            index = -1;
-        }
+        const index = this.findIndex(text, startFrom);
         if (this.disabledItemsService.isIndexDisabled(index)) {
             if (index + 1 < this.dataService.itemsCount) {
                 this.search(text, index + 1);
@@ -948,6 +1035,18 @@ export class ComboBoxComponent {
             }
         }
     }
+    /**
+     * @hidden
+     */
+    onAdaptiveTextBoxChange(text) {
+        if (this.filterable && this.filterText !== text) {
+            this.filterText = text;
+            this.filterChange.emit(text);
+        }
+        else {
+            this.search(text);
+        }
+    }
     /**
      * @hidden
      */
@@ -1005,6 +1104,10 @@ export class ComboBoxComponent {
             ((action === NavigationAction.Enter && this.isOpen) || action !== NavigationAction.Enter)) {
             event.preventDefault();
         }
+        if (action === NavigationAction.Tab && this.isActionSheetExpanded) {
+            event.stopImmediatePropagation();
+            this.togglePopup(false);
+        }
     }
     handleEnter() {
         const text = this.text;
@@ -1036,32 +1139,34 @@ export class ComboBoxComponent {
      * @hidden
      */
     handleBlur() {
-        this._filtering = false;
-        this.searchbar.input.nativeElement.scrollLeft = 0; // Firefox doesn't auto-scroll to the left on blur like other browsers
-        this.isFocused = false;
-        const unresolvedSelection = getter(this.dataItem, this.valueField) !== getter(this.value, this.valueField);
-        const currentText = this.searchbar.value;
-        const textHasChanged = currentText !== (getter(this.dataItem, this.textField) || '');
-        const valueHasChanged = unresolvedSelection || textHasChanged;
-        const runInZone = valueHasChanged || hasObservers(this.onBlur) || hasObservers(this.close) || isUntouched(this.wrapper.nativeElement);
-        if (runInZone) {
-            this.zone.run(() => {
-                if (valueHasChanged) {
-                    const lowerCaseMatch = isPresent(this.focusedItemText) && this.focusedItemText.toLowerCase() === currentText.toLowerCase();
-                    if (lowerCaseMatch || unresolvedSelection) {
-                        this.selectionService.change(this.selectionService.focused);
-                    }
-                    else {
-                        this.change(currentText, true);
+        if (!this.isActionSheetExpanded) {
+            this._filtering = false;
+            this.searchbar.input.nativeElement.scrollLeft = 0; // Firefox doesn't auto-scroll to the left on blur like other browsers
+            this.isFocused = false;
+            const unresolvedSelection = getter(this.dataItem, this.valueField) !== getter(this.value, this.valueField);
+            const currentText = this.searchbar.value;
+            const textHasChanged = currentText !== (getter(this.dataItem, this.textField) || '');
+            const valueHasChanged = unresolvedSelection || textHasChanged;
+            const runInZone = valueHasChanged || hasObservers(this.onBlur) || hasObservers(this.close) || isUntouched(this.wrapper.nativeElement);
+            if (runInZone) {
+                this.zone.run(() => {
+                    if (valueHasChanged) {
+                        const lowerCaseMatch = isPresent(this.focusedItemText) && this.focusedItemText.toLowerCase() === currentText.toLowerCase();
+                        if (lowerCaseMatch || unresolvedSelection) {
+                            this.selectionService.change(this.selectionService.focused);
+                        }
+                        else {
+                            this.change(currentText, true);
+                        }
                     }
-                }
-                this.onBlur.emit();
-                this.onTouchedCallback();
+                    this.onBlur.emit();
+                    this.onTouchedCallback();
+                    this.togglePopup(false);
+                });
+            }
+            else {
                 this.togglePopup(false);
-            });
-        }
-        else {
-            this.togglePopup(false);
+            }
         }
     }
     /**
@@ -1124,6 +1229,9 @@ export class ComboBoxComponent {
         }
         else {
             this.valueSubject.next(candidate);
+            if (this.isActionSheetExpanded) {
+                this.togglePopup(false);
+            }
         }
     }
     emitValueChange() {
@@ -1197,6 +1305,11 @@ export class ComboBoxComponent {
         if (this.virtual) {
             this.virtual.skip = 0;
         }
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.openActionSheet();
+            return;
+        }
         const horizontalAlign = this.direction === "rtl" ? "right" : "left";
         const anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
         const popupPosition = { horizontal: horizontalAlign, vertical: "top" };
@@ -1228,7 +1341,9 @@ export class ComboBoxComponent {
         }
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
+            setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
             this.optionsList.scrollToItem(this.selectionService.focused);
+            this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
         });
         this.popupRef.popupClose.subscribe(() => {
@@ -1239,7 +1354,11 @@ export class ComboBoxComponent {
     _toggle(open) {
         this._open = open;
         this.destroyPopup();
+        if (this.isActionSheetExpanded) {
+            this.closeActionSheet();
+        }
         if (this._open) {
+            this.windowSize = windowSize();
             this.createPopup();
         }
     }
@@ -1295,9 +1414,40 @@ export class ComboBoxComponent {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         }
     }
+    findIndex(value, startFrom = 0) {
+        let index;
+        if (value && value.length && this.dataService.itemsCount) {
+            index = this.dataService.findIndex(this.findIndexPredicate(value), startFrom);
+        }
+        else {
+            index = -1;
+        }
+        ;
+        return index;
+    }
+    closeActionSheet() {
+        this.actionSheet.toggle(false);
+        this.actionSheetSearchBar.value = '';
+        this.filterable && this.filterChange.emit('');
+        this.searchbar.input.nativeElement.focus();
+        this.closed.emit();
+    }
+    openActionSheet() {
+        this.windowSize = windowSize();
+        this.actionSheet.toggle(true);
+        this.cdr.detectChanges();
+        setListBoxAriaLabelLebBy(this.optionsList, this.searchbar.input, this.renderer);
+        this.title = setActionSheetTitle(this.searchbar.input, this.title);
+        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
+        this.cdr.detectChanges();
+        this.opened.emit();
+        this.optionsList.scrollToItem(this.selectionService.focused);
+        this.selectionService.focus(this.selectionService.focused);
+        this.actionSheetSearchBar.focus();
+    }
 }
 ComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.SelectionService }, { token: i4.NavigationService }, { token: i5.DisabledItemsService }, { token: i6.DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ComboBoxComponent, selector: "kendo-combobox", inputs: { focusableId: "focusableId", allowCustom: "allowCustom", data: "data", value: "value", textField: "textField", valueField: "valueField", valuePrimitive: "valuePrimitive", valueNormalizer: "valueNormalizer", placeholder: "placeholder", popupSettings: "popupSettings", listHeight: "listHeight", iconClass: "iconClass", loading: "loading", suggest: "suggest", clearButton: "clearButton", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-combobox": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
+ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ComboBoxComponent, selector: "kendo-combobox", inputs: { focusableId: "focusableId", allowCustom: "allowCustom", data: "data", value: "value", textField: "textField", valueField: "valueField", valuePrimitive: "valuePrimitive", valueNormalizer: "valueNormalizer", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", iconClass: "iconClass", loading: "loading", suggest: "suggest", clearButton: "clearButton", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-combobox": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
         COMBOBOX_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -1314,7 +1464,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         {
             provide: KendoInput, useExisting: forwardRef(() => ComboBoxComponent)
         }
-    ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], exportAs: ["kendoComboBox"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], exportAs: ["kendoComboBox"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoComboBoxLocalizedMessages
             i18n-noDataText="kendo.combobox.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -1341,13 +1491,14 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [userInput]="text"
             [suggestedText]="getSuggestion()"
             [disabled]="disabled"
-            [readonly]="readonly"
+            [readonly]="readonly || isAdaptive"
             [tabIndex]="tabIndex"
             [placeholder]="placeholder"
             (onNavigate)="handleNavigate($event)"
             (valueChange)="searchBarChange($event)"
             (onBlur)="handleBlur()"
             (onFocus)="handleFocus()"
+            (click)="handleClick()"
         ></kendo-searchbar>
         <span
             *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
@@ -1387,6 +1538,25 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             <span *ngIf="loading || iconClass" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
         </button>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+        <ng-container #container></ng-container>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="true"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            (navigate)="handleNavigate($event)"
+            [placeholder]="placeholder"
+            >
+        </responsive-renderer>
+        <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
                 [templateContext]="{
@@ -1430,11 +1600,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 }">
             </ng-template>
         </ng-template>
-        <ng-template [ngIf]="isOpen">
-            <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        </ng-template>
-        <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: 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: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -1485,13 +1651,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [userInput]="text"
             [suggestedText]="getSuggestion()"
             [disabled]="disabled"
-            [readonly]="readonly"
+            [readonly]="readonly || isAdaptive"
             [tabIndex]="tabIndex"
             [placeholder]="placeholder"
             (onNavigate)="handleNavigate($event)"
             (valueChange)="searchBarChange($event)"
             (onBlur)="handleBlur()"
             (onFocus)="handleFocus()"
+            (click)="handleClick()"
         ></kendo-searchbar>
         <span
             *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
@@ -1531,6 +1698,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <span *ngIf="loading || iconClass" class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
         </button>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+        <ng-container #container></ng-container>
+
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="true"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            (navigate)="handleNavigate($event)"
+            [placeholder]="placeholder"
+            >
+        </responsive-renderer>
+        <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
                 [templateContext]="{
@@ -1574,10 +1760,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.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
@@ -1585,7 +1767,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }, {
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }]; }, propDecorators: { focusableId: [{
+                }] }]; }, propDecorators: { responsiveRendererComponent: [{
+                type: ViewChild,
+                args: [ResponsiveRendererComponent]
+            }], focusableId: [{
                 type: Input
             }], allowCustom: [{
                 type: Input
@@ -1603,6 +1788,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: [{