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

package/esm2022/dropdowntrees/multiselecttree.component.mjs

@@ -17,7 +17,7 @@ import { PreventableEvent } from '../common/models/preventable-event';
 import { NavigationAction } from '../common/navigation/navigation-action';
 import { RemoveTagEvent } from '../common/models/remove-tag-event';
 import { MultiSelectTreeMessages } from '../common/constants/error-messages';
-import { animationDuration, fetchDescendentNodes, getFillModeClass, getRoundedClass, getSearchableItems, getSizeClass, hasProps, isArray, isLetter, isObject, isObjectArray, isPresent, isTruthy, isUntouched, noop, parseNumber, setActionSheetTitle, updateActionSheetAdaptiveAppearance, valueFrom } from '../common/util';
+import { animationDuration, fetchDescendentNodes, getFillModeClass, getRoundedClass, getSearchableItems, getSizeClass, hasProps, isArray, isLetter, isObject, isObjectArray, isPresent, isTruthy, isUntouched, noop, parseNumber, setActionSheetTitle, valueFrom } from '../common/util';
 import { HeaderTemplateDirective } from '../common/templates/header-template.directive';
 import { FooterTemplateDirective } from '../common/templates/footer-template.directive';
 import { NodeTemplateDirective } from './templates/node-template.directive';
@@ -28,7 +28,7 @@ import { merge, of, Subject, Subscription } from 'rxjs';
 import { debounceTime, filter, tap } from 'rxjs/operators';
 import { buildTreeItem, MultiSelectTreeLookupService, nodeIndex } from './lookup/lookup.service';
 import { searchIcon, xIcon } from '@progress/kendo-svg-icons';
-import { ResponsiveRendererComponent } from '../common/action-sheet.component';
+import { AdaptiveRendererComponent } from '../common/adaptive-renderer.component';
 import { CheckDirective } from './checked-state/check.directive';
 import { CheckAllDirective } from './checked-state/check-all.directive';
 import { FilterInputDirective } from '../common/filter-input.directive';
