@progress/kendo-angular-dropdowns 12.0.0-develop.7 → 12.0.0-develop.9

package/esm2020/dropdowntrees/multiselecttree.component.mjs

@@ -16,7 +16,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 { fetchDescendentNodes, getFillModeClass, getRoundedClass, getSearchableItems, getSizeClass, hasProps, isArray, isLetter, isObject, isObjectArray, isPresent, isUntouched, noop, parseNumber, valueFrom } from '../common/util';
+import { animationDuration, fetchDescendentNodes, getFillModeClass, getRoundedClass, getSearchableItems, getSizeClass, hasProps, isArray, isLetter, isObject, isObjectArray, isPresent, isTruthy, isUntouched, noop, parseNumber, setActionSheetTitle, updateActionSheetAdaptiveAppearance, valueFrom, windowSize } 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,6 +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 * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-popup";
 import * as i2 from "../common/navigation/navigation.service";
@@ -35,15 +36,16 @@ import * as i3 from "@progress/kendo-angular-l10n";
 import * as i4 from "./lookup/lookup.service";
 import * as i5 from "../common/taglist.component";
 import * as i6 from "@progress/kendo-angular-icons";
-import * as i7 from "@progress/kendo-angular-treeview";
-import * as i8 from "../common/localization/localized-messages.directive";
-import * as i9 from "@angular/common";
-import * as i10 from "@angular/forms";
-import * as i11 from "../common/filter-input.directive";
-import * as i12 from "@progress/kendo-angular-common";
-import * as i13 from "../common/templates/template-context.directive";
-import * as i14 from "./checked-state/check-all.directive";
-import * as i15 from "./checked-state/check.directive";
+import * as i7 from "../common/action-sheet.component";
+import * as i8 from "@progress/kendo-angular-treeview";
+import * as i9 from "@progress/kendo-angular-common";
+import * as i10 from "../common/localization/localized-messages.directive";
+import * as i11 from "@angular/common";
+import * as i12 from "@angular/forms";
+import * as i13 from "../common/filter-input.directive";
+import * as i14 from "../common/templates/template-context.directive";
+import * as i15 from "./checked-state/check-all.directive";
+import * as i16 from "./checked-state/check.directive";
 const DEFAULT_POPUP_SETTINGS = { animate: true };
 const DEFAULT_CHECKABLE_SETTINGS = { checkChildren: true, checkOnClick: true };
 const hasChildren = () => false;
