primeng 14.1.1 → 14.2.0

package/fesm2020/primeng-treeselect.mjs

@@ -1,16 +1,17 @@
-import * as i0 from '@angular/core';
-import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChildren, ViewChild, Output, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { RippleModule } from 'primeng/ripple';
+import * as i0 from '@angular/core';
+import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChildren, ViewChild, Output, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from 'primeng/api';
 import { PrimeTemplate, SharedModule } from 'primeng/api';
-import { trigger, transition, style, animate } from '@angular/animations';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
-import * as i3 from 'primeng/tree';
+import { DomHandler } from 'primeng/dom';
+import * as i3 from 'primeng/overlay';
+import { OverlayModule } from 'primeng/overlay';
+import { RippleModule } from 'primeng/ripple';
+import * as i4 from 'primeng/tree';
 import { TreeModule } from 'primeng/tree';
-import { ObjectUtils, ZIndexUtils } from 'primeng/utils';
+import { ObjectUtils } from 'primeng/utils';
 
 const TREESELECT_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -23,11 +24,11 @@ class TreeSelect {
         this.cd = cd;
         this.el = el;
         this.overlayService = overlayService;
-        this.type = "button";
-        this.scrollHeight = "400px";
+        this.type = 'button';
+        this.scrollHeight = '400px';
         this.metaKeySelection = true;
-        this.display = "comma";
-        this.selectionMode = "single";
+        this.display = 'comma';
+        this.selectionMode = 'single';
         this.emptyMessage = '';
         this.filter = false;
         this.filterBy = 'label';
@@ -37,8 +38,6 @@ class TreeSelect {
         this.propagateSelectionUp = true;
         this.showClear = false;
         this.resetFilterOnHide = true;
-        this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
-        this.hideTransitionOptions = '.1s linear';
         this.onNodeExpand = new EventEmitter();
         this.onNodeCollapse = new EventEmitter();
         this.onShow = new EventEmitter();
@@ -55,11 +54,24 @@ class TreeSelect {
     get options() {
         return this._options;
     }
-    ;
     set options(options) {
         this._options = options;
         this.updateTreeState();
     }
+    get showTransitionOptions() {
+        return this._showTransitionOptions;
+    }
+    set showTransitionOptions(val) {
+        this._showTransitionOptions = val;
+        console.warn('The showTransitionOptions property is deprecated since v14.2.0, use overlayOptions property instead.');
+    }
+    get hideTransitionOptions() {
+        return this._hideTransitionOptions;
+    }
+    set hideTransitionOptions(val) {
+        this._hideTransitionOptions = val;
+        console.warn('The hideTransitionOptions property is deprecated since v14.2.0, use overlayOptions property instead.');
+    }
     ngOnInit() {
         this.updateTreeState();
     }
@@ -81,11 +93,11 @@ class TreeSelect {
                 case 'footer':
                     this.footerTemplate = item.template;
                     break;
-                default:
+                default: //TODO: @deprecated Used "value" template instead
                     if (item.name)
                         this.templateMap[item.name] = item.template;
                     else
-                        this.valueTemplate = item.template; //TODO: @deprecated Used "value" template instead
+                        this.valueTemplate = item.template;
                     break;
             }
         });
@@ -93,15 +105,10 @@ class TreeSelect {
     onOverlayAnimationStart(event) {
         switch (event.toState) {
             case 'visible':
-                this.overlayEl = event.element;
-                this.onOverlayEnter();
-                break;
-        }
-    }
-    onOverlayAnimationDone(event) {
-        switch (event.toState) {
-            case 'void':
-                this.onOverlayLeave();
+                if (this.filter) {
+                    ObjectUtils.isNotEmpty(this.filterValue) && this.treeViewChild?._filter(this.filterValue);
+                    this.filterInputAutoFocus && this.filterViewChild.nativeElement.focus();
+                }
                 break;
         }
     }
@@ -111,12 +118,16 @@ class TreeSelect {
         this.cd.markForCheck();
     }
     onClick(event) {
-        if (!this.disabled && (!this.overlayEl || !this.overlayEl.contains(event.target)) && !DomHandler.hasClass(event.target, 'p-treeselect-close')) {
+        if (this.disabled) {
+            return;
+        }
+        if (!this.overlayViewChild?.el?.nativeElement?.contains(event.target) && !DomHandler.hasClass(event.target, 'p-treeselect-close')) {
             if (this.overlayVisible) {
                 this.hide();
             }
-            else
+            else {
                 this.show();
+            }
             this.focusInput.nativeElement.focus();
         }
     }
@@ -128,8 +139,8 @@ class TreeSelect {
                     this.show();
                     event.preventDefault();
                 }
-                else if (this.overlayVisible && this.overlayEl) {
-                    let focusableElements = DomHandler.getFocusableElements(this.overlayEl);
+                else if (this.overlayVisible && this.panelEl?.nativeElement) {
+                    let focusableElements = DomHandler.getFocusableElements(this.panelEl.nativeElement);
                     if (focusableElements && focusableElements.length > 0) {
                         focusableElements[0].focus();
                     }
@@ -161,23 +172,25 @@ class TreeSelect {
     }
     onFilterInput(event) {
         this.filterValue = event.target.value;
-        this.treeViewChild._filter(this.filterValue);
+        this.treeViewChild?._filter(this.filterValue);
         this.onFilter.emit({
             originalEvent: event,
-            filteredValue: this.treeViewChild.filteredNodes
+            filteredValue: this.treeViewChild?.filteredNodes
         });
     }
     show() {
         this.overlayVisible = true;
     }
-    hide() {
+    hide(event) {
         this.overlayVisible = false;
         this.resetFilter();
+        this.onHide.emit(event);
         this.cd.markForCheck();
     }
     clear(event) {
         this.value = null;
         this.resetExpandedNodes();
+        this.resetPartialSelected();
         this.onModelChange(this.value);
         this.onClear.emit();
         event.stopPropagation();
@@ -187,23 +200,18 @@ class TreeSelect {
     }
     resetFilter() {
         if (this.filter && !this.resetFilterOnHide) {
-            this.filteredNodes = this.treeViewChild.filteredNodes;
-            this.treeViewChild.resetFilter();
+            this.filteredNodes = this.treeViewChild?.filteredNodes;
+            this.treeViewChild?.resetFilter();
         }
         else {
             this.filterValue = null;
         }
     }
-    onOverlayClick(event) {
-        this.overlayService.add({
-            originalEvent: event,
-            target: this.el.nativeElement
-        });
-    }
     updateTreeState() {
         if (this.value) {
-            let selectedNodes = this.selectionMode === "single" ? [this.value] : [...this.value];
+            let selectedNodes = this.selectionMode === 'single' ? [this.value] : [...this.value];
             this.resetExpandedNodes();
+            this.resetPartialSelected();
             if (selectedNodes && this.options) {
                 this.updateTreeBranchState(null, null, selectedNodes);
             }
@@ -217,8 +225,7 @@ class TreeSelect {
             }
             if (selectedNodes.length > 0 && node.children) {
                 for (let childNode of node.children) {
-                    path.push(node);
-                    this.updateTreeBranchState(childNode, path, selectedNodes);
+                    this.updateTreeBranchState(childNode, [...path, node], selectedNodes);
                 }
             }
         }
@@ -248,6 +255,17 @@ class TreeSelect {
         }
         this.expandedNodes = [];
     }
+    resetPartialSelected(nodes = this.options) {
+        if (!nodes) {
+            return;
+        }
+        for (let node of nodes) {
+            node.partialSelected = false;
+            if (node.children && node.children?.length > 0) {
+                this.resetPartialSelected(node.children);
+            }
+        }
+    }
     findSelectedNodes(node, keys, selectedNodes) {
         if (node) {
             if (this.isSelected(node)) {
@@ -272,7 +290,7 @@ class TreeSelect {
     findIndexInSelection(node) {
         let index = -1;
         if (this.value) {
-            if (this.selectionMode === "single") {
+            if (this.selectionMode === 'single') {
                 let areNodesEqual = (this.value.key && this.value.key === node.key) || this.value == node;
                 index = areNodesEqual ? 0 : -1;
             }
@@ -298,26 +316,6 @@ class TreeSelect {
     onUnselect(node) {
         this.onNodeUnselect.emit(node);
     }
-    onOverlayEnter() {
-        ZIndexUtils.set('overlay', this.overlayEl, this.config.zIndex.overlay);
-        if (this.filter && this.filterInputAutoFocus) {
-            this.filterViewChild.nativeElement.focus();
-        }
-        this.appendContainer();
-        this.alignOverlay();
-        this.bindOutsideClickListener();
-        this.bindScrollListener();
-        this.bindResizeListener();
-        this.onShow.emit();
-    }
-    onOverlayLeave() {
-        this.unbindOutsideClickListener();
-        this.unbindScrollListener();
-        this.unbindResizeListener();
-        ZIndexUtils.clear(this.overlayEl);
-        this.overlayEl = null;
-        this.onHide.emit();
-    }
     onFocus() {
         this.focused = true;
     }
@@ -339,91 +337,6 @@ class TreeSelect {
         this.disabled = val;
         this.cd.markForCheck();
     }
-    appendContainer() {
-        if (this.appendTo) {
-            if (this.appendTo === 'body')
-                document.body.appendChild(this.overlayEl);
-            else
-                document.getElementById(this.appendTo).appendChild(this.overlayEl);
-        }
-    }
-    restoreAppend() {
-        if (this.overlayEl && this.appendTo) {
-            if (this.appendTo === 'body')
-                document.body.removeChild(this.overlayEl);
-            else
-                document.getElementById(this.appendTo).removeChild(this.overlayEl);
-        }
-    }
-    alignOverlay() {
-        if (this.appendTo) {
-            DomHandler.absolutePosition(this.overlayEl, this.containerEl.nativeElement);
-            this.overlayEl.style.minWidth = DomHandler.getOuterWidth(this.containerEl.nativeElement) + 'px';
-        }
-        else {
-            DomHandler.relativePosition(this.overlayEl, this.containerEl.nativeElement);
-        }
-    }
-    bindOutsideClickListener() {
-        if (!this.outsideClickListener) {
-            this.outsideClickListener = (event) => {
-                if (this.overlayVisible && this.overlayEl && !this.containerEl.nativeElement.contains(event.target) && !this.overlayEl.contains(event.target)) {
-                    this.hide();
-                }
-            };
-            document.addEventListener('click', this.outsideClickListener);
-        }
-    }
-    unbindOutsideClickListener() {
-        if (this.outsideClickListener) {
-            document.removeEventListener('click', this.outsideClickListener);
-            this.outsideClickListener = null;
-        }
-    }
-    bindScrollListener() {
-        if (!this.scrollHandler) {
-            this.scrollHandler = new ConnectedOverlayScrollHandler(this.containerEl.nativeElement, () => {
-                if (this.overlayVisible) {
-                    this.hide();
-                }
-            });
-        }
-        this.scrollHandler.bindScrollListener();
-    }
-    unbindScrollListener() {
-        if (this.scrollHandler) {
-            this.scrollHandler.unbindScrollListener();
-        }
-    }
-    bindResizeListener() {
-        if (!this.resizeListener) {
-            this.resizeListener = () => {
-                if (this.overlayVisible && !DomHandler.isTouchDevice()) {
-                    this.hide();
-                }
-            };
-            window.addEventListener('resize', this.resizeListener);
-        }
-    }
-    unbindResizeListener() {
-        if (this.resizeListener) {
-            window.removeEventListener('resize', this.resizeListener);
-            this.resizeListener = null;
-        }
-    }
-    ngOnDestroy() {
-        this.restoreAppend();
-        this.unbindOutsideClickListener();
-        this.unbindResizeListener();
-        if (this.scrollHandler) {
-            this.scrollHandler.destroy();
-            this.scrollHandler = null;
-        }
-        if (this.overlayEl) {
-            ZIndexUtils.clear(this.overlayEl);
-            this.overlayEl = null;
-        }
-    }
     containerClass() {
         return {
             'p-treeselect p-component p-inputwrapper': true,
@@ -447,149 +360,235 @@ class TreeSelect {
     }
     get label() {
         let value = this.value || [];
-        return value.length ? value.map(node => node.label).join(', ') : (this.selectionMode === "single" && this.value) ? value.label : this.placeholder;
+        return value.length ? value.map((node) => node.label).join(', ') : this.selectionMode === 'single' && this.value ? value.label : this.placeholder;
     }
 }
 TreeSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TreeSelect, deps: [{ token: i1.PrimeNGConfig }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-TreeSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: TreeSelect, selector: "p-treeSelect", inputs: { type: "type", inputId: "inputId", scrollHeight: "scrollHeight", disabled: "disabled", metaKeySelection: "metaKeySelection", display: "display", selectionMode: "selectionMode", tabindex: "tabindex", ariaLabelledBy: "ariaLabelledBy", placeholder: "placeholder", panelClass: "panelClass", emptyMessage: "emptyMessage", appendTo: "appendTo", filter: "filter", filterBy: "filterBy", filterMode: "filterMode", filterPlaceholder: "filterPlaceholder", filterLocale: "filterLocale", filterInputAutoFocus: "filterInputAutoFocus", propagateSelectionDown: "propagateSelectionDown", propagateSelectionUp: "propagateSelectionUp", showClear: "showClear", resetFilterOnHide: "resetFilterOnHide", options: "options", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", onShow: "onShow", onHide: "onHide", onClear: "onClear", onFilter: "onFilter", onNodeUnselect: "onNodeUnselect", onNodeSelect: "onNodeSelect" }, host: { properties: { "class.p-inputwrapper-filled": "!emptyValue", "class.p-inputwrapper-focus": "focused || overlayVisible", "class.p-treeselect-clearable": "showClear && !disabled" }, classAttribute: "p-element p-inputwrapper" }, providers: [TREESELECT_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["container"], descendants: true }, { propertyName: "focusInput", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "treeViewChild", first: true, predicate: ["tree"], descendants: true }], ngImport: i0, template: `
-    <div #container [ngClass]="containerClass()" (click)="onClick($event)">
-        <div class="p-hidden-accessible">
-            <input #focusInput type="text" role="listbox" [attr.id]="inputId" readonly [disabled]="disabled" (focus)="onFocus()" (blur)="onBlur()" (keydown)="onKeyDown($event)" [attr.tabindex]="tabindex"
-            aria-haspopup="true" [attr.aria-expanded]="overlayVisible" [attr.aria-labelledby]="ariaLabelledBy"/>
-        </div>
-        <div class="p-treeselect-label-container">
-            <div [ngClass]="labelClass()">
-                <ng-container *ngIf="valueTemplate;else defaultValueTemplate">
-                        <ng-container *ngTemplateOutlet="valueTemplate; context: {$implicit: value, placeholder: placeholder}"></ng-container>
-                </ng-container>
-                <ng-template #defaultValueTemplate>
-                    <ng-container *ngIf="display === 'comma';else chipsValueTemplate">
-                        {{label || 'empty'}}
+TreeSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: TreeSelect, selector: "p-treeSelect", inputs: { type: "type", inputId: "inputId", scrollHeight: "scrollHeight", disabled: "disabled", metaKeySelection: "metaKeySelection", display: "display", selectionMode: "selectionMode", tabindex: "tabindex", ariaLabelledBy: "ariaLabelledBy", placeholder: "placeholder", panelClass: "panelClass", panelStyle: "panelStyle", panelStyleClass: "panelStyleClass", containerStyle: "containerStyle", containerStyleClass: "containerStyleClass", labelStyle: "labelStyle", labelStyleClass: "labelStyleClass", overlayOptions: "overlayOptions", emptyMessage: "emptyMessage", appendTo: "appendTo", filter: "filter", filterBy: "filterBy", filterMode: "filterMode", filterPlaceholder: "filterPlaceholder", filterLocale: "filterLocale", filterInputAutoFocus: "filterInputAutoFocus", propagateSelectionDown: "propagateSelectionDown", propagateSelectionUp: "propagateSelectionUp", showClear: "showClear", resetFilterOnHide: "resetFilterOnHide", options: "options", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", onShow: "onShow", onHide: "onHide", onClear: "onClear", onFilter: "onFilter", onNodeUnselect: "onNodeUnselect", onNodeSelect: "onNodeSelect" }, host: { properties: { "class.p-inputwrapper-filled": "!emptyValue", "class.p-inputwrapper-focus": "focused || overlayVisible", "class.p-treeselect-clearable": "showClear && !disabled" }, classAttribute: "p-element p-inputwrapper" }, providers: [TREESELECT_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["container"], descendants: true }, { propertyName: "focusInput", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "treeViewChild", first: true, predicate: ["tree"], descendants: true }, { propertyName: "panelEl", first: true, predicate: ["panel"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }], ngImport: i0, template: `
+        <div #container [ngClass]="containerClass()" [class]="containerStyleClass" [ngStyle]="containerStyle" (click)="onClick($event)">
+            <div class="p-hidden-accessible">
+                <input
+                    #focusInput
+                    type="text"
+                    role="listbox"
+                    [attr.id]="inputId"
+                    readonly
+                    [disabled]="disabled"
+                    (focus)="onFocus()"
+                    (blur)="onBlur()"
+                    (keydown)="onKeyDown($event)"
+                    [attr.tabindex]="tabindex"
+                    aria-haspopup="true"
+                    [attr.aria-expanded]="overlayVisible"
+                    [attr.aria-labelledby]="ariaLabelledBy"
+                />
+            </div>
+            <div class="p-treeselect-label-container">
+                <div [ngClass]="labelClass()" [class]="labelStyleClass" [ngStyle]="labelStyle">
+                    <ng-container *ngIf="valueTemplate; else defaultValueTemplate">
+                        <ng-container *ngTemplateOutlet="valueTemplate; context: { $implicit: value, placeholder: placeholder }"></ng-container>
                     </ng-container>
-                    <ng-template #chipsValueTemplate>
-                        <div *ngFor="let node of value" class="p-treeselect-token">
-                            <span class="p-treeselect-token-label">{{node.label}}</span>
-                        </div>
-                        <ng-container *ngIf="emptyValue">{{placeholder || 'empty'}}</ng-container>
+                    <ng-template #defaultValueTemplate>
+                        <ng-container *ngIf="display === 'comma'; else chipsValueTemplate">
+                            {{ label || 'empty' }}
+                        </ng-container>
+                        <ng-template #chipsValueTemplate>
+                            <div *ngFor="let node of value" class="p-treeselect-token">
+                                <span class="p-treeselect-token-label">{{ node.label }}</span>
+                            </div>
+                            <ng-container *ngIf="emptyValue">{{ placeholder || 'empty' }}</ng-container>
+                        </ng-template>
                     </ng-template>
-                </ng-template>
-            </div>
-            <i *ngIf="checkValue() && !disabled && showClear" class="p-treeselect-clear-icon pi pi-times" (click)="clear($event)"></i>
-
-        </div>
-        <div class="p-treeselect-trigger">
-            <span class="p-treeselect-trigger-icon pi pi-chevron-down"></span>
-        </div>
-        <div #overlayRef class="p-treeselect-panel p-component" *ngIf="overlayVisible" (click)="onOverlayClick($event)"
-            [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationDone($event)">
-            <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: value, options: options}"></ng-container>
-            <div class="p-treeselect-header" *ngIf="filter">
-                <div class="p-treeselect-filter-container">
-                <input #filter type="text" autocomplete="off" class="p-treeselect-filter p-inputtext p-component" [attr.placeholder]="filterPlaceholder" (keydown.enter)="$event.preventDefault()" (input)="onFilterInput($event)" [value]="filterValue">
-                    <span class="p-treeselect-filter-icon pi pi-search"></span>
                 </div>
-                <button class="p-treeselect-close p-link" (click)="hide()">
-                    <span class="p-treeselect-filter-icon pi pi-times"></span>
-                </button>
+                <i *ngIf="checkValue() && !disabled && showClear" class="p-treeselect-clear-icon pi pi-times" (click)="clear($event)"></i>
             </div>
-            <div class="p-treeselect-items-wrapper" [ngStyle]="{'max-height': scrollHeight}">
-                <p-tree #tree [value]="options" [propagateSelectionDown]="propagateSelectionDown" [propagateSelectionUp]="propagateSelectionUp" [selectionMode]="selectionMode" (selectionChange)="onSelectionChange($event)" [selection]="value"
-                    [metaKeySelection]="metaKeySelection" (onNodeExpand)="nodeExpand($event)" (onNodeCollapse)="nodeCollapse($event)"
-                    (onNodeSelect)="onSelect($event)" [emptyMessage]="emptyMessage" (onNodeUnselect)="onUnselect($event)" [filterBy]="filterBy" [filterMode]="filterMode" [filterPlaceholder]="filterPlaceholder" [filterLocale]="filterLocale" [filterInputAutoFocus]="filterInputAutoFocus" [filteredNodes]="filteredNodes" [_templateMap]="templateMap">
-                        <ng-container *ngIf="emptyTemplate">
-                            <ng-template pTemplate="empty">
-                                <ng-container *ngTemplateOutlet="emptyTemplate;"></ng-container>
-                            </ng-template>
-                        </ng-container>
-                </p-tree>
+            <div class="p-treeselect-trigger">
+                <span class="p-treeselect-trigger-icon pi pi-chevron-down"></span>
             </div>
-            <ng-container *ngTemplateOutlet="footerTemplate; context: {$implicit: value, options: options}"></ng-container>
+            <p-overlay
+                #overlay
+                [(visible)]="overlayVisible"
+                [options]="overlayOptions"
+                [target]="'@parent'"
+                [appendTo]="appendTo"
+                [showTransitionOptions]="showTransitionOptions"
+                [hideTransitionOptions]="hideTransitionOptions"
+                (onAnimationStart)="onOverlayAnimationStart($event)"
+                (onShow)="onShow.emit($event)"
+                (onHide)="hide($event)"
+            >
+                <ng-template pTemplate="content">
+                    <div #panel class="p-treeselect-panel p-component" [ngStyle]="panelStyle" [class]="panelStyleClass">
+                        <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: value, options: options }"></ng-container>
+                        <div class="p-treeselect-header" *ngIf="filter">
+                            <div class="p-treeselect-filter-container">
+                                <input
+                                    #filter
+                                    type="text"
+                                    autocomplete="off"
+                                    class="p-treeselect-filter p-inputtext p-component"
+                                    [attr.placeholder]="filterPlaceholder"
+                                    (keydown.enter)="$event.preventDefault()"
+                                    (input)="onFilterInput($event)"
+                                    [value]="filterValue"
+                                />
+                                <span class="p-treeselect-filter-icon pi pi-search"></span>
+                            </div>
+                            <button class="p-treeselect-close p-link" (click)="hide()">
+                                <span class="p-treeselect-filter-icon pi pi-times"></span>
+                            </button>
+                        </div>
+                        <div class="p-treeselect-items-wrapper" [ngStyle]="{ 'max-height': scrollHeight }">
+                            <p-tree
+                                #tree
+                                [value]="options"
+                                [propagateSelectionDown]="propagateSelectionDown"
+                                [propagateSelectionUp]="propagateSelectionUp"
+                                [selectionMode]="selectionMode"
+                                (selectionChange)="onSelectionChange($event)"
+                                [selection]="value"
+                                [metaKeySelection]="metaKeySelection"
+                                (onNodeExpand)="nodeExpand($event)"
+                                (onNodeCollapse)="nodeCollapse($event)"
+                                (onNodeSelect)="onSelect($event)"
+                                [emptyMessage]="emptyMessage"
+                                (onNodeUnselect)="onUnselect($event)"
+                                [filterBy]="filterBy"
+                                [filterMode]="filterMode"
+                                [filterPlaceholder]="filterPlaceholder"
+                                [filterLocale]="filterLocale"
+                                [filteredNodes]="filteredNodes"
+                                [_templateMap]="templateMap"
+                            >
+                                <ng-container *ngIf="emptyTemplate">
+                                    <ng-template pTemplate="empty">
+                                        <ng-container *ngTemplateOutlet="emptyTemplate"></ng-container>
+                                    </ng-template>
+                                </ng-container>
+                            </p-tree>
+                        </div>
+                        <ng-container *ngTemplateOutlet="footerTemplate; context: { $implicit: value, options: options }"></ng-container>
+                    </div>
+                </ng-template>
+            </p-overlay>
         </div>
-    </div>
-    `, isInline: true, styles: [".p-treeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.p-treeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-treeselect-label-container{overflow:hidden;flex:1 1 auto;cursor:pointer}.p-treeselect-label{display:block;white-space:nowrap;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.p-treeselect-label-empty{overflow:hidden;visibility:hidden}.p-treeselect-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.p-treeselect .p-treeselect-panel{min-width:100%}.p-treeselect-panel{position:absolute;top:0;left:0}.p-treeselect-items-wrapper{overflow:auto}.p-treeselect-header{display:flex;align-items:center;justify-content:space-between}.p-treeselect-filter-container{position:relative;flex:1 1 auto}.p-treeselect-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-treeselect-filter-container .p-inputtext{width:100%}.p-treeselect-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative;margin-left:auto}.p-treeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem}.p-fluid .p-treeselect{display:flex}.p-treeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-treeselect-clearable{position:relative}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }], animations: [
-        trigger('overlayAnimation', [
-            transition(':enter', [
-                style({ opacity: 0, transform: 'scaleY(0.8)' }),
-                animate('{{showTransitionParams}}')
-            ]),
-            transition(':leave', [
-                animate('{{hideTransitionParams}}', style({ opacity: 0 }))
-            ])
-        ])
-    ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, styles: [".p-treeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.p-treeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-treeselect-label-container{overflow:hidden;flex:1 1 auto;cursor:pointer}.p-treeselect-label{display:block;white-space:nowrap;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.p-treeselect-label-empty{overflow:hidden;visibility:hidden}.p-treeselect-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.p-treeselect-items-wrapper{overflow:auto}.p-treeselect-header{display:flex;align-items:center;justify-content:space-between}.p-treeselect-filter-container{position:relative;flex:1 1 auto}.p-treeselect-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-treeselect-filter-container .p-inputtext{width:100%}.p-treeselect-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative;margin-left:auto}.p-treeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem}.p-fluid .p-treeselect{display:flex}.p-treeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-treeselect-clearable{position:relative}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.Overlay, selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TreeSelect, decorators: [{
             type: Component,
             args: [{ selector: 'p-treeSelect', template: `
-    <div #container [ngClass]="containerClass()" (click)="onClick($event)">
-        <div class="p-hidden-accessible">
-            <input #focusInput type="text" role="listbox" [attr.id]="inputId" readonly [disabled]="disabled" (focus)="onFocus()" (blur)="onBlur()" (keydown)="onKeyDown($event)" [attr.tabindex]="tabindex"
-            aria-haspopup="true" [attr.aria-expanded]="overlayVisible" [attr.aria-labelledby]="ariaLabelledBy"/>
-        </div>
-        <div class="p-treeselect-label-container">
-            <div [ngClass]="labelClass()">
-                <ng-container *ngIf="valueTemplate;else defaultValueTemplate">
-                        <ng-container *ngTemplateOutlet="valueTemplate; context: {$implicit: value, placeholder: placeholder}"></ng-container>
-                </ng-container>
-                <ng-template #defaultValueTemplate>
-                    <ng-container *ngIf="display === 'comma';else chipsValueTemplate">
-                        {{label || 'empty'}}
+        <div #container [ngClass]="containerClass()" [class]="containerStyleClass" [ngStyle]="containerStyle" (click)="onClick($event)">
+            <div class="p-hidden-accessible">
+                <input
+                    #focusInput
+                    type="text"
+                    role="listbox"
+                    [attr.id]="inputId"
+                    readonly
+                    [disabled]="disabled"
+                    (focus)="onFocus()"
+                    (blur)="onBlur()"
+                    (keydown)="onKeyDown($event)"
+                    [attr.tabindex]="tabindex"
+                    aria-haspopup="true"
+                    [attr.aria-expanded]="overlayVisible"
+                    [attr.aria-labelledby]="ariaLabelledBy"
+                />
+            </div>
+            <div class="p-treeselect-label-container">
+                <div [ngClass]="labelClass()" [class]="labelStyleClass" [ngStyle]="labelStyle">
+                    <ng-container *ngIf="valueTemplate; else defaultValueTemplate">
+                        <ng-container *ngTemplateOutlet="valueTemplate; context: { $implicit: value, placeholder: placeholder }"></ng-container>
                     </ng-container>
-                    <ng-template #chipsValueTemplate>
-                        <div *ngFor="let node of value" class="p-treeselect-token">
-                            <span class="p-treeselect-token-label">{{node.label}}</span>
-                        </div>
-                        <ng-container *ngIf="emptyValue">{{placeholder || 'empty'}}</ng-container>
+                    <ng-template #defaultValueTemplate>
+                        <ng-container *ngIf="display === 'comma'; else chipsValueTemplate">
+                            {{ label || 'empty' }}
+                        </ng-container>
+                        <ng-template #chipsValueTemplate>
+                            <div *ngFor="let node of value" class="p-treeselect-token">
+                                <span class="p-treeselect-token-label">{{ node.label }}</span>
+                            </div>
+                            <ng-container *ngIf="emptyValue">{{ placeholder || 'empty' }}</ng-container>
+                        </ng-template>
                     </ng-template>
-                </ng-template>
-            </div>
-            <i *ngIf="checkValue() && !disabled && showClear" class="p-treeselect-clear-icon pi pi-times" (click)="clear($event)"></i>
-
-        </div>
-        <div class="p-treeselect-trigger">
-            <span class="p-treeselect-trigger-icon pi pi-chevron-down"></span>
-        </div>
-        <div #overlayRef class="p-treeselect-panel p-component" *ngIf="overlayVisible" (click)="onOverlayClick($event)"
-            [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationDone($event)">
-            <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: value, options: options}"></ng-container>
-            <div class="p-treeselect-header" *ngIf="filter">
-                <div class="p-treeselect-filter-container">
-                <input #filter type="text" autocomplete="off" class="p-treeselect-filter p-inputtext p-component" [attr.placeholder]="filterPlaceholder" (keydown.enter)="$event.preventDefault()" (input)="onFilterInput($event)" [value]="filterValue">
-                    <span class="p-treeselect-filter-icon pi pi-search"></span>
                 </div>
-                <button class="p-treeselect-close p-link" (click)="hide()">
-                    <span class="p-treeselect-filter-icon pi pi-times"></span>
-                </button>
+                <i *ngIf="checkValue() && !disabled && showClear" class="p-treeselect-clear-icon pi pi-times" (click)="clear($event)"></i>
             </div>
-            <div class="p-treeselect-items-wrapper" [ngStyle]="{'max-height': scrollHeight}">
-                <p-tree #tree [value]="options" [propagateSelectionDown]="propagateSelectionDown" [propagateSelectionUp]="propagateSelectionUp" [selectionMode]="selectionMode" (selectionChange)="onSelectionChange($event)" [selection]="value"
-                    [metaKeySelection]="metaKeySelection" (onNodeExpand)="nodeExpand($event)" (onNodeCollapse)="nodeCollapse($event)"
-                    (onNodeSelect)="onSelect($event)" [emptyMessage]="emptyMessage" (onNodeUnselect)="onUnselect($event)" [filterBy]="filterBy" [filterMode]="filterMode" [filterPlaceholder]="filterPlaceholder" [filterLocale]="filterLocale" [filterInputAutoFocus]="filterInputAutoFocus" [filteredNodes]="filteredNodes" [_templateMap]="templateMap">
-                        <ng-container *ngIf="emptyTemplate">
-                            <ng-template pTemplate="empty">
-                                <ng-container *ngTemplateOutlet="emptyTemplate;"></ng-container>
-                            </ng-template>
-                        </ng-container>
-                </p-tree>
+            <div class="p-treeselect-trigger">
+                <span class="p-treeselect-trigger-icon pi pi-chevron-down"></span>
             </div>
-            <ng-container *ngTemplateOutlet="footerTemplate; context: {$implicit: value, options: options}"></ng-container>
+            <p-overlay
+                #overlay
+                [(visible)]="overlayVisible"
+                [options]="overlayOptions"
+                [target]="'@parent'"
+                [appendTo]="appendTo"
+                [showTransitionOptions]="showTransitionOptions"
+                [hideTransitionOptions]="hideTransitionOptions"
+                (onAnimationStart)="onOverlayAnimationStart($event)"
+                (onShow)="onShow.emit($event)"
+                (onHide)="hide($event)"
+            >
+                <ng-template pTemplate="content">
+                    <div #panel class="p-treeselect-panel p-component" [ngStyle]="panelStyle" [class]="panelStyleClass">
+                        <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: value, options: options }"></ng-container>
+                        <div class="p-treeselect-header" *ngIf="filter">
+                            <div class="p-treeselect-filter-container">
+                                <input
+                                    #filter
+                                    type="text"
+                                    autocomplete="off"
+                                    class="p-treeselect-filter p-inputtext p-component"
+                                    [attr.placeholder]="filterPlaceholder"
+                                    (keydown.enter)="$event.preventDefault()"
+                                    (input)="onFilterInput($event)"
+                                    [value]="filterValue"
+                                />
+                                <span class="p-treeselect-filter-icon pi pi-search"></span>
+                            </div>
+                            <button class="p-treeselect-close p-link" (click)="hide()">
+                                <span class="p-treeselect-filter-icon pi pi-times"></span>
+                            </button>
+                        </div>
+                        <div class="p-treeselect-items-wrapper" [ngStyle]="{ 'max-height': scrollHeight }">
+                            <p-tree
+                                #tree
+                                [value]="options"
+                                [propagateSelectionDown]="propagateSelectionDown"
+                                [propagateSelectionUp]="propagateSelectionUp"
+                                [selectionMode]="selectionMode"
+                                (selectionChange)="onSelectionChange($event)"
+                                [selection]="value"
+                                [metaKeySelection]="metaKeySelection"
+                                (onNodeExpand)="nodeExpand($event)"
+                                (onNodeCollapse)="nodeCollapse($event)"
+                                (onNodeSelect)="onSelect($event)"
+                                [emptyMessage]="emptyMessage"
+                                (onNodeUnselect)="onUnselect($event)"
+                                [filterBy]="filterBy"
+                                [filterMode]="filterMode"
+                                [filterPlaceholder]="filterPlaceholder"
+                                [filterLocale]="filterLocale"
+                                [filteredNodes]="filteredNodes"
+                                [_templateMap]="templateMap"
+                            >
+                                <ng-container *ngIf="emptyTemplate">
+                                    <ng-template pTemplate="empty">
+                                        <ng-container *ngTemplateOutlet="emptyTemplate"></ng-container>
+                                    </ng-template>
+                                </ng-container>
+                            </p-tree>
+                        </div>
+                        <ng-container *ngTemplateOutlet="footerTemplate; context: { $implicit: value, options: options }"></ng-container>
+                    </div>
+                </ng-template>
+            </p-overlay>
         </div>
-    </div>
-    `, animations: [
-                        trigger('overlayAnimation', [
-                            transition(':enter', [
-                                style({ opacity: 0, transform: 'scaleY(0.8)' }),
-                                animate('{{showTransitionParams}}')
-                            ]),
-                            transition(':leave', [
-                                animate('{{hideTransitionParams}}', style({ opacity: 0 }))
-                            ])
-                        ])
-                    ], host: {
-                        'class': 'p-element p-inputwrapper',
+    `, host: {
+                        class: 'p-element p-inputwrapper',
                         '[class.p-inputwrapper-filled]': '!emptyValue',
                         '[class.p-inputwrapper-focus]': 'focused || overlayVisible',
                         '[class.p-treeselect-clearable]': 'showClear && !disabled'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [TREESELECT_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, styles: [".p-treeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.p-treeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-treeselect-label-container{overflow:hidden;flex:1 1 auto;cursor:pointer}.p-treeselect-label{display:block;white-space:nowrap;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.p-treeselect-label-empty{overflow:hidden;visibility:hidden}.p-treeselect-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.p-treeselect .p-treeselect-panel{min-width:100%}.p-treeselect-panel{position:absolute;top:0;left:0}.p-treeselect-items-wrapper{overflow:auto}.p-treeselect-header{display:flex;align-items:center;justify-content:space-between}.p-treeselect-filter-container{position:relative;flex:1 1 auto}.p-treeselect-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-treeselect-filter-container .p-inputtext{width:100%}.p-treeselect-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative;margin-left:auto}.p-treeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem}.p-fluid .p-treeselect{display:flex}.p-treeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-treeselect-clearable{position:relative}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [TREESELECT_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, styles: [".p-treeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.p-treeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-treeselect-label-container{overflow:hidden;flex:1 1 auto;cursor:pointer}.p-treeselect-label{display:block;white-space:nowrap;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.p-treeselect-label-empty{overflow:hidden;visibility:hidden}.p-treeselect-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.p-treeselect-items-wrapper{overflow:auto}.p-treeselect-header{display:flex;align-items:center;justify-content:space-between}.p-treeselect-filter-container{position:relative;flex:1 1 auto}.p-treeselect-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-treeselect-filter-container .p-inputtext{width:100%}.p-treeselect-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative;margin-left:auto}.p-treeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem}.p-fluid .p-treeselect{display:flex}.p-treeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-treeselect-clearable{position:relative}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.PrimeNGConfig }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.OverlayService }]; }, propDecorators: { type: [{
                 type: Input
             }], inputId: [{
@@ -612,6 +611,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Input
             }], panelClass: [{
                 type: Input
+            }], panelStyle: [{
+                type: Input
+            }], panelStyleClass: [{
+                type: Input
+            }], containerStyle: [{
+                type: Input
+            }], containerStyleClass: [{
+                type: Input
+            }], labelStyle: [{
+                type: Input
+            }], labelStyleClass: [{
+                type: Input
+            }], overlayOptions: [{
+                type: Input
             }], emptyMessage: [{
                 type: Input
             }], appendTo: [{
@@ -638,10 +651,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Input
             }], options: [{
                 type: Input
-            }], showTransitionOptions: [{
-                type: Input
-            }], hideTransitionOptions: [{
-                type: Input
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
@@ -657,6 +666,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
             }], treeViewChild: [{
                 type: ViewChild,
                 args: ['tree']
+            }], panelEl: [{
+                type: ViewChild,
+                args: ['panel']
+            }], overlayViewChild: [{
+                type: ViewChild,
+                args: ['overlay']
             }], onNodeExpand: [{
                 type: Output
             }], onNodeCollapse: [{
@@ -673,17 +688,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Output
             }], onNodeSelect: [{
                 type: Output
+            }], showTransitionOptions: [{
+                type: Input
+            }], hideTransitionOptions: [{
+                type: Input
             }] } });
 class TreeSelectModule {
 }
 TreeSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TreeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TreeSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.7", ngImport: i0, type: TreeSelectModule, declarations: [TreeSelect], imports: [CommonModule, RippleModule, SharedModule, TreeModule], exports: [TreeSelect, SharedModule, TreeModule] });
-TreeSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TreeSelectModule, imports: [CommonModule, RippleModule, SharedModule, TreeModule, SharedModule, TreeModule] });
+TreeSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.7", ngImport: i0, type: TreeSelectModule, declarations: [TreeSelect], imports: [CommonModule, OverlayModule, RippleModule, SharedModule, TreeModule], exports: [TreeSelect, OverlayModule, SharedModule, TreeModule] });
+TreeSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TreeSelectModule, imports: [CommonModule, OverlayModule, RippleModule, SharedModule, TreeModule, OverlayModule, SharedModule, TreeModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: TreeSelectModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, RippleModule, SharedModule, TreeModule],
-                    exports: [TreeSelect, SharedModule, TreeModule],
+                    imports: [CommonModule, OverlayModule, RippleModule, SharedModule, TreeModule],
+                    exports: [TreeSelect, OverlayModule, SharedModule, TreeModule],
                     declarations: [TreeSelect]
                 }]
         }] });