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

package/esm2022/autocomplete/autocomplete.component.mjs

@@ -18,7 +18,7 @@ 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, Subscription, merge } from 'rxjs';
-import { isPresent, guid, getter, isUntouched, noop, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, isTruthy, setListBoxAriaLabelledBy, setActionSheetTitle, updateActionSheetAdaptiveAppearance, animationDuration } from '../common/util';
+import { isPresent, guid, getter, isUntouched, noop, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, isTruthy, setListBoxAriaLabelledBy, setActionSheetTitle, 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,7 +29,7 @@ import { DataService } from '../common/data.service';
 import { ListComponent } from '../common/list.component';
 import { normalizeVirtualizationSettings } from '../common/models/virtualization-settings';
 import { xIcon } from '@progress/kendo-svg-icons';
-import { ResponsiveRendererComponent } from '../common/action-sheet.component';
+import { AdaptiveRendererComponent } from '../common/adaptive-renderer.component';
 import { NgIf, NgTemplateOutlet } from '@angular/common';
 import { SharedDropDownEventsDirective } from '../common/shared-events.directive';
 import { LocalizedMessagesDirective } from '../common/localization/localized-messages.directive';
@@ -99,18 +99,18 @@ export class AutoCompleteComponent {
     /**
      * @hidden
      */
-    responsiveRendererComponent;
+    adaptiveRendererComponent;
     /**
      * @hidden
      */
     get actionSheet() {
-        return this.responsiveRendererComponent?.actionSheet;
+        return this.adaptiveRendererComponent?.actionSheet;
     }
     /**
      * @hidden
      */
     get actionSheetSearchBar() {
-        return this.responsiveRendererComponent?.actionSheetSearchBar;
+        return this.adaptiveRendererComponent?.actionSheetSearchBar;
     }
     get width() {
         let wrapperOffsetWidth = 0;
@@ -286,17 +286,12 @@ export class AutoCompleteComponent {
      * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
      * By default the ActionSheet title uses the text provided for the label of the AutoComplete.
      */
-    title = '';
+    adaptiveTitle = '';
     /**
      * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
-     * By default the ActionSheet subtitle uses the text provided for the `placeholder` of the AutoComplete.
+     * By default the ActionSheet does not render a subtitle.
     */
-    set subtitle(_subtitle) {
-        this._subtitle = _subtitle;
-    }
-    get subtitle() {
-        return this._subtitle || this.placeholder;
-    }
+    adaptiveSubtitle;
     /**
      * @hidden
      */
@@ -615,11 +610,6 @@ export class AutoCompleteComponent {
     ngAfterViewInit() {
         this.windowSize = this.adaptiveService.size;
         this.cdr.detectChanges();
-        if (this.actionSheet && isDocumentAvailable()) {
-            // The following syntax is used as it does not violate CSP compliance
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
-        }
     }
     ngOnDestroy() {
         this.destroyPopup();
@@ -649,12 +639,6 @@ export class AutoCompleteComponent {
     messageFor(key) {
         return this.localization.get(key);
     }
-    /**
-     * @hidden
-     */
-    onAdaptiveTextBoxChange(text) {
-        this.search(text);
-    }
     /**
      * @hidden
      */
@@ -845,7 +829,7 @@ export class AutoCompleteComponent {
      */
     searchBarChange(text) {
         const currentTextLength = isPresent(this.text) ? this.text.length : 0;
-        this.backspacePressed = (text.length < currentTextLength) ? true : false;
+        this.backspacePressed = Boolean(text.length < currentTextLength);
         this.text = text;
         this.togglePopup(text.length > 0);
         if (!this.highlightFirst) {
@@ -858,17 +842,6 @@ export class AutoCompleteComponent {
             this.search(text);
         }
     }
-    /**
-     * @hidden
-     */
-    onFilterChange(text) {
-        if (this.filterable) {
-            this.filterChange.emit(text);
-        }
-        else if (this.highlightFirst) {
-            this.search(text);
-        }
-    }
     /**
      * @hidden
      */
@@ -896,25 +869,7 @@ export class AutoCompleteComponent {
      */
     handleBlur() {
         if (!this.isActionSheetExpanded) {
-            this.isFocused = false;
-            const valueHasChanged = this.value !== this.text;
-            const runInZone = hasObservers(this.onBlur) ||
-                hasObservers(this.close) ||
-                isUntouched(this.wrapper) ||
-                valueHasChanged;
-            if (runInZone) {
-                this._zone.run(() => {
-                    if (valueHasChanged) {
-                        this.change(this.searchbar.value);
-                    }
-                    this.onBlur.emit();
-                    this.onTouchedCallback();
-                    this.togglePopup(false);
-                });
-            }
-            else {
-                this.togglePopup(false);
-            }
+            this.blurComponent();
         }
     }
     /**
@@ -966,6 +921,13 @@ export class AutoCompleteComponent {
         const virtual = this.virtual;
         virtual.skip = event.skip;
     }
+    /**
+     * @hidden
+     */
+    closeActionSheet() {
+        this.blurComponent();
+        this.closed.emit();
+    }
     change(value) {
         this.togglePopup(false);
         this.valueChangeSubject.next(value);
@@ -980,7 +942,6 @@ export class AutoCompleteComponent {
     subs = new Subscription();
     valueChangeSubject = new Subject();
     touchstartDisposeHandler;
-    _subtitle;
     wrapper;
     _isFocused = false;
     direction;
@@ -1114,7 +1075,8 @@ export class AutoCompleteComponent {
         this._open = open;
         this.destroyPopup();
         if (this.isActionSheetExpanded) {
-            this.closeActionSheet();
+            this.actionSheet.toggle(false);
+            this.focus();
         }
         if (this._open) {
             this.createPopup();
@@ -1166,27 +1128,40 @@ export class AutoCompleteComponent {
             this.renderer.addClass(this.wrapper, getFillModeClass('input', this.fillMode));
         }
     }
-    closeActionSheet() {
-        this.actionSheet.toggle(false);
-        this.filterable && this.filterChange.emit('');
-        this.searchbar.input.nativeElement.focus();
-        this.responsiveRendererComponent.searchBarValue = '';
-        this.closed.emit();
-    }
     openActionSheet() {
         this.actionSheet.toggle(true);
         this.cdr.detectChanges();
         setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
-        this.title = setActionSheetTitle(this.searchbar.input, this.title);
-        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
+        this.adaptiveTitle = setActionSheetTitle(this.searchbar.input, this.adaptiveTitle);
         this.cdr.detectChanges();
         this.opened.emit();
         this.optionsList.scrollToItem(this.selectionService.focused);
         this.selectionService.focus(this.selectionService.focused);
         this.actionSheetSearchBar.focus();
     }
+    blurComponent() {
+        this.isFocused = false;
+        const valueHasChanged = this.value !== this.text;
+        const runInZone = hasObservers(this.onBlur) ||
+            hasObservers(this.close) ||
+            isUntouched(this.wrapper) ||
+            valueHasChanged;
+        if (runInZone) {
+            this._zone.run(() => {
+                if (valueHasChanged) {
+                    this.change(this.searchbar.value);
+                }
+                this.onBlur.emit();
+                this.onTouchedCallback();
+                this.togglePopup(false);
+            });
+        }
+        else {
+            this.togglePopup(false);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: i1.LocalizationService }, { token: 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: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AutoCompleteComponent, isStandalone: true, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", showStickyHeader: "showStickyHeader", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", clearButton: "clearButton", suggest: "suggest", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-autocomplete": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AutoCompleteComponent, isStandalone: true, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", showStickyHeader: "showStickyHeader", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", clearButton: "clearButton", suggest: "suggest", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-autocomplete": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
             AUTOCOMPLETE_VALUE_ACCESSOR,
             DataService,
             SelectionService,
@@ -1205,7 +1180,7 @@ export class AutoCompleteComponent {
                 provide: KendoInput,
                 useExisting: forwardRef(() => AutoCompleteComponent)
             }
-        ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoAutoComplete"], usesOnChanges: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "adaptiveRendererComponent", first: true, predicate: AdaptiveRendererComponent, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoAutoComplete"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoAutoCompleteLocalizedMessages
             i18n-noDataText="kendo.autocomplete.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -1215,6 +1190,9 @@ export class AutoCompleteComponent {
 
             i18n-popupLabel="kendo.autocomplete.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
+
+            i18n-adaptiveCloseButtonTitle="kendo.autocomplete.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
         >
         </ng-container>
 
@@ -1283,19 +1261,17 @@ export class AutoCompleteComponent {
         <ng-container #container></ng-container>
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
 
-        <!--adaptive rendering-->
-        <responsive-renderer
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="true"
-            [subtitle]="subtitle"
-            (closePopup)="togglePopup(false)"
-            (textInputChange)="onFilterChange($event)"
+            [subtitle]="adaptiveSubtitle"
+            (closePopup)="closeActionSheet()"
+            (textInputChange)="searchBarChange($event)"
             (navigate)="handleNavigate($event)"
             [placeholder]="placeholder"
-            >
-        </responsive-renderer>
+            [searchBarValue]="text">
+        </kendo-adaptive-renderer>
 
         <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
@@ -1307,7 +1283,7 @@ export class AutoCompleteComponent {
             <!--list-->
             <kendo-list
                 #optionsList
-                [size]="size"
+                [size]="isAdaptive ? 'large' : size"
                 [rounded]="rounded"
                 [id]="listBoxId"
                 [optionPrefix]="optionPrefix"
@@ -1342,7 +1318,7 @@ export class AutoCompleteComponent {
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
@@ -1379,6 +1355,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             i18n-popupLabel="kendo.autocomplete.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
+
+            i18n-adaptiveCloseButtonTitle="kendo.autocomplete.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
         >
         </ng-container>
 
@@ -1447,19 +1426,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <ng-container #container></ng-container>
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
 
-        <!--adaptive rendering-->
-        <responsive-renderer
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="true"
-            [subtitle]="subtitle"
-            (closePopup)="togglePopup(false)"
-            (textInputChange)="onFilterChange($event)"
+            [subtitle]="adaptiveSubtitle"
+            (closePopup)="closeActionSheet()"
+            (textInputChange)="searchBarChange($event)"
             (navigate)="handleNavigate($event)"
             [placeholder]="placeholder"
-            >
-        </responsive-renderer>
+            [searchBarValue]="text">
+        </kendo-adaptive-renderer>
 
         <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
@@ -1471,7 +1448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <!--list-->
             <kendo-list
                 #optionsList
-                [size]="size"
+                [size]="isAdaptive ? 'large' : size"
                 [rounded]="rounded"
                 [id]="listBoxId"
                 [optionPrefix]="optionPrefix"
@@ -1508,11 +1485,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </ng-template>
   `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, SharedDropDownEventsDirective, NgIf, NgTemplateOutlet, SeparatorComponent, SearchBarComponent, IconWrapperComponent, ResizeSensorComponent, ResponsiveRendererComponent, TemplateContextDirective, ListComponent]
+                    imports: [LocalizedMessagesDirective, SharedDropDownEventsDirective, NgIf, NgTemplateOutlet, SeparatorComponent, SearchBarComponent, IconWrapperComponent, ResizeSensorComponent, AdaptiveRendererComponent, TemplateContextDirective, ListComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: 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: i0.Injector }, { type: i7.AdaptiveService }]; }, propDecorators: { responsiveRendererComponent: [{
+        }], 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: i0.Injector }, { type: i7.AdaptiveService }]; }, propDecorators: { adaptiveRendererComponent: [{
                 type: ViewChild,
-                args: [ResponsiveRendererComponent]
+                args: [AdaptiveRendererComponent]
             }], highlightFirst: [{
                 type: Input
             }], showStickyHeader: [{
@@ -1529,9 +1506,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], adaptiveMode: [{
                 type: Input
-            }], title: [{
+            }], adaptiveTitle: [{
                 type: Input
-            }], subtitle: [{
+            }], adaptiveSubtitle: [{
                 type: Input
             }], popupSettings: [{
                 type: Input