@progress/kendo-angular-dropdowns 19.0.0-develop.2 → 19.0.0-develop.20

package/esm2022/comboboxes/combobox.component.mjs

@@ -20,7 +20,7 @@ import { merge, of, Subject, Subscription } from 'rxjs';
 import { catchError, filter, map, partition, tap, throttleTime } from 'rxjs/operators';
 import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged, SuffixTemplateDirective, PrefixTemplateDirective, isControlRequired, MultiTabStop, SeparatorComponent, EventsOutsideAngularDirective, ResizeSensorComponent, Keys, TemplateContextDirective } from '@progress/kendo-angular-common';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
-import { isPresent, guid, getter, isEmptyString, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, isTruthy, setListBoxAriaLabelledBy, setActionSheetTitle, updateActionSheetAdaptiveAppearance, animationDuration } from '../common/util';
+import { isPresent, guid, getter, isEmptyString, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, isTruthy, setListBoxAriaLabelledBy, setActionSheetTitle, animationDuration } from '../common/util';
 import { NavigationAction } from '../common/navigation/navigation-action';
 import { PreventableEvent } from '../common/models/preventable-event';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -32,7 +32,7 @@ import { ListComponent } from '../common/list.component';
 import { normalizeVirtualizationSettings } from '../common/models/virtualization-settings';
 import { pointers, touchEnabled } from '@progress/kendo-common';
 import { caretAltDownIcon, xIcon } from '@progress/kendo-svg-icons';
-import { ResponsiveRendererComponent } from '../common/action-sheet.component';
+import { AdaptiveRendererComponent } from '../common/adaptive-renderer.component';
 import { NgIf, NgTemplateOutlet, NgClass } from '@angular/common';
 import { SharedDropDownEventsDirective } from '../common/shared-events.directive';
 import { LocalizedMessagesDirective } from '../common/localization/localized-messages.directive';
