primeng 19.1.2 → 20.0.0-beta.1

package/fesm2022/primeng-treeselect.mjs

@@ -1,218 +1,67 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, EventEmitter, inject, booleanAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, forwardRef, input, booleanAttribute, EventEmitter, computed, inject, HostListener, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { uuid, isNotEmpty, getFocusableElements, hasClass, getFirstFocusableElement, focus, getLastFocusableElement } from '@primeuix/utils';
 import { SharedModule, PrimeTemplate } from 'primeng/api';
 import { AutoFocus } from 'primeng/autofocus';
-import { BaseComponent } from 'primeng/basecomponent';
+import { BaseEditableHolder } from 'primeng/baseeditableholder';
 import { Chip } from 'primeng/chip';
+import { Fluid } from 'primeng/fluid';
 import { TimesIcon, ChevronDownIcon } from 'primeng/icons';
 import { Overlay } from 'primeng/overlay';
 import { Tree } from 'primeng/tree';
+import { css, dt } from '@primeuix/styled';
+import { style } from '@primeuix/styles/treeselect';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-treeselect {
-    display: inline-flex;
-    cursor: pointer;
-    position: relative;
-    user-select: none;
-    background: ${dt('treeselect.background')};
-    border: 1px solid ${dt('treeselect.border.color')};
-    transition: background ${dt('treeselect.transition.duration')}, color ${dt('treeselect.transition.duration')}, border-color ${dt('treeselect.transition.duration')}, outline-color ${dt('treeselect.transition.duration')}, box-shadow ${dt('treeselect.transition.duration')};
-    border-radius: ${dt('treeselect.border.radius')};
-    outline-color: transparent;
-    box-shadow: ${dt('treeselect.shadow')};
-}
-
-p-treeSelect.ng-invalid.ng-dirty .p-treeselect,
-p-tree-select.ng-invalid.ng-dirty .p-treeselect,
-p-treeselect.ng-invalid.ng-dirty .p-treeselect {
-    border-color: ${dt('treeselect.invalid.border.color')};
-}
-
-p-treeSelect.ng-invalid.ng-dirty .p-treeselect.p-focus,
-p-tree-select.ng-invalid.ng-dirty .p-treeselect.p-focus,
-p-treeselect.ng-invalid.ng-dirty .p-treeselect.p-focus {
-    border-color: ${dt('treeselect.focus.border.color')};
-}
-
-.p-treeselect:not(.p-disabled):hover {
-    border-color: ${dt('treeselect.hover.border.color')};
-}
-
-.p-treeselect:not(.p-disabled).p-focus {
-    border-color: ${dt('treeselect.focus.border.color')};
-    box-shadow: ${dt('treeselect.focus.ring.shadow')};
-    outline: ${dt('treeselect.focus.ring.width')} ${dt('treeselect.focus.ring.style')} ${dt('treeselect.focus.ring.color')};
-    outline-offset: ${dt('treeselect.focus.ring.offset')};
-}
-
-.p-treeselect.p-variant-filled {
-    background: ${dt('treeselect.filled.background')};
-}
-
-.p-treeselect.p-variant-filled:not(.p-disabled):hover {
-    background: ${dt('treeselect.filled.hover.background')};
-}
-
-.p-treeselect.p-variant-filled.p-focus {
-    background: ${dt('treeselect.filled.focus.background')};
-}
-
-.p-treeselect.p-disabled {
-    opacity: 1;
-    background: ${dt('treeselect.disabled.background')};
-}
-
-.p-treeselect-dropdown {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    background: transparent;
-    color: ${dt('treeselect.dropdown.color')};
-    width: ${dt('treeselect.dropdown.width')};
-    border-start-end-radius: ${dt('border.radius.md')};
-    border-end-end-radius: ${dt('border.radius.md')};
-}
+const theme = css `
+    ${style}
 
-.p-treeselect-label-container {
-    overflow: hidden;
-    flex: 1 1 auto;
-    cursor: pointer;
-}
-
-.p-treeselect-label {
-    display: flex;
-    align-items-center;
-    gap: calc(${dt('treeselect.padding.y')} / 2);
-    white-space: nowrap;
-    cursor: pointer;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding: ${dt('treeselect.padding.y')} ${dt('treeselect.padding.x')};
-    color: ${dt('treeselect.color')};
-}
-
-.p-treeselect-label.p-placeholder {
-    color: ${dt('treeselect.placeholder.color')};
-}
-
-p-treeselect.ng-invalid.ng-dirty .p-treeselect-label.p-placeholder {
-    color: ${dt('treeselect.invalid.placeholder.color')};
-}
-
-.p-treeselect.p-disabled .p-treeselect-label {
-    color: ${dt('treeselect.disabled.color')};
-}
-
-.p-treeselect-label-empty {
-    overflow: hidden;
-    visibility: hidden;
-}
-
-.p-treeselect .p-treeselect-overlay {
-    min-width: 100%;
-}
-
-.p-treeselect-overlay {
-    background: ${dt('treeselect.overlay.background')};
-    color: ${dt('treeselect.overlay.color')};
-    border: 1px solid ${dt('treeselect.overlay.border.color')};
-    border-radius: ${dt('treeselect.overlay.border.radius')};
-    box-shadow: ${dt('treeselect.overlay.shadow')};
-    overflow: hidden;
-}
-
-
-.p-treeselect-tree-container {
-    overflow: auto;
-}
+    /* For PrimeNG */
 
-.p-treeselect-empty-message {
-    padding: ${dt('treeselect.empty.message.padding')};
-    background: transparent;
-}
-
-.p-treeselect-fluid {
-    display: flex;
-}
-
-.p-treeselect-overlay .p-tree {
-    padding: ${dt('treeselect.tree.padding')};
-}
-
-.p-treeselect-label .p-chip {
-    padding-top: calc(${dt('treeselect.padding.y')} / 2);
-    padding-bottom: calc(${dt('treeselect.padding.y')} / 2);
-    border-radius: ${dt('treeselect.chip.border.radius')};
-}
-
-.p-treeselect-label:has(.p-chip) {
-    padding: calc(${dt('treeselect.padding.y')} / 2) calc(${dt('treeselect.padding.x')} / 2);
-}
-
-.p-treeselect-sm .p-treeselect-label {
-    font-size: ${dt('treeselect.sm.font.size')};
-    padding-block: ${dt('treeselect.sm.padding.y')};
-    padding-inline: ${dt('treeselect.sm.padding.x')};
-}
-
-.p-treeselect-sm .p-treeselect-dropdown .p-icon {
-    font-size: ${dt('treeselect.sm.font.size')};
-    width: ${dt('treeselect.sm.font.size')};
-    height: ${dt('treeselect.sm.font.size')};
-}
-
-.p-treeselect-lg .p-treeselect-label {
-    font-size: ${dt('treeselect.lg.font.size')};
-    padding-block: ${dt('treeselect.lg.padding.y')};
-    padding-inline: ${dt('treeselect.lg.padding.x')};
-}
+    .p-treeselect.ng-invalid.ng-dirty {
+        border-color: ${dt('treeselect.invalid.border.color')};
+    }
 
-.p-treeselect-lg .p-treeselect-dropdown .p-icon {
-    font-size: ${dt('treeselect.lg.font.size')};
-    width: ${dt('treeselect.lg.font.size')};
-    height: ${dt('treeselect.lg.font.size')};
-}
+    p-treeselect.ng-invalid.ng-dirty.p-focus {
+        border-color: ${dt('treeselect.focus.border.color')};
+    }
 
-.p-treeselect-clear-icon {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    background: transparent;
-    color: ${dt('treeselect.clear.icon.color')};
-}`;
+    p-treeselect.ng-invalid.ng-dirty .p-treeselect-label.p-placeholder {
+        color: ${dt('treeselect.invalid.placeholder.color')};
+    }
+`;
 const inlineStyles = {
-    root: ({ instance }) => ({ position: instance.appendTo === 'self' ? 'relative' : undefined })
+    root: ({ instance }) => ({ position: instance.$appendTo() === 'self' ? 'relative' : undefined, ...instance.containerStyle })
 };
 const classes = {
-    root: ({ instance }) => ({
-        'p-treeselect p-component p-inputwrapper': true,
-        'p-treeselect-display-chip': instance.display === 'chip',
-        'p-disabled': instance.disabled,
-        'p-invalid': instance.invalid,
-        'p-focus': instance.focused,
-        'p-variant-filled': instance.variant === 'filled' || instance.config.inputVariant() === 'filled' || instance.config.inputStyle() === 'filled',
-        'p-inputwrapper-filled': !instance.emptyValue,
-        'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
-        'p-treeselect-open': instance.overlayVisible,
-        'p-treeselect-clearable': instance.showClear,
-        'p-treeselect-fluid': instance.hasFluid,
-        'p-treeselect-sm p-inputfield-sm': instance.size === 'small',
-        'p-treeselect-lg p-inputfield-lg': instance.size === 'large'
-    }),
+    root: ({ instance }) => [
+        'p-treeselect p-component p-inputwrapper',
+        {
+            'p-treeselect-display-chip': instance.display === 'chip',
+            'p-disabled': instance.disabled(),
+            'p-invalid': instance.invalid(),
+            'p-focus': instance.focused,
+            'p-variant-filled': instance.$variant() === 'filled',
+            'p-inputwrapper-filled': !instance.emptyValue,
+            'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
+            'p-treeselect-open': instance.overlayVisible,
+            'p-treeselect-clearable': instance.showClear,
+            'p-treeselect-fluid': instance.hasFluid,
+            'p-treeselect-sm p-inputfield-sm': instance.size() === 'small',
+            'p-treeselect-lg p-inputfield-lg': instance.size() === 'large'
+        }
+    ],
     labelContainer: 'p-treeselect-label-container',
-    label: ({ instance }) => ({
-        'p-treeselect-label': true,
-        'p-placeholder': instance.label === instance.placeholder,
-        'p-treeselect-label-empty': !instance.placeholder && instance.emptyValue
-    }),
+    label: ({ instance }) => [
+        'p-treeselect-label',
+        {
+            'p-placeholder': instance.label === instance.placeholder,
+            'p-treeselect-label-empty': !instance.placeholder && instance.emptyValue
+        }
+    ],
     chip: 'p-treeselect-chip-item',
     pcChip: 'p-treeselect-chip',
     dropdown: 'p-treeselect-dropdown',
@@ -226,10 +75,10 @@ class TreeSelectStyle extends BaseStyle {
     theme = theme;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TreeSelectStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TreeSelectStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeSelectStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeSelectStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TreeSelectStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeSelectStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -294,7 +143,7 @@ const TREESELECT_VALUE_ACCESSOR = {
  * TreeSelect is a form component to choose from hierarchical data.
  * @group Components
  */
-class TreeSelect extends BaseComponent {
+class TreeSelect extends BaseEditableHolder {
     /**
      * Identifier of the underlying input element.
      * @group Props
@@ -305,21 +154,11 @@ class TreeSelect extends BaseComponent {
      * @group Props
      */
     scrollHeight = '400px';
-    /**
-     * When present, it specifies that the component should be disabled.
-     * @group Props
-     */
-    disabled;
     /**
      * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
      * @group Props
      */
     metaKeySelection = false;
-    /**
-     * Specifies the input variant of the component.
-     * @group Props
-     */
-    variant;
     /**
      * Defines how the selected items are displayed.
      * @group Props
@@ -360,11 +199,6 @@ class TreeSelect extends BaseComponent {
      * @group Props
      */
     panelStyle;
-    /**
-     * Spans 100% width of the container when enabled.
-     * @group Props
-     */
-    fluid = false;
     /**
      * Style class of the panel element.
      * @group Props
@@ -372,18 +206,13 @@ class TreeSelect extends BaseComponent {
     panelStyleClass;
     /**
      * Inline style of the container element.
+     * @deprecated since v20.0.0, use `style` instead.
      * @group Props
      */
-    set containerStyle(val) {
-        const _rootStyle = this._componentStyle.inlineStyles.root({ instance: this });
-        this._containerStyle = { ..._rootStyle, ...val };
-    }
-    get containerStyle() {
-        return this._containerStyle;
-    }
-    _containerStyle;
+    containerStyle;
     /**
      * Style class of the container element.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     containerStyleClass;
@@ -407,11 +236,6 @@ class TreeSelect extends BaseComponent {
      * @group Props
      */
     emptyMessage = '';
-    /**
-     * A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.
-     * @group Props
-     */
-    appendTo;
     /**
      * When specified, displays an input field to filter the items.
      * @group Props
@@ -472,11 +296,6 @@ class TreeSelect extends BaseComponent {
      * @group Props
      */
     virtualScrollItemSize;
-    /**
-     * Defines the size of the component.
-     * @group Props
-     */
-    size;
     /**
      * Whether to use the scroller feature. The properties of scroller component can be used like an object in it.
      * @group Props
@@ -500,34 +319,34 @@ class TreeSelect extends BaseComponent {
         this.updateTreeState();
     }
     /**
-     * Transition options of the show animation.
+     * Displays a loader to indicate data load is in progress.
      * @group Props
-     * @deprecated since v14.2.0 use overlayOptions property instead.
      */
-    get showTransitionOptions() {
-        return this._showTransitionOptions;
-    }
-    set showTransitionOptions(val) {
-        this._showTransitionOptions = val;
-        console.log('The showTransitionOptions property is deprecated since v14.2.0, use overlayOptions property instead.');
-    }
+    loading;
     /**
-     * Transition options of the hide animation.
+     * Specifies the size of the component.
+     * @defaultValue undefined
      * @group Props
-     * @deprecated since v14.2.0 use overlayOptions property instead.
      */
-    get hideTransitionOptions() {
-        return this._hideTransitionOptions;
-    }
-    set hideTransitionOptions(val) {
-        this._hideTransitionOptions = val;
-        console.log('The hideTransitionOptions property is deprecated since v14.2.0, use overlayOptions property instead.');
-    }
+    size = input();
     /**
-     * Displays a loader to indicate data load is in progress.
+     * Specifies the input variant of the component.
+     * @defaultValue undefined
      * @group Props
      */
-    loading;
+    variant = input();
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue undefined
+     * @group Props
+     */
+    fluid = input(undefined, { transform: booleanAttribute });
+    /**
+     * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
+     * @defaultValue 'self'
+     * @group Props
+     */
+    appendTo = input(undefined);
     /**
      * Callback to invoke when a node is expanded.
      * @param {TreeSelectNodeExpandEvent} event - Custom node expand event.
@@ -586,9 +405,7 @@ class TreeSelect extends BaseComponent {
      * @group Emits
      */
     onNodeSelect = new EventEmitter();
-    _showTransitionOptions;
-    _hideTransitionOptions;
-    containerEl;
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo());
     focusInput;
     filterViewChild;
     treeViewChild;
@@ -596,6 +413,11 @@ class TreeSelect extends BaseComponent {
     overlayViewChild;
     firstHiddenFocusableElementOnOverlay;
     lastHiddenFocusableElementOnOverlay;
+    $variant = computed(() => this.variant() || this.config.inputStyle() || this.config.inputVariant());
+    pcFluid = inject(Fluid, { optional: true, host: true, skipSelf: true });
+    get hasFluid() {
+        return this.fluid() ?? !!this.pcFluid;
+    }
     filteredNodes;
     filterValue = null;
     serializedValue;
@@ -674,7 +496,6 @@ class TreeSelect extends BaseComponent {
     _dropdownIconTemplate;
     focused;
     overlayVisible;
-    selfChange;
     value;
     expandedNodes = [];
     _options;
@@ -683,6 +504,9 @@ class TreeSelect extends BaseComponent {
     onModelTouched = () => { };
     listId = '';
     _componentStyle = inject(TreeSelectStyle);
+    onHostClick(event) {
+        this.onClick(event);
+    }
     ngOnInit() {
         super.ngOnInit();
         this.listId = uuid('pn_id_') + '_list';
@@ -730,7 +554,7 @@ class TreeSelect extends BaseComponent {
                 case 'itemloadingicon':
                     this._itemLoadingIconTemplate = item.template;
                     break;
-                default: //TODO: @deprecated Used "value" template instead
+                default: //TODO: @deprecated Use "value" template instead
                     if (item.name)
                         this.templateMap[item.name] = item.template;
                     else
@@ -756,7 +580,7 @@ class TreeSelect extends BaseComponent {
         }
     }
     onOverlayBeforeHide(event) {
-        let focusableElements = getFocusableElements(this.containerEl.nativeElement);
+        let focusableElements = getFocusableElements(this.el.nativeElement);
         if (focusableElements && focusableElements.length > 0) {
             focusableElements[0].focus();
         }
@@ -767,7 +591,7 @@ class TreeSelect extends BaseComponent {
         this.cd.markForCheck();
     }
     onClick(event) {
-        if (this.disabled) {
+        if (this.disabled()) {
             return;
         }
         if (!this.overlayViewChild?.el?.nativeElement?.contains(event.target) && !hasClass(event.target, 'p-treeselect-close') && !hasClass(event.target, 'p-checkbox-box') && !hasClass(event.target, 'p-checkbox-icon')) {
@@ -997,7 +821,7 @@ class TreeSelect extends BaseComponent {
         this.onNodeUnselect.emit(event);
     }
     onInputFocus(event) {
-        if (this.disabled) {
+        if (this.disabled()) {
             // For ScreenReaders
             return;
         }
@@ -1020,23 +844,6 @@ class TreeSelect extends BaseComponent {
     registerOnTouched(fn) {
         this.onModelTouched = fn;
     }
-    setDisabledState(val) {
-        setTimeout(() => {
-            this.disabled = val;
-            this.cd.markForCheck();
-        });
-    }
-    get containerClass() {
-        return this._componentStyle.classes.root({ instance: this });
-    }
-    get hasFluid() {
-        const nativeElement = this.el.nativeElement;
-        const fluidComponent = nativeElement.closest('p-fluid');
-        return this.fluid || !!fluidComponent;
-    }
-    get labelClass() {
-        return this._componentStyle.classes.label({ instance: this });
-    }
     get emptyValue() {
         return !this.value || Object.keys(this.value).length === 0;
     }
@@ -1047,304 +854,297 @@ class TreeSelect extends BaseComponent {
         let value = this.value || [];
         return value.length ? value.map((node) => node.label).join(', ') : this.selectionMode === 'single' && this.value ? value.label : this.placeholder;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TreeSelect, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.8", type: TreeSelect, isStandalone: true, selector: "p-treeSelect, p-treeselect, p-tree-select", inputs: { inputId: "inputId", scrollHeight: "scrollHeight", disabled: ["disabled", "disabled", booleanAttribute], metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], variant: "variant", display: "display", selectionMode: "selectionMode", tabindex: "tabindex", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", placeholder: "placeholder", panelClass: "panelClass", panelStyle: "panelStyle", fluid: ["fluid", "fluid", booleanAttribute], panelStyleClass: "panelStyleClass", containerStyle: "containerStyle", containerStyleClass: "containerStyleClass", labelStyle: "labelStyle", labelStyleClass: "labelStyleClass", overlayOptions: "overlayOptions", emptyMessage: "emptyMessage", appendTo: "appendTo", filter: ["filter", "filter", booleanAttribute], filterBy: "filterBy", filterMode: "filterMode", filterPlaceholder: "filterPlaceholder", filterLocale: "filterLocale", filterInputAutoFocus: ["filterInputAutoFocus", "filterInputAutoFocus", booleanAttribute], propagateSelectionDown: ["propagateSelectionDown", "propagateSelectionDown", booleanAttribute], propagateSelectionUp: ["propagateSelectionUp", "propagateSelectionUp", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], resetFilterOnHide: ["resetFilterOnHide", "resetFilterOnHide", booleanAttribute], virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize", size: "size", virtualScrollOptions: "virtualScrollOptions", autofocus: ["autofocus", "autofocus", booleanAttribute], options: "options", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", loading: ["loading", "loading", booleanAttribute] }, outputs: { onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", onShow: "onShow", onHide: "onHide", onClear: "onClear", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onNodeUnselect: "onNodeUnselect", onNodeSelect: "onNodeSelect" }, providers: [TREESELECT_VALUE_ACCESSOR, TreeSelectStyle], queries: [{ propertyName: "valueTemplate", first: true, predicate: ["value"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"] }, { propertyName: "triggerIconTemplate", first: true, predicate: ["triggericon"] }, { propertyName: "dropdownIconTemplate", first: true, predicate: ["dropdownicon"] }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "closeIconTemplate", first: true, predicate: ["closeicon"] }, { propertyName: "itemTogglerIconTemplate", first: true, predicate: ["itemtogglericon"] }, { propertyName: "itemCheckboxIconTemplate", first: true, predicate: ["itemcheckboxicon"] }, { propertyName: "itemLoadingIconTemplate", first: true, predicate: ["itemloadingicon"] }, { 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 }, { propertyName: "firstHiddenFocusableElementOnOverlay", first: true, predicate: ["firstHiddenFocusableEl"], descendants: true }, { propertyName: "lastHiddenFocusableElementOnOverlay", first: true, predicate: ["lastHiddenFocusableEl"], descendants: true }], usesInheritance: 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="combobox"
-                    [attr.id]="inputId"
-                    readonly
-                    [disabled]="disabled"
-                    (focus)="onInputFocus($event)"
-                    (blur)="onInputBlur($event)"
-                    (keydown)="onKeyDown($event)"
-                    [attr.tabindex]="!disabled ? tabindex : -1"
-                    [attr.aria-controls]="overlayVisible ? listId : null"
-                    [attr.aria-haspopup]="'tree'"
-                    [attr.aria-expanded]="overlayVisible ?? false"
-                    [attr.aria-labelledby]="ariaLabelledBy"
-                    [attr.aria-label]="ariaLabel || (label === 'p-emptylabel' ? undefined : label)"
-                    [pAutoFocus]="autofocus"
-                />
-            </div>
-            <div class="p-treeselect-label-container">
-                <div [ngClass]="labelClass" [class]="labelStyleClass" [ngStyle]="labelStyle">
-                    <ng-container *ngIf="valueTemplate || _valueTemplate; else defaultValueTemplate">
-                        <ng-container *ngTemplateOutlet="valueTemplate || _valueTemplate; context: { $implicit: value, placeholder: placeholder }"></ng-container>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeSelect, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: TreeSelect, isStandalone: true, selector: "p-treeSelect, p-treeselect, p-tree-select", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, metaKeySelection: { classPropertyName: "metaKeySelection", publicName: "metaKeySelection", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, display: { classPropertyName: "display", publicName: "display", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: false, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: false, isRequired: false, transformFunction: null }, panelStyleClass: { classPropertyName: "panelStyleClass", publicName: "panelStyleClass", isSignal: false, isRequired: false, transformFunction: null }, containerStyle: { classPropertyName: "containerStyle", publicName: "containerStyle", isSignal: false, isRequired: false, transformFunction: null }, containerStyleClass: { classPropertyName: "containerStyleClass", publicName: "containerStyleClass", isSignal: false, isRequired: false, transformFunction: null }, labelStyle: { classPropertyName: "labelStyle", publicName: "labelStyle", isSignal: false, isRequired: false, transformFunction: null }, labelStyleClass: { classPropertyName: "labelStyleClass", publicName: "labelStyleClass", isSignal: false, isRequired: false, transformFunction: null }, overlayOptions: { classPropertyName: "overlayOptions", publicName: "overlayOptions", isSignal: false, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: false, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: false, isRequired: false, transformFunction: null }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: false, isRequired: false, transformFunction: null }, filterInputAutoFocus: { classPropertyName: "filterInputAutoFocus", publicName: "filterInputAutoFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, propagateSelectionDown: { classPropertyName: "propagateSelectionDown", publicName: "propagateSelectionDown", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, propagateSelectionUp: { classPropertyName: "propagateSelectionUp", publicName: "propagateSelectionUp", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, resetFilterOnHide: { classPropertyName: "resetFilterOnHide", publicName: "resetFilterOnHide", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: null }, virtualScrollOptions: { classPropertyName: "virtualScrollOptions", publicName: "virtualScrollOptions", isSignal: false, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", onShow: "onShow", onHide: "onHide", onClear: "onClear", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onNodeUnselect: "onNodeUnselect", onNodeSelect: "onNodeSelect" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "cn(cx('root'), containerStyleClass)", "style": "sx('root')" } }, providers: [TREESELECT_VALUE_ACCESSOR, TreeSelectStyle], queries: [{ propertyName: "valueTemplate", first: true, predicate: ["value"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"] }, { propertyName: "triggerIconTemplate", first: true, predicate: ["triggericon"] }, { propertyName: "dropdownIconTemplate", first: true, predicate: ["dropdownicon"] }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "closeIconTemplate", first: true, predicate: ["closeicon"] }, { propertyName: "itemTogglerIconTemplate", first: true, predicate: ["itemtogglericon"] }, { propertyName: "itemCheckboxIconTemplate", first: true, predicate: ["itemcheckboxicon"] }, { propertyName: "itemLoadingIconTemplate", first: true, predicate: ["itemloadingicon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ 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 }, { propertyName: "firstHiddenFocusableElementOnOverlay", first: true, predicate: ["firstHiddenFocusableEl"], descendants: true }, { propertyName: "lastHiddenFocusableElementOnOverlay", first: true, predicate: ["lastHiddenFocusableEl"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <div class="p-hidden-accessible">
+            <input
+                #focusInput
+                type="text"
+                role="combobox"
+                [attr.id]="inputId"
+                readonly
+                [attr.disabled]="disabled() ? '' : undefined"
+                (focus)="onInputFocus($event)"
+                (blur)="onInputBlur($event)"
+                (keydown)="onKeyDown($event)"
+                [attr.tabindex]="!disabled() ? tabindex : -1"
+                [attr.aria-controls]="overlayVisible ? listId : null"
+                [attr.aria-haspopup]="'tree'"
+                [attr.aria-expanded]="overlayVisible ?? false"
+                [attr.aria-labelledby]="ariaLabelledBy"
+                [attr.aria-label]="ariaLabel || (label === 'p-emptylabel' ? undefined : label)"
+                [pAutoFocus]="autofocus"
+            />
+        </div>
+        <div [class]="cx('labelContainer')">
+            <div [class]="cn(cx('label'), labelStyleClass)" [ngStyle]="labelStyle">
+                <ng-container *ngIf="valueTemplate || _valueTemplate; else defaultValueTemplate">
+                    <ng-container *ngTemplateOutlet="valueTemplate || _valueTemplate; context: { $implicit: value, placeholder: placeholder }"></ng-container>
+                </ng-container>
+                <ng-template #defaultValueTemplate>
+                    <ng-container *ngIf="display === 'comma'; else chipsValueTemplate">
+                        {{ label || '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-chip-item">
-                                <p-chip [label]="node.label" styleClass="p-treeselect-chip" />
-                            </div>
-                            <ng-container *ngIf="emptyValue">{{ placeholder || 'empty' }}</ng-container>
-                        </ng-template>
+                    <ng-template #chipsValueTemplate>
+                        <div *ngFor="let node of value" [class]="cx('chipItem')">
+                            <p-chip [label]="node.label" [class]="cx('pcChip')" />
+                        </div>
+                        <ng-container *ngIf="emptyValue">{{ placeholder || 'empty' }}</ng-container>
                     </ng-template>
-                </div>
-            </div>
-            <ng-container *ngIf="checkValue() && !disabled && showClear">
-                <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="'p-treeselect-clear-icon'" (click)="clear($event)" />
-                <span *ngIf="clearIconTemplate || clearIconTemplate" class="p-treeselect-clear-icon" (click)="clear($event)">
-                    <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
-                </span>
-            </ng-container>
-            <div class="p-treeselect-dropdown" role="button" aria-haspopup="tree" [attr.aria-expanded]="overlayVisible ?? false" [attr.aria-label]="'treeselect trigger'">
-                <ChevronDownIcon *ngIf="!triggerIconTemplate && !_triggerIconTemplate && !dropdownIconTemplate && !_dropdownIconTemplate" [styleClass]="'p-treeselect-dropdown-icon'" />
-                <span *ngIf="triggerIconTemplate || _triggerIconTemplate || dropdownIconTemplate || _dropdownIconTemplate" class="p-treeselect-dropdown-icon">
-                    <ng-template *ngTemplateOutlet="triggerIconTemplate || _triggerIconTemplate || dropdownIconTemplate || _dropdownIconTemplate"></ng-template>
-                </span>
+                </ng-template>
             </div>
-            <p-overlay
-                #overlay
-                [(visible)]="overlayVisible"
-                [options]="overlayOptions"
-                [target]="'@parent'"
-                [appendTo]="appendTo"
-                [showTransitionOptions]="showTransitionOptions"
-                [hideTransitionOptions]="hideTransitionOptions"
-                (onAnimationStart)="onOverlayAnimationStart($event)"
-                (onBeforeHide)="onOverlayBeforeHide($event)"
-                (onShow)="onShow.emit($event)"
-                (onHide)="hide($event)"
-            >
-                <ng-template #content>
-                    <div #panel [attr.id]="listId" class="p-treeselect-overlay p-component" [ngStyle]="panelStyle" [class]="panelStyleClass" [ngClass]="panelClass">
-                        <span
-                            #firstHiddenFocusableEl
-                            role="presentation"
-                            class="p-hidden-accessible p-hidden-focusable"
-                            [attr.tabindex]="0"
-                            (focus)="onFirstHiddenFocus($event)"
-                            [attr.data-p-hidden-accessible]="true"
-                            [attr.data-p-hidden-focusable]="true"
+        </div>
+        <ng-container *ngIf="checkValue() && !disabled() && showClear">
+            <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear($event)" />
+            <span *ngIf="clearIconTemplate || clearIconTemplate" [class]="cx('clearIcon')" (click)="clear($event)">
+                <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
+            </span>
+        </ng-container>
+        <div [class]="cx('dropdown')" role="button" aria-haspopup="tree" [attr.aria-expanded]="overlayVisible ?? false" [attr.aria-label]="'treeselect trigger'">
+            <ChevronDownIcon *ngIf="!triggerIconTemplate && !_triggerIconTemplate && !dropdownIconTemplate && !_dropdownIconTemplate" [styleClass]="cx('dropdownIcon')" />
+            <span *ngIf="triggerIconTemplate || _triggerIconTemplate || dropdownIconTemplate || _dropdownIconTemplate" [class]="cx('dropdownIcon')">
+                <ng-template *ngTemplateOutlet="triggerIconTemplate || _triggerIconTemplate || dropdownIconTemplate || _dropdownIconTemplate"></ng-template>
+            </span>
+        </div>
+        <p-overlay
+            #overlay
+            [hostAttrSelector]="attrSelector"
+            [(visible)]="overlayVisible"
+            [options]="overlayOptions"
+            [target]="'@parent'"
+            [appendTo]="$appendTo()"
+            (onAnimationStart)="onOverlayAnimationStart($event)"
+            (onBeforeHide)="onOverlayBeforeHide($event)"
+            (onShow)="onShow.emit($event)"
+            (onHide)="hide($event)"
+        >
+            <ng-template #content>
+                <div #panel [attr.id]="listId" [class]="cn(cx('panel'), panelStyleClass, panelClass)" [ngStyle]="panelStyle">
+                    <span
+                        #firstHiddenFocusableEl
+                        role="presentation"
+                        class="p-hidden-accessible p-hidden-focusable"
+                        [attr.tabindex]="0"
+                        (focus)="onFirstHiddenFocus($event)"
+                        [attr.data-p-hidden-accessible]="true"
+                        [attr.data-p-hidden-focusable]="true"
+                    >
+                    </span>
+                    <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: value, options: options }"></ng-container>
+                    <div [class]="cx('treeContainer')" [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)"
+                            [filter]="filter"
+                            [filterBy]="filterBy"
+                            [filterMode]="filterMode"
+                            [filterPlaceholder]="filterPlaceholder"
+                            [filterLocale]="filterLocale"
+                            [filteredNodes]="filteredNodes"
+                            [virtualScroll]="virtualScroll"
+                            [virtualScrollItemSize]="virtualScrollItemSize"
+                            [virtualScrollOptions]="virtualScrollOptions"
+                            [_templateMap]="templateMap"
+                            [loading]="loading"
+                            [filterInputAutoFocus]="filterInputAutoFocus"
                         >
-                        </span>
-                        <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: value, options: options }"></ng-container>
-                        <div class="p-treeselect-tree-container" [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)"
-                                [filter]="filter"
-                                [filterBy]="filterBy"
-                                [filterMode]="filterMode"
-                                [filterPlaceholder]="filterPlaceholder"
-                                [filterLocale]="filterLocale"
-                                [filteredNodes]="filteredNodes"
-                                [virtualScroll]="virtualScroll"
-                                [virtualScrollItemSize]="virtualScrollItemSize"
-                                [virtualScrollOptions]="virtualScrollOptions"
-                                [_templateMap]="templateMap"
-                                [loading]="loading"
-                                [filterInputAutoFocus]="filterInputAutoFocus"
-                            >
-                                <ng-container *ngIf="emptyTemplate || _emptyTemplate">
-                                    <ng-template #empty>
-                                        <ng-container *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-container>
-                                    </ng-template>
-                                </ng-container>
-                                <ng-template #togglericon let-expanded *ngIf="itemTogglerIconTemplate || _itemTogglerIconTemplate">
-                                    <ng-container *ngTemplateOutlet="itemTogglerIconTemplate || _itemTogglerIconTemplate; context: { $implicit: expanded }"></ng-container>
+                            <ng-container *ngIf="emptyTemplate || _emptyTemplate">
+                                <ng-template #empty>
+                                    <ng-container *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-container>
                                 </ng-template>
-                                <ng-template #checkboxicon let-selected let-partialSelected="partialSelected" *ngIf="itemCheckboxIconTemplate || _itemCheckboxIconTemplate">
-                                    <ng-container *ngTemplateOutlet="itemCheckboxIconTemplate || _itemCheckboxIconTemplate; context: { $implicit: selected, partialSelected: partialSelected }"></ng-container>
-                                </ng-template>
-                                <ng-template #loadingicon *ngIf="itemLoadingIconTemplate || _itemLoadingIconTemplate">
-                                    <ng-container *ngTemplateOutlet="itemLoadingIconTemplate || _itemLoadingIconTemplate"></ng-container>
-                                </ng-template>
-                            </p-tree>
-                        </div>
-                        <ng-container *ngTemplateOutlet="footerTemplate; context: { $implicit: value, options: options }"></ng-container>
-                        <span
-                            #lastHiddenFocusableEl
-                            role="presentation"
-                            class="p-hidden-accessible p-hidden-focusable"
-                            [attr.tabindex]="0"
-                            (focus)="onLastHiddenFocus($event)"
-                            [attr.data-p-hidden-accessible]="true"
-                            [attr.data-p-hidden-focusable]="true"
-                        ></span>
+                            </ng-container>
+                            <ng-template #togglericon let-expanded *ngIf="itemTogglerIconTemplate || _itemTogglerIconTemplate">
+                                <ng-container *ngTemplateOutlet="itemTogglerIconTemplate || _itemTogglerIconTemplate; context: { $implicit: expanded }"></ng-container>
+                            </ng-template>
+                            <ng-template #checkboxicon let-selected let-partialSelected="partialSelected" *ngIf="itemCheckboxIconTemplate || _itemCheckboxIconTemplate">
+                                <ng-container *ngTemplateOutlet="itemCheckboxIconTemplate || _itemCheckboxIconTemplate; context: { $implicit: selected, partialSelected: partialSelected }"></ng-container>
+                            </ng-template>
+                            <ng-template #loadingicon *ngIf="itemLoadingIconTemplate || _itemLoadingIconTemplate">
+                                <ng-container *ngTemplateOutlet="itemLoadingIconTemplate || _itemLoadingIconTemplate"></ng-container>
+                            </ng-template>
+                        </p-tree>
                     </div>
-                </ng-template>
-            </p-overlay>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: 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: "ngmodule", type: SharedModule }, { kind: "component", type: Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "style", "styleClass", "contextMenu", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus", "pAutoFocus"] }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+                    <ng-container *ngTemplateOutlet="footerTemplate; context: { $implicit: value, options: options }"></ng-container>
+                    <span
+                        #lastHiddenFocusableEl
+                        role="presentation"
+                        class="p-hidden-accessible p-hidden-focusable"
+                        [attr.tabindex]="0"
+                        (focus)="onLastHiddenFocus($event)"
+                        [attr.data-p-hidden-accessible]="true"
+                        [attr.data-p-hidden-focusable]="true"
+                    ></span>
+                </div>
+            </ng-template>
+        </p-overlay>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: Overlay, selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options", "appendTo", "hostAttrSelector"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "styleClass", "contextMenu", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TreeSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeSelect, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-treeSelect, p-treeselect, p-tree-select',
                     standalone: true,
                     imports: [CommonModule, Overlay, SharedModule, Tree, AutoFocus, TimesIcon, ChevronDownIcon, Chip],
                     template: `
