cps-ui-kit 17.15.0 → 17.17.0

package/fesm2022/cps-ui-kit.mjs

@@ -2383,20 +2383,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
  * @group Components
  */
 class CpsBaseTreeDropdownComponent {
-    /**
-     * An array of objects to display as the available options.
-     * @group Props
-     */
-    set options(options) {
-        if (options?.some((o) => o.inner)) {
-            this._options = options;
-            return;
-        }
-        this._options = this._toInnerOptions(options);
-    }
-    get options() {
-        return this._options;
-    }
     set value(value) {
         this._value = value;
         this.onChange(value);
@@ -2537,6 +2523,11 @@ class CpsBaseTreeDropdownComponent {
          * @group Props
          */
         this.showChevron = true;
+        /**
+         * An array of objects to display as the available options.
+         * @group Props
+         */
+        this.options = [];
         /**
          * Value of the component.
          * @group Props
@@ -2548,7 +2539,7 @@ class CpsBaseTreeDropdownComponent {
          * @group Emits
          */
         this.valueChanged = new EventEmitter();
-        this._options = [];
+        this.innerOptions = [];
         this.optionsMap = new Map();
         this.originalOptionsMap = new Map();
         this.virtualListHeight = 240;
@@ -2588,6 +2579,11 @@ class CpsBaseTreeDropdownComponent {
             this._checkErrors();
         });
     }
+    ngOnChanges(changes) {
+        if (changes.options) {
+            this.innerOptions = this._toInnerOptions(this.options);
+        }
+    }
     ngAfterViewInit() {
         this._initContainerClickListener();
         this.recalcVirtualListHeight();
@@ -2599,31 +2595,17 @@ class CpsBaseTreeDropdownComponent {
         this.treeContainerElement?.removeEventListener('click', this._handleOnContainerClick.bind(this));
         this.resizeObserver?.disconnect();
     }
-    _initContainerClickListener() {
-        this.treeContainerElement =
-            this.treeList?.el?.nativeElement?.querySelector('.p-tree-container');
-        if (this.treeContainerElement) {
-            this.treeContainerElement.addEventListener('click', this._handleOnContainerClick.bind(this));
-        }
+    expandAll() {
+        this.optionsMap?.forEach((value) => {
+            if (value.children)
+                value.expanded = true;
+        });
     }
-    _handleOnContainerClick(event) {
-        function getParentWithClass(element, className) {
-            let currentElement = element;
-            while (currentElement) {
-                if (currentElement.classList.contains(className)) {
-                    return currentElement;
-                }
-                currentElement = currentElement.parentElement;
-            }
-            return null;
-        }
-        this.optionFocused = true;
-        const elem = event.target.classList.contains('p-treenode-content')
-            ? event.target
-            : getParentWithClass(event.target, 'p-treenode-content');
-        if (elem?.parentElement?.classList?.contains('cps-tree-node-fully-expandable')) {
-            this.onClickFullyExpandable(elem);
-        }
+    collapseAll() {
+        this.optionsMap?.forEach((value) => {
+            if (value.children)
+                value.expanded = false;
+        });
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -2637,11 +2619,34 @@ class CpsBaseTreeDropdownComponent {
             this.treeSelection = this._valueToTreeSelection(this.value);
         }
     }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setDisabledState(disabled) { }
+    onBlur() {
+        this.control?.control?.markAsTouched();
+        this._checkErrors();
+    }
+    focus() {
+        this.componentContainer?.nativeElement?.focus();
+        this.toggleOptions(true);
+    }
     updateValue(value) {
         this.writeValue(value, true);
         this.onChange(value);
         this.valueChanged.emit(value);
     }
+    clear(event) {
+        event?.stopPropagation();
+        if ((!this.multiple && this.treeSelection) ||
+            (this.multiple && this.treeSelection?.length > 0)) {
+            if (this.openOnClear) {
+                this.toggleOptions(true);
+            }
+            const val = this.multiple ? [] : undefined;
+            this.treeSelection = val;
+            this.updateValue(val);
+        }
+        this.optionFocused = false;
+    }
     onSelectNode() {
         if (!this.multiple) {
             this.toggleOptions(false);
@@ -2652,7 +2657,7 @@ class CpsBaseTreeDropdownComponent {
         const key = this._getHTMLElementKey(parent);
         if (!key)
             return;
-        const treeNode = this.options.find((o) => o.key === key);
+        const treeNode = this.innerOptions.find((o) => o.key === key);
         if (!treeNode)
             return;
         treeNode.expanded = !treeNode.expanded;
@@ -2661,17 +2666,6 @@ class CpsBaseTreeDropdownComponent {
             this._nodeToggled(elem);
         });
     }
-    _getHTMLElementKey(elem) {
-        if (!elem?.classList)
-            return '';
-        const classList = [...elem.classList];
-        const key = classList.find((className) => {
-            return className.startsWith('key-');
-        });
-        if (!key)
-            return '';
-        return key.replace('key-', '');
-    }
     treeSelectionChanged(selection) {
         this.updateValue(this.treeSelectionToValue(selection));
     }
@@ -2751,6 +2745,65 @@ class CpsBaseTreeDropdownComponent {
             this.optionFocused = true;
         }
     }
+    onNodeExpand(event) {
+        this._nodeToggledWithChevron(event?.originalEvent?.currentTarget?.parentElement);
+    }
+    onNodeCollapse(event) {
+        this._nodeToggledWithChevron(event?.originalEvent?.currentTarget?.parentElement);
+    }
+    treeSelectionToValue(selection) {
+        if (!selection)
+            return this.multiple ? [] : undefined;
+        if (this.multiple) {
+            return selection.map((s) => this.originalOptionsMap.get(s.key));
+        }
+        else {
+            return this.originalOptionsMap.get(selection.key);
+        }
+    }
+    // this is a fix of primeng change detection bug when virtual scroller is enabled
+    updateOptions() {
+        if (!this.virtualScroll)
+            return;
+        this.treeList?.updateSerializedValue();
+    }
+    _initContainerClickListener() {
+        this.treeContainerElement =
+            this.treeList?.el?.nativeElement?.querySelector('.p-tree-container');
+        if (this.treeContainerElement) {
+            this.treeContainerElement.addEventListener('click', this._handleOnContainerClick.bind(this));
+        }
+    }
+    _handleOnContainerClick(event) {
+        function getParentWithClass(element, className) {
+            let currentElement = element;
+            while (currentElement) {
+                if (currentElement.classList.contains(className)) {
+                    return currentElement;
+                }
+                currentElement = currentElement.parentElement;
+            }
+            return null;
+        }
+        this.optionFocused = true;
+        const elem = event.target.classList.contains('p-treenode-content')
+            ? event.target
+            : getParentWithClass(event.target, 'p-treenode-content');
+        if (elem?.parentElement?.classList?.contains('cps-tree-node-fully-expandable')) {
+            this.onClickFullyExpandable(elem);
+        }
+    }
+    _getHTMLElementKey(elem) {
+        if (!elem?.classList)
+            return '';
+        const classList = [...elem.classList];
+        const key = classList.find((className) => {
+            return className.startsWith('key-');
+        });
+        if (!key)
+            return '';
+        return key.replace('key-', '');
+    }
     _setTreeListHeight(height) {
         if (this.treeList?.scroller?.style)
             this.treeList.scroller.style.height = height;
@@ -2768,25 +2821,6 @@ class CpsBaseTreeDropdownComponent {
         // fix primeng tree event stop propagation
         this.optionsMenu.selfClick = false;
     }
-    onNodeExpand(event) {
-        this._nodeToggledWithChevron(event?.originalEvent?.currentTarget?.parentElement);
-    }
-    onNodeCollapse(event) {
-        this._nodeToggledWithChevron(event?.originalEvent?.currentTarget?.parentElement);
-    }
-    clear(event) {
-        event.stopPropagation();
-        if ((!this.multiple && this.treeSelection) ||
-            (this.multiple && this.treeSelection?.length > 0)) {
-            if (this.openOnClear) {
-                this.toggleOptions(true);
-            }
-            const val = this.multiple ? [] : undefined;
-            this.treeSelection = val;
-            this.updateValue(val);
-        }
-        this.optionFocused = false;
-    }
     _checkErrors() {
         const errors = this.control?.errors;
         if (!this.control?.control?.touched || !errors) {
@@ -2805,16 +2839,6 @@ class CpsBaseTreeDropdownComponent {
         const message = errArr.find((msg) => typeof msg === 'string');
         this.error = message || 'Unknown error';
     }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    setDisabledState(disabled) { }
-    onBlur() {
-        this.control?.control?.markAsTouched();
-        this._checkErrors();
-    }
-    focus() {
-        this.componentContainer?.nativeElement?.focus();
-        this.toggleOptions(true);
-    }
     _expandToNodes(nodes) {
         function getParentKey(key) {
             const lastSeparatorIndex = key.lastIndexOf('-');
@@ -2841,18 +2865,16 @@ class CpsBaseTreeDropdownComponent {
                 key,
                 styleClass: 'key-' + key
             };
-            if (this.initialExpandAll) {
-                inner.expanded = true;
-            }
             if (o.isDirectory) {
                 inner.type = 'directory';
                 inner.selectable = false;
                 inner.styleClass += ' cps-tree-node-fully-expandable';
-                if (this.initialExpandDirectories) {
+                if (this.initialExpandDirectories)
                     inner.expanded = true;
-                }
             }
             if (o.children) {
+                if (this.initialExpandAll)
+                    inner.expanded = true;
                 inner.children = o.children.map((c, index) => {
                     return mapOption(c, optionLabel, optionInfo, key + '-' + index, originalOptionsMap);
                 });
@@ -2877,16 +2899,6 @@ class CpsBaseTreeDropdownComponent {
         }
         return nodeMap;
     }
-    treeSelectionToValue(selection) {
-        if (!selection)
-            return this.multiple ? [] : undefined;
-        if (this.multiple) {
-            return selection.map((s) => this.originalOptionsMap.get(s.key));
-        }
-        else {
-            return this.originalOptionsMap.get(selection.key);
-        }
-    }
     _valueToTreeSelection(value) {
         function getKey(v, map) {
             for (const [key, val] of map.entries()) {
@@ -2912,14 +2924,8 @@ class CpsBaseTreeDropdownComponent {
             return key ? this.optionsMap.get(key) : undefined;
         }
     }
-    // this is a fix of primeng change detection bug when virtual scroller is enabled
-    updateOptions() {
-        if (!this.virtualScroll)
-            return;
-        this.treeList?.updateSerializedValue();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsBaseTreeDropdownComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsBaseTreeDropdownComponent, selector: "ng-component", inputs: { label: "label", hint: "hint", multiple: "multiple", disabled: "disabled", width: "width", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", optionLabel: "optionLabel", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", initialExpandDirectories: "initialExpandDirectories", initialExpandAll: "initialExpandAll", showChevron: "showChevron", options: "options", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "componentContainer", first: true, predicate: ["componentContainer"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "treeList", first: true, predicate: ["treeList"], descendants: true }, { propertyName: "boxEl", first: true, predicate: ["boxEl"], descendants: true }], ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsBaseTreeDropdownComponent, selector: "ng-component", inputs: { label: "label", hint: "hint", multiple: "multiple", disabled: "disabled", width: "width", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", optionLabel: "optionLabel", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", initialExpandDirectories: "initialExpandDirectories", initialExpandAll: "initialExpandAll", showChevron: "showChevron", options: "options", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "componentContainer", first: true, predicate: ["componentContainer"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "treeList", first: true, predicate: ["treeList"], descendants: true }, { propertyName: "boxEl", first: true, predicate: ["boxEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsBaseTreeDropdownComponent, decorators: [{
             type: Component,
@@ -3051,7 +3057,7 @@ class CpsTreeSelectComponent extends CpsBaseTreeDropdownComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTreeSelectComponent, deps: [{ token: i1.NgControl, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsTreeSelectComponent, isStandalone: true, selector: "cps-tree-select", inputs: { appearance: "appearance", placeholder: "placeholder" }, providers: [CombineLabelsPipe], usesInheritance: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-treeselect\"\n  tabindex=\"0\"\n  [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n  #componentContainer\n  (keydown)=\"onKeyDown($event)\"\n  (blur)=\"onBlur()\">\n  <div class=\"cps-treeselect-label\" *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-treeselect-label-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  </div>\n  <div\n    class=\"cps-treeselect-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div class=\"cps-treeselect-box\" #boxEl (click)=\"onBoxClick()\">\n      <div class=\"cps-treeselect-box-left\">\n        <cps-icon\n          *ngIf=\"prefixIcon\"\n          [icon]=\"prefixIcon\"\n          [style.color]=\"disabled ? '#9a9595' : null\"\n          [size]=\"prefixIconSize\"\n          class=\"prefix-icon\">\n        </cps-icon>\n        <div\n          class=\"cps-treeselect-box-placeholder\"\n          *ngIf=\"\n            (!treeSelection && !multiple) ||\n            (treeSelection?.length < 1 && multiple)\n          \">\n          {{ placeholder }}\n        </div>\n        <div\n          class=\"cps-treeselect-box-items\"\n          *ngIf=\"\n            (treeSelection && !multiple) ||\n            (treeSelection?.length > 0 && multiple)\n          \">\n          <span *ngIf=\"!multiple\" class=\"single-item\">\n            {{ treeSelection.label }}</span\n          >\n          <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n            <span class=\"text-group-item\">\n              {{ treeSelection | combineLabels: options : '' : 'label' : true }}\n            </span>\n          </div>\n\n          <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n            <cps-chip\n              *ngFor=\"let val of treeSelection\"\n              [disabled]=\"disabled\"\n              [closable]=\"closableChips\"\n              (closed)=\"remove(val)\"\n              [label]=\"val.label\">\n            </cps-chip>\n          </div>\n        </div>\n      </div>\n      <span class=\"cps-treeselect-box-icons\">\n        <span\n          *ngIf=\"clearable && !disabled\"\n          [style.visibility]=\"\n            persistentClear ||\n            (!persistentClear &&\n              ((multiple && treeSelection?.length) ||\n                (!multiple && treeSelection)))\n              ? 'visible'\n              : 'hidden'\n          \"\n          class=\"cps-treeselect-box-clear-icon\">\n          <cps-icon\n            icon=\"delete\"\n            size=\"small\"\n            (click)=\"clear($event)\"></cps-icon>\n        </span>\n        <span *ngIf=\"showChevron\" class=\"cps-treeselect-box-chevron\">\n          <cps-icon\n            icon=\"chevron-down\"\n            size=\"small\"\n            [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n        </span>\n      </span>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-treeselect-options-menu\">\n      <div\n        class=\"cps-treeselect-options\"\n        [ngStyle]=\"{\n          width: boxWidth + 'px'\n        }\">\n        <p-tree\n          #treeList\n          [virtualScroll]=\"virtualScroll\"\n          [virtualScrollItemSize]=\"virtualScrollItemSize\"\n          [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n          [scrollHeight]=\"virtualListHeight + 'px'\"\n          (onNodeSelect)=\"onSelectNode()\"\n          (onNodeExpand)=\"onNodeExpand($event)\"\n          (onNodeCollapse)=\"onNodeCollapse($event)\"\n          [value]=\"options\"\n          [(selection)]=\"treeSelection\"\n          (selectionChange)=\"treeSelectionChanged($event)\"\n          [metaKeySelection]=\"multiple ? false : true\"\n          [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n          <ng-template let-node pTemplate=\"directory\">\n            <span class=\"cps-treeselect-directory-elem\">{{ node.label }}</span>\n          </ng-template>\n          <ng-template let-node pTemplate=\"default\">\n            <span class=\"cps-treeselect-option\">\n              <span class=\"cps-treeselect-option-left\">\n                <span *ngIf=\"multiple\" class=\"cps-treeselect-option-check\">\n                </span>\n                <span\n                  class=\"cps-treeselect-option-label\"\n                  [class.virtual-row]=\"virtualScroll\"\n                  >{{ node.label }}</span\n                >\n              </span>\n              <span\n                class=\"cps-treeselect-option-info\"\n                [class.virtual-row]=\"virtualScroll\"\n                >{{ node.info }}</span\n              >\n            </span>\n          </ng-template>\n        </p-tree>\n      </div>\n    </cps-menu>\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"cps-treeselect-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeselect-hint\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-treeselect-error\">\n    {{ error }}\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeselect .cps-treeselect-container{position:relative}:host .cps-treeselect .cps-treeselect-container .cps-treeselect-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeselect .cps-treeselect-container.borderless .cps-treeselect-box,:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeselect.active .cps-treeselect-box{border:1px solid var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeselect .cps-treeselect-label .cps-treeselect-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:3px;margin-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect .cps-treeselect-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect.disabled{pointer-events:none}:host .cps-treeselect.disabled .cps-treeselect-box{background:#f7f7f7}:host .cps-treeselect.disabled .cps-treeselect-box-items{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-box-items .text-group,:host .cps-treeselect.disabled .cps-treeselect-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-label{color:var(--cps-color-text-mild)}:host .cps-treeselect.error .cps-treeselect-box{border-color:var(--cps-color-error)!important;background:#fef3f2!important}.cps-treeselect-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeselect-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeselect-options ::ng-deep .cps-treeselect-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeselect-options ::ng-deep .cps-treeselect-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeselect-options ::ng-deep .cps-treeselect-option .virtual-row{white-space:nowrap}.cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeselect-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode{padding:unset;outline:0 none}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeselect-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeselect-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content:not(.p-highlight){background-color:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeselect-option-check{opacity:1}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected-dark)}.cps-treeselect-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeselect-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content .p-tree-toggler{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeselect-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeselect-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i3$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsTreeSelectComponent, isStandalone: true, selector: "cps-tree-select", inputs: { appearance: "appearance", placeholder: "placeholder" }, providers: [CombineLabelsPipe], usesInheritance: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-treeselect\"\n  tabindex=\"0\"\n  [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n  #componentContainer\n  (keydown)=\"onKeyDown($event)\"\n  (blur)=\"onBlur()\">\n  <div class=\"cps-treeselect-label\" *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-treeselect-label-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  </div>\n  <div\n    class=\"cps-treeselect-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div class=\"cps-treeselect-box\" #boxEl (click)=\"onBoxClick()\">\n      <div class=\"cps-treeselect-box-left\">\n        <cps-icon\n          *ngIf=\"prefixIcon\"\n          [icon]=\"prefixIcon\"\n          [style.color]=\"disabled ? '#9a9595' : null\"\n          [size]=\"prefixIconSize\"\n          class=\"prefix-icon\">\n        </cps-icon>\n        <div\n          class=\"cps-treeselect-box-placeholder\"\n          *ngIf=\"\n            (!treeSelection && !multiple) ||\n            (treeSelection?.length < 1 && multiple)\n          \">\n          {{ placeholder }}\n        </div>\n        <div\n          class=\"cps-treeselect-box-items\"\n          *ngIf=\"\n            (treeSelection && !multiple) ||\n            (treeSelection?.length > 0 && multiple)\n          \">\n          <span *ngIf=\"!multiple\" class=\"single-item\">\n            {{ treeSelection.label }}</span\n          >\n          <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n            <span class=\"text-group-item\">\n              {{\n                treeSelection\n                  | combineLabels: innerOptions : '' : 'label' : true\n              }}\n            </span>\n          </div>\n\n          <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n            <cps-chip\n              *ngFor=\"let val of treeSelection\"\n              [disabled]=\"disabled\"\n              [closable]=\"closableChips\"\n              (closed)=\"remove(val)\"\n              [label]=\"val.label\">\n            </cps-chip>\n          </div>\n        </div>\n      </div>\n      <span class=\"cps-treeselect-box-icons\">\n        <span\n          *ngIf=\"clearable && !disabled\"\n          [style.visibility]=\"\n            persistentClear ||\n            (!persistentClear &&\n              ((multiple && treeSelection?.length) ||\n                (!multiple && treeSelection)))\n              ? 'visible'\n              : 'hidden'\n          \"\n          class=\"cps-treeselect-box-clear-icon\">\n          <cps-icon\n            icon=\"delete\"\n            size=\"small\"\n            (click)=\"clear($event)\"></cps-icon>\n        </span>\n        <span *ngIf=\"showChevron\" class=\"cps-treeselect-box-chevron\">\n          <cps-icon\n            icon=\"chevron-down\"\n            size=\"small\"\n            [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n        </span>\n      </span>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-treeselect-options-menu\">\n      <div\n        class=\"cps-treeselect-options\"\n        [ngStyle]=\"{\n          width: boxWidth + 'px'\n        }\">\n        <p-tree\n          #treeList\n          [virtualScroll]=\"virtualScroll\"\n          [virtualScrollItemSize]=\"virtualScrollItemSize\"\n          [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n          [scrollHeight]=\"virtualListHeight + 'px'\"\n          (onNodeSelect)=\"onSelectNode()\"\n          (onNodeExpand)=\"onNodeExpand($event)\"\n          (onNodeCollapse)=\"onNodeCollapse($event)\"\n          [value]=\"innerOptions\"\n          [(selection)]=\"treeSelection\"\n          (selectionChange)=\"treeSelectionChanged($event)\"\n          [metaKeySelection]=\"multiple ? false : true\"\n          [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n          <ng-template let-node pTemplate=\"directory\">\n            <span class=\"cps-treeselect-directory-elem\">{{ node.label }}</span>\n          </ng-template>\n          <ng-template let-node pTemplate=\"default\">\n            <span class=\"cps-treeselect-option\">\n              <span class=\"cps-treeselect-option-left\">\n                <span *ngIf=\"multiple\" class=\"cps-treeselect-option-check\">\n                </span>\n                <span\n                  class=\"cps-treeselect-option-label\"\n                  [class.virtual-row]=\"virtualScroll\"\n                  >{{ node.label }}</span\n                >\n              </span>\n              <span\n                class=\"cps-treeselect-option-info\"\n                [class.virtual-row]=\"virtualScroll\"\n                >{{ node.info }}</span\n              >\n            </span>\n          </ng-template>\n        </p-tree>\n      </div>\n    </cps-menu>\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"cps-treeselect-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeselect-hint\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-treeselect-error\">\n    {{ error }}\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeselect .cps-treeselect-container{position:relative}:host .cps-treeselect .cps-treeselect-container .cps-treeselect-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeselect .cps-treeselect-container.borderless .cps-treeselect-box,:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeselect.active .cps-treeselect-box{border:1px solid var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeselect .cps-treeselect-label .cps-treeselect-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:3px;margin-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect .cps-treeselect-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect.disabled{pointer-events:none}:host .cps-treeselect.disabled .cps-treeselect-box{background:#f7f7f7}:host .cps-treeselect.disabled .cps-treeselect-box-items{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-box-items .text-group,:host .cps-treeselect.disabled .cps-treeselect-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-label{color:var(--cps-color-text-mild)}:host .cps-treeselect.error .cps-treeselect-box{border-color:var(--cps-color-error)!important;background:#fef3f2!important}.cps-treeselect-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeselect-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeselect-options ::ng-deep .cps-treeselect-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeselect-options ::ng-deep .cps-treeselect-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeselect-options ::ng-deep .cps-treeselect-option .virtual-row{white-space:nowrap}.cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeselect-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode{padding:unset;outline:0 none;min-width:fit-content}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeselect-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeselect-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content:not(.p-highlight){background-color:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeselect-option-check{opacity:1}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected-dark)}.cps-treeselect-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeselect-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content .p-tree-toggler{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeselect-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeselect-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i3$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTreeSelectComponent, decorators: [{
             type: Component,
@@ -3065,7 +3071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         CpsInfoCircleComponent,
                         CombineLabelsPipe,
                         CpsMenuComponent
-                    ], providers: [CombineLabelsPipe], selector: 'cps-tree-select', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-treeselect\"\n  tabindex=\"0\"\n  [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n  #componentContainer\n  (keydown)=\"onKeyDown($event)\"\n  (blur)=\"onBlur()\">\n  <div class=\"cps-treeselect-label\" *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-treeselect-label-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  </div>\n  <div\n    class=\"cps-treeselect-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div class=\"cps-treeselect-box\" #boxEl (click)=\"onBoxClick()\">\n      <div class=\"cps-treeselect-box-left\">\n        <cps-icon\n          *ngIf=\"prefixIcon\"\n          [icon]=\"prefixIcon\"\n          [style.color]=\"disabled ? '#9a9595' : null\"\n          [size]=\"prefixIconSize\"\n          class=\"prefix-icon\">\n        </cps-icon>\n        <div\n          class=\"cps-treeselect-box-placeholder\"\n          *ngIf=\"\n            (!treeSelection && !multiple) ||\n            (treeSelection?.length < 1 && multiple)\n          \">\n          {{ placeholder }}\n        </div>\n        <div\n          class=\"cps-treeselect-box-items\"\n          *ngIf=\"\n            (treeSelection && !multiple) ||\n            (treeSelection?.length > 0 && multiple)\n          \">\n          <span *ngIf=\"!multiple\" class=\"single-item\">\n            {{ treeSelection.label }}</span\n          >\n          <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n            <span class=\"text-group-item\">\n              {{ treeSelection | combineLabels: options : '' : 'label' : true }}\n            </span>\n          </div>\n\n          <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n            <cps-chip\n              *ngFor=\"let val of treeSelection\"\n              [disabled]=\"disabled\"\n              [closable]=\"closableChips\"\n              (closed)=\"remove(val)\"\n              [label]=\"val.label\">\n            </cps-chip>\n          </div>\n        </div>\n      </div>\n      <span class=\"cps-treeselect-box-icons\">\n        <span\n          *ngIf=\"clearable && !disabled\"\n          [style.visibility]=\"\n            persistentClear ||\n            (!persistentClear &&\n              ((multiple && treeSelection?.length) ||\n                (!multiple && treeSelection)))\n              ? 'visible'\n              : 'hidden'\n          \"\n          class=\"cps-treeselect-box-clear-icon\">\n          <cps-icon\n            icon=\"delete\"\n            size=\"small\"\n            (click)=\"clear($event)\"></cps-icon>\n        </span>\n        <span *ngIf=\"showChevron\" class=\"cps-treeselect-box-chevron\">\n          <cps-icon\n            icon=\"chevron-down\"\n            size=\"small\"\n            [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n        </span>\n      </span>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-treeselect-options-menu\">\n      <div\n        class=\"cps-treeselect-options\"\n        [ngStyle]=\"{\n          width: boxWidth + 'px'\n        }\">\n        <p-tree\n          #treeList\n          [virtualScroll]=\"virtualScroll\"\n          [virtualScrollItemSize]=\"virtualScrollItemSize\"\n          [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n          [scrollHeight]=\"virtualListHeight + 'px'\"\n          (onNodeSelect)=\"onSelectNode()\"\n          (onNodeExpand)=\"onNodeExpand($event)\"\n          (onNodeCollapse)=\"onNodeCollapse($event)\"\n          [value]=\"options\"\n          [(selection)]=\"treeSelection\"\n          (selectionChange)=\"treeSelectionChanged($event)\"\n          [metaKeySelection]=\"multiple ? false : true\"\n          [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n          <ng-template let-node pTemplate=\"directory\">\n            <span class=\"cps-treeselect-directory-elem\">{{ node.label }}</span>\n          </ng-template>\n          <ng-template let-node pTemplate=\"default\">\n            <span class=\"cps-treeselect-option\">\n              <span class=\"cps-treeselect-option-left\">\n                <span *ngIf=\"multiple\" class=\"cps-treeselect-option-check\">\n                </span>\n                <span\n                  class=\"cps-treeselect-option-label\"\n                  [class.virtual-row]=\"virtualScroll\"\n                  >{{ node.label }}</span\n                >\n              </span>\n              <span\n                class=\"cps-treeselect-option-info\"\n                [class.virtual-row]=\"virtualScroll\"\n                >{{ node.info }}</span\n              >\n            </span>\n          </ng-template>\n        </p-tree>\n      </div>\n    </cps-menu>\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"cps-treeselect-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeselect-hint\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-treeselect-error\">\n    {{ error }}\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeselect .cps-treeselect-container{position:relative}:host .cps-treeselect .cps-treeselect-container .cps-treeselect-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeselect .cps-treeselect-container.borderless .cps-treeselect-box,:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeselect.active .cps-treeselect-box{border:1px solid var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeselect .cps-treeselect-label .cps-treeselect-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:3px;margin-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect .cps-treeselect-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect.disabled{pointer-events:none}:host .cps-treeselect.disabled .cps-treeselect-box{background:#f7f7f7}:host .cps-treeselect.disabled .cps-treeselect-box-items{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-box-items .text-group,:host .cps-treeselect.disabled .cps-treeselect-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-label{color:var(--cps-color-text-mild)}:host .cps-treeselect.error .cps-treeselect-box{border-color:var(--cps-color-error)!important;background:#fef3f2!important}.cps-treeselect-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeselect-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeselect-options ::ng-deep .cps-treeselect-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeselect-options ::ng-deep .cps-treeselect-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeselect-options ::ng-deep .cps-treeselect-option .virtual-row{white-space:nowrap}.cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeselect-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode{padding:unset;outline:0 none}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeselect-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeselect-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content:not(.p-highlight){background-color:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeselect-option-check{opacity:1}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected-dark)}.cps-treeselect-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeselect-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content .p-tree-toggler{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeselect-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeselect-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:16px}\n"] }]
+                    ], providers: [CombineLabelsPipe], selector: 'cps-tree-select', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-treeselect\"\n  tabindex=\"0\"\n  [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n  #componentContainer\n  (keydown)=\"onKeyDown($event)\"\n  (blur)=\"onBlur()\">\n  <div class=\"cps-treeselect-label\" *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-treeselect-label-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  </div>\n  <div\n    class=\"cps-treeselect-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div class=\"cps-treeselect-box\" #boxEl (click)=\"onBoxClick()\">\n      <div class=\"cps-treeselect-box-left\">\n        <cps-icon\n          *ngIf=\"prefixIcon\"\n          [icon]=\"prefixIcon\"\n          [style.color]=\"disabled ? '#9a9595' : null\"\n          [size]=\"prefixIconSize\"\n          class=\"prefix-icon\">\n        </cps-icon>\n        <div\n          class=\"cps-treeselect-box-placeholder\"\n          *ngIf=\"\n            (!treeSelection && !multiple) ||\n            (treeSelection?.length < 1 && multiple)\n          \">\n          {{ placeholder }}\n        </div>\n        <div\n          class=\"cps-treeselect-box-items\"\n          *ngIf=\"\n            (treeSelection && !multiple) ||\n            (treeSelection?.length > 0 && multiple)\n          \">\n          <span *ngIf=\"!multiple\" class=\"single-item\">\n            {{ treeSelection.label }}</span\n          >\n          <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n            <span class=\"text-group-item\">\n              {{\n                treeSelection\n                  | combineLabels: innerOptions : '' : 'label' : true\n              }}\n            </span>\n          </div>\n\n          <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n            <cps-chip\n              *ngFor=\"let val of treeSelection\"\n              [disabled]=\"disabled\"\n              [closable]=\"closableChips\"\n              (closed)=\"remove(val)\"\n              [label]=\"val.label\">\n            </cps-chip>\n          </div>\n        </div>\n      </div>\n      <span class=\"cps-treeselect-box-icons\">\n        <span\n          *ngIf=\"clearable && !disabled\"\n          [style.visibility]=\"\n            persistentClear ||\n            (!persistentClear &&\n              ((multiple && treeSelection?.length) ||\n                (!multiple && treeSelection)))\n              ? 'visible'\n              : 'hidden'\n          \"\n          class=\"cps-treeselect-box-clear-icon\">\n          <cps-icon\n            icon=\"delete\"\n            size=\"small\"\n            (click)=\"clear($event)\"></cps-icon>\n        </span>\n        <span *ngIf=\"showChevron\" class=\"cps-treeselect-box-chevron\">\n          <cps-icon\n            icon=\"chevron-down\"\n            size=\"small\"\n            [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n        </span>\n      </span>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-treeselect-options-menu\">\n      <div\n        class=\"cps-treeselect-options\"\n        [ngStyle]=\"{\n          width: boxWidth + 'px'\n        }\">\n        <p-tree\n          #treeList\n          [virtualScroll]=\"virtualScroll\"\n          [virtualScrollItemSize]=\"virtualScrollItemSize\"\n          [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n          [scrollHeight]=\"virtualListHeight + 'px'\"\n          (onNodeSelect)=\"onSelectNode()\"\n          (onNodeExpand)=\"onNodeExpand($event)\"\n          (onNodeCollapse)=\"onNodeCollapse($event)\"\n          [value]=\"innerOptions\"\n          [(selection)]=\"treeSelection\"\n          (selectionChange)=\"treeSelectionChanged($event)\"\n          [metaKeySelection]=\"multiple ? false : true\"\n          [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n          <ng-template let-node pTemplate=\"directory\">\n            <span class=\"cps-treeselect-directory-elem\">{{ node.label }}</span>\n          </ng-template>\n          <ng-template let-node pTemplate=\"default\">\n            <span class=\"cps-treeselect-option\">\n              <span class=\"cps-treeselect-option-left\">\n                <span *ngIf=\"multiple\" class=\"cps-treeselect-option-check\">\n                </span>\n                <span\n                  class=\"cps-treeselect-option-label\"\n                  [class.virtual-row]=\"virtualScroll\"\n                  >{{ node.label }}</span\n                >\n              </span>\n              <span\n                class=\"cps-treeselect-option-info\"\n                [class.virtual-row]=\"virtualScroll\"\n                >{{ node.info }}</span\n              >\n            </span>\n          </ng-template>\n        </p-tree>\n      </div>\n    </cps-menu>\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"cps-treeselect-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeselect-hint\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-treeselect-error\">\n    {{ error }}\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeselect .cps-treeselect-container{position:relative}:host .cps-treeselect .cps-treeselect-container .cps-treeselect-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeselect .cps-treeselect-container.borderless .cps-treeselect-box,:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeselect.active .cps-treeselect-box{border:1px solid var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect.active .cps-treeselect-box .cps-treeselect-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeselect .cps-treeselect-label .cps-treeselect-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:3px;margin-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect .cps-treeselect-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect.disabled{pointer-events:none}:host .cps-treeselect.disabled .cps-treeselect-box{background:#f7f7f7}:host .cps-treeselect.disabled .cps-treeselect-box-items{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-box-items .text-group,:host .cps-treeselect.disabled .cps-treeselect-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-label{color:var(--cps-color-text-mild)}:host .cps-treeselect.error .cps-treeselect-box{border-color:var(--cps-color-error)!important;background:#fef3f2!important}.cps-treeselect-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeselect-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeselect-options ::ng-deep .cps-treeselect-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeselect-options ::ng-deep .cps-treeselect-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeselect-options ::ng-deep .cps-treeselect-option .virtual-row{white-space:nowrap}.cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeselect-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode{padding:unset;outline:0 none;min-width:fit-content}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeselect-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeselect-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content:not(.p-highlight){background-color:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeselect-option-check{opacity:1}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected-dark)}.cps-treeselect-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeselect-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content .p-tree-toggler{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeselect-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeselect-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:16px}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Optional
                 }] }, { type: i0.ChangeDetectorRef }], propDecorators: { appearance: [{
@@ -3994,28 +4000,6 @@ class CpsTreeAutocompleteComponent extends CpsBaseTreeDropdownComponent {
             this.focusInput();
         }, 0);
     }
-    _select(option) {
-        function includes(array, val) {
-            return array?.some((item) => isEqual(item, val)) || false;
-        }
-        this.backspaceClickedOnce = false;
-        if (this.multiple) {
-            if (includes(this.treeSelection, option)) {
-                this.treeSelection = this.treeSelection.filter((v) => !isEqual(v, option));
-            }
-            else {
-                this.treeSelection.push(option);
-            }
-        }
-        else {
-            this.treeSelection = option;
-        }
-        this.updateValue(this.treeSelectionToValue(this.treeSelection));
-        this._clearInput();
-        setTimeout(() => {
-            this.focusInput();
-        }, 0);
-    }
     clear(event) {
         super.clear(event);
         this._clearInput();
@@ -4044,6 +4028,28 @@ class CpsTreeAutocompleteComponent extends CpsBaseTreeDropdownComponent {
         else
             this.treeList._filter(searchVal);
     }
+    _select(option) {
+        function includes(array, val) {
+            return array?.some((item) => isEqual(item, val)) || false;
+        }
+        this.backspaceClickedOnce = false;
+        if (this.multiple) {
+            if (includes(this.treeSelection, option)) {
+                this.treeSelection = this.treeSelection.filter((v) => !isEqual(v, option));
+            }
+            else {
+                this.treeSelection.push(option);
+            }
+        }
+        else {
+            this.treeSelection = option;
+        }
+        this.updateValue(this.treeSelectionToValue(this.treeSelection));
+        this._clearInput();
+        setTimeout(() => {
+            this.focusInput();
+        }, 0);
+    }
     _getValueLabel() {
         return this.treeSelection?.label || '';
     }
@@ -4106,7 +4112,7 @@ class CpsTreeAutocompleteComponent extends CpsBaseTreeDropdownComponent {
         }, 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTreeAutocompleteComponent, deps: [{ token: i1.NgControl, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsTreeAutocompleteComponent, isStandalone: true, selector: "cps-tree-autocomplete", inputs: { emptyMessage: "emptyMessage", appearance: "appearance", placeholder: "placeholder" }, usesInheritance: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-treeautocomplete\"\n  tabindex=\"1\"\n  [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n  #componentContainer>\n  <div class=\"cps-treeautocomplete-label\" *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-treeautocomplete-label-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  </div>\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-treeautocomplete-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div class=\"cps-treeautocomplete-box\" #boxEl (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-treeautocomplete-box-area\">\n        <cps-icon\n          *ngIf=\"prefixIcon\"\n          [icon]=\"prefixIcon\"\n          [style.color]=\"disabled ? '#9a9595' : null\"\n          [size]=\"prefixIconSize\"\n          class=\"prefix-icon\">\n        </cps-icon>\n        <div\n          class=\"cps-treeautocomplete-box-items\"\n          *ngIf=\"\n            (treeSelection && !multiple) ||\n              (treeSelection?.length > 0 && multiple);\n            else treeAutocompleteInput\n          \">\n          <span *ngIf=\"!multiple\" class=\"single-item\">\n            <div class=\"single-item-selection\">\n              <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                treeSelection.label\n              }}</span>\n            </div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                treeAutocompleteInput;\n                context: {\n                  inputClass: 'single-item-input',\n                  inputStyle: activeSingle ? 'opacity: 1' : null\n                }\n              \">\n            </ng-container>\n          </span>\n\n          <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n            <div\n              *ngFor=\"let val of treeSelection; let last = last\"\n              class=\"text-group-item\"\n              [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n              {{ val.label }}{{ !last ? ',' : '' }}\n            </div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                treeAutocompleteInput;\n                context: {\n                  inputClass: 'multi-item-input'\n                }\n              \"></ng-container>\n          </div>\n\n          <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n            <cps-chip\n              *ngFor=\"let val of treeSelection; let last = last\"\n              [disabled]=\"disabled\"\n              [closable]=\"closableChips\"\n              (closed)=\"remove(val)\"\n              [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n              [label]=\"val.label\">\n            </cps-chip>\n            <ng-container\n              *ngTemplateOutlet=\"\n                treeAutocompleteInput;\n                context: {\n                  inputClass: 'multi-chip-input'\n                }\n              \"></ng-container>\n          </div>\n        </div>\n        <span class=\"cps-treeautocomplete-box-icons\">\n          <span\n            *ngIf=\"clearable && !disabled\"\n            [style.visibility]=\"\n              persistentClear ||\n              (!persistentClear &&\n                ((multiple && treeSelection?.length) ||\n                  (!multiple && treeSelection)))\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-treeautocomplete-box-clear-icon\">\n            <cps-icon\n              icon=\"delete\"\n              size=\"small\"\n              (click)=\"clear($event)\"></cps-icon>\n          </span>\n          <span\n            *ngIf=\"showChevron\"\n            class=\"cps-treeautocomplete-box-chevron\"\n            (mousedown)=\"onChevronClick($event)\">\n            <cps-icon\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-treeautocomplete-options-menu\">\n      <div\n        class=\"cps-treeautocomplete-options\"\n        [ngStyle]=\"{\n          width: boxWidth + 'px'\n        }\">\n        <p-tree\n          #treeList\n          [emptyMessage]=\"emptyMessage\"\n          [virtualScroll]=\"virtualScroll\"\n          [virtualScrollItemSize]=\"virtualScrollItemSize\"\n          [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n          [scrollHeight]=\"virtualListHeight + 'px'\"\n          (onNodeSelect)=\"onSelectNode()\"\n          (onNodeExpand)=\"onNodeExpand($event)\"\n          (onNodeCollapse)=\"onNodeCollapse($event)\"\n          (onFilter)=\"onFilterOptions()\"\n          [value]=\"options\"\n          [(selection)]=\"treeSelection\"\n          (selectionChange)=\"treeSelectionChanged($event)\"\n          [metaKeySelection]=\"multiple ? false : true\"\n          [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n          <ng-template let-node pTemplate=\"directory\">\n            <span class=\"cps-treeautocomplete-directory-elem\">{{\n              node.label\n            }}</span>\n          </ng-template>\n          <ng-template let-node pTemplate=\"default\">\n            <span class=\"cps-treeautocomplete-option\">\n              <span class=\"cps-treeautocomplete-option-left\">\n                <span\n                  *ngIf=\"multiple\"\n                  class=\"cps-treeautocomplete-option-check\">\n                </span>\n                <span\n                  class=\"cps-treeautocomplete-option-label\"\n                  [class.virtual-row]=\"virtualScroll\"\n                  >{{ node.label }}</span\n                >\n              </span>\n              <span\n                class=\"cps-treeautocomplete-option-info\"\n                [class.virtual-row]=\"virtualScroll\"\n                >{{ node.info }}</span\n              >\n            </span>\n          </ng-template>\n        </p-tree>\n      </div>\n    </cps-menu>\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"cps-treeautocomplete-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeautocomplete-hint\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-treeautocomplete-error\">\n    {{ error }}\n  </div>\n</div>\n\n<ng-template\n  #treeAutocompleteInput\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    class=\"cps-treeautocomplete-box-input\"\n    spellcheck=\"false\"\n    [class]=\"inputClass\"\n    [style]=\"inputStyle\"\n    [placeholder]=\"\n      (!treeSelection && !multiple) || (treeSelection?.length < 1 && multiple)\n        ? placeholder\n        : ''\n    \"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeautocomplete .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:#fff!important}:host .cps-treeautocomplete .cps-treeautocomplete-container.borderless .cps-treeautocomplete-box,:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-label .cps-treeautocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-box-input{min-height:36px;padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:3px;padding-bottom:3px;min-height:36px;justify-content:center;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-item-input{min-height:28px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-treeautocomplete .cps-treeautocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete .cps-treeautocomplete-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete.disabled{pointer-events:none}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box{background:#f7f7f7}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .text-group,:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-label{color:var(--cps-color-text-mild)}:host .cps-treeautocomplete.error .cps-treeautocomplete-box{border-color:var(--cps-color-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-treeautocomplete-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option .virtual-row{white-space:nowrap}.cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode{padding:unset;outline:0 none}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeautocomplete-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content:not(.p-highlight){background-color:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeautocomplete-option-check{opacity:1}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected-dark)}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content .p-tree-toggler{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeautocomplete-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeautocomplete-options ::ng-deep .p-tree-empty-message{padding:11px;font-size:16px;cursor:default}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-directory-elem{font-weight:700;font-size:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i3$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsTreeAutocompleteComponent, isStandalone: true, selector: "cps-tree-autocomplete", inputs: { emptyMessage: "emptyMessage", appearance: "appearance", placeholder: "placeholder" }, usesInheritance: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-treeautocomplete\"\n  tabindex=\"1\"\n  [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n  #componentContainer>\n  <div class=\"cps-treeautocomplete-label\" *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-treeautocomplete-label-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  </div>\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-treeautocomplete-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div class=\"cps-treeautocomplete-box\" #boxEl (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-treeautocomplete-box-area\">\n        <cps-icon\n          *ngIf=\"prefixIcon\"\n          [icon]=\"prefixIcon\"\n          [style.color]=\"disabled ? '#9a9595' : null\"\n          [size]=\"prefixIconSize\"\n          class=\"prefix-icon\">\n        </cps-icon>\n        <div\n          class=\"cps-treeautocomplete-box-items\"\n          *ngIf=\"\n            (treeSelection && !multiple) ||\n              (treeSelection?.length > 0 && multiple);\n            else treeAutocompleteInput\n          \">\n          <span *ngIf=\"!multiple\" class=\"single-item\">\n            <div class=\"single-item-selection\">\n              <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                treeSelection.label\n              }}</span>\n            </div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                treeAutocompleteInput;\n                context: {\n                  inputClass: 'single-item-input',\n                  inputStyle: activeSingle ? 'opacity: 1' : null\n                }\n              \">\n            </ng-container>\n          </span>\n\n          <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n            <div\n              *ngFor=\"let val of treeSelection; let last = last\"\n              class=\"text-group-item\"\n              [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n              {{ val.label }}{{ !last ? ',' : '' }}\n            </div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                treeAutocompleteInput;\n                context: {\n                  inputClass: 'multi-item-input'\n                }\n              \"></ng-container>\n          </div>\n\n          <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n            <cps-chip\n              *ngFor=\"let val of treeSelection; let last = last\"\n              [disabled]=\"disabled\"\n              [closable]=\"closableChips\"\n              (closed)=\"remove(val)\"\n              [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n              [label]=\"val.label\">\n            </cps-chip>\n            <ng-container\n              *ngTemplateOutlet=\"\n                treeAutocompleteInput;\n                context: {\n                  inputClass: 'multi-chip-input'\n                }\n              \"></ng-container>\n          </div>\n        </div>\n        <span class=\"cps-treeautocomplete-box-icons\">\n          <span\n            *ngIf=\"clearable && !disabled\"\n            [style.visibility]=\"\n              persistentClear ||\n              (!persistentClear &&\n                ((multiple && treeSelection?.length) ||\n                  (!multiple && treeSelection)))\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-treeautocomplete-box-clear-icon\">\n            <cps-icon\n              icon=\"delete\"\n              size=\"small\"\n              (click)=\"clear($event)\"></cps-icon>\n          </span>\n          <span\n            *ngIf=\"showChevron\"\n            class=\"cps-treeautocomplete-box-chevron\"\n            (mousedown)=\"onChevronClick($event)\">\n            <cps-icon\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-treeautocomplete-options-menu\">\n      <div\n        class=\"cps-treeautocomplete-options\"\n        [ngStyle]=\"{\n          width: boxWidth + 'px'\n        }\">\n        <p-tree\n          #treeList\n          [emptyMessage]=\"emptyMessage\"\n          [virtualScroll]=\"virtualScroll\"\n          [virtualScrollItemSize]=\"virtualScrollItemSize\"\n          [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n          [scrollHeight]=\"virtualListHeight + 'px'\"\n          (onNodeSelect)=\"onSelectNode()\"\n          (onNodeExpand)=\"onNodeExpand($event)\"\n          (onNodeCollapse)=\"onNodeCollapse($event)\"\n          (onFilter)=\"onFilterOptions()\"\n          [value]=\"innerOptions\"\n          [(selection)]=\"treeSelection\"\n          (selectionChange)=\"treeSelectionChanged($event)\"\n          [metaKeySelection]=\"multiple ? false : true\"\n          [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n          <ng-template let-node pTemplate=\"directory\">\n            <span class=\"cps-treeautocomplete-directory-elem\">{{\n              node.label\n            }}</span>\n          </ng-template>\n          <ng-template let-node pTemplate=\"default\">\n            <span class=\"cps-treeautocomplete-option\">\n              <span class=\"cps-treeautocomplete-option-left\">\n                <span\n                  *ngIf=\"multiple\"\n                  class=\"cps-treeautocomplete-option-check\">\n                </span>\n                <span\n                  class=\"cps-treeautocomplete-option-label\"\n                  [class.virtual-row]=\"virtualScroll\"\n                  >{{ node.label }}</span\n                >\n              </span>\n              <span\n                class=\"cps-treeautocomplete-option-info\"\n                [class.virtual-row]=\"virtualScroll\"\n                >{{ node.info }}</span\n              >\n            </span>\n          </ng-template>\n        </p-tree>\n      </div>\n    </cps-menu>\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"cps-treeautocomplete-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeautocomplete-hint\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-treeautocomplete-error\">\n    {{ error }}\n  </div>\n</div>\n\n<ng-template\n  #treeAutocompleteInput\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    class=\"cps-treeautocomplete-box-input\"\n    spellcheck=\"false\"\n    [class]=\"inputClass\"\n    [style]=\"inputStyle\"\n    [placeholder]=\"\n      (!treeSelection && !multiple) || (treeSelection?.length < 1 && multiple)\n        ? placeholder\n        : ''\n    \"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeautocomplete .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:#fff!important}:host .cps-treeautocomplete .cps-treeautocomplete-container.borderless .cps-treeautocomplete-box,:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-label .cps-treeautocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-box-input{min-height:36px;padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:3px;padding-bottom:3px;min-height:36px;justify-content:center;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-item-input{min-height:28px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-treeautocomplete .cps-treeautocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete .cps-treeautocomplete-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete.disabled{pointer-events:none}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box{background:#f7f7f7}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .text-group,:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-label{color:var(--cps-color-text-mild)}:host .cps-treeautocomplete.error .cps-treeautocomplete-box{border-color:var(--cps-color-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-treeautocomplete-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option .virtual-row{white-space:nowrap}.cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode{padding:unset;outline:0 none;min-width:fit-content}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeautocomplete-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content:not(.p-highlight){background-color:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeautocomplete-option-check{opacity:1}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected-dark)}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content .p-tree-toggler{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeautocomplete-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeautocomplete-options ::ng-deep .p-tree-empty-message{padding:11px;font-size:16px;cursor:default}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-directory-elem{font-weight:700;font-size:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i3$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTreeAutocompleteComponent, decorators: [{
             type: Component,
@@ -4119,7 +4125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         CpsProgressLinearComponent,
                         CpsInfoCircleComponent,
                         CpsMenuComponent
-                    ], selector: 'cps-tree-autocomplete', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-treeautocomplete\"\n  tabindex=\"1\"\n  [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n  #componentContainer>\n  <div class=\"cps-treeautocomplete-label\" *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-treeautocomplete-label-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  </div>\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-treeautocomplete-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div class=\"cps-treeautocomplete-box\" #boxEl (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-treeautocomplete-box-area\">\n        <cps-icon\n          *ngIf=\"prefixIcon\"\n          [icon]=\"prefixIcon\"\n          [style.color]=\"disabled ? '#9a9595' : null\"\n          [size]=\"prefixIconSize\"\n          class=\"prefix-icon\">\n        </cps-icon>\n        <div\n          class=\"cps-treeautocomplete-box-items\"\n          *ngIf=\"\n            (treeSelection && !multiple) ||\n              (treeSelection?.length > 0 && multiple);\n            else treeAutocompleteInput\n          \">\n          <span *ngIf=\"!multiple\" class=\"single-item\">\n            <div class=\"single-item-selection\">\n              <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                treeSelection.label\n              }}</span>\n            </div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                treeAutocompleteInput;\n                context: {\n                  inputClass: 'single-item-input',\n                  inputStyle: activeSingle ? 'opacity: 1' : null\n                }\n              \">\n            </ng-container>\n          </span>\n\n          <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n            <div\n              *ngFor=\"let val of treeSelection; let last = last\"\n              class=\"text-group-item\"\n              [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n              {{ val.label }}{{ !last ? ',' : '' }}\n            </div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                treeAutocompleteInput;\n                context: {\n                  inputClass: 'multi-item-input'\n                }\n              \"></ng-container>\n          </div>\n\n          <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n            <cps-chip\n              *ngFor=\"let val of treeSelection; let last = last\"\n              [disabled]=\"disabled\"\n              [closable]=\"closableChips\"\n              (closed)=\"remove(val)\"\n              [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n              [label]=\"val.label\">\n            </cps-chip>\n            <ng-container\n              *ngTemplateOutlet=\"\n                treeAutocompleteInput;\n                context: {\n                  inputClass: 'multi-chip-input'\n                }\n              \"></ng-container>\n          </div>\n        </div>\n        <span class=\"cps-treeautocomplete-box-icons\">\n          <span\n            *ngIf=\"clearable && !disabled\"\n            [style.visibility]=\"\n              persistentClear ||\n              (!persistentClear &&\n                ((multiple && treeSelection?.length) ||\n                  (!multiple && treeSelection)))\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-treeautocomplete-box-clear-icon\">\n            <cps-icon\n              icon=\"delete\"\n              size=\"small\"\n              (click)=\"clear($event)\"></cps-icon>\n          </span>\n          <span\n            *ngIf=\"showChevron\"\n            class=\"cps-treeautocomplete-box-chevron\"\n            (mousedown)=\"onChevronClick($event)\">\n            <cps-icon\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-treeautocomplete-options-menu\">\n      <div\n        class=\"cps-treeautocomplete-options\"\n        [ngStyle]=\"{\n          width: boxWidth + 'px'\n        }\">\n        <p-tree\n          #treeList\n          [emptyMessage]=\"emptyMessage\"\n          [virtualScroll]=\"virtualScroll\"\n          [virtualScrollItemSize]=\"virtualScrollItemSize\"\n          [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n          [scrollHeight]=\"virtualListHeight + 'px'\"\n          (onNodeSelect)=\"onSelectNode()\"\n          (onNodeExpand)=\"onNodeExpand($event)\"\n          (onNodeCollapse)=\"onNodeCollapse($event)\"\n          (onFilter)=\"onFilterOptions()\"\n          [value]=\"options\"\n          [(selection)]=\"treeSelection\"\n          (selectionChange)=\"treeSelectionChanged($event)\"\n          [metaKeySelection]=\"multiple ? false : true\"\n          [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n          <ng-template let-node pTemplate=\"directory\">\n            <span class=\"cps-treeautocomplete-directory-elem\">{{\n              node.label\n            }}</span>\n          </ng-template>\n          <ng-template let-node pTemplate=\"default\">\n            <span class=\"cps-treeautocomplete-option\">\n              <span class=\"cps-treeautocomplete-option-left\">\n                <span\n                  *ngIf=\"multiple\"\n                  class=\"cps-treeautocomplete-option-check\">\n                </span>\n                <span\n                  class=\"cps-treeautocomplete-option-label\"\n                  [class.virtual-row]=\"virtualScroll\"\n                  >{{ node.label }}</span\n                >\n              </span>\n              <span\n                class=\"cps-treeautocomplete-option-info\"\n                [class.virtual-row]=\"virtualScroll\"\n                >{{ node.info }}</span\n              >\n            </span>\n          </ng-template>\n        </p-tree>\n      </div>\n    </cps-menu>\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"cps-treeautocomplete-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeautocomplete-hint\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-treeautocomplete-error\">\n    {{ error }}\n  </div>\n</div>\n\n<ng-template\n  #treeAutocompleteInput\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    class=\"cps-treeautocomplete-box-input\"\n    spellcheck=\"false\"\n    [class]=\"inputClass\"\n    [style]=\"inputStyle\"\n    [placeholder]=\"\n      (!treeSelection && !multiple) || (treeSelection?.length < 1 && multiple)\n        ? placeholder\n        : ''\n    \"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeautocomplete .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:#fff!important}:host .cps-treeautocomplete .cps-treeautocomplete-container.borderless .cps-treeautocomplete-box,:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-label .cps-treeautocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-box-input{min-height:36px;padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:3px;padding-bottom:3px;min-height:36px;justify-content:center;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-item-input{min-height:28px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-treeautocomplete .cps-treeautocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete .cps-treeautocomplete-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete.disabled{pointer-events:none}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box{background:#f7f7f7}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .text-group,:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-label{color:var(--cps-color-text-mild)}:host .cps-treeautocomplete.error .cps-treeautocomplete-box{border-color:var(--cps-color-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-treeautocomplete-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option .virtual-row{white-space:nowrap}.cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode{padding:unset;outline:0 none}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeautocomplete-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content:not(.p-highlight){background-color:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeautocomplete-option-check{opacity:1}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected-dark)}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content .p-tree-toggler{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeautocomplete-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeautocomplete-options ::ng-deep .p-tree-empty-message{padding:11px;font-size:16px;cursor:default}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-directory-elem{font-weight:700;font-size:16px}\n"] }]
+                    ], selector: 'cps-tree-autocomplete', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-treeautocomplete\"\n  tabindex=\"1\"\n  [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n  #componentContainer>\n  <div class=\"cps-treeautocomplete-label\" *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-treeautocomplete-label-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  </div>\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-treeautocomplete-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div class=\"cps-treeautocomplete-box\" #boxEl (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-treeautocomplete-box-area\">\n        <cps-icon\n          *ngIf=\"prefixIcon\"\n          [icon]=\"prefixIcon\"\n          [style.color]=\"disabled ? '#9a9595' : null\"\n          [size]=\"prefixIconSize\"\n          class=\"prefix-icon\">\n        </cps-icon>\n        <div\n          class=\"cps-treeautocomplete-box-items\"\n          *ngIf=\"\n            (treeSelection && !multiple) ||\n              (treeSelection?.length > 0 && multiple);\n            else treeAutocompleteInput\n          \">\n          <span *ngIf=\"!multiple\" class=\"single-item\">\n            <div class=\"single-item-selection\">\n              <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                treeSelection.label\n              }}</span>\n            </div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                treeAutocompleteInput;\n                context: {\n                  inputClass: 'single-item-input',\n                  inputStyle: activeSingle ? 'opacity: 1' : null\n                }\n              \">\n            </ng-container>\n          </span>\n\n          <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n            <div\n              *ngFor=\"let val of treeSelection; let last = last\"\n              class=\"text-group-item\"\n              [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n              {{ val.label }}{{ !last ? ',' : '' }}\n            </div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                treeAutocompleteInput;\n                context: {\n                  inputClass: 'multi-item-input'\n                }\n              \"></ng-container>\n          </div>\n\n          <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n            <cps-chip\n              *ngFor=\"let val of treeSelection; let last = last\"\n              [disabled]=\"disabled\"\n              [closable]=\"closableChips\"\n              (closed)=\"remove(val)\"\n              [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n              [label]=\"val.label\">\n            </cps-chip>\n            <ng-container\n              *ngTemplateOutlet=\"\n                treeAutocompleteInput;\n                context: {\n                  inputClass: 'multi-chip-input'\n                }\n              \"></ng-container>\n          </div>\n        </div>\n        <span class=\"cps-treeautocomplete-box-icons\">\n          <span\n            *ngIf=\"clearable && !disabled\"\n            [style.visibility]=\"\n              persistentClear ||\n              (!persistentClear &&\n                ((multiple && treeSelection?.length) ||\n                  (!multiple && treeSelection)))\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-treeautocomplete-box-clear-icon\">\n            <cps-icon\n              icon=\"delete\"\n              size=\"small\"\n              (click)=\"clear($event)\"></cps-icon>\n          </span>\n          <span\n            *ngIf=\"showChevron\"\n            class=\"cps-treeautocomplete-box-chevron\"\n            (mousedown)=\"onChevronClick($event)\">\n            <cps-icon\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-treeautocomplete-options-menu\">\n      <div\n        class=\"cps-treeautocomplete-options\"\n        [ngStyle]=\"{\n          width: boxWidth + 'px'\n        }\">\n        <p-tree\n          #treeList\n          [emptyMessage]=\"emptyMessage\"\n          [virtualScroll]=\"virtualScroll\"\n          [virtualScrollItemSize]=\"virtualScrollItemSize\"\n          [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n          [scrollHeight]=\"virtualListHeight + 'px'\"\n          (onNodeSelect)=\"onSelectNode()\"\n          (onNodeExpand)=\"onNodeExpand($event)\"\n          (onNodeCollapse)=\"onNodeCollapse($event)\"\n          (onFilter)=\"onFilterOptions()\"\n          [value]=\"innerOptions\"\n          [(selection)]=\"treeSelection\"\n          (selectionChange)=\"treeSelectionChanged($event)\"\n          [metaKeySelection]=\"multiple ? false : true\"\n          [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n          <ng-template let-node pTemplate=\"directory\">\n            <span class=\"cps-treeautocomplete-directory-elem\">{{\n              node.label\n            }}</span>\n          </ng-template>\n          <ng-template let-node pTemplate=\"default\">\n            <span class=\"cps-treeautocomplete-option\">\n              <span class=\"cps-treeautocomplete-option-left\">\n                <span\n                  *ngIf=\"multiple\"\n                  class=\"cps-treeautocomplete-option-check\">\n                </span>\n                <span\n                  class=\"cps-treeautocomplete-option-label\"\n                  [class.virtual-row]=\"virtualScroll\"\n                  >{{ node.label }}</span\n                >\n              </span>\n              <span\n                class=\"cps-treeautocomplete-option-info\"\n                [class.virtual-row]=\"virtualScroll\"\n                >{{ node.info }}</span\n              >\n            </span>\n          </ng-template>\n        </p-tree>\n      </div>\n    </cps-menu>\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"cps-treeautocomplete-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeautocomplete-hint\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-treeautocomplete-error\">\n    {{ error }}\n  </div>\n</div>\n\n<ng-template\n  #treeAutocompleteInput\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    class=\"cps-treeautocomplete-box-input\"\n    spellcheck=\"false\"\n    [class]=\"inputClass\"\n    [style]=\"inputStyle\"\n    [placeholder]=\"\n      (!treeSelection && !multiple) || (treeSelection?.length < 1 && multiple)\n        ? placeholder\n        : ''\n    \"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeautocomplete .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:#fff!important}:host .cps-treeautocomplete .cps-treeautocomplete-container.borderless .cps-treeautocomplete-box,:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-label .cps-treeautocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-box-input{min-height:36px;padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:3px;padding-bottom:3px;min-height:36px;justify-content:center;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-item-input{min-height:28px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-treeautocomplete .cps-treeautocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete .cps-treeautocomplete-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete.disabled{pointer-events:none}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box{background:#f7f7f7}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .text-group,:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-label{color:var(--cps-color-text-mild)}:host .cps-treeautocomplete.error .cps-treeautocomplete-box{border-color:var(--cps-color-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-treeautocomplete-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option .virtual-row{white-space:nowrap}.cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode{padding:unset;outline:0 none;min-width:fit-content}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeautocomplete-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content:not(.p-highlight){background-color:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeautocomplete-option-check{opacity:1}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected-dark)}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content .p-tree-toggler{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeautocomplete-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeautocomplete-options ::ng-deep .p-tree-empty-message{padding:11px;font-size:16px;cursor:default}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-directory-elem{font-weight:700;font-size:16px}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Optional
                 }] }, { type: i0.ChangeDetectorRef }], propDecorators: { emptyMessage: [{