@@ -110,18 +110,18 @@ export class ComboBoxComponent extends MultiTabStop {
     /**
      * @hidden
      */
-    responsiveRendererComponent;
+    adaptiveRendererComponent;
     /**
      * @hidden
      */
     get actionSheet() {
-        return this.responsiveRendererComponent?.actionSheet;
+        return this.adaptiveRendererComponent?.actionSheet;
     }
     /**
      * @hidden
      */
     get actionSheetSearchBar() {
-        return this.responsiveRendererComponent?.actionSheetSearchBar;
+        return this.adaptiveRendererComponent?.actionSheetSearchBar;
     }
     /**
      * @hidden
@@ -321,19 +321,14 @@ export class ComboBoxComponent extends MultiTabStop {
     adaptiveMode = 'none';
     /**
      * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
-     * By default the ActionSheet title uses the text provided for the label of the AutoComplete.
+     * By default the ActionSheet title uses the text provided for the label of the Combobox.
      */
-    title = '';
+    adaptiveTitle = '';
     /**
      * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
-     * By default the ActionSheet subtitle uses the text provided for the `placeholder` of the AutoComplete.
+     * By default the ActionSheet does not render a subtitle.
     */
-    set subtitle(_subtitle) {
-        this._subtitle = _subtitle;
-    }
-    get subtitle() {
-        return this._subtitle || this.placeholder;
-    }
+    adaptiveSubtitle;
     /**
      * @hidden
      */
@@ -663,7 +658,6 @@ export class ComboBoxComponent extends MultiTabStop {
     backspacePressed;
     _popupSettings = { animate: true };
     _virtualSettings;
-    _subtitle;
     popupMouseDownHandler = (event) => event.preventDefault();
     customValueSubject = new Subject();
     valueSubject = new Subject();
@@ -705,11 +699,6 @@ export class ComboBoxComponent extends MultiTabStop {
     ngAfterViewInit() {
         this.windowSize = this.adaptiveService.size;
         this.cdr.detectChanges();
-        if (this.actionSheet && isDocumentAvailable()) {
-            // The following syntax is used as it does not violate CSP compliance
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
-        }
     }
     createValueStream() {
         const valueStream = this.valueSubject.pipe(filter((candidate) => {
@@ -1144,18 +1133,6 @@ export class ComboBoxComponent extends MultiTabStop {
             }
         }
     }
-    /**
-     * @hidden
-     */
-    onAdaptiveTextBoxChange(text) {
-        if (this.filterable && this.filterText !== text) {
-            this.filterText = text;
-            this.filterChange.emit(text);
-        }
-        else {
-            this.search(text);
-        }
-    }
     /**
      * @hidden
      */
@@ -1260,36 +1237,7 @@ export class ComboBoxComponent extends MultiTabStop {
      */
     handleBlur() {
         if (!this.isActionSheetExpanded) {
-            this._filtering = false;
-            this.searchbar.input.nativeElement.scrollLeft = 0; // Firefox doesn't auto-scroll to the left on blur like other browsers
-            this.isFocused = false;
-            const unresolvedSelection = getter(this.dataItem, this.valueField) !== getter(this.value, this.valueField);
-            const currentText = this.searchbar.value;
-            const textHasChanged = currentText !== (getter(this.dataItem, this.textField) || '');
-            const valueHasChanged = unresolvedSelection || textHasChanged;
-            const runInZone = valueHasChanged ||
-                hasObservers(this.onBlur) ||
-                hasObservers(this.close) ||
-                isUntouched(this.wrapper.nativeElement);
-            if (runInZone) {
-                this.zone.run(() => {
-                    if (valueHasChanged) {
-                        const lowerCaseMatch = isPresent(this.focusedItemText) && this.focusedItemText.toLowerCase() === currentText.toLowerCase();
-                        if (lowerCaseMatch || unresolvedSelection) {
-                            this.selectionService.change(this.selectionService.focused);
-                        }
-                        else {
-                            this.change(currentText, true);
-                        }
-                    }
-                    this.onBlur.emit();
-                    this.onTouchedCallback();
-                    this.togglePopup(false);
-                });
-            }
-            else {
-                this.togglePopup(false);
-            }
+            this.blurComponent();
         }
     }
     /**
@@ -1354,7 +1302,7 @@ export class ComboBoxComponent extends MultiTabStop {
      */
     searchBarChange(text) {
         const currentTextLength = this.text ? this.text.length : 0;
-        this.backspacePressed = (text.length < currentTextLength) ? true : false;
+        this.backspacePressed = Boolean(text.length < currentTextLength);
         this.text = text;
         // Reset the selection prior to filter. If a match is present, it will be resolved. If a match is not present, it is not needed.
         this.selectionService.resetSelection([]);
@@ -1384,6 +1332,13 @@ export class ComboBoxComponent extends MultiTabStop {
         const virtual = this.virtual;
         virtual.skip = event.skip;
     }
+    /**
+     * @hidden
+     */
+    closeActionSheet() {
+        this.blurComponent();
+        this.closed.emit();
+    }
     change(candidate, isCustom = false) {
         if (isCustom) {
             this.customValueSubject.next(candidate);
@@ -1513,7 +1468,8 @@ export class ComboBoxComponent extends MultiTabStop {
         this._open = open;
         this.destroyPopup();
         if (this.isActionSheetExpanded) {
-            this.closeActionSheet();
+            this.actionSheet.toggle(false);
+            this.focus();
         }
         if (this._open) {
             this.windowSize = this.adaptiveService.size;
@@ -1582,27 +1538,52 @@ export class ComboBoxComponent extends MultiTabStop {
         }
         return index;
     }
-    closeActionSheet() {
-        this.actionSheet.toggle(false);
-        this.searchbar.input.nativeElement.focus();
-        this.responsiveRendererComponent.searchBarValue = '';
-        this.closed.emit();
-    }
     openActionSheet() {
         this.windowSize = this.adaptiveService.size;
         this.actionSheet.toggle(true);
         this.cdr.detectChanges();
         setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
-        this.title = setActionSheetTitle(this.searchbar.input, this.title);
-        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
+        this.adaptiveTitle = setActionSheetTitle(this.searchbar.input, this.adaptiveTitle);
         this.cdr.detectChanges();
         this.opened.emit();
         this.optionsList.scrollToItem(this.selectionService.focused);
         this.selectionService.focus(this.selectionService.focused);
         this.actionSheetSearchBar.focus();
     }
+    blurComponent() {
+        this._filtering = false;
+        this.searchbar.input.nativeElement.scrollLeft = 0; // Firefox doesn't auto-scroll to the left on blur like other browsers
+        this.isFocused = false;
+        const unresolvedSelection = getter(this.dataItem, this.valueField) !== getter(this.value, this.valueField);
+        const currentText = this.searchbar.value;
+        const textHasChanged = currentText !== (getter(this.dataItem, this.textField) || '');
+        const valueHasChanged = unresolvedSelection || textHasChanged;
+        const runInZone = valueHasChanged ||
+            hasObservers(this.onBlur) ||
+            hasObservers(this.close) ||
+            isUntouched(this.wrapper.nativeElement);
+        if (runInZone) {
+            this.zone.run(() => {
+                if (valueHasChanged) {
+                    const lowerCaseMatch = isPresent(this.focusedItemText) && this.focusedItemText.toLowerCase() === currentText.toLowerCase();
+                    if (lowerCaseMatch || unresolvedSelection) {
+                        this.selectionService.change(this.selectionService.focused);
+                    }
+                    else {
+                        this.change(currentText, true);
+                    }
+                }
+                this.onBlur.emit();
+                this.onTouchedCallback();
+                this.togglePopup(false);
+            });
+        }
+        else {
+            this.togglePopup(false);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.SelectionService }, { token: i4.NavigationService }, { token: i5.DisabledItemsService }, { token: i6.DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ComboBoxComponent, isStandalone: true, selector: "kendo-combobox", inputs: { icon: "icon", svgIcon: "svgIcon", inputAttributes: "inputAttributes", showStickyHeader: "showStickyHeader", focusableId: "focusableId", allowCustom: "allowCustom", data: "data", value: "value", textField: "textField", valueField: "valueField", valuePrimitive: "valuePrimitive", valueNormalizer: "valueNormalizer", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", suggest: "suggest", clearButton: "clearButton", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-combobox": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ComboBoxComponent, isStandalone: true, selector: "kendo-combobox", inputs: { icon: "icon", svgIcon: "svgIcon", inputAttributes: "inputAttributes", showStickyHeader: "showStickyHeader", focusableId: "focusableId", allowCustom: "allowCustom", data: "data", value: "value", textField: "textField", valueField: "valueField", valuePrimitive: "valuePrimitive", valueNormalizer: "valueNormalizer", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", suggest: "suggest", clearButton: "clearButton", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-combobox": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
             COMBOBOX_VALUE_ACCESSOR,
             DataService,
             SelectionService,
@@ -1622,7 +1603,7 @@ export class ComboBoxComponent extends MultiTabStop {
             {
                 provide: MultiTabStop, useExisting: forwardRef(() => ComboBoxComponent)
             }
-        ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], exportAs: ["kendoComboBox"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "adaptiveRendererComponent", first: true, predicate: AdaptiveRendererComponent, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], exportAs: ["kendoComboBox"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoComboBoxLocalizedMessages
             i18n-noDataText="kendo.combobox.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -1635,6 +1616,9 @@ export class ComboBoxComponent extends MultiTabStop {
 
             i18n-popupLabel="kendo.combobox.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
+
+            i18n-adaptiveCloseButtonTitle="kendo.combobox.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
         >
         </ng-container>
 
@@ -1725,19 +1709,18 @@ export class ComboBoxComponent extends MultiTabStop {
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
         <ng-container #container></ng-container>
 
-        <!--adaptive rendering-->
-        <responsive-renderer
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="true"
-            [subtitle]="subtitle"
-            (closePopup)="togglePopup(false)"
-            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            [subtitle]="adaptiveSubtitle"
+            (closePopup)="closeActionSheet()"
+            (textInputChange)="searchBarChange($event)"
             (navigate)="handleNavigate($event)"
             [placeholder]="placeholder"
-            >
-        </responsive-renderer>
+            [searchBarValue]="text"
+        >
+        </kendo-adaptive-renderer>
         <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
@@ -1748,7 +1731,7 @@ export class ComboBoxComponent extends MultiTabStop {
             <!--list-->
             <kendo-list
                 #optionsList
-                [size]="size"
+                [size]="isAdaptive ? 'large' : size"
                 [rounded]="rounded"
                 [id]="listBoxId"
                 [optionPrefix]="optionPrefix"
@@ -1783,7 +1766,7 @@ export class ComboBoxComponent extends MultiTabStop {
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
@@ -1824,6 +1807,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             i18n-popupLabel="kendo.combobox.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
+
+            i18n-adaptiveCloseButtonTitle="kendo.combobox.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
         >
         </ng-container>
 
@@ -1914,19 +1900,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
         <ng-container #container></ng-container>
 
-        <!--adaptive rendering-->
-        <responsive-renderer
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="true"
-            [subtitle]="subtitle"
-            (closePopup)="togglePopup(false)"
-            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            [subtitle]="adaptiveSubtitle"
+            (closePopup)="closeActionSheet()"
+            (textInputChange)="searchBarChange($event)"
             (navigate)="handleNavigate($event)"
             [placeholder]="placeholder"
-            >
-        </responsive-renderer>
+            [searchBarValue]="text"
+        >
+        </kendo-adaptive-renderer>
         <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
@@ -1937,7 +1922,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"
@@ -1974,7 +1959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </ng-template>
   `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, SharedDropDownEventsDirective, NgIf, NgTemplateOutlet, SeparatorComponent, SearchBarComponent, EventsOutsideAngularDirective, IconWrapperComponent, NgClass, ResizeSensorComponent, ResponsiveRendererComponent, TemplateContextDirective, ListComponent]
+                    imports: [LocalizedMessagesDirective, SharedDropDownEventsDirective, NgIf, NgTemplateOutlet, SeparatorComponent, SearchBarComponent, EventsOutsideAngularDirective, IconWrapperComponent, NgClass, ResizeSensorComponent, AdaptiveRendererComponent, TemplateContextDirective, ListComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.SelectionService }, { type: i4.NavigationService }, { type: i5.DisabledItemsService }, { type: i6.DataService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i7.AdaptiveService }]; }, propDecorators: { icon: [{
                 type: Input
@@ -1982,9 +1967,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], inputAttributes: [{
                 type: Input
-            }], responsiveRendererComponent: [{
+            }], adaptiveRendererComponent: [{
                 type: ViewChild,
-                args: [ResponsiveRendererComponent]
+                args: [AdaptiveRendererComponent]
             }], showStickyHeader: [{
                 type: Input
             }], focusableId: [{
@@ -2007,9 +1992,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

package/esm2022/comboboxes/multicolumncombobox.component.mjs

@@ -19,7 +19,7 @@ import { getRowWidthFromColumnsMeta, scrollbarWidth } from './combobox-column/ut
 import { FilterableComponent } from '../common/filtering/filterable-component';
 import { MultiColumnComboBoxMessages } from '../common/constants/error-messages';
 import { ListComponent } from '../common/list.component';
-import { ResponsiveRendererComponent } from '../common/action-sheet.component';
+import { AdaptiveRendererComponent } from '../common/adaptive-renderer.component';
 import { SearchBarComponent } from '../common/searchbar.component';
 import { NgIf, NgTemplateOutlet, NgClass, NgFor, NgStyle } from '@angular/common';
 import { SharedDropDownEventsDirective } from '../common/shared-events.directive';
@@ -140,11 +140,6 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
             this.totalColumnsWidth = this.columns.reduce((total, currentColumn) => total + currentColumn.width, 0);
         });
         this.cdr.detectChanges();
-        if (this.actionSheet && isDocumentAvailable()) {
-            // The following syntax is used as it does not violate CSP compliance
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
-        }
     }
     ngOnDestroy() {
         super.ngOnDestroy();
@@ -273,6 +268,8 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
                 when its role is 'region'
             "
             popupLabel="Options list"
+            i18n-adaptiveCloseButtonTitle="kendo.multicolumncombobox.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
         ></ng-container>
 
         <ng-container
@@ -363,19 +360,17 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
         <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->
         <ng-container #container></ng-container>
 
-        <!--adaptive rendering-->
-        <responsive-renderer
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="true"
-            [subtitle]="subtitle"
-            (closePopup)="togglePopup(false)"
-            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            [subtitle]="adaptiveSubtitle"
+            (closePopup)="closeActionSheet()"
+            (textInputChange)="searchBarChange($event)"
             (navigate)="handleNavigate($event)"
             [placeholder]="placeholder"
-            >
-        </responsive-renderer>
+            [searchBarValue]="text">
+        </kendo-adaptive-renderer>
 
         <ng-template #sharedPopupActionSheetTemplate>
             <!--user-defined header template -->
@@ -457,6 +452,7 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
                     #optionsList
                     [optionPrefix]="optionPrefix"
                     [data]="data"
+                    [size]="isAdaptive ? 'large' : size"
                     [textField]="textField"
                     [valueField]="valueField"
                     [template]="{ templateRef: rowTemplate }"
@@ -510,7 +506,7 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
                 </ng-container>
             </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
             type: Component,
@@ -560,6 +556,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 when its role is 'region'
             "
             popupLabel="Options list"
+            i18n-adaptiveCloseButtonTitle="kendo.multicolumncombobox.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
+            adaptiveCloseButtonTitle="Close"
         ></ng-container>
 
         <ng-container
@@ -650,19 +648,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->
         <ng-container #container></ng-container>
 
-        <!--adaptive rendering-->
-        <responsive-renderer
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="true"
-            [subtitle]="subtitle"
-            (closePopup)="togglePopup(false)"
-            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            [subtitle]="adaptiveSubtitle"
+            (closePopup)="closeActionSheet()"
+            (textInputChange)="searchBarChange($event)"
             (navigate)="handleNavigate($event)"
             [placeholder]="placeholder"
-            >
-        </responsive-renderer>
+            [searchBarValue]="text">
+        </kendo-adaptive-renderer>
 
         <ng-template #sharedPopupActionSheetTemplate>
             <!--user-defined header template -->
@@ -744,6 +740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     #optionsList
                     [optionPrefix]="optionPrefix"
                     [data]="data"
+                    [size]="isAdaptive ? 'large' : size"
                     [textField]="textField"
                     [valueField]="valueField"
                     [template]="{ templateRef: rowTemplate }"
@@ -799,7 +796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </ng-template>
     `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, SharedDropDownEventsDirective, NgIf, NgTemplateOutlet, SeparatorComponent, SearchBarComponent, EventsOutsideAngularDirective, IconWrapperComponent, NgClass, ResizeSensorComponent, ResponsiveRendererComponent, TemplateContextDirective, NgFor, NgStyle, ListComponent]
+                    imports: [LocalizedMessagesDirective, SharedDropDownEventsDirective, NgIf, NgTemplateOutlet, SeparatorComponent, SearchBarComponent, EventsOutsideAngularDirective, IconWrapperComponent, NgClass, ResizeSensorComponent, AdaptiveRendererComponent, TemplateContextDirective, NgFor, NgStyle, ListComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.SelectionService }, { type: i4.NavigationService }, { type: i5.DisabledItemsService }, { type: i6.DataService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i7.AdaptiveService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,