@@ -129,41 +129,24 @@ export class MultiSelectTreeComponent {
      */
     onFilterChange(text) {
         if (this.filterable) {
+            this.filter = text;
             this.filterChange.emit(text);
         }
     }
-    /**
-     * @hidden
-     */
-    onExpand() {
-        this._searchableNodes = getSearchableItems(this.treeViewId, this.actionSheet.element.nativeElement);
-        this.isActionSheetExpanded = true;
-    }
-    /**
-     * @hidden
-     */
-    onCollapse() {
-        this.isActionSheetExpanded = false;
-    }
     /**
      * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
      */
     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 MultiSelectTree.
      */
-    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
      */
@@ -177,7 +160,9 @@ export class MultiSelectTreeComponent {
     /**
      * @hidden
      */
-    isActionSheetExpanded = false;
+    get isActionSheetExpanded() {
+        return this.actionSheet?.expanded;
+    }
     /**
      * @hidden
      */
@@ -217,18 +202,18 @@ export class MultiSelectTreeComponent {
     /**
      * @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
@@ -786,7 +771,6 @@ export class MultiSelectTreeComponent {
     tags;
     focusedTagIndex = undefined;
     disabledIndices;
-    _subtitle;
     _nodes;
     _value = [];
     _tabindex = 0;
@@ -795,8 +779,6 @@ export class MultiSelectTreeComponent {
     _isFocused = false;
     _treeview;
     _dataItems;
-    _tempValue;
-    _initiallyCheckedItems = [];
     _size = 'medium';
     _rounded = 'medium';
     _fillMode = 'solid';
@@ -842,17 +824,11 @@ export class MultiSelectTreeComponent {
             this.cdr.markForCheck();
         }));
         this.setComponentClasses();
-        this._initiallyCheckedItems = [...this.checkedItems];
     }
     ngAfterViewInit() {
         this.windowSize = this.adaptiveService.size;
         this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'click', this.handleClick.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');
-        }
     }
     /**
      * @hidden
@@ -898,23 +874,6 @@ export class MultiSelectTreeComponent {
             this.allNodesHidden = this.areNodesHidden(this.data);
         }
     }
-    /**
-     * @hidden
-     */
-    applyValue() {
-        this.value = this._tempValue;
-        this._initiallyCheckedItems = [...this.checkedItems];
-        this.emitValueChange(this.value);
-        this.setTags();
-        this.toggle(false);
-    }
-    /**
-     * @hidden
-     */
-    cancelValue() {
-        this.checkedItems = [...this._initiallyCheckedItems];
-        this.togglePopup(false);
-    }
     ngAfterContentInit() {
         this.isContentInit = true;
         // Still need to keep the call of 'registerLookupItems()' from ngAfterContentInit in the cases when the data is passed initially
@@ -1338,14 +1297,17 @@ export class MultiSelectTreeComponent {
             this.popupRef = null;
             this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
             this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
-            if (this.filter !== "") {
-                this.filter = "";
-                this.allNodesHidden = false;
-                if (hasObservers(this.filterChange)) {
-                    this._zone.run(() => {
-                        this.filterChange.emit("");
-                    });
-                }
+            this.clearFilter();
+        }
+    }
+    clearFilter() {
+        if (this.filter !== "") {
+            this.filter = "";
+            this.allNodesHidden = false;
+            if (hasObservers(this.filterChange)) {
+                this._zone.run(() => {
+                    this.filterChange.emit("");
+                });
             }
         }
     }
@@ -1537,9 +1499,7 @@ export class MultiSelectTreeComponent {
     }
     setState() {
         if (isPresent(this.dataItems) && isPresent(this.valueField)) {
-            if (!this.isActionSheetExpanded) {
-                this.setTags();
-            }
+            this.setTags();
             this.checkedItems = this.dataItems.slice();
         }
         this.cdr.markForCheck();
@@ -1562,13 +1522,8 @@ export class MultiSelectTreeComponent {
         const newValue = this.valuePrimitive ?
             value.map(item => valueFrom(item, this.valueField)) :
             value.map(item => item.dataItem);
-        if (this.isActionSheetExpanded) {
-            this._tempValue = newValue.slice();
-        }
-        else {
-            this.value = newValue;
-            this.emitValueChange(this.value);
-        }
+        this.value = newValue;
+        this.emitValueChange(this.value);
     }
     /**
      * @hidden
@@ -1650,26 +1605,20 @@ export class MultiSelectTreeComponent {
         this.actionSheet.toggle(false);
         this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
-        if (this.filterable) {
-            this.actionSheetSearchBar.value = '';
-            this.filterChange.emit('');
-        }
+        this.clearFilter();
         this.closed.emit();
     }
     openActionSheet() {
-        this.windowSize = this.adaptiveService.size;
         this.actionSheet.toggle(true);
-        this.title = setActionSheetTitle(this.wrapper, this.title);
+        this.adaptiveTitle = setActionSheetTitle(this.wrapper, this.adaptiveTitle);
         this.cdr.detectChanges();
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.treeViewId);
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
-        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
         this.cdr.detectChanges();
         this.opened.emit();
-        this.filterable && this.actionSheetSearchBar.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i1.PopupService }, { token: i0.Renderer2 }, { token: i2.NavigationService }, { token: i0.NgZone }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i4.MultiSelectTreeLookupService }, { token: i5.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectTreeComponent, isStandalone: true, selector: "kendo-multiselecttree", inputs: { adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-multiselecttree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant", "class.k-readonly": "this.readonly" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiSelectTreeComponent, isStandalone: true, selector: "kendo-multiselecttree", inputs: { adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-multiselecttree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant", "class.k-readonly": "this.readonly" } }, providers: [
             LocalizationService,
             NavigationService,
             DataService,
@@ -1697,7 +1646,7 @@ export class MultiSelectTreeComponent {
                 provide: KendoInput,
                 useExisting: forwardRef(() => MultiSelectTreeComponent)
             }
-        ], queries: [{ propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "nodeTemplate", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "tagTemplate", first: true, predicate: TagTemplateDirective, descendants: true }, { propertyName: "groupTagTemplate", first: true, predicate: GroupTagTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "treeview", first: true, predicate: ["treeview"], descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "checkAllInput", first: true, predicate: ["checkAllInput"], descendants: true }], exportAs: ["kendoMultiSelectTree"], usesOnChanges: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "nodeTemplate", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "tagTemplate", first: true, predicate: TagTemplateDirective, descendants: true }, { propertyName: "groupTagTemplate", first: true, predicate: GroupTagTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "adaptiveRendererComponent", first: true, predicate: AdaptiveRendererComponent, descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "treeview", first: true, predicate: ["treeview"], descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "checkAllInput", first: true, predicate: ["checkAllInput"], descendants: true }], exportAs: ["kendoMultiSelectTree"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoMultiSelectTreeLocalizedMessages
             i18n-noDataText="kendo.multiselecttree.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -1714,11 +1663,11 @@ export class MultiSelectTreeComponent {
             i18n-popupLabel="kendo.multiselecttree.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
 
-            i18n-applyButton="kendo.multiselecttree.applyButton|The text of the Apply button in the action sheet"
-            applyButton="Apply"
+            i18n-adaptiveCloseButtonTitle="kendo.multiselecttree.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"
 
-            i18n-cancelButton="kendo.multiselecttree.cancelButton|The text of the Cancel button in the action sheet"
-            cancelButton="Cancel"
+            i18n-filterInputPlaceholder="kendo.multiselecttree.filterInputPlaceholder|The text for the input's placeholder when filtering is enabled"
+            filterInputPlaceholder="Filter"
         >
         </ng-container>
         <kendo-taglist
@@ -1772,22 +1721,19 @@ export class MultiSelectTreeComponent {
             <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
         </ng-template>
         <ng-container #container></ng-container>
-        <!--adaptive rendering-->
-        <responsive-renderer
+
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="filterable"
-            [showActionButtons]="true"
-            [subtitle]="subtitle"
+            [subtitle]="adaptiveSubtitle"
             (closePopup)="togglePopup(false)"
-            (onExpand)="onExpand()"
-            (onCollapse)="onCollapse()"
             (textInputChange)="onFilterChange($event)"
-            (onApply)="applyValue()"
-            (onCancel)="cancelValue()"
-            >
-        </responsive-renderer>
+            [searchBarValue]="filter"
+            [placeholder]="placeholder"
+            [filterable]="filterable">
+        </kendo-adaptive-renderer>
+
         <ng-template #sharedPopupActionSheetTemplate>
             <div
                 *ngIf="filterable && !isActionSheetExpanded"
@@ -1865,7 +1811,7 @@ export class MultiSelectTreeComponent {
             </div>
             <kendo-treeview
                 #treeview
-                [size]="size"
+                [size]="windowSize !== 'large' ? 'large' : size"
                 [attr.id]="treeViewId"
                 [nodes]="data"
                 [style.maxHeight.px]="listHeight"
@@ -1917,7 +1863,7 @@ export class MultiSelectTreeComponent {
         </ng-template>
 
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { 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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectTreeComponent, decorators: [{
             type: Component,
@@ -1970,11 +1916,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             i18n-popupLabel="kendo.multiselecttree.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
             popupLabel="Options list"
 
-            i18n-applyButton="kendo.multiselecttree.applyButton|The text of the Apply button in the action sheet"
-            applyButton="Apply"
+            i18n-adaptiveCloseButtonTitle="kendo.multiselecttree.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"
 
-            i18n-cancelButton="kendo.multiselecttree.cancelButton|The text of the Cancel button in the action sheet"
-            cancelButton="Cancel"
+            i18n-filterInputPlaceholder="kendo.multiselecttree.filterInputPlaceholder|The text for the input's placeholder when filtering is enabled"
+            filterInputPlaceholder="Filter"
         >
         </ng-container>
         <kendo-taglist
@@ -2028,22 +1974,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
         </ng-template>
         <ng-container #container></ng-container>
-        <!--adaptive rendering-->
-        <responsive-renderer
+
+        <kendo-adaptive-renderer
             [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
-            [isActionSheetExpanded]="isActionSheetExpanded"
-            [title]="title"
+            [title]="adaptiveTitle"
             [showTextInput]="filterable"
-            [showActionButtons]="true"
-            [subtitle]="subtitle"
+            [subtitle]="adaptiveSubtitle"
             (closePopup)="togglePopup(false)"
-            (onExpand)="onExpand()"
-            (onCollapse)="onCollapse()"
             (textInputChange)="onFilterChange($event)"
-            (onApply)="applyValue()"
-            (onCancel)="cancelValue()"
-            >
-        </responsive-renderer>
+            [searchBarValue]="filter"
+            [placeholder]="placeholder"
+            [filterable]="filterable">
+        </kendo-adaptive-renderer>
+
         <ng-template #sharedPopupActionSheetTemplate>
             <div
                 *ngIf="filterable && !isActionSheetExpanded"
@@ -2121,7 +2064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </div>
             <kendo-treeview
                 #treeview
-                [size]="size"
+                [size]="windowSize !== 'large' ? 'large' : size"
                 [attr.id]="treeViewId"
                 [nodes]="data"
                 [style.maxHeight.px]="listHeight"
@@ -2175,7 +2118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
     `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, TagListComponent, NgIf, IconWrapperComponent, NgTemplateOutlet, ResponsiveRendererComponent, NgClass, FilterInputDirective, EventsOutsideAngularDirective, TemplateContextDirective, CheckAllDirective, TreeViewComponent, CheckDirective, ResizeSensorComponent]
+                    imports: [LocalizedMessagesDirective, TagListComponent, NgIf, IconWrapperComponent, NgTemplateOutlet, AdaptiveRendererComponent, NgClass, FilterInputDirective, EventsOutsideAngularDirective, TemplateContextDirective, CheckAllDirective, TreeViewComponent, CheckDirective, ResizeSensorComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i1.PopupService }, { type: i0.Renderer2 }, { type: i2.NavigationService }, { type: i0.NgZone }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i4.MultiSelectTreeLookupService }, { type: i5.AdaptiveService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -2227,13 +2170,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['attr.aria-activedescendant']
             }], adaptiveMode: [{
                 type: Input
-            }], title: [{
+            }], adaptiveTitle: [{
                 type: Input
-            }], subtitle: [{
+            }], adaptiveSubtitle: [{
                 type: Input
-            }], responsiveRendererComponent: [{
+            }], adaptiveRendererComponent: [{
                 type: ViewChild,
-                args: [ResponsiveRendererComponent]
+                args: [AdaptiveRendererComponent]
             }], headerTemplate: [{
                 type: ContentChild,
                 args: [HeaderTemplateDirective, { static: false }]

package/esm2022/index.mjs

@@ -49,7 +49,7 @@ export { AutoCompleteModule } from './autocomplete/autocomplete.module';
 export { ComboBoxModule } from './comboboxes/combobox.module';
 export { DropDownListModule } from './dropdownlist/dropdownlist.module';
 export { ListComponent } from './common/list.component';
-export { ResponsiveRendererComponent } from './common/action-sheet.component';
+export { AdaptiveRendererComponent } from './common/adaptive-renderer.component';
 export { PreventableEvent } from './common/models/preventable-event';
 export { RemoveTagEvent } from './common/models/remove-tag-event';
 export * from './directives';