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

package/esm2022/multiselect/multiselect.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { guid, isPresent, isArray, isObjectArray, resolveAllValues, selectedIndices, getter, isNumber, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, animationDuration, isTruthy, setListBoxAriaLabelledBy, setActionSheetTitle, updateActionSheetAdaptiveAppearance } from '../common/util';
+import { guid, isPresent, isArray, isObjectArray, resolveAllValues, selectedIndices, getter, isNumber, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, animationDuration, isTruthy, setListBoxAriaLabelledBy, setActionSheetTitle } from '../common/util';
 import { SearchBarComponent } from '../common/searchbar.component';
 import { ViewChild, Renderer2, ViewContainerRef, Component, HostBinding, Input, ElementRef, TemplateRef, Output, EventEmitter, isDevMode, forwardRef, ContentChild, ChangeDetectorRef, KeyValueDiffers, NgZone, Injector } from '@angular/core';
 import { Subscription, Subject, of, merge } from 'rxjs';
@@ -35,11 +35,10 @@ import { DataService } from '../common/data.service';
 import { ListComponent } from '../common/list.component';
 import { normalizeCheckboxesSettings } from '../common/models/checkboxes-settings';
 import { normalizeVirtualizationSettings } from '../common/models/virtualization-settings';
-import { plusIcon, xIcon } from '@progress/kendo-svg-icons';
-import { ResponsiveRendererComponent } from '../common/action-sheet.component';
-import { SelectableDirective } from '../common/selection/selectable.directive';
+import { xIcon } from '@progress/kendo-svg-icons';
+import { AdaptiveRendererComponent } from '../common/adaptive-renderer.component';
 import { TagListComponent } from '../common/taglist.component';
-import { NgIf, NgTemplateOutlet, NgClass } from '@angular/common';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
 import { SharedDropDownEventsDirective } from '../common/shared-events.directive';
 import { LocalizedMessagesDirective } from '../common/localization/localized-messages.directive';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
