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

package/esm2020/dropdowntrees/dropdowntree.component.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostBinding, Input, Output, NgZone, Renderer2, TemplateRef, ViewChild, ChangeDetectorRef, ContentChild, forwardRef, ViewContainerRef, isDevMode, Optional, Inject, Injector } from '@angular/core';
-import { anyChanged, guid, hasObservers, isDocumentAvailable, KendoInput } from '@progress/kendo-angular-common';
+import { anyChanged, guid, hasObservers, isDocumentAvailable, KendoInput, Keys } from '@progress/kendo-angular-common';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { TreeViewComponent, DataBoundComponent, ExpandableComponent } from '@progress/kendo-angular-treeview';
 import { getter } from '@progress/kendo-common';
@@ -14,7 +14,7 @@ import { NavigationService } from '../common/navigation/navigation.service';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { SelectionService } from '../common/selection/selection.service';
 import { PreventableEvent } from '../common/models/preventable-event';
-import { getFillModeClass, getRoundedClass, getSearchableItems, getSizeClass, inDropDown, isArray, isLetter, isPresent, isUntouched, noop } from '../common/util';
+import { animationDuration, getFillModeClass, getRoundedClass, getSearchableItems, getSizeClass, inDropDown, isArray, isLetter, isPresent, isTruthy, isUntouched, noop, setActionSheetTitle, updateActionSheetAdaptiveAppearance, windowSize } from '../common/util';
 import { NoDataTemplateDirective } from '../common/templates/no-data-template.directive';
 import { of, Subject, Subscription } from 'rxjs';
 import { debounceTime, tap } from 'rxjs/operators';