-        <div #container [ngClass]="containerClass" [class]="containerStyleClass" [ngStyle]="containerStyle" (click)="onClick($event)">
-            <div class="p-hidden-accessible">
-                <input
-                    #focusInput
-                    type="text"
-                    role="combobox"
-                    [attr.id]="inputId"
-                    readonly
-                    [disabled]="disabled"
-                    (focus)="onInputFocus($event)"
-                    (blur)="onInputBlur($event)"
-                    (keydown)="onKeyDown($event)"
-                    [attr.tabindex]="!disabled ? tabindex : -1"
-                    [attr.aria-controls]="overlayVisible ? listId : null"
-                    [attr.aria-haspopup]="'tree'"
-                    [attr.aria-expanded]="overlayVisible ?? false"
-                    [attr.aria-labelledby]="ariaLabelledBy"
-                    [attr.aria-label]="ariaLabel || (label === 'p-emptylabel' ? undefined : label)"
-                    [pAutoFocus]="autofocus"
-                />
-            </div>
-            <div class="p-treeselect-label-container">
-                <div [ngClass]="labelClass" [class]="labelStyleClass" [ngStyle]="labelStyle">
-                    <ng-container *ngIf="valueTemplate || _valueTemplate; else defaultValueTemplate">
-                        <ng-container *ngTemplateOutlet="valueTemplate || _valueTemplate; context: { $implicit: value, placeholder: placeholder }"></ng-container>
+        <div class="p-hidden-accessible">
+            <input
+                #focusInput
+                type="text"
+                role="combobox"
+                [attr.id]="inputId"
+                readonly
+                [attr.disabled]="disabled() ? '' : undefined"
+                (focus)="onInputFocus($event)"
+                (blur)="onInputBlur($event)"
+                (keydown)="onKeyDown($event)"
+                [attr.tabindex]="!disabled() ? tabindex : -1"
+                [attr.aria-controls]="overlayVisible ? listId : null"
+                [attr.aria-haspopup]="'tree'"
+                [attr.aria-expanded]="overlayVisible ?? false"
+                [attr.aria-labelledby]="ariaLabelledBy"
+                [attr.aria-label]="ariaLabel || (label === 'p-emptylabel' ? undefined : label)"
+                [pAutoFocus]="autofocus"
+            />
+        </div>
+        <div [class]="cx('labelContainer')">
+            <div [class]="cn(cx('label'), labelStyleClass)" [ngStyle]="labelStyle">
+                <ng-container *ngIf="valueTemplate || _valueTemplate; else defaultValueTemplate">
+                    <ng-container *ngTemplateOutlet="valueTemplate || _valueTemplate; context: { $implicit: value, placeholder: placeholder }"></ng-container>
+                </ng-container>
+                <ng-template #defaultValueTemplate>
+                    <ng-container *ngIf="display === 'comma'; else chipsValueTemplate">
+                        {{ label || '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-chip-item">
-                                <p-chip [label]="node.label" styleClass="p-treeselect-chip" />
-                            </div>
-                            <ng-container *ngIf="emptyValue">{{ placeholder || 'empty' }}</ng-container>
-                        </ng-template>
+                    <ng-template #chipsValueTemplate>
+                        <div *ngFor="let node of value" [class]="cx('chipItem')">
+                            <p-chip [label]="node.label" [class]="cx('pcChip')" />
+                        </div>
+                        <ng-container *ngIf="emptyValue">{{ placeholder || 'empty' }}</ng-container>
                     </ng-template>
-                </div>
-            </div>
-            <ng-container *ngIf="checkValue() && !disabled && showClear">
-                <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="'p-treeselect-clear-icon'" (click)="clear($event)" />
-                <span *ngIf="clearIconTemplate || clearIconTemplate" class="p-treeselect-clear-icon" (click)="clear($event)">
-                    <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
-                </span>
-            </ng-container>
-            <div class="p-treeselect-dropdown" role="button" aria-haspopup="tree" [attr.aria-expanded]="overlayVisible ?? false" [attr.aria-label]="'treeselect trigger'">
-                <ChevronDownIcon *ngIf="!triggerIconTemplate && !_triggerIconTemplate && !dropdownIconTemplate && !_dropdownIconTemplate" [styleClass]="'p-treeselect-dropdown-icon'" />
-                <span *ngIf="triggerIconTemplate || _triggerIconTemplate || dropdownIconTemplate || _dropdownIconTemplate" class="p-treeselect-dropdown-icon">
-                    <ng-template *ngTemplateOutlet="triggerIconTemplate || _triggerIconTemplate || dropdownIconTemplate || _dropdownIconTemplate"></ng-template>
-                </span>
+                </ng-template>
             </div>
-            <p-overlay
-                #overlay
-                [(visible)]="overlayVisible"
-                [options]="overlayOptions"
-                [target]="'@parent'"
-                [appendTo]="appendTo"
-                [showTransitionOptions]="showTransitionOptions"
-                [hideTransitionOptions]="hideTransitionOptions"
-                (onAnimationStart)="onOverlayAnimationStart($event)"
-                (onBeforeHide)="onOverlayBeforeHide($event)"
-                (onShow)="onShow.emit($event)"
-                (onHide)="hide($event)"
-            >
-                <ng-template #content>
-                    <div #panel [attr.id]="listId" class="p-treeselect-overlay p-component" [ngStyle]="panelStyle" [class]="panelStyleClass" [ngClass]="panelClass">
-                        <span
-                            #firstHiddenFocusableEl
-                            role="presentation"
-                            class="p-hidden-accessible p-hidden-focusable"
-                            [attr.tabindex]="0"
-                            (focus)="onFirstHiddenFocus($event)"
-                            [attr.data-p-hidden-accessible]="true"
-                            [attr.data-p-hidden-focusable]="true"
+        </div>
+        <ng-container *ngIf="checkValue() && !disabled() && showClear">
+            <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="cx('clearIcon')" (click)="clear($event)" />
+            <span *ngIf="clearIconTemplate || clearIconTemplate" [class]="cx('clearIcon')" (click)="clear($event)">
+                <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
+            </span>
+        </ng-container>
+        <div [class]="cx('dropdown')" role="button" aria-haspopup="tree" [attr.aria-expanded]="overlayVisible ?? false" [attr.aria-label]="'treeselect trigger'">
+            <ChevronDownIcon *ngIf="!triggerIconTemplate && !_triggerIconTemplate && !dropdownIconTemplate && !_dropdownIconTemplate" [styleClass]="cx('dropdownIcon')" />
+            <span *ngIf="triggerIconTemplate || _triggerIconTemplate || dropdownIconTemplate || _dropdownIconTemplate" [class]="cx('dropdownIcon')">
+                <ng-template *ngTemplateOutlet="triggerIconTemplate || _triggerIconTemplate || dropdownIconTemplate || _dropdownIconTemplate"></ng-template>
+            </span>
+        </div>
+        <p-overlay
+            #overlay
+            [hostAttrSelector]="attrSelector"
+            [(visible)]="overlayVisible"
+            [options]="overlayOptions"
+            [target]="'@parent'"
+            [appendTo]="$appendTo()"
+            (onAnimationStart)="onOverlayAnimationStart($event)"
+            (onBeforeHide)="onOverlayBeforeHide($event)"
+            (onShow)="onShow.emit($event)"
+            (onHide)="hide($event)"
+        >
+            <ng-template #content>
+                <div #panel [attr.id]="listId" [class]="cn(cx('panel'), panelStyleClass, panelClass)" [ngStyle]="panelStyle">
+                    <span
+                        #firstHiddenFocusableEl
+                        role="presentation"
+                        class="p-hidden-accessible p-hidden-focusable"
+                        [attr.tabindex]="0"
+                        (focus)="onFirstHiddenFocus($event)"
+                        [attr.data-p-hidden-accessible]="true"
+                        [attr.data-p-hidden-focusable]="true"
+                    >
+                    </span>
+                    <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: value, options: options }"></ng-container>
+                    <div [class]="cx('treeContainer')" [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)"
+                            [filter]="filter"
+                            [filterBy]="filterBy"
+                            [filterMode]="filterMode"
+                            [filterPlaceholder]="filterPlaceholder"
+                            [filterLocale]="filterLocale"
+                            [filteredNodes]="filteredNodes"
+                            [virtualScroll]="virtualScroll"
+                            [virtualScrollItemSize]="virtualScrollItemSize"
+                            [virtualScrollOptions]="virtualScrollOptions"
+                            [_templateMap]="templateMap"
+                            [loading]="loading"
+                            [filterInputAutoFocus]="filterInputAutoFocus"
                         >
-                        </span>
-                        <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: value, options: options }"></ng-container>
-                        <div class="p-treeselect-tree-container" [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)"
-                                [filter]="filter"
-                                [filterBy]="filterBy"
-                                [filterMode]="filterMode"
-                                [filterPlaceholder]="filterPlaceholder"
-                                [filterLocale]="filterLocale"
-                                [filteredNodes]="filteredNodes"
-                                [virtualScroll]="virtualScroll"
-                                [virtualScrollItemSize]="virtualScrollItemSize"
-                                [virtualScrollOptions]="virtualScrollOptions"
-                                [_templateMap]="templateMap"
-                                [loading]="loading"
-                                [filterInputAutoFocus]="filterInputAutoFocus"
-                            >
-                                <ng-container *ngIf="emptyTemplate || _emptyTemplate">
-                                    <ng-template #empty>
-                                        <ng-container *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-container>
-                                    </ng-template>
-                                </ng-container>
-                                <ng-template #togglericon let-expanded *ngIf="itemTogglerIconTemplate || _itemTogglerIconTemplate">
-                                    <ng-container *ngTemplateOutlet="itemTogglerIconTemplate || _itemTogglerIconTemplate; context: { $implicit: expanded }"></ng-container>
-                                </ng-template>
-                                <ng-template #checkboxicon let-selected let-partialSelected="partialSelected" *ngIf="itemCheckboxIconTemplate || _itemCheckboxIconTemplate">
-                                    <ng-container *ngTemplateOutlet="itemCheckboxIconTemplate || _itemCheckboxIconTemplate; context: { $implicit: selected, partialSelected: partialSelected }"></ng-container>
-                                </ng-template>
-                                <ng-template #loadingicon *ngIf="itemLoadingIconTemplate || _itemLoadingIconTemplate">
-                                    <ng-container *ngTemplateOutlet="itemLoadingIconTemplate || _itemLoadingIconTemplate"></ng-container>
+                            <ng-container *ngIf="emptyTemplate || _emptyTemplate">
+                                <ng-template #empty>
+                                    <ng-container *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-container>
                                 </ng-template>