@@ -100,10 +99,6 @@ export class MultiSelectComponent {
      * @hidden
      */
     xIcon = xIcon;
-    /**
-     * @hidden
-     */
-    plusIcon = plusIcon;
     listBoxId = `k-${guid()}`;
     tagListId = `k-${guid()}`;
     tagPrefix = "tag-" + guid();
@@ -115,18 +110,18 @@ export class MultiSelectComponent {
     /**
      * @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
@@ -181,16 +176,6 @@ export class MultiSelectComponent {
             });
         }
     }
-    /**
-     * @hidden
-     */
-    onAdaptiveTextBoxChange(text) {
-        if (this.filterable) {
-            this.filterChange.emit(text);
-            return;
-        }
-        this.searchTextAndFocus(text);
-    }
     /**
      * Blurs the MultiSelect.
      */
@@ -215,29 +200,7 @@ export class MultiSelectComponent {
      */
     handleBlur() {
         if (!this.isActionSheetExpanded) {
-            if (!this.isFocused) {
-                return;
-            }
-            this.isFocused = false;
-            if (hasObservers(this.onBlur) ||
-                hasObservers(this.filterChange) ||
-                hasObservers(this.close) ||
-                isUntouched(this.wrapper.nativeElement)) {
-                this._zone.run(() => {
-                    this.closePopup();
-                    if (!(this.isOpen && this.allowCustom)) {
-                        this.clearFilter();
-                    }
-                    this.onBlur.emit();
-                    this.onTouchedCallback();
-                });
-            }
-            else {
-                if (!this.allowCustom) {
-                    this.clearFilter();
-                }
-                this.closePopup();
-            }
+            this.blurComponent();
         }
     }
     /**
@@ -472,19 +435,14 @@ export class MultiSelectComponent {
     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 MultiSelect.
      */
-    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
      */
@@ -764,13 +722,32 @@ export class MultiSelectComponent {
     get isAdaptive() {
         return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
     }
+    /**
+     * @hidden
+     */
+    applyValue() {
+        if (!this.isActionSheetExpanded) {
+            return;
+        }
+        const isValueChanged = !(this.value.every(i => this._valueHolder.find(item => i === item)) && this._valueHolder.length === this.value.length);
+        if (isValueChanged) {
+            this.value = this._valueHolder;
+            this._valueHolder = [];
+            this.emitValueChange();
+        }
+        this.clearFilter();
+        this.togglePopup(false);
+        if (this.allowCustom && this.isCustomValueSelected) {
+            this.isCustomValueSelected = false;
+        }
+    }
     disabledIndices;
     initialized = false;
     _size = 'medium';
     _rounded = 'medium';
     _fillMode = 'solid';
-    _subtitle;
     _valueHolder = [];
+    isCustomValueSelected = false;
     constructor(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, injector, hostElement, adaptiveService) {
         this.wrapper = wrapper;
         this.localization = localization;
@@ -804,7 +781,8 @@ export class MultiSelectComponent {
      * @hidden
      */
     get customItemSizeClass() {
-        return `${this.size ? getSizeClass('list', this.size) : ''}`;
+        const currentSize = this.isAdaptive ? 'large' : this.size;
+        return `${currentSize ? getSizeClass('list', currentSize) : ''}`;
     }
     get width() {
         let wrapperOffsetWidth = 0;
@@ -843,22 +821,6 @@ export class MultiSelectComponent {
             return 'visible';
         }
     }
-    /**
-     * @hidden
-     */
-    applyValue() {
-        this.value = this._valueHolder;
-        this._valueHolder = [];
-        this.emitValueChange();
-        this.togglePopup(false);
-    }
-    /**
-     * @hidden
-     */
-    cancelValue() {
-        this._valueHolder = [];
-        this.togglePopup(false);
-    }
     /**
      * @hidden
      */
@@ -964,6 +926,9 @@ export class MultiSelectComponent {
         if (this.isOpen && this.selectionService.focused === undefined) {
             if (this.dataService.itemsCount > 0) {
                 this.selectionService.focused = this.firstFocusableIndex(0);
+                if (this.allowCustom) {
+                    this.selectionService.focused = 0;
+                }
             }
             else if (this.allowCustom) {
                 this.selectionService.focused = -1;
@@ -991,6 +956,10 @@ export class MultiSelectComponent {
      * @hidden
      */
     handleFilter(text) {
+        if (this.isActionSheetExpanded && this.allowCustom && this.isCustomValueSelected) {
+            this.addCustomValue(this.text);
+            this.addCustomValue(text);
+        }
         this.text = text;
         if (text && !this.isOpen) {
             this.openPopup();
@@ -1137,11 +1106,6 @@ export class MultiSelectComponent {
         this.searchbar.setInputSize();
         this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'mousedown', this.handleMousedown.bind(this)));
         this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
-        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');
-        }
         this._zone.onStable.pipe(take(1)).subscribe(() => {
             const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby') ||
                 this.searchbar.input.nativeElement.getAttribute('data-kendo-label-id');
@@ -1401,34 +1365,49 @@ export class MultiSelectComponent {
                 const itemIndex = this.dataService.indexOf(newValue);
                 const customItem = itemIndex === -1;
                 if (this.value.indexOf(newValue) === -1) {
-                    this.tags = this.tagMapper([...this.selectedDataItems, normalizedValue]);
+                    !this.isActionSheetExpanded && (this.tags = this.tagMapper([...this.selectedDataItems, normalizedValue]));
                     if (!customItem) {
                         this.selectionService.add(itemIndex);
                     }
+                    else if (this.isActionSheetExpanded) {
+                        const isValueInHolder = this._valueHolder.some(item => getter(item, this.valueField) === newValue);
+                        if (isValueInHolder) {
+                            this._valueHolder = this._valueHolder.filter(item => getter(item, this.valueField) !== newValue);
+                            this.isCustomValueSelected = false;
+                        }
+                        else {
+                            this._valueHolder = [...this._valueHolder, newValue];
+                            this.isCustomValueSelected = true;
+                        }
+                    }
                     else {
                         this.value = [...this.value, newValue];
                     }
                 }
+                else if (!customItem && this.selectionService.isSelected(itemIndex)) {
+                    this.selectionService.deselect(itemIndex);
+                    this.selectionService.focused = itemIndex;
+                }
+                else if (this.isActionSheetExpanded) {
+                    this._valueHolder = this._valueHolder.filter(item => getter(item, this.valueField) !== newValue);
+                    this.isCustomValueSelected = false;
+                }
                 else {
-                    if (!customItem && this.selectionService.isSelected(itemIndex)) {
-                        this.selectionService.deselect(itemIndex);
-                        this.selectionService.focused = itemIndex;
-                    }
-                    else {
-                        this.value = this.value.filter(item => getter(item, this.valueField) !== newValue);
-                    }
+                    this.value = this.value.filter(item => getter(item, this.valueField) !== newValue);
                 }
-                this.emitValueChange();
+                !this.isActionSheetExpanded && this.emitValueChange();
             }
             if (this.autoClose) {
                 this.togglePopup(false);
             }
-            if (this.autoClose || !this.filterable) {
+            if ((this.autoClose || !this.filterable) && !this.isActionSheetExpanded) {
                 this.clearFilter();
             }
-            this.nextTick(() => {
-                this.searchbar.focus();
-            });
+            if (!this.isActionSheetExpanded) {
+                this.nextTick(() => {
+                    this.searchbar.focus();
+                });
+            }
         });
     }
     handleItemChange(event) {
@@ -1436,7 +1415,7 @@ export class MultiSelectComponent {
         if (this.autoClose && !event.preventClosingPopup && !this.isActionSheetExpanded) {
             this.togglePopup(false);
         }
-        if (this.autoClose || !this.filterable) {
+        if ((this.autoClose || !this.filterable) && !this.isActionSheetExpanded) {
             this.clearFilter();
         }
     }
@@ -1691,8 +1670,9 @@ export class MultiSelectComponent {
         this._open = open;
         this.destroyPopup();
         if (this.isActionSheetExpanded) {
-            this.closeActionSheet();
-            this.focus();
+            this.actionSheet.toggle(false);
+            this.closed.emit();
+            this.isFocused = false;
         }
         if (this._open) {
             this.createPopup();
@@ -1798,29 +1778,46 @@ export class MultiSelectComponent {
             this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
         }
     }
-    closeActionSheet() {
-        this.actionSheet.toggle(false);
-        this.filterable && this.filterChange.emit('');
-        this.responsiveRendererComponent.searchBarValue = '';
-        this.closed.emit();
-    }
     openActionSheet() {
-        this.windowSize = this.adaptiveService.size;
         this.actionSheet.toggle(true);
         // Stores the current value state until the user either accepts or cancels it
         this._valueHolder = [...this.value];
         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() {
+        if (!this.isFocused) {
+            return;
+        }
+        this.isFocused = false;
+        if (hasObservers(this.onBlur) ||
+            hasObservers(this.filterChange) ||
+            hasObservers(this.close) ||
+            isUntouched(this.wrapper.nativeElement)) {
+            this._zone.run(() => {
+                this.closePopup();
+                if (!(this.isOpen && this.allowCustom)) {
+                    this.clearFilter();
+                }
+                this.onBlur.emit();
+                this.onTouchedCallback();
+            });
+        }
+        else {
+            if (!this.allowCustom) {
+                this.clearFilter();
+            }
+            this.closePopup();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.DataService }, { token: i4.SelectionService }, { token: i5.NavigationService }, { token: i6.DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { 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: MultiSelectComponent, isStandalone: true, selector: "kendo-multiselect", inputs: { showStickyHeader: "showStickyHeader", focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer", inputAttributes: "inputAttributes" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", removeTag: "removeTag" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectComponent, isStandalone: true, selector: "kendo-multiselect", inputs: { showStickyHeader: "showStickyHeader", focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer", inputAttributes: "inputAttributes" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", removeTag: "removeTag" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
             MULTISELECT_VALUE_ACCESSOR,
             DataService,
             SelectionService,
@@ -1837,7 +1834,7 @@ export class MultiSelectComponent {
             {
                 provide: KendoInput, useExisting: forwardRef(() => MultiSelectComponent)
             }
-        ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "customItemTemplate", first: true, predicate: CustomItemTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "tagTemplate", first: true, predicate: TagTemplateDirective, descendants: true }, { propertyName: "groupTagTemplate", first: true, predicate: GroupTagTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, 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: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "tagList", first: true, predicate: TagListComponent, descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoMultiSelect"], usesOnChanges: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "customItemTemplate", first: true, predicate: CustomItemTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "tagTemplate", first: true, predicate: TagTemplateDirective, descendants: true }, { propertyName: "groupTagTemplate", first: true, predicate: GroupTagTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, 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: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "tagList", first: true, predicate: TagListComponent, descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoMultiSelect"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoMultiSelectLocalizedMessages
             i18n-noDataText="kendo.multiselect.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -1848,11 +1845,8 @@ export class MultiSelectComponent {
             i18n-popupLabel="kendo.multiselect.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
 
-            i18n-applyButton="kendo.multiselect.applyButton|The text of the Apply button in the action sheet"
-            applyButton="Apply"
-
-            i18n-cancelButton="kendo.multiselect.cancelButton|The text of the Cancel button in the action sheet"
-            cancelButton="Cancel"
+            i18n-adaptiveCloseButtonTitle="kendo.multiselect.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>
 
@@ -1944,22 +1938,17 @@ export class MultiSelectComponent {
         <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"
-            [showActionButtons]="true"
-            [subtitle]="subtitle"
-            (closePopup)="togglePopup(false)"
-            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            [subtitle]="adaptiveSubtitle"
+            (closePopup)="applyValue()"
+            (textInputChange)="handleFilter($event)"
             [placeholder]="placeholder"
             (navigate)="handleNavigate($event)"
-            (onApply)="applyValue()"
-            (onCancel)="cancelValue()"
-            >
-        </responsive-renderer>
+            [searchBarValue]="text">
+        </kendo-adaptive-renderer>
 
         <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
@@ -1968,32 +1957,10 @@ export class MultiSelectComponent {
                     templateRef: headerTemplate.templateRef
                 }">
             </ng-template>
-            <!--custom item template-->
-            <div
-                *ngIf="allowCustom && text"
-                class="k-list"
-                [ngClass]="customItemSizeClass"
-            >
-                <div class="k-list-item k-custom-item" kendoDropDownsSelectable [multipleSelection]="true" [index]="-1">
-                    <ng-template *ngIf="customItemTemplate;else default_custom_item_template"
-                        [templateContext]="{
-                            templateRef: customItemTemplate.templateRef,
-                            $implicit: text
-                        }">
-                    </ng-template>
-                    <ng-template #default_custom_item_template>{{ text }}</ng-template>
-                    <kendo-icon-wrapper
-                        class="k-icon"
-                        name="plus"
-                        [svgIcon]="plusIcon"
-                    >
-                    </kendo-icon-wrapper>
-                </div>
-            </div>
             <!--list-->
             <kendo-list
                 #optionsList
-                [size]="size"
+                [size]="isAdaptive ? 'large' : size"
                 [rounded]="rounded"
                 [id]="listBoxId"
                 [optionPrefix]="optionPrefix"
@@ -2012,6 +1979,9 @@ export class MultiSelectComponent {
                 [isMultiselect]="true"
                 [isActionSheetExpanded]="isActionSheetExpanded"
                 [showStickyHeader]="showStickyHeader"
+                [customItemTemplate]="customItemTemplate"
+                [text]="text"
+                [allowCustom]="allowCustom"
             >
             </kendo-list>
             <!--no data template-->
@@ -2032,7 +2002,7 @@ export class MultiSelectComponent {
                 }">
             </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: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { 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: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { 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: MultiSelectComponent, decorators: [{
             type: Component,
@@ -2068,11 +2038,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             i18n-popupLabel="kendo.multiselect.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
 
-            i18n-applyButton="kendo.multiselect.applyButton|The text of the Apply button in the action sheet"
-            applyButton="Apply"
-
-            i18n-cancelButton="kendo.multiselect.cancelButton|The text of the Cancel button in the action sheet"
-            cancelButton="Cancel"
+            i18n-adaptiveCloseButtonTitle="kendo.multiselect.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>
 
@@ -2164,22 +2131,17 @@ 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"
-            [showActionButtons]="true"
-            [subtitle]="subtitle"
-            (closePopup)="togglePopup(false)"
-            (textInputChange)="onAdaptiveTextBoxChange($event)"
+            [subtitle]="adaptiveSubtitle"
+            (closePopup)="applyValue()"
+            (textInputChange)="handleFilter($event)"
             [placeholder]="placeholder"
             (navigate)="handleNavigate($event)"
-            (onApply)="applyValue()"
-            (onCancel)="cancelValue()"
-            >
-        </responsive-renderer>
+            [searchBarValue]="text">
+        </kendo-adaptive-renderer>
 
         <ng-template #sharedPopupActionSheetTemplate>
             <!--header template-->
@@ -2188,32 +2150,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     templateRef: headerTemplate.templateRef
                 }">
             </ng-template>
-            <!--custom item template-->
-            <div
-                *ngIf="allowCustom && text"
-                class="k-list"
-                [ngClass]="customItemSizeClass"
-            >
-                <div class="k-list-item k-custom-item" kendoDropDownsSelectable [multipleSelection]="true" [index]="-1">
-                    <ng-template *ngIf="customItemTemplate;else default_custom_item_template"
-                        [templateContext]="{
-                            templateRef: customItemTemplate.templateRef,
-                            $implicit: text
-                        }">
-                    </ng-template>
-                    <ng-template #default_custom_item_template>{{ text }}</ng-template>
-                    <kendo-icon-wrapper
-                        class="k-icon"
-                        name="plus"
-                        [svgIcon]="plusIcon"
-                    >
-                    </kendo-icon-wrapper>
-                </div>
-            </div>
             <!--list-->
             <kendo-list
                 #optionsList
-                [size]="size"
+                [size]="isAdaptive ? 'large' : size"
                 [rounded]="rounded"
                 [id]="listBoxId"
                 [optionPrefix]="optionPrefix"
@@ -2232,6 +2172,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [isMultiselect]="true"
                 [isActionSheetExpanded]="isActionSheetExpanded"
                 [showStickyHeader]="showStickyHeader"
+                [customItemTemplate]="customItemTemplate"
+                [text]="text"
+                [allowCustom]="allowCustom"
             >
             </kendo-list>
             <!--no data template-->
@@ -2254,11 +2197,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </ng-template>
   `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, SharedDropDownEventsDirective, NgIf, NgTemplateOutlet, SeparatorComponent, TagListComponent, SearchBarComponent, IconWrapperComponent, ResizeSensorComponent, ResponsiveRendererComponent, TemplateContextDirective, NgClass, SelectableDirective, ListComponent]
+                    imports: [LocalizedMessagesDirective, SharedDropDownEventsDirective, NgIf, NgTemplateOutlet, SeparatorComponent, TagListComponent, SearchBarComponent, IconWrapperComponent, ResizeSensorComponent, AdaptiveRendererComponent, TemplateContextDirective, ListComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.DataService }, { type: i4.SelectionService }, { type: i5.NavigationService }, { type: i6.DisabledItemsService }, { type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i7.AdaptiveService }]; }, propDecorators: { responsiveRendererComponent: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.DataService }, { type: i4.SelectionService }, { type: i5.NavigationService }, { type: i6.DisabledItemsService }, { type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i7.AdaptiveService }]; }, propDecorators: { adaptiveRendererComponent: [{
                 type: ViewChild,
-                args: [ResponsiveRendererComponent]
+                args: [AdaptiveRendererComponent]
             }], showStickyHeader: [{
                 type: Input
             }], focusableId: [{
@@ -2290,9 +2233,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
             }], disabled: [{
                 type: Input

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1745321623,
-    version: '19.0.0-develop.2',
+    publishDate: 1747410176,
+    version: '19.0.0-develop.20',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };