primeng 20.3.0 → 21.0.0-rc.1

package/fesm2022/primeng-treeselect.mjs

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, forwardRef, InjectionToken, inject, input, booleanAttribute, EventEmitter, computed, 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 { uuid, isNotEmpty, getFocusableElements, getFirstFocusableElement, focus, getLastFocusableElement } from '@primeuix/utils';
 import { SharedModule, PrimeTemplate } from 'primeng/api';
 import { AutoFocus } from 'primeng/autofocus';
 import { PARENT_INSTANCE } from 'primeng/basecomponent';
@@ -83,10 +83,10 @@ class TreeSelectStyle extends BaseStyle {
     style = style;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeSelectStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeSelectStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TreeSelectStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TreeSelectStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeSelectStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TreeSelectStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -342,30 +342,40 @@ class TreeSelect extends BaseEditableHolder {
      * @group Props
      */
     loading;
+    /**
+     * Loading mode display.
+     * @group Props
+     */
+    loadingMode = 'mask';
     /**
      * Specifies the size of the component.
      * @defaultValue undefined
      * @group Props
      */
-    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+    size = input(undefined, { ...(ngDevMode ? { debugName: "size" } : {}) });
     /**
      * Specifies the input variant of the component.
      * @defaultValue undefined
      * @group Props
      */
-    variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
+    variant = input(undefined, { ...(ngDevMode ? { debugName: "variant" } : {}) });
     /**
      * Spans 100% width of the container when enabled.
      * @defaultValue undefined
      * @group Props
      */
-    fluid = input(undefined, ...(ngDevMode ? [{ debugName: "fluid", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    fluid = input(undefined, { ...(ngDevMode ? { debugName: "fluid" } : {}), 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, ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
+    appendTo = input(undefined, { ...(ngDevMode ? { debugName: "appendTo" } : {}) });
+    /**
+     * The motion options.
+     * @group Props
+     */
+    motionOptions = input(undefined, { ...(ngDevMode ? { debugName: "motionOptions" } : {}) });
     /**
      * Callback to invoke when a node is expanded.
      * @param {TreeSelectNodeExpandEvent} event - Custom node expand event.
@@ -424,7 +434,7 @@ class TreeSelect extends BaseEditableHolder {
      * @group Emits
      */
     onNodeSelect = new EventEmitter();
-    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), ...(ngDevMode ? [{ debugName: "$appendTo" }] : []));
+    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), { ...(ngDevMode ? { debugName: "$appendTo" } : {}) });
     focusInput;
     filterViewChild;
     treeViewChild;
@@ -432,7 +442,7 @@ class TreeSelect extends BaseEditableHolder {
     overlayViewChild;
     firstHiddenFocusableElementOnOverlay;
     lastHiddenFocusableElementOnOverlay;
-    $variant = computed(() => this.variant() || this.config.inputStyle() || this.config.inputVariant(), ...(ngDevMode ? [{ debugName: "$variant" }] : []));
+    $variant = computed(() => this.variant() || this.config.inputStyle() || this.config.inputVariant(), { ...(ngDevMode ? { debugName: "$variant" } : {}) });
     pcFluid = inject(Fluid, { optional: true, host: true, skipSelf: true });
     get hasFluid() {
         return this.fluid() ?? !!this.pcFluid;
@@ -442,11 +452,15 @@ class TreeSelect extends BaseEditableHolder {
     serializedValue;
     /**
      * Custom value template.
+     * @param {TreeSelectValueTemplateContext} context - value context.
+     * @see {@link TreeSelectValueTemplateContext}
      * @group Templates
      */
     valueTemplate;
     /**
      * Custom header template.
+     * @param {TreeSelectHeaderTemplateContext} context - header context.
+     * @see {@link TreeSelectHeaderTemplateContext}
      * @group Templates
      */
     headerTemplate;
@@ -457,6 +471,8 @@ class TreeSelect extends BaseEditableHolder {
     emptyTemplate;
     /**
      * Custom footer template.
+     * @param {TreeSelectHeaderTemplateContext} context - footer context.
+     * @see {@link TreeSelectHeaderTemplateContext}
      * @group Templates
      */
     footerTemplate;
@@ -487,11 +503,15 @@ class TreeSelect extends BaseEditableHolder {
     closeIconTemplate;
     /**
      * Custom item toggler icon template.
+     * @param {TreeSelectItemTogglerIconTemplateContext} context - toggler icon context.
+     * @see {@link TreeSelectItemTogglerIconTemplateContext}
      * @group Templates
      */
     itemTogglerIconTemplate;
     /**
      * Custom item checkbox icon template.
+     * @param {TreeSelectItemCheckboxIconTemplateContext} context - checkbox icon context.
+     * @see {@link TreeSelectItemCheckboxIconTemplateContext}
      * @group Templates
      */
     itemCheckboxIconTemplate;
@@ -578,23 +598,19 @@ class TreeSelect extends BaseEditableHolder {
             }
         });
     }
-    onOverlayAnimationStart(event) {
-        switch (event.toState) {
-            case 'visible':
-                if (this.filter) {
-                    isNotEmpty(this.filterValue) && this.treeViewChild?._filter(this.filterValue);
-                    this.filterInputAutoFocus && this.filterViewChild?.nativeElement.focus();
-                }
-                else {
-                    let focusableElements = getFocusableElements(this.panelEl?.nativeElement);
-                    if (focusableElements && focusableElements.length > 0) {
-                        focusableElements[0].focus();
-                    }
-                }
-                break;
+    onOverlayBeforeEnter() {
+        if (this.filter) {
+            isNotEmpty(this.filterValue) && this.treeViewChild?._filter(this.filterValue);
+            this.filterInputAutoFocus && this.filterViewChild?.nativeElement.focus();
+        }
+        else {
+            let focusableElements = getFocusableElements(this.panelEl?.nativeElement);
+            if (focusableElements && focusableElements.length > 0) {
+                focusableElements[0].focus();
+            }
         }
     }
-    onOverlayBeforeHide(event) {
+    onOverlayBeforeHide() {
         let focusableElements = getFocusableElements(this.el.nativeElement);
         if (focusableElements && focusableElements.length > 0) {
             focusableElements[0].focus();
@@ -609,7 +625,8 @@ class TreeSelect extends BaseEditableHolder {
         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')) {
+        const section = event.target?.getAttribute?.('data-pc-section');
+        if (!this.overlayViewChild?.el?.nativeElement?.contains(event.target) && section !== 'box' && section !== 'icon') {
             if (this.overlayVisible) {
                 this.hide();
             }
@@ -667,7 +684,7 @@ class TreeSelect extends BaseEditableHolder {
     }
     onArrowDown(event) {
         if (this.overlayVisible && this.panelEl?.nativeElement) {
-            let focusableElements = getFocusableElements(this.panelEl.nativeElement, '.p-tree-node');
+            let focusableElements = getFocusableElements(this.panelEl.nativeElement, '[data-pc-section="node"]');
             if (focusableElements && focusableElements.length > 0) {
                 focusableElements[0].focus();
             }
@@ -875,8 +892,8 @@ class TreeSelect extends BaseEditableHolder {
         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: "20.3.4", ngImport: i0, type: TreeSelect, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TreeSelect, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", 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 }, loadingMode: { classPropertyName: "loadingMode", publicName: "loadingMode", isSignal: false, isRequired: false, transformFunction: null }, 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 }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", 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: { "mousedown": "onHostClick($event)" }, properties: { "class": "cn(cx('root'), containerStyleClass)", "style": "sx('root')" } }, providers: [
             TREESELECT_VALUE_ACCESSOR,
             TreeSelectStyle,
             {
@@ -920,7 +937,7 @@ class TreeSelect extends BaseEditableHolder {
                     </ng-container>
                     <ng-template #chipsValueTemplate>
                         <div *ngFor="let node of value" [class]="cx('chipItem')" [pBind]="ptm('chipItem')">
-                            <p-chip [label]="node.label" [class]="cx('pcChip')" [pt]="ptm('pcChip')" />
+                            <p-chip [unstyled]="unstyled()" [label]="node.label" [class]="cx('pcChip')" [pt]="ptm('pcChip')" />
                         </div>
                         <ng-container *ngIf="emptyValue">{{ placeholder || 'empty' }}</ng-container>
                     </ng-template>
@@ -946,9 +963,11 @@ class TreeSelect extends BaseEditableHolder {
             [options]="overlayOptions"
             [target]="'@parent'"
             [appendTo]="$appendTo()"
+            [unstyled]="unstyled()"
             [pt]="ptm('pcOverlay')"
-            (onAnimationStart)="onOverlayAnimationStart($event)"
-            (onBeforeHide)="onOverlayBeforeHide($event)"
+            [motionOptions]="motionOptions()"
+            (onBeforeEnter)="onOverlayBeforeEnter()"
+            (onBeforeHide)="onOverlayBeforeHide()"
             (onShow)="onShow.emit($event)"
             (onHide)="hide($event)"
         >
@@ -993,7 +1012,9 @@ class TreeSelect extends BaseEditableHolder {
                             [_templateMap]="templateMap"
                             [loading]="loading"
                             [filterInputAutoFocus]="filterInputAutoFocus"
+                            [loadingMode]="loadingMode"
                             [pt]="ptm('pcTree')"
+                            [unstyled]="unstyled()"
                         >
                             <ng-container *ngIf="emptyTemplate || _emptyTemplate">
                                 <ng-template #empty>
@@ -1025,9 +1046,9 @@ class TreeSelect extends BaseEditableHolder {
                 </div>
             </ng-template>
         </p-overlay>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: Overlay, selector: "p-overlay", inputs: ["hostName", "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: "[data-p-icon=\"times\"]" }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: Overlay, selector: "p-overlay", inputs: ["hostName", "visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options", "appendTo", "inline", "motionOptions", "hostAttrSelector"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "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", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TreeSelect, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-treeSelect, p-treeselect, p-tree-select',
@@ -1067,7 +1088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     </ng-container>
                     <ng-template #chipsValueTemplate>
                         <div *ngFor="let node of value" [class]="cx('chipItem')" [pBind]="ptm('chipItem')">
-                            <p-chip [label]="node.label" [class]="cx('pcChip')" [pt]="ptm('pcChip')" />
+                            <p-chip [unstyled]="unstyled()" [label]="node.label" [class]="cx('pcChip')" [pt]="ptm('pcChip')" />
                         </div>
                         <ng-container *ngIf="emptyValue">{{ placeholder || 'empty' }}</ng-container>
                     </ng-template>
@@ -1093,9 +1114,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             [options]="overlayOptions"
             [target]="'@parent'"
             [appendTo]="$appendTo()"
+            [unstyled]="unstyled()"
             [pt]="ptm('pcOverlay')"
-            (onAnimationStart)="onOverlayAnimationStart($event)"
-            (onBeforeHide)="onOverlayBeforeHide($event)"
+            [motionOptions]="motionOptions()"
+            (onBeforeEnter)="onOverlayBeforeEnter()"
+            (onBeforeHide)="onOverlayBeforeHide()"
             (onShow)="onShow.emit($event)"
             (onHide)="hide($event)"
         >
@@ -1140,7 +1163,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                             [_templateMap]="templateMap"
                             [loading]="loading"
                             [filterInputAutoFocus]="filterInputAutoFocus"
+                            [loadingMode]="loadingMode"
                             [pt]="ptm('pcTree')"
+                            [unstyled]="unstyled()"
                         >
                             <ng-container *ngIf="emptyTemplate || _emptyTemplate">
                                 <ng-template #empty>
@@ -1269,7 +1294,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }], loading: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], onNodeExpand: [{
+            }], loadingMode: [{
+                type: Input
+            }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], onNodeExpand: [{
                 type: Output
             }], onNodeCollapse: [{
                 type: Output
@@ -1351,14 +1378,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: [PrimeTemplate]
             }], onHostClick: [{
                 type: HostListener,
-                args: ['click', ['$event']]
+                args: ['mousedown', ['$event']]
             }] } });
 class TreeSelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: TreeSelectModule, imports: [TreeSelect, SharedModule], exports: [TreeSelect, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeSelectModule, imports: [TreeSelect, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TreeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: TreeSelectModule, imports: [TreeSelect, SharedModule], exports: [TreeSelect, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TreeSelectModule, imports: [TreeSelect, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TreeSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [TreeSelect, SharedModule],