cax-design-system 1.2.19 → 1.2.21

package/esm2022/treeselect/treeselect.mjs

@@ -712,7 +712,7 @@ export class TreeSelect {
         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: "18.2.9", ngImport: i0, type: TreeSelect, deps: [{ token: i1.caxConfig }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: TreeSelect, selector: "cax-treeSelect", inputs: { showRightIcon: "showRightIcon", inputId: "inputId", scrollHeight: "scrollHeight", disabled: ["disabled", "disabled", booleanAttribute], metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], labelText: "labelText", variant: "variant", display: "display", selectionMode: "selectionMode", tabindex: "tabindex", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", placeholder: "placeholder", panelClass: "panelClass", panelStyle: "panelStyle", panelStyleClass: "panelStyleClass", containerStyle: "containerStyle", containerStyleClass: "containerStyleClass", labelStyle: "labelStyle", labelStyleClass: "labelStyleClass", overlayOptions: "overlayOptions", emptyMessage: "emptyMessage", appendTo: "appendTo", filter: ["filter", "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", 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" }, host: { properties: { "class.cax-inputwrapper-filled": "!emptyValue", "class.cax-inputwrapper-focus": "focused", "class.cax-treeselect-clearable": "showClear && !disabled" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [TREESELECT_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], 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 }], ngImport: i0, template: "<div class=\"cax-dropdown-container\">\n    <label *ngIf=\"labelText\" [ngClass]=\"labelTextClass\">{{ labelText }}</label>\n    <div #container [ngClass]=\"containerClass()\" [class]=\"containerStyleClass\" [ngStyle]=\"containerStyle\" (click)=\"onClick($event)\">\n        <div class=\"cax-hidden-accessible\">\n            <input\n                #focusInput\n                type=\"text\"\n                role=\"combobox\"\n                [attr.id]=\"inputId\"\n                readonly\n                [disabled]=\"disabled\"\n                (focus)=\"onInputFocus($event)\"\n                (blur)=\"onInputBlur($event)\"\n                (keydown)=\"onKeyDown($event)\"\n                [attr.tabindex]=\"!disabled ? tabindex : -1\"\n                [attr.aria-controls]=\"overlayVisible ? listId : null\"\n                [attr.aria-haspopup]=\"'tree'\"\n                [attr.aria-expanded]=\"overlayVisible ?? false\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.aria-label]=\"ariaLabel || (label === 'cax-emptylabel' ? undefined : label)\"\n                pAutoFocus\n                [autofocus]=\"autofocus\"\n            />\n        </div>\n        <div class=\"cax-treeselect-label-container\">\n            <div [ngClass]=\"labelClass()\" [class]=\"labelStyleClass\" [ngStyle]=\"labelStyle\">\n                <ng-container *ngIf=\"valueTemplate; else defaultValueTemplate\">\n                    <ng-container *ngTemplateOutlet=\"valueTemplate; context: { $implicit: value, placeholder: placeholder }\"></ng-container>\n                </ng-container>\n                <ng-template #defaultValueTemplate>\n                    <ng-container *ngIf=\"display === 'comma'; else chipsValueTemplate\"> {{ label || 'empty' }} </ng-container>\n                    <ng-template #chipsValueTemplate>\n                        <div *ngFor=\"let node of value\" class=\"cax-treeselect-token\">\n                            <span class=\"cax-treeselect-token-label\">{{ node.label }}</span>\n                        </div>\n                        <ng-container *ngIf=\"emptyValue\">{{ placeholder || 'empty' }}</ng-container>\n                    </ng-template>\n                </ng-template>\n            </div>\n            <ng-container *ngIf=\"checkValue() && !disabled && showClear\">\n                <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-treeselect-clear-icon'\" (click)=\"clear($event)\" />\n                <span *ngIf=\"clearIconTemplate\" class=\"cax-treeselect-clear-icon\" (click)=\"clear($event)\">\n                    <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n                </span>\n            </ng-container>\n        </div>\n        <div class=\"cax-treeselect-trigger\" role=\"button\" aria-haspopup=\"tree\" [attr.aria-expanded]=\"overlayVisible ?? false\" [attr.aria-label]=\"'treeselect trigger'\">\n            <ChevronDownIcon *ngIf=\"!triggerIconTemplate\" [styleClass]=\"'cax-treeselect-trigger-icon'\" />\n            <span *ngIf=\"triggerIconTemplate\" class=\"cax-treeselect-trigger-icon\">\n                <ng-template *ngTemplateOutlet=\"triggerIconTemplate\"></ng-template>\n            </span>\n        </div>\n        <cax-overlay\n            #overlay\n            [(visible)]=\"overlayVisible\"\n            [options]=\"overlayOptions\"\n            [target]=\"'@parent'\"\n            [appendTo]=\"appendTo\"\n            [showTransitionOptions]=\"showTransitionOptions\"\n            [hideTransitionOptions]=\"hideTransitionOptions\"\n            (onAnimationStart)=\"onOverlayAnimationStart($event)\"\n            (onBeforeHide)=\"onOverlayBeforeHide($event)\"\n            (onShow)=\"onShow.emit($event)\"\n            (onHide)=\"hide($event)\"\n        >\n            <ng-template caxTemplate=\"content\">\n                <div #panel [attr.id]=\"listId\" class=\"cax-treeselect-panel cax-component\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\" [ngClass]=\"panelClass\">\n                    <span\n                        #firstHiddenFocusableEl\n                        role=\"presentation\"\n                        class=\"cax-hidden-accessible cax-hidden-focusable\"\n                        [attr.tabindex]=\"0\"\n                        (focus)=\"onFirstHiddenFocus($event)\"\n                        [attr.data-cax-hidden-accessible]=\"true\"\n                        [attr.data-cax-hidden-focusable]=\"true\"\n                    >\n                    </span>\n                    <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: value, options: options }\"></ng-container>\n                    <div class=\"cax-treeselect-header\" *ngIf=\"filter\" (keydown.arrowdown)=\"onArrowDown($event)\">\n                        <div class=\"cax-treeselect-filter-container\">\n                            <input\n                                #filter\n                                type=\"search\"\n                                autocomplete=\"off\"\n                                class=\"cax-treeselect-filter cax-inputtext cax-component\"\n                                [attr.placeholder]=\"filterPlaceholder\"\n                                (keydown.enter)=\"$event.preventDefault()\"\n                                (input)=\"onFilterInput($event)\"\n                                [value]=\"filterValue\"\n                            />\n                            <SearchIcon *ngIf=\"!filterIconTemplate\" [styleClass]=\"'cax-treeselect-filter-icon'\" />\n                            <span *ngIf=\"filterIconTemplate\" class=\"cax-treeselect-filter-icon\">\n                                <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\n                            </span>\n                        </div>\n                    </div>\n                    <div class=\"cax-treeselect-items-wrapper\" [ngStyle]=\"{ 'max-height': scrollHeight }\">\n                        <cax-tree\n                            #tree\n                            [value]=\"options\"\n                            [rightIcon]=\"showRightIcon\"\n                            [propagateSelectionDown]=\"propagateSelectionDown\"\n                            [propagateSelectionUp]=\"propagateSelectionUp\"\n                            [selectionMode]=\"selectionMode\"\n                            (selectionChange)=\"onSelectionChange($event)\"\n                            [selection]=\"value\"\n                            [metaKeySelection]=\"metaKeySelection\"\n                            (onNodeExpand)=\"nodeExpand($event)\"\n                            (onNodeCollapse)=\"nodeCollapse($event)\"\n                            (onNodeSelect)=\"onSelect($event)\"\n                            [emptyMessage]=\"emptyMessage\"\n                            (onNodeUnselect)=\"onUnselect($event)\"\n                            [filterBy]=\"filterBy\"\n                            [filterMode]=\"filterMode\"\n                            [filterPlaceholder]=\"filterPlaceholder\"\n                            [filterLocale]=\"filterLocale\"\n                            [filteredNodes]=\"filteredNodes\"\n                            [virtualScroll]=\"virtualScroll\"\n                            [virtualScrollItemSize]=\"virtualScrollItemSize\"\n                            [virtualScrollOptions]=\"virtualScrollOptions\"\n                            [_templateMap]=\"templateMap\"\n                            [loading]=\"loading\"\n                        >\n                            <ng-container *ngIf=\"emptyTemplate\">\n                                <ng-template caxTemplate=\"empty\">\n                                    <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n                                </ng-template>\n                            </ng-container>\n                            <ng-template caxTemplate=\"togglericon\" let-expanded *ngIf=\"itemTogglerIconTemplate\">\n                                <ng-container *ngTemplateOutlet=\"itemTogglerIconTemplate; context: { $implicit: expanded }\"></ng-container>\n                            </ng-template>\n                            <ng-template caxTemplate=\"checkboxicon\" let-selected let-partialSelected=\"partialSelected\" *ngIf=\"itemCheckboxIconTemplate\">\n                                <ng-container *ngTemplateOutlet=\"itemCheckboxIconTemplate; context: { $implicit: selected, partialSelected: partialSelected }\"></ng-container>\n                            </ng-template>\n                            <ng-template caxTemplate=\"loadingicon\" *ngIf=\"itemLoadingIconTemplate\">\n                                <ng-container *ngTemplateOutlet=\"itemLoadingIconTemplate\"></ng-container>\n                            </ng-template>\n                        </cax-tree>\n                    </div>\n                    <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: value, options: options }\"></ng-container>\n                    <span\n                        #lastHiddenFocusableEl\n                        role=\"presentation\"\n                        class=\"cax-hidden-accessible cax-hidden-focusable\"\n                        [attr.tabindex]=\"0\"\n                        (focus)=\"onLastHiddenFocus($event)\"\n                        [attr.data-cax-hidden-accessible]=\"true\"\n                        [attr.data-cax-hidden-focusable]=\"true\"\n                    ></span>\n                </div>\n            </ng-template>\n        </cax-overlay>\n    </div>\n</div>\n", styles: ["@layer cax{.cax-dropdown-container{display:flex;flex-direction:column;align-items:flex-start}.cax-dropdown-container label{margin-bottom:8px;font-size:14px;font-weight:500}.cax-dropdown-container label.left-aligned{text-align:left}.cax-treeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.cax-treeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.cax-treeselect-label-container{overflow:hidden;flex:1 1 auto;cursor:pointer;display:flex}.cax-treeselect-label{display:block;white-space:nowrap;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.cax-treeselect-label-empty{overflow:hidden;visibility:hidden}.cax-treeselect-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.cax-treeselect-items-wrapper{overflow:auto}.cax-treeselect-header{display:flex;align-items:center;justify-content:space-between}.cax-treeselect-filter-container{position:relative;flex:1 1 auto}.cax-treeselect-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.cax-treeselect-filter-container .cax-inputtext{width:100%}.cax-treeselect-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative;margin-left:auto}.cax-treeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem}.cax-fluid .cax-treeselect{display:flex}.cax-treeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-treeselect-clearable{position:relative}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.Overlay, selector: "cax-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i1.CaxTemplate, selector: "[caxTemplate]", inputs: ["type", "caxTemplate"] }, { kind: "component", type: i4.Tree, selector: "cax-tree", inputs: ["rightIcon", "value", "selectionMode", "allowUnselect", "loadingMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "nodeActionButton", "nodeActionButtons", "actionButtonMode", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter", "onNodeActionClick", "onNodeFormSubmit"] }, { kind: "component", type: i5.SearchIcon, selector: "SearchIcon" }, { kind: "component", type: i6.TimesIcon, selector: "TimesIcon" }, { kind: "component", type: i7.ChevronDownIcon, selector: "ChevronDownIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: TreeSelect, selector: "cax-treeSelect", inputs: { showRightIcon: "showRightIcon", inputId: "inputId", scrollHeight: "scrollHeight", disabled: ["disabled", "disabled", booleanAttribute], metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], labelText: "labelText", variant: "variant", display: "display", selectionMode: "selectionMode", tabindex: "tabindex", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", placeholder: "placeholder", panelClass: "panelClass", panelStyle: "panelStyle", panelStyleClass: "panelStyleClass", containerStyle: "containerStyle", containerStyleClass: "containerStyleClass", labelStyle: "labelStyle", labelStyleClass: "labelStyleClass", overlayOptions: "overlayOptions", emptyMessage: "emptyMessage", appendTo: "appendTo", filter: ["filter", "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", 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" }, host: { properties: { "class.cax-inputwrapper-filled": "!emptyValue", "class.cax-inputwrapper-focus": "focused", "class.cax-treeselect-clearable": "showClear && !disabled" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [TREESELECT_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], 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 }], ngImport: i0, template: "<div class=\"cax-dropdown-container\">\n    <label *ngIf=\"labelText\" [ngClass]=\"labelTextClass\">{{ labelText }}</label>\n    <div #container [ngClass]=\"containerClass()\" [class]=\"containerStyleClass\" [ngStyle]=\"containerStyle\" (click)=\"onClick($event)\">\n        <div class=\"cax-hidden-accessible\">\n            <input\n                #focusInput\n                type=\"text\"\n                role=\"combobox\"\n                [attr.id]=\"inputId\"\n                readonly\n                [disabled]=\"disabled\"\n                (focus)=\"onInputFocus($event)\"\n                (blur)=\"onInputBlur($event)\"\n                (keydown)=\"onKeyDown($event)\"\n                [attr.tabindex]=\"!disabled ? tabindex : -1\"\n                [attr.aria-controls]=\"overlayVisible ? listId : null\"\n                [attr.aria-haspopup]=\"'tree'\"\n                [attr.aria-expanded]=\"overlayVisible ?? false\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.aria-label]=\"ariaLabel || (label === 'cax-emptylabel' ? undefined : label)\"\n                pAutoFocus\n                [autofocus]=\"autofocus\"\n            />\n        </div>\n        <div class=\"cax-treeselect-label-container\">\n            <div [ngClass]=\"labelClass()\" [class]=\"labelStyleClass\" [ngStyle]=\"labelStyle\">\n                <ng-container *ngIf=\"valueTemplate; else defaultValueTemplate\">\n                    <ng-container *ngTemplateOutlet=\"valueTemplate; context: { $implicit: value, placeholder: placeholder }\"></ng-container>\n                </ng-container>\n                <ng-template #defaultValueTemplate>\n                    <ng-container *ngIf=\"display === 'comma'; else chipsValueTemplate\"> {{ label || 'empty' }} </ng-container>\n                    <ng-template #chipsValueTemplate>\n                        <div *ngFor=\"let node of value\" class=\"cax-treeselect-token\">\n                            <span class=\"cax-treeselect-token-label\">{{ node.label }}</span>\n                        </div>\n                        <ng-container *ngIf=\"emptyValue\">{{ placeholder || 'empty' }}</ng-container>\n                    </ng-template>\n                </ng-template>\n            </div>\n            <ng-container *ngIf=\"checkValue() && !disabled && showClear\">\n                <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-treeselect-clear-icon'\" (click)=\"clear($event)\" />\n                <span *ngIf=\"clearIconTemplate\" class=\"cax-treeselect-clear-icon\" (click)=\"clear($event)\">\n                    <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n                </span>\n            </ng-container>\n        </div>\n        <div class=\"cax-treeselect-trigger\" role=\"button\" aria-haspopup=\"tree\" [attr.aria-expanded]=\"overlayVisible ?? false\" [attr.aria-label]=\"'treeselect trigger'\">\n            <ChevronDownIcon *ngIf=\"!triggerIconTemplate\" [styleClass]=\"'cax-treeselect-trigger-icon'\" />\n            <span *ngIf=\"triggerIconTemplate\" class=\"cax-treeselect-trigger-icon\">\n                <ng-template *ngTemplateOutlet=\"triggerIconTemplate\"></ng-template>\n            </span>\n        </div>\n        <cax-overlay\n            #overlay\n            [(visible)]=\"overlayVisible\"\n            [options]=\"overlayOptions\"\n            [target]=\"'@parent'\"\n            [appendTo]=\"appendTo\"\n            [showTransitionOptions]=\"showTransitionOptions\"\n            [hideTransitionOptions]=\"hideTransitionOptions\"\n            (onAnimationStart)=\"onOverlayAnimationStart($event)\"\n            (onBeforeHide)=\"onOverlayBeforeHide($event)\"\n            (onShow)=\"onShow.emit($event)\"\n            (onHide)=\"hide($event)\"\n        >\n            <ng-template caxTemplate=\"content\">\n                <div #panel [attr.id]=\"listId\" class=\"cax-treeselect-panel cax-component\" [ngStyle]=\"panelStyle\" [class]=\"panelStyleClass\" [ngClass]=\"panelClass\">\n                    <span\n                        #firstHiddenFocusableEl\n                        role=\"presentation\"\n                        class=\"cax-hidden-accessible cax-hidden-focusable\"\n                        [attr.tabindex]=\"0\"\n                        (focus)=\"onFirstHiddenFocus($event)\"\n                        [attr.data-cax-hidden-accessible]=\"true\"\n                        [attr.data-cax-hidden-focusable]=\"true\"\n                    >\n                    </span>\n                    <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: value, options: options }\"></ng-container>\n                    <div class=\"cax-treeselect-header\" *ngIf=\"filter\" (keydown.arrowdown)=\"onArrowDown($event)\">\n                        <div class=\"cax-treeselect-filter-container\">\n                            <input\n                                #filter\n                                type=\"search\"\n                                autocomplete=\"off\"\n                                class=\"cax-treeselect-filter cax-inputtext cax-component\"\n                                [attr.placeholder]=\"filterPlaceholder\"\n                                (keydown.enter)=\"$event.preventDefault()\"\n                                (input)=\"onFilterInput($event)\"\n                                [value]=\"filterValue\"\n                            />\n                            <SearchIcon *ngIf=\"!filterIconTemplate\" [styleClass]=\"'cax-treeselect-filter-icon'\" />\n                            <span *ngIf=\"filterIconTemplate\" class=\"cax-treeselect-filter-icon\">\n                                <ng-template *ngTemplateOutlet=\"filterIconTemplate\"></ng-template>\n                            </span>\n                        </div>\n                    </div>\n                    <div class=\"cax-treeselect-items-wrapper\" [ngStyle]=\"{ 'max-height': scrollHeight }\">\n                        <cax-tree\n                            #tree\n                            [value]=\"options\"\n                            [rightIcon]=\"showRightIcon\"\n                            [propagateSelectionDown]=\"propagateSelectionDown\"\n                            [propagateSelectionUp]=\"propagateSelectionUp\"\n                            [selectionMode]=\"selectionMode\"\n                            (selectionChange)=\"onSelectionChange($event)\"\n                            [selection]=\"value\"\n                            [metaKeySelection]=\"metaKeySelection\"\n                            (onNodeExpand)=\"nodeExpand($event)\"\n                            (onNodeCollapse)=\"nodeCollapse($event)\"\n                            (onNodeSelect)=\"onSelect($event)\"\n                            [emptyMessage]=\"emptyMessage\"\n                            (onNodeUnselect)=\"onUnselect($event)\"\n                            [filterBy]=\"filterBy\"\n                            [filterMode]=\"filterMode\"\n                            [filterPlaceholder]=\"filterPlaceholder\"\n                            [filterLocale]=\"filterLocale\"\n                            [filteredNodes]=\"filteredNodes\"\n                            [virtualScroll]=\"virtualScroll\"\n                            [virtualScrollItemSize]=\"virtualScrollItemSize\"\n                            [virtualScrollOptions]=\"virtualScrollOptions\"\n                            [_templateMap]=\"templateMap\"\n                            [loading]=\"loading\"\n                        >\n                            <ng-container *ngIf=\"emptyTemplate\">\n                                <ng-template caxTemplate=\"empty\">\n                                    <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n                                </ng-template>\n                            </ng-container>\n                            <ng-template caxTemplate=\"togglericon\" let-expanded *ngIf=\"itemTogglerIconTemplate\">\n                                <ng-container *ngTemplateOutlet=\"itemTogglerIconTemplate; context: { $implicit: expanded }\"></ng-container>\n                            </ng-template>\n                            <ng-template caxTemplate=\"checkboxicon\" let-selected let-partialSelected=\"partialSelected\" *ngIf=\"itemCheckboxIconTemplate\">\n                                <ng-container *ngTemplateOutlet=\"itemCheckboxIconTemplate; context: { $implicit: selected, partialSelected: partialSelected }\"></ng-container>\n                            </ng-template>\n                            <ng-template caxTemplate=\"loadingicon\" *ngIf=\"itemLoadingIconTemplate\">\n                                <ng-container *ngTemplateOutlet=\"itemLoadingIconTemplate\"></ng-container>\n                            </ng-template>\n                        </cax-tree>\n                    </div>\n                    <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: value, options: options }\"></ng-container>\n                    <span\n                        #lastHiddenFocusableEl\n                        role=\"presentation\"\n                        class=\"cax-hidden-accessible cax-hidden-focusable\"\n                        [attr.tabindex]=\"0\"\n                        (focus)=\"onLastHiddenFocus($event)\"\n                        [attr.data-cax-hidden-accessible]=\"true\"\n                        [attr.data-cax-hidden-focusable]=\"true\"\n                    ></span>\n                </div>\n            </ng-template>\n        </cax-overlay>\n    </div>\n</div>\n", styles: ["@layer cax{.cax-dropdown-container{display:flex;flex-direction:column;align-items:flex-start}.cax-dropdown-container label{margin-bottom:8px;font-size:14px;font-weight:500}.cax-dropdown-container label.left-aligned{text-align:left}.cax-treeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.cax-treeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.cax-treeselect-label-container{overflow:hidden;flex:1 1 auto;cursor:pointer;display:flex}.cax-treeselect-label{display:block;white-space:nowrap;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.cax-treeselect-label-empty{overflow:hidden;visibility:hidden}.cax-treeselect-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.cax-treeselect-items-wrapper{overflow:auto}.cax-treeselect-header{display:flex;align-items:center;justify-content:space-between}.cax-treeselect-filter-container{position:relative;flex:1 1 auto}.cax-treeselect-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.cax-treeselect-filter-container .cax-inputtext{width:100%}.cax-treeselect-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative;margin-left:auto}.cax-treeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem}.cax-fluid .cax-treeselect{display:flex}.cax-treeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-treeselect-clearable{position:relative}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.Overlay, selector: "cax-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i1.CaxTemplate, selector: "[caxTemplate]", inputs: ["type", "caxTemplate"] }, { kind: "component", type: i4.Tree, selector: "cax-tree", inputs: ["rightIcon", "value", "selectionMode", "allowUnselect", "loadingMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "nodeActionButton", "nodeActionButtons", "actionButtonMode", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter", "onNodeActionClick", "onNodeFormSubmit", "onLeafNodeMoveConfirm"] }, { kind: "component", type: i5.SearchIcon, selector: "SearchIcon" }, { kind: "component", type: i6.TimesIcon, selector: "TimesIcon" }, { kind: "component", type: i7.ChevronDownIcon, selector: "ChevronDownIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TreeSelect, decorators: [{
             type: Component,