-                            </p-tree>
-                        </div>
-                        <ng-container *ngTemplateOutlet="footerTemplate; context: { $implicit: value, options: options }"></ng-container>
-                        <span
-                            #lastHiddenFocusableEl
-                            role="presentation"
-                            class="p-hidden-accessible p-hidden-focusable"
-                            [attr.tabindex]="0"
-                            (focus)="onLastHiddenFocus($event)"
-                            [attr.data-p-hidden-accessible]="true"
-                            [attr.data-p-hidden-focusable]="true"
-                        ></span>
+                            </ng-container>
+                            <ng-template #togglericon let-expanded *ngIf="itemTogglerIconTemplate || _itemTogglerIconTemplate">
+                                <ng-container *ngTemplateOutlet="itemTogglerIconTemplate || _itemTogglerIconTemplate; context: { $implicit: expanded }"></ng-container>
+                            </ng-template>
+                            <ng-template #checkboxicon let-selected let-partialSelected="partialSelected" *ngIf="itemCheckboxIconTemplate || _itemCheckboxIconTemplate">
+                                <ng-container *ngTemplateOutlet="itemCheckboxIconTemplate || _itemCheckboxIconTemplate; context: { $implicit: selected, partialSelected: partialSelected }"></ng-container>
+                            </ng-template>
+                            <ng-template #loadingicon *ngIf="itemLoadingIconTemplate || _itemLoadingIconTemplate">
+                                <ng-container *ngTemplateOutlet="itemLoadingIconTemplate || _itemLoadingIconTemplate"></ng-container>
+                            </ng-template>
+                        </p-tree>
                     </div>