@@ -25,18 +25,20 @@ import { DropDownTreeMessages } from '../common/constants/error-messages';
 import { TOUCH_ENABLED } from '../common/constants/touch-enabled';
 import { ValueTemplateDirective } from '../common/templates/value-template.directive';
 import { caretAltDownIcon, 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";
 import * as i3 from "@progress/kendo-angular-l10n";
 import * as i4 from "@progress/kendo-angular-icons";
-import * as i5 from "@progress/kendo-angular-treeview";
-import * as i6 from "../common/localization/localized-messages.directive";
-import * as i7 from "@angular/common";
-import * as i8 from "../common/templates/template-context.directive";
-import * as i9 from "@angular/forms";
-import * as i10 from "../common/filter-input.directive";
-import * as i11 from "@progress/kendo-angular-common";
+import * as i5 from "../common/action-sheet.component";
+import * as i6 from "@progress/kendo-angular-treeview";
+import * as i7 from "@progress/kendo-angular-common";
+import * as i8 from "../common/localization/localized-messages.directive";
+import * as i9 from "@angular/common";
+import * as i10 from "../common/templates/template-context.directive";
+import * as i11 from "@angular/forms";
+import * as i12 from "../common/filter-input.directive";
 const DEFAULT_POPUP_SETTINGS = { animate: true };
 const hasChildren = () => false;
 const fetchChildren = () => of([]);
@@ -59,6 +61,10 @@ export class DropDownTreeComponent {
         this.cdr = cdr;
         this.localization = localization;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.animationDuration = animationDuration;
         /**
          * @hidden
          */
@@ -136,13 +142,7 @@ export class DropDownTreeComponent {
          * 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._listHeight = 200;
         /**
          * Sets the disabled state of the component.
          */
@@ -191,6 +191,28 @@ export class DropDownTreeComponent {
          * @hidden
          */
         this.selectedKeys = [];
+        /**
+         * 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 = '';
+        /**
+         * 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.
+        */
+        this.subtitle = '';
+        /**
+        * @hidden
+        */
+        this.windowSize = 'large';
+        /**
+         * @hidden
+         */
+        this.isActionSheetExpanded = false;
         /**
          * @hidden
          */
@@ -223,6 +245,21 @@ export class DropDownTreeComponent {
         this.subscribeTouchEvents();
         this.subscribeFocusEvents();
     }
+    /**
+     * @hidden
+     */
+    get actionSheet() {
+        return this.responsiveRendererComponent?.actionSheet;
+    }
+    /**
+     * @hidden
+     */
+    get actionSheetSearchBar() {
+        return this.responsiveRendererComponent?.actionSheetSearchBar;
+    }
+    get isReadonly() {
+        return this.readonly ? '' : null;
+    }
     get hostAriaInvalid() {
         return this.formControl ? this.formControl.invalid.toString() : null;
     }
@@ -253,9 +290,6 @@ export class DropDownTreeComponent {
     get hostAriaAutocomplete() {
         return this.filterable ? 'list' : null;
     }
-    get isReadonly() {
-        return this.readonly ? '' : null;
-    }
     set treeview(treeview) {
         if (treeview) {
             if (this.isFocused && !this.filterable || this.touchEnabled) {
@@ -322,6 +356,24 @@ export class DropDownTreeComponent {
     get dataItem() {
         return this._dataItem ? this._dataItem : this.value;
     }
+    /**
+     * 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;
+    }
     /**
      * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      */
@@ -416,10 +468,10 @@ export class DropDownTreeComponent {
         return isPresent(popupHeight) ? `${popupHeight}px` : 'auto';
     }
     /**
-     * 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 clearButtonVisiblity() {
         if (this.touchEnabled) {
@@ -429,6 +481,26 @@ export class DropDownTreeComponent {
     get isFilterActive() {
         return this.filterInput && document.activeElement === this.filterInput.nativeElement;
     }
+    /**
+     * @hidden
+     */
+    onFilterChange(text) {
+        if (this.filterable) {
+            this.filterChange.emit(text);
+        }
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptiveModeEnabled() {
+        return this.adaptiveMode === 'auto';
+    }
+    /**
+     * @hidden
+     */
+    get isAdaptive() {
+        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
+    }
     /**
      * @hidden
      *
@@ -543,8 +615,27 @@ export class DropDownTreeComponent {
         this.verifySettings();
     }
     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
+     */
+    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;
+        }
     }
     /**
      * @hidden
@@ -595,19 +686,21 @@ export class DropDownTreeComponent {
      * @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();
+                });
+            }
         }
     }
     /**
@@ -617,7 +710,11 @@ export class DropDownTreeComponent {
         if (this.disabled || this.readonly) {
             return;
         }
-        if (!this.isFilterActive && isLetter(event.key)) {
+        if (event.keyCode === Keys.Tab && this.isActionSheetExpanded) {
+            this.togglePopup(false);
+            return;
+        }
+        if (!this.isFilterActive && isLetter(event.key) && !this.actionSheetSearchBar?.onFocus) {
             this.printableCharacters.next(event.key);
         }
         const eventData = event;
@@ -665,9 +762,9 @@ export class DropDownTreeComponent {
         this.dataItem = undefined;
     }
     /**
-     * Toggles the visibility of the popup
+     * Toggles the visibility of the popup or actionSheet.
      * ([see example]({% slug openstate_ddt %})).
-     * If you use the `toggle` method to open or close the popup, the `open` and `close` events will not be fired.
+     * If you use the `toggle` method to open or close the popup or actionSheet, the `open` and `close` events will not be fired.
      *
      * @param open - The state of the popup.
      */
@@ -777,7 +874,7 @@ export class DropDownTreeComponent {
      * @hidden
      */
     handleFilterInputChange(input) {
-        this.filterChange.next(input.value);
+        this.filterChange.next(typeof (input) === 'string' ? input : input.value);
         this.allNodesHidden = this.nodes.every((node, index) => !this.isVisible(node, String(index)));
     }
     /**
@@ -837,8 +934,24 @@ export class DropDownTreeComponent {
             if (this.popupRef) {
                 this._searchableNodes = getSearchableItems(this.treeViewId, this.popupRef.popupElement);
             }
+            if (this.isActionSheetExpanded) {
+                this._searchableNodes = getSearchableItems(this.treeViewId, this.actionSheet.element.nativeElement);
+            }
         });
     }
+    /**
+     * @hidden
+     */
+    onExpand() {
+        this._searchableNodes = getSearchableItems(this.treeViewId, this.actionSheet.element.nativeElement);
+        this.isActionSheetExpanded = true;
+    }
+    /**
+     * @hidden
+     */
+    onCollapse() {
+        this.isActionSheetExpanded = false;
+    }
     /**
      * @hidden
      *
@@ -873,6 +986,12 @@ export class DropDownTreeComponent {
         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' };
@@ -905,6 +1024,9 @@ export class DropDownTreeComponent {
         });
     }
     destroyPopup() {
+        if (this.isActionSheetExpanded) {
+            this.closeActionSheet();
+        }
         if (this.popupRef) {
             this.popupRef.close();
             this.popupRef = null;
@@ -921,10 +1043,13 @@ export class DropDownTreeComponent {
     }
     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))
-            || (!this.popupRef && !e.target.className.includes('k-treeview-leaf'))) {
-            this.togglePopup(!this.isOpen);
+        // https://github.com/telerik/kendo-angular/issues/3738
+        this.windowSize = windowSize();
+        if (!this.isActionSheetExpanded) {
+            if ((this.popupRef && !this.popupRef.popupElement.contains(e.target))
+                || (!this.popupRef && !e.target.className.includes('k-treeview-leaf'))) {
+                this.togglePopup(!this.isOpen);
+            }
         }
     }
     handleEscape() {
@@ -994,7 +1119,12 @@ export class DropDownTreeComponent {
                 }
                 event.originalEvent.preventDefault();
                 if (this.filterable && this.treeview['navigationService']['activeIndex'] === '0') {
-                    this.filterInput.nativeElement.focus();
+                    if (this.isActionSheetExpanded) {
+                        this.actionSheetSearchBar.focus();
+                    }
+                    else {
+                        this.filterInput.nativeElement.focus();
+                    }
                 }
             })
         ].forEach(sub => this.subs.add(sub));
@@ -1079,9 +1209,30 @@ export class DropDownTreeComponent {
             }
         });
     }
+    closeActionSheet() {
+        this.actionSheet.toggle(false);
+        if (this.filterable) {
+            this.actionSheetSearchBar.value = '';
+            this.filterChange.emit('');
+        }
+        this.wrapper.nativeElement.focus();
+        this.closed.emit();
+    }
+    openActionSheet() {
+        this.windowSize = windowSize();
+        this.isActionSheetExpanded = true;
+        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.removeTreeViewFromTabOrder();
+        this.filterable && this.actionSheetSearchBar.focus();
+    }
 }
 DropDownTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropDownTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i1.PopupService }, { token: i2.NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3.LocalizationService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DropDownTreeComponent, selector: "kendo-dropdowntree", inputs: { loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-picker": "this.hostClasses", "attr.aria-invalid": "this.hostAriaInvalid", "class.k-disabled": "this.isDisabled", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.aria-busy": "this.isBusy", "attr.aria-controls": "this.hostAriaControls", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "attr.readonly": "this.isReadonly" } }, providers: [
+DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DropDownTreeComponent, selector: "kendo-dropdowntree", inputs: { loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-picker": "this.hostClasses", "attr.readonly": "this.isReadonly", "attr.aria-invalid": "this.hostAriaInvalid", "class.k-disabled": "this.isDisabled", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.aria-busy": "this.isBusy", "attr.aria-controls": "this.hostAriaControls", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-autocomplete": "this.hostAriaAutocomplete" } }, providers: [
         DataService,
         SelectionService,
         NavigationService,
@@ -1108,7 +1259,7 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             provide: ExpandableComponent,
             useExisting: forwardRef(() => DropDownTreeComponent)
         }
-    ], queries: [{ propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { 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: "valueTemplate", first: true, predicate: ValueTemplateDirective, 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 }], exportAs: ["kendoDropDownTree"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { 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: "valueTemplate", first: true, predicate: ValueTemplateDirective, 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 }], exportAs: ["kendoDropDownTree"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoDropDownTreeLocalizedMessages
             i18n-noDataText="kendo.dropdowntree.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -1172,8 +1323,26 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
-            <span
-                *ngIf="filterable"
+            <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"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (onExpand)="onExpand()"
+            (onCollapse)="onCollapse()"
+            (textInputChange)="handleFilterInputChange($event)"
+        >
+        </responsive-renderer>
+        <ng-template #sharedPopupActionSheetTemplate>
+        <span
+                *ngIf="filterable && !isActionSheetExpanded"
                 class="k-list-filter"
             >
                 <span
@@ -1259,8 +1428,9 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </ng-template>
             </div>
         </ng-template>
-        <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i5.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: i6.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.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: i10.FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i11.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i5.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+
+        <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i5.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i6.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: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], 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: i10.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i11.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: i12.FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i6.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropDownTreeComponent, decorators: [{
             type: Component,
             args: [{
@@ -1358,8 +1528,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
-            <span
-                *ngIf="filterable"
+            <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"
+            [subtitle]="subtitle"
+            (closePopup)="togglePopup(false)"
+            (onExpand)="onExpand()"
+            (onCollapse)="onCollapse()"
+            (textInputChange)="handleFilterInputChange($event)"
+        >
+        </responsive-renderer>
+        <ng-template #sharedPopupActionSheetTemplate>
+        <span
+                *ngIf="filterable && !isActionSheetExpanded"
                 class="k-list-filter"
             >
                 <span
@@ -1445,7 +1633,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>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
@@ -1454,12 +1643,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }, {
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }]; }, propDecorators: { hostClasses: [{
+                }] }]; }, propDecorators: { responsiveRendererComponent: [{
+                type: ViewChild,
+                args: [ResponsiveRendererComponent]
+            }], hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-dropdowntree']
             }, {
                 type: HostBinding,
                 args: ['class.k-picker']
+            }], isReadonly: [{
+                type: HostBinding,
+                args: ['attr.readonly']
             }], hostAriaInvalid: [{
                 type: HostBinding,
                 args: ['attr.aria-invalid']
@@ -1499,9 +1694,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], hostAriaAutocomplete: [{
                 type: HostBinding,
                 args: ['attr.aria-autocomplete']
-            }], isReadonly: [{
-                type: HostBinding,
-                args: ['attr.readonly']
             }], noDataTemplate: [{
                 type: ContentChild,
                 args: [NoDataTemplateDirective, { static: false }]
@@ -1605,4 +1797,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], focusableId: [{
                 type: Input
+            }], adaptiveMode: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
             }] } });