@@ -68,6 +70,10 @@ export class MultiSelectTreeComponent {
         this.cdr = cdr;
         this.lookup = lookup;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.animationDuration = animationDuration;
         /**
          * @hidden
          */
@@ -80,6 +86,23 @@ export class MultiSelectTreeComponent {
         this.treeViewId = `k-${guid()}`;
         this.role = 'combobox';
         this.ariaHasPopup = 'tree';
+        /**
+         * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
+         */
+        this.adaptiveMode = 'none';
+        /**
+         * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+         * By default the ActionSheet title uses the text provided for the label of the AutoComplete.
+         */
+        this.title = '';
+        /**
+        * @hidden
+        */
+        this.windowSize = 'large';
+        /**
+         * @hidden
+         */
+        this.isActionSheetExpanded = false;
         /**
          * Sets the levels in the data set where the values can be found when `valueField` is an Array.
          * The field serves to correctly allocate a data item used when the MultiSelectTree is initialized with a value.
@@ -88,14 +111,8 @@ export class MultiSelectTreeComponent {
         /**
          * The hint which is displayed when the component is empty.
          */
-        this.placeholder = "";
-        /**
-         * Sets the height of the options list. By default, `listHeight` is 200px.
-         *
-         * > The `listHeight` property affects only the list of options and not the whole popup container.
-         * > To set the height of the popup container, use `popupSettings.height`.
-         */
-        this.listHeight = 200;
+        this.placeholder = '';
+        this._listHeight = 200;
         /**
          * Sets the disabled state of the component.
          */
@@ -238,6 +255,7 @@ export class MultiSelectTreeComponent {
         this._popupSettings = DEFAULT_POPUP_SETTINGS;
         this._checkableSettings = DEFAULT_CHECKABLE_SETTINGS;
         this._isFocused = false;
+        this._initiallyCheckedItems = [];
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
@@ -298,7 +316,47 @@ export class MultiSelectTreeComponent {
     /**
      * @hidden
      */
-    handleKeydown(event) {
+    onFilterChange(text) {
+        if (this.filterable) {
+            this.filterChange.emit(text);
+        }
+    }
+    /**
+     * @hidden
+     */
+    onExpand() {
+        this._searchableNodes = getSearchableItems(this.treeViewId, this.actionSheet.element.nativeElement);
+        this.isActionSheetExpanded = true;
+    }
+    /**
+     * @hidden
+     */
+    onCollapse() {
+        this.isActionSheetExpanded = false;
+    }
+    /**
+     * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
+     * By default the ActionSheet subtitle uses the text provided for the `placeholder` of the AutoComplete.
+    */
+    set subtitle(_subtitle) {
+        this._subtitle = _subtitle;
+    }
+    get subtitle() {
+        return this._subtitle || this.placeholder;
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
+    }
+    /**
+     * @hidden
+     */
+    handleKeydown(event, input) {
+        if (input) {
+            event.stopImmediatePropagation();
+        }
         const deleteTag = this.isWrapperActive && event.keyCode === Keys.Backspace && this.tags.length > 0;
         if (deleteTag) {
             this.handleBackspace();
@@ -307,7 +365,7 @@ export class MultiSelectTreeComponent {
         if (this.disabled || this.readonly) {
             return;
         }
-        if (!this.isFilterActive && isLetter(event.key)) {
+        if (!this.isFilterActive && isLetter(event.key) && !this.actionSheetSearchBar?.onFocus) {
             this.printableCharacters.next(event.key);
         }
         const eventData = event;
@@ -322,6 +380,24 @@ export class MultiSelectTreeComponent {
             this.treeview?.element.nativeElement.dispatchEvent(spaceKeyDownEvent);
         }
     }
+    /**
+     * @hidden
+     */
+    get actionSheet() {
+        return this.responsiveRendererComponent?.actionSheet;
+    }
+    /**
+     * @hidden
+     */
+    get actionSheetSearchBar() {
+        return this.responsiveRendererComponent?.actionSheetSearchBar;
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptive() {
+        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
+    }
     set treeview(treeview) {
         this._treeview = treeview;
         if (treeview) {
@@ -507,6 +583,24 @@ export class MultiSelectTreeComponent {
             };
         });
     }
+    /**
+     * Sets the height of the options list in the popup. By default, `listHeight` is 200px.
+     *
+     * > The `listHeight` property affects only the list of options and not the whole popup container.
+     * > To set the height of the popup container, use `popupSettings.height`.
+     *
+     * > When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
+     */
+    set listHeight(_listHeight) {
+        this._listHeight = _listHeight;
+    }
+    ;
+    get listHeight() {
+        if (this.isAdaptive) {
+            return;
+        }
+        return this._listHeight;
+    }
     /**
      * @hidden
      */
@@ -525,10 +619,10 @@ export class MultiSelectTreeComponent {
         return this._isFocused;
     }
     /**
-     * Returns the current open state of the popup.
+     * Returns the current open state. Returns `true` if the popup or actionSheet is open.
      */
     get isOpen() {
-        return isPresent(this.popupRef);
+        return isTruthy(isPresent(this.popupRef) || this.isActionSheetExpanded);
     }
     get width() {
         const wrapperWidth = this.wrapper.nativeElement.offsetWidth;
@@ -639,6 +733,23 @@ export class MultiSelectTreeComponent {
     get isCheckAllActive() {
         return this.checkAllInput && document.activeElement === this.checkAllInput.nativeElement;
     }
+    /**
+     * @hidden
+     */
+    onResize() {
+        if (this.isAdaptiveModeEnabled && this.windowSize !== windowSize()) {
+            if (this.isOpen) {
+                this.togglePopup(false);
+            }
+            this.windowSize = windowSize();
+        }
+        if (this.isOpen && !this.isActionSheetExpanded) {
+            const popupWrapper = this.popupRef.popupElement;
+            const { min, max } = this.width;
+            popupWrapper.style.minWidth = min;
+            popupWrapper.style.width = max;
+        }
+    }
     ngOnInit() {
         this.subs.add(this.printableCharacters.pipe(tap((char) => {
             this._typedValue += char;
@@ -657,10 +768,13 @@ export class MultiSelectTreeComponent {
             this.cdr.markForCheck();
         }));
         this.setComponentClasses();
+        this._initiallyCheckedItems = [...this.checkedItems];
     }
     ngAfterViewInit() {
+        this.windowSize = windowSize();
         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)));
+        this.renderer.setAttribute(this.actionSheet?.element.nativeElement, 'style', '--kendo-actionsheet-height: 60vh; --kendo-actionsheet-max-height: none');
     }
     /**
      * @hidden
@@ -703,6 +817,23 @@ export class MultiSelectTreeComponent {
     ngAfterContentChecked() {
         this.verifySettings();
     }
+    /**
+     * @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
@@ -759,7 +890,7 @@ export class MultiSelectTreeComponent {
         this.valueDepth = [];
     }
     /**
-     * Toggles the visibility of the popup
+     * Toggles the visibility of the popup or actionSheet
      * ([see example]({% slug openstate_multiselecttree %})).
      * If you use the `toggle` method to open or close the popup, the `open` and `close` events will not be fired.
      *
@@ -804,19 +935,21 @@ export class MultiSelectTreeComponent {
      * @hidden
      */
     handleBlur(e) {
-        const relatedTarget = e && e.relatedTarget;
-        if (this.wrapper.nativeElement.contains(relatedTarget) ||
-            (this.isOpen && this.popupRef.popupElement.contains(relatedTarget))) {
-            return;
-        }
-        this.isFocused = false;
-        this.togglePopup(false);
-        if (hasObservers(this.onBlur) ||
-            isUntouched(this.wrapper.nativeElement)) {
-            this._zone.run(() => {
-                this.onBlur.emit();
-                this.onTouchedCallback();
-            });
+        if (!this.isActionSheetExpanded) {
+            const relatedTarget = e && e.relatedTarget;
+            if (this.wrapper.nativeElement.contains(relatedTarget) ||
+                (this.isOpen && this.popupRef.popupElement.contains(relatedTarget))) {
+                return;
+            }
+            this.isFocused = false;
+            this.togglePopup(false);
+            if (hasObservers(this.onBlur) ||
+                isUntouched(this.wrapper.nativeElement)) {
+                this._zone.run(() => {
+                    this.onBlur.emit();
+                    this.onTouchedCallback();
+                });
+            }
         }
     }
     /**
@@ -1043,6 +1176,12 @@ export class MultiSelectTreeComponent {
         return eventArgs.isDefaultPrevented();
     }
     createPopup() {
+        this.windowSize = windowSize();
+        if (this.isAdaptive) {
+            this.openActionSheet();
+            this.cdr.detectChanges();
+            return;
+        }
         const horizontalAlign = this.direction === "rtl" ? "right" : "left";
         const anchorPosition = { horizontal: horizontalAlign, vertical: 'bottom' };
         const popupPosition = { horizontal: horizontalAlign, vertical: 'top' };
@@ -1076,6 +1215,9 @@ export class MultiSelectTreeComponent {
         });
     }
     destroyPopup() {
+        if (this.isActionSheetExpanded) {
+            this.closeActionSheet();
+        }
         if (this.popupRef) {
             this.popupRef.close();
             this.popupRef = null;
@@ -1094,7 +1236,7 @@ export class MultiSelectTreeComponent {
     handleClick(e) {
         // The check is needed otherwise when appended to the component, the popup reopens on click
         // https://github.com/telerik/kendo-angular/issues/3738
-        if ((this.popupRef && this.popupRef.popupElement.contains(e.target))) {
+        if ((this.popupRef && this.popupRef.popupElement.contains(e.target)) || this.isActionSheetExpanded) {
             return;
         }
         this.togglePopup(!this.isOpen);
@@ -1154,7 +1296,9 @@ export class MultiSelectTreeComponent {
         this.handleBlur(event);
     }
     handleTabKey() {
-        this.focus();
+        if (!this.isActionSheetExpanded) {
+            this.focus();
+        }
         if (this.isOpen) {
             this.treeview.blur();
             this.removeTreeViewFromTabOrder();
@@ -1182,7 +1326,7 @@ export class MultiSelectTreeComponent {
         }
         else if (this.isCheckAllActive || isFirstNodeActive) {
             if (this.filterable) {
-                this.filterInput.nativeElement.focus();
+                this.isActionSheetExpanded ? this.actionSheetSearchBar.focus() : this.filterInput.nativeElement.focus();
             }
             else {
                 this.focus();
@@ -1275,7 +1419,9 @@ export class MultiSelectTreeComponent {
     }
     setState() {
         if (isPresent(this.dataItems) && isPresent(this.valueField)) {
-            this.setTags();
+            if (!this.isActionSheetExpanded) {
+                this.setTags();
+            }
             this.checkedItems = this.dataItems.slice();
         }
         this.cdr.markForCheck();
@@ -1289,8 +1435,13 @@ export class MultiSelectTreeComponent {
         const newValue = this.valuePrimitive ?
             value.map(item => valueFrom(item, this.valueField)) :
             value.map(item => item.dataItem);
-        this.value = newValue;
-        this.emitValueChange(this.value);
+        if (this.isActionSheetExpanded) {
+            this._tempValue = newValue.slice();
+        }
+        else {
+            this.value = newValue;
+            this.emitValueChange(this.value);
+        }
     }
     /**
      * @hidden
@@ -1300,6 +1451,9 @@ export class MultiSelectTreeComponent {
             if (this.popupRef) {
                 this._searchableNodes = getSearchableItems(this.treeViewId, this.popupRef.popupElement);
             }
+            if (this.isActionSheetExpanded) {
+                this._searchableNodes = getSearchableItems(this.treeViewId, this.actionSheet.element.nativeElement);
+            }
         });
     }
     /**
@@ -1364,9 +1518,28 @@ export class MultiSelectTreeComponent {
             });
         }
     }
+    closeActionSheet() {
+        this.wrapper.nativeElement.focus();
+        this.actionSheet.toggle(false);
+        if (this.filterable) {
+            this.actionSheetSearchBar.value = '';
+            this.filterChange.emit('');
+        }
+        this.closed.emit();
+    }
+    openActionSheet() {
+        this.windowSize = windowSize();
+        this.actionSheet.toggle(true);
+        this.title = setActionSheetTitle(this.wrapper, this.title);
+        this.cdr.detectChanges();
+        updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
+        this.cdr.detectChanges();
+        this.opened.emit();
+        this.filterable && this.actionSheetSearchBar.focus();
+    }
 }
 MultiSelectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.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: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: { 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-multiselect-tree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-controls": "this.hostAriaControls", "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-expanded": "this.isAriaExpanded", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant" } }, providers: [
+MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiSelectTreeComponent, 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-multiselect-tree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-controls": "this.hostAriaControls", "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-expanded": "this.isAriaExpanded", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant" } }, providers: [
         LocalizationService,
         NavigationService,
         DataService,
@@ -1394,7 +1567,7 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             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: "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: "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: `
         <ng-container kendoMultiSelectTreeLocalizedMessages
             i18n-noDataText="kendo.multiselecttree.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -1410,6 +1583,12 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
 
             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-cancelButton="kendo.multiselecttree.cancelButton|The text of the Cancel button in the action sheet"
+            cancelButton="Cancel"
         >
         </ng-container>
         <kendo-taglist
@@ -1456,10 +1635,30 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
         >
         </span>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <ng-container #container></ng-container>
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="filterable"
+            [showActionButtons]="true"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (onExpand)="onExpand()"
+            (onCollapse)="onCollapse()"
+            (textInputChange)="onFilterChange($event)"
+            (onApply)="applyValue()"
+            (onCancel)="cancelValue()"
+            >
+        </responsive-renderer>
+        <ng-template #sharedPopupActionSheetTemplate>
             <span
-                *ngIf="filterable"
+                *ngIf="filterable && !isActionSheetExpanded"
                 class="k-list-filter"
-            >
+                >
                 <span
                     class="k-textbox k-input"
                     [ngClass]="filterInputClasses"
@@ -1477,7 +1676,7 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
                         (input)="handleFilterInputChange($event.target)"
                         [filterInput]="filterable && !touchEnabled"
                         [attr.aria-label]="messageFor('filterInputLabel')"
-                        (keydown)="handleKeydown($event)"
+                        (keydown)="handleKeydown($event, filterInput)"
                         [(ngModel)]="filter"
                         class="k-input-inner"
                         role="textbox"
@@ -1499,7 +1698,7 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
                 [templateContext]="{
                     templateRef: headerTemplate?.templateRef
                 }">
-            </ng-template>
+            </ng-template>            
             <div *ngIf="checkAll" class="k-check-all">
                 <input
                     #checkAllInput
@@ -1582,8 +1781,9 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
                 </ng-template>
             </div>
         </ng-template>
-        <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i5.TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i7.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "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"] }], directives: [{ type: i8.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i11.FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i14.CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { type: i15.CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }] });
+
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+    `, isInline: true, components: [{ type: i5.TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i7.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i8.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "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"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i10.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i13.FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i14.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i15.CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { type: i16.CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectTreeComponent, decorators: [{
             type: Component,
             args: [{
@@ -1634,6 +1834,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.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-cancelButton="kendo.multiselecttree.cancelButton|The text of the Cancel button in the action sheet"
+            cancelButton="Cancel"
         >
         </ng-container>
         <kendo-taglist
@@ -1680,10 +1886,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         >
         </span>
         <ng-template #popupTemplate>
+            <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
+        </ng-template>
+        <ng-container #container></ng-container>
+        <!--adaptive rendering-->
+        <responsive-renderer
+            [sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
+            [isActionSheetExpanded]="isActionSheetExpanded"
+            [title]="title"
+            [showTextInput]="filterable"
+            [showActionButtons]="true"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (onExpand)="onExpand()"
+            (onCollapse)="onCollapse()"
+            (textInputChange)="onFilterChange($event)"
+            (onApply)="applyValue()"
+            (onCancel)="cancelValue()"
+            >
+        </responsive-renderer>
+        <ng-template #sharedPopupActionSheetTemplate>
             <span
-                *ngIf="filterable"
+                *ngIf="filterable && !isActionSheetExpanded"
                 class="k-list-filter"
-            >
+                >
                 <span
                     class="k-textbox k-input"
                     [ngClass]="filterInputClasses"
@@ -1701,7 +1927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         (input)="handleFilterInputChange($event.target)"
                         [filterInput]="filterable && !touchEnabled"
                         [attr.aria-label]="messageFor('filterInputLabel')"
-                        (keydown)="handleKeydown($event)"
+                        (keydown)="handleKeydown($event, filterInput)"
                         [(ngModel)]="filter"
                         class="k-input-inner"
                         role="textbox"
@@ -1723,7 +1949,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [templateContext]="{
                     templateRef: headerTemplate?.templateRef
                 }">
-            </ng-template>
+            </ng-template>            
             <div *ngIf="checkAll" class="k-check-all">
                 <input
                     #checkAllInput
@@ -1806,7 +2032,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 </ng-template>
             </div>
         </ng-template>
-        <ng-container #container></ng-container>
+
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
     `
                 }]
         }], 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: undefined, decorators: [{
@@ -1868,6 +2095,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], ariaActiveDescendant: [{
                 type: HostBinding,
                 args: ['attr.aria-activedescendant']
+            }], adaptiveMode: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], responsiveRendererComponent: [{
+                type: ViewChild,
+                args: [ResponsiveRendererComponent]
             }], headerTemplate: [{
                 type: ContentChild,
                 args: [HeaderTemplateDirective, { static: false }]

package/esm2020/index.mjs

@@ -51,6 +51,7 @@ export { ComboBoxModule } from './comboboxes/combobox.module';
 export { DropDownListModule } from './dropdownlist/dropdownlist.module';
 export { SharedDirectivesModule } from './common/shared-directives.module';
 export { ListComponent } from './common/list.component';
+export { ResponsiveRendererComponent } from './common/action-sheet.component';
 /**
  * @hidden
  * TODO: See if the export could be removed (AOT should pass)