-                </ng-template>
-            </p-overlay>
-        </div>
+                    <ng-container *ngTemplateOutlet="footerTemplate; context: { $implicit: value, options: options }"></ng-container>
+                    <span
+                        #lastHiddenFocusableEl
+                        role="presentation"
+                        class="p-hidden-accessible p-hidden-focusable"
+                        [attr.tabindex]="0"
+                        (focus)="onLastHiddenFocus($event)"
+                        [attr.data-p-hidden-accessible]="true"
+                        [attr.data-p-hidden-focusable]="true"
+                    ></span>
+                </div>
+            </ng-template>
+        </p-overlay>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [TREESELECT_VALUE_ACCESSOR, TreeSelectStyle],
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': "cn(cx('root'), containerStyleClass)",
+                        '[style]': "sx('root')"
+                    }
                 }]
         }], propDecorators: { inputId: [{
                 type: Input
             }], scrollHeight: [{
                 type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], metaKeySelection: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], variant: [{
-                type: Input
             }], display: [{
                 type: Input
             }], selectionMode: [{
@@ -1361,9 +1161,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 type: Input
             }], panelStyle: [{
                 type: Input
-            }], fluid: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], panelStyleClass: [{
                 type: Input
             }], containerStyle: [{
@@ -1378,8 +1175,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 type: Input
             }], emptyMessage: [{
                 type: Input
-            }], appendTo: [{
-                type: Input
             }], filter: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -1410,8 +1205,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 type: Input
             }], virtualScrollItemSize: [{
                 type: Input
-            }], size: [{
-                type: Input
             }], virtualScrollOptions: [{
                 type: Input
             }], autofocus: [{
@@ -1419,10 +1212,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 args: [{ transform: booleanAttribute }]
             }], options: [{
                 type: Input
-            }], showTransitionOptions: [{
-                type: Input
-            }], hideTransitionOptions: [{
-                type: Input
             }], loading: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -1446,9 +1235,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 type: Output
             }], onNodeSelect: [{
                 type: Output
-            }], containerEl: [{
-                type: ViewChild,
-                args: ['container']
             }], focusInput: [{
                 type: ViewChild,
                 args: ['focusInput']
@@ -1509,13 +1295,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
+            }], onHostClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
             }] } });
 class TreeSelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TreeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: TreeSelectModule, imports: [TreeSelect, SharedModule], exports: [TreeSelect, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TreeSelectModule, imports: [TreeSelect, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: TreeSelectModule, imports: [TreeSelect, SharedModule], exports: [TreeSelect, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeSelectModule, imports: [TreeSelect, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: TreeSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [TreeSelect, SharedModule],