cps-ui-kit 0.18.0 → 0.20.0

package/fesm2015/cps-ui-kit.mjs

@@ -6,6 +6,9 @@ import { Subscription } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { isEqual, find } from 'lodash-es';
+import * as i3 from 'primeng/tree';
+import { TreeModule } from 'primeng/tree';
+import * as i4 from 'primeng/api';
 import * as i2$1 from 'primeng/calendar';
 import { CalendarModule } from 'primeng/calendar';
 
@@ -253,25 +256,20 @@ class CpsProgressLinearComponent {
         this.bgColor = 'white';
         this.opacity = 1;
         this.radius = 0;
-        this.cvtWidth = '';
-        this.cvtHeight = '';
-        this.cvtRadius = '';
-        this.cvtColor = '';
-        this.cvtBgColor = '';
     }
     ngOnInit() {
-        this.cvtWidth = convertSize(this.width);
-        this.cvtHeight = convertSize(this.height);
-        this.cvtRadius = convertSize(this.radius);
-        this.cvtColor = getCSSColor(this.color);
-        this.cvtBgColor = getCSSColor(this.bgColor);
+        this.width = convertSize(this.width);
+        this.height = convertSize(this.height);
+        this.radius = convertSize(this.radius);
+        this.color = getCSSColor(this.color);
+        this.bgColor = getCSSColor(this.bgColor);
     }
 }
 CpsProgressLinearComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsProgressLinearComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CpsProgressLinearComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsProgressLinearComponent, isStandalone: true, selector: "cps-progress-linear", inputs: { width: "width", height: "height", color: "color", bgColor: "bgColor", opacity: "opacity", radius: "radius" }, ngImport: i0, template: "<div\n  class=\"cps-progress-linear\"\n  [ngStyle]=\"{\n    'max-width': cvtWidth,\n    height: cvtHeight,\n    'border-radius': cvtRadius,\n    background: cvtBgColor\n  }\">\n  <div\n    class=\"cps-progress-linear-line inc\"\n    [style.background]=\"cvtColor\"\n    [style.opacity]=\"opacity\"></div>\n  <div\n    class=\"cps-progress-linear-line dec\"\n    [style.background]=\"cvtColor\"\n    [style.opacity]=\"opacity\"></div>\n</div>\n", styles: [":host{width:100%}:host .cps-progress-linear{position:relative;overflow-x:hidden}:host .cps-progress-linear-line{position:absolute;height:inherit;left:-5%;top:0}:host .cps-progress-linear .inc{animation:increase 2s infinite}:host .cps-progress-linear .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+CpsProgressLinearComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsProgressLinearComponent, isStandalone: true, selector: "cps-progress-linear", inputs: { width: "width", height: "height", color: "color", bgColor: "bgColor", opacity: "opacity", radius: "radius" }, ngImport: i0, template: "<div\n  class=\"cps-progress-linear\"\n  [ngStyle]=\"{\n    'max-width': width,\n    height: height,\n    'border-radius': radius,\n    background: bgColor\n  }\">\n  <div\n    class=\"cps-progress-linear-line inc\"\n    [style.background]=\"color\"\n    [style.opacity]=\"opacity\"></div>\n  <div\n    class=\"cps-progress-linear-line dec\"\n    [style.background]=\"color\"\n    [style.opacity]=\"opacity\"></div>\n</div>\n", styles: [":host{width:100%}:host .cps-progress-linear{position:relative;overflow-x:hidden}:host .cps-progress-linear-line{position:absolute;height:inherit;left:-5%;top:0}:host .cps-progress-linear .inc{animation:increase 2s infinite}:host .cps-progress-linear .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsProgressLinearComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule], selector: 'cps-progress-linear', template: "<div\n  class=\"cps-progress-linear\"\n  [ngStyle]=\"{\n    'max-width': cvtWidth,\n    height: cvtHeight,\n    'border-radius': cvtRadius,\n    background: cvtBgColor\n  }\">\n  <div\n    class=\"cps-progress-linear-line inc\"\n    [style.background]=\"cvtColor\"\n    [style.opacity]=\"opacity\"></div>\n  <div\n    class=\"cps-progress-linear-line dec\"\n    [style.background]=\"cvtColor\"\n    [style.opacity]=\"opacity\"></div>\n</div>\n", styles: [":host{width:100%}:host .cps-progress-linear{position:relative;overflow-x:hidden}:host .cps-progress-linear-line{position:absolute;height:inherit;left:-5%;top:0}:host .cps-progress-linear .inc{animation:increase 2s infinite}:host .cps-progress-linear .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule], selector: 'cps-progress-linear', template: "<div\n  class=\"cps-progress-linear\"\n  [ngStyle]=\"{\n    'max-width': width,\n    height: height,\n    'border-radius': radius,\n    background: bgColor\n  }\">\n  <div\n    class=\"cps-progress-linear-line inc\"\n    [style.background]=\"color\"\n    [style.opacity]=\"opacity\"></div>\n  <div\n    class=\"cps-progress-linear-line dec\"\n    [style.background]=\"color\"\n    [style.opacity]=\"opacity\"></div>\n</div>\n", styles: [":host{width:100%}:host .cps-progress-linear{position:relative;overflow-x:hidden}:host .cps-progress-linear-line{position:absolute;height:inherit;left:-5%;top:0}:host .cps-progress-linear .inc{animation:increase 2s infinite}:host .cps-progress-linear .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] }]
         }], propDecorators: { width: [{
                 type: Input
             }], height: [{
@@ -719,7 +717,7 @@ class CpsSelectComponent {
                 selected.scrollIntoView({
                     behavior: 'instant',
                     block: 'nearest',
-                    inline: 'start'
+                    inline: 'center'
                 });
         }
     }
@@ -794,7 +792,7 @@ class CpsSelectComponent {
         if (elRect.top < parentRect.top || elRect.bottom > parentRect.bottom) {
             el.scrollIntoView({
                 block: 'nearest',
-                inline: 'start'
+                inline: 'center'
             });
         }
     }
@@ -1007,6 +1005,468 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['selectContainer']
             }] } });
 
+class CpsTreeSelectComponent {
+    set options(options) {
+        if (options === null || options === void 0 ? void 0 : 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);
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(_control, cdRef) {
+        this._control = _control;
+        this.cdRef = cdRef;
+        this.label = '';
+        this.placeholder = 'Please select';
+        this.hint = '';
+        this.multiple = false;
+        this.disabled = false;
+        this.width = '100%';
+        this.chips = true;
+        this.closableChips = true;
+        this.clearable = false;
+        this.openOnClear = true;
+        this.optionLabel = 'label';
+        this.optionInfo = 'info';
+        this.hideDetails = false;
+        this.persistentClear = false;
+        this.prefixIcon = '';
+        this.prefixIconSize = '18px';
+        this.loading = false;
+        this.virtualScroll = false;
+        this._value = undefined;
+        this.valueChanged = new EventEmitter();
+        this._statusChangesSubscription = new Subscription();
+        this._options = [];
+        this.optionsMap = new Map();
+        this.originalOptionsMap = new Map();
+        this.virtualListHeight = 240;
+        this.virtualScrollItemSize = 40;
+        this.error = '';
+        this.cvtWidth = '';
+        this.isOpened = false;
+        this.optionFocused = false;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = (value) => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouched = () => { };
+        if (this._control) {
+            this._control.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        var _a, _b;
+        this.cvtWidth = convertSize(this.width);
+        if (!this._value) {
+            if (this.multiple) {
+                this._value = [];
+                this.treeSelection = [];
+            }
+        }
+        else {
+            this.treeSelection = this._valueToTreeSelection(this.value);
+        }
+        this._statusChangesSubscription = (_b = (_a = this._control) === null || _a === void 0 ? void 0 : _a.statusChanges) === null || _b === void 0 ? void 0 : _b.subscribe(() => {
+            this._checkErrors();
+        });
+    }
+    ngAfterViewInit() {
+        this._initContainerClickListener();
+        this.recalcVirtualListHeight();
+        this.cdRef.detectChanges();
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this._statusChangesSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        if (this.treeContainerElement)
+            this.treeContainerElement.removeEventListener('click', this._handleOnContainerClick.bind(this));
+    }
+    _initContainerClickListener() {
+        var _a, _b, _c;
+        this.treeContainerElement =
+            (_c = (_b = (_a = this.treeList) === null || _a === void 0 ? void 0 : _a.el) === null || _b === void 0 ? void 0 : _b.nativeElement) === null || _c === void 0 ? void 0 : _c.querySelector('.p-tree-container');
+        if (this.treeContainerElement) {
+            this.treeContainerElement.addEventListener('click', this._handleOnContainerClick.bind(this));
+        }
+    }
+    _handleOnContainerClick(event) {
+        var _a, _b;
+        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 parent = event.target.classList.contains('p-treenode-content')
+            ? event.target
+            : getParentWithClass(event.target, 'p-treenode-content');
+        if ((_b = (_a = parent === null || parent === void 0 ? void 0 : parent.parentElement) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('cps-tree-node-fully-expandable')) {
+            this.onClickFullyExpandable(event, parent.parentElement);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    updateValue(value) {
+        this.writeValue(value);
+        this.onChange(value);
+        this.valueChanged.emit(value);
+    }
+    onSelectNode() {
+        var _a;
+        if (!this.multiple) {
+            this._toggleOptions((_a = this.selectContainer) === null || _a === void 0 ? void 0 : _a.nativeElement, false);
+        }
+    }
+    onClickOutside(dd) {
+        this._toggleOptions(dd, false);
+    }
+    onBoxClick(dd) {
+        this._toggleOptions(dd);
+    }
+    onKeyDown(event, dd) {
+        event.preventDefault();
+        const code = event.keyCode;
+        // escape
+        if (code === 27) {
+            this._toggleOptions(dd, false);
+        }
+        // click down arrow
+        else if ([40].includes(code)) {
+            this._initArrowsNavigaton();
+        }
+    }
+    onClickFullyExpandable(event, elem) {
+        const key = this._getHTMLElementKey(elem);
+        if (!key)
+            return;
+        const treeNode = this.options.find((o) => o.key === key);
+        if (!treeNode)
+            return;
+        treeNode.expanded = !treeNode.expanded;
+        this._updateOptions();
+        setTimeout(() => {
+            this.recalcVirtualListHeight();
+        });
+    }
+    _getHTMLElementKey(elem) {
+        if (!(elem === null || elem === void 0 ? void 0 : 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));
+    }
+    recalcVirtualListHeight() {
+        var _a, _b;
+        if (!this.virtualScroll)
+            return;
+        const currentLen = ((_b = (_a = this.treeList) === null || _a === void 0 ? void 0 : _a.serializedValue) === null || _b === void 0 ? void 0 : _b.length) || 0;
+        this.virtualListHeight = Math.min(this.virtualScrollItemSize * currentLen, 240);
+    }
+    _toggleOptions(dd, show) {
+        if (this.disabled || !dd)
+            return;
+        if (typeof show === 'boolean') {
+            if (show)
+                dd.classList.add('active');
+            else
+                dd.classList.remove('active');
+        }
+        else
+            dd.classList.toggle('active');
+        this.isOpened = dd.classList.contains('active');
+        this.optionFocused = false;
+        if (this.isOpened && this.treeSelection) {
+            this._expandToNodes(this.multiple ? this.treeSelection : [this.treeSelection]);
+            this._updateOptions();
+            setTimeout(() => {
+                var _a, _b;
+                this.recalcVirtualListHeight();
+                const selected = this.selectContainer.nativeElement.querySelector('.p-highlight');
+                if (selected) {
+                    selected.scrollIntoView({
+                        behavior: 'instant',
+                        block: 'nearest',
+                        inline: 'center'
+                    });
+                }
+                else if (this.virtualScroll && this.treeSelection) {
+                    let key = '';
+                    if (this.multiple) {
+                        if (this.treeSelection.length > 0)
+                            key = this.treeSelection[0].key;
+                    }
+                    else
+                        key = this.treeSelection.key;
+                    if (key) {
+                        const idx = ((_b = (_a = this.treeList) === null || _a === void 0 ? void 0 : _a.serializedValue) === null || _b === void 0 ? void 0 : _b.findIndex((v) => v.node.key === key)) || -1;
+                        if (idx >= 0)
+                            this.treeList.scrollToVirtualIndex(idx);
+                    }
+                }
+            });
+        }
+    }
+    remove(option) {
+        if (!this.multiple)
+            return;
+        this.treeSelection = this.treeSelection.filter((v) => !isEqual(v, option));
+        this.updateValue(this._treeSelectionToValue(this.treeSelection));
+    }
+    _initArrowsNavigaton() {
+        var _a;
+        if (!this.isOpened)
+            return;
+        if (!this.optionFocused) {
+            const firstElem = (_a = this.treeContainerElement) === null || _a === void 0 ? void 0 : _a.querySelector('.p-treenode-content');
+            if (firstElem)
+                firstElem.focus();
+            this.optionFocused = true;
+        }
+    }
+    clear(dd, event) {
+        var _a;
+        event.stopPropagation();
+        if ((!this.multiple && this.treeSelection) ||
+            (this.multiple && ((_a = this.treeSelection) === null || _a === void 0 ? void 0 : _a.length) > 0)) {
+            if (this.openOnClear) {
+                this._toggleOptions(dd, true);
+            }
+            const val = this.multiple ? [] : undefined;
+            this.treeSelection = val;
+            this.updateValue(val);
+        }
+        this.optionFocused = false;
+    }
+    _checkErrors() {
+        var _a, _b, _c;
+        const errors = (_a = this._control) === null || _a === void 0 ? void 0 : _a.errors;
+        if (!((_c = (_b = this._control) === null || _b === void 0 ? void 0 : _b.control) === null || _c === void 0 ? void 0 : _c.touched) || !errors) {
+            this.error = '';
+            return;
+        }
+        if ('required' in errors) {
+            this.error = 'Field is required';
+            return;
+        }
+        const errArr = Object.values(errors);
+        if (errArr.length < 1) {
+            this.error = '';
+            return;
+        }
+        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() {
+        var _a, _b;
+        (_b = (_a = this._control) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.markAsTouched();
+        this._checkErrors();
+    }
+    focus() {
+        var _a, _b, _c;
+        (_b = (_a = this.selectContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.focus();
+        this._toggleOptions((_c = this.selectContainer) === null || _c === void 0 ? void 0 : _c.nativeElement, true);
+    }
+    _expandToNodes(nodes) {
+        function getParentKey(key) {
+            const lastSeparatorIndex = key.lastIndexOf('-');
+            if (lastSeparatorIndex !== -1) {
+                return key.substring(0, lastSeparatorIndex);
+            }
+            return '';
+        }
+        nodes.forEach((node) => {
+            const parentNodeKey = getParentKey(node.key);
+            const parentNode = this.optionsMap.get(parentNodeKey) || null;
+            if (parentNode) {
+                parentNode.expanded = true;
+                this._expandToNodes([parentNode]);
+            }
+        });
+    }
+    _toInnerOptions(_options) {
+        function mapOption(o, optionLabel, optionInfo, key, originalOptionsMap) {
+            const inner = {
+                inner: true,
+                label: o[optionLabel],
+                info: o[optionInfo],
+                key,
+                styleClass: 'key-' + key
+            };
+            if (o.type === 'directory') {
+                inner.type = 'directory';
+                inner.selectable = false;
+                inner.styleClass += ' cps-tree-node-fully-expandable';
+            }
+            if (o.children) {
+                inner.children = o.children.map((c, index) => {
+                    return mapOption(c, optionLabel, optionInfo, key + '-' + index, originalOptionsMap);
+                });
+            }
+            originalOptionsMap.set(key, o);
+            return inner;
+        }
+        const res = _options.map((option, index) => {
+            return mapOption(option, this.optionLabel, this.optionInfo, '' + index, this.originalOptionsMap);
+        });
+        this.optionsMap = this._buildOptionsMap(res);
+        return res;
+    }
+    _buildOptionsMap(options) {
+        const nodeMap = new Map();
+        for (const option of options) {
+            nodeMap.set(option.key, option);
+            if (option.children) {
+                const childNodeMap = this._buildOptionsMap(option.children);
+                childNodeMap.forEach((value, key) => nodeMap.set(key, value));
+            }
+        }
+        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()) {
+                if (isEqual(v, val)) {
+                    return key;
+                }
+            }
+            return '';
+        }
+        if (!value)
+            return this.multiple ? [] : undefined;
+        if (this.multiple) {
+            const res = [];
+            value.forEach((v) => {
+                const key = getKey(v, this.originalOptionsMap);
+                if (key)
+                    res.push(this.optionsMap.get(key));
+            });
+            return res;
+        }
+        else {
+            const key = getKey(value, this.originalOptionsMap);
+            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.options = [...this.options];
+    }
+}
+CpsTreeSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeSelectComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+CpsTreeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeSelectComponent, isStandalone: true, selector: "cps-tree-select", inputs: { label: "label", placeholder: "placeholder", 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", options: "options", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [LabelByValuePipe, CombineLabelsPipe], viewQueries: [{ propertyName: "selectContainer", first: true, predicate: ["selectContainer"], descendants: true }, { propertyName: "treeList", first: true, predicate: ["treeList"], descendants: true }], ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-treeselect\"\n  tabindex=\"0\"\n  [ngClass]=\"{ disabled: disabled, error: error }\"\n  #selectContainer\n  (keydown)=\"onKeyDown($event, selectContainer)\"\n  (blur)=\"onBlur()\">\n  <label *ngIf=\"label\" class=\"cps-treeselect-label\">{{ label }} </label>\n  <div\n    class=\"cps-treeselect-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear\n    }\"\n    (clickOutside)=\"onClickOutside(selectContainer)\">\n    <div class=\"cps-treeselect-box\" (click)=\"onBoxClick(selectContainer)\">\n      <div class=\"cps-treeselect-box-left\">\n        <cps-icon\n          *ngIf=\"prefixIcon\"\n          [icon]=\"prefixIcon\"\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 | combineLabels : options : '' : '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(selectContainer, $event)\"></cps-icon>\n        </span>\n        <span class=\"cps-treeselect-box-chevron\">\n          <cps-icon\n            icon=\"chevron-down\"\n            size=\"small\"\n            color=\"text-dark\"></cps-icon>\n        </span>\n      </span>\n    </div>\n\n    <div class=\"cps-treeselect-options\">\n      <p-tree\n        #treeList\n        [virtualScroll]=\"virtualScroll\"\n        [virtualScrollItemSize]=\"virtualScrollItemSize\"\n        [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n        [scrollHeight]=\"virtualListHeight + 'px'\"\n        (onNodeSelect)=\"onSelectNode()\"\n        (onNodeExpand)=\"recalcVirtualListHeight()\"\n        (onNodeCollapse)=\"recalcVirtualListHeight()\"\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 class=\"cps-treeselect-option-label\">{{ node.label }}</span>\n            </span>\n            <span class=\"cps-treeselect-option-info\">{{ node.info }}</span>\n          </span>\n        </ng-template>\n      </p-tree>\n    </div>\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"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;display:grid}:host .cps-treeselect-container{position:relative}:host .cps-treeselect-container .treeselect-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeselect.active .cps-treeselect-options{display:block}: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 .cps-treeselect-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}: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:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-text-lightest);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.active .cps-treeselect-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:242px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree{border:1px solid #dee2e6;background:#ffffff;color:var(--cps-color-text-dark);padding:0}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:8px}:host .cps-treeselect .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}:host .cps-treeselect .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)}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:6px;color:var(--cps-color-text-light)}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{transition:box-shadow .2s;padding:.25rem}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-treenode-content{display:flex;align-items:center}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}:host .cps-treeselect .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}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:#f8f4f5}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:#f8f4f5}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:#efe4e7;color:var(--cps-color-calm);font-weight:600}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeselect-option-check{opacity:1}:host .cps-treeselect .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}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:16px}:host .cps-treeselect .cps-treeselect-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect .cps-treeselect-error{color:#c33;font-weight:700;font-size:.75rem;min-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:#c33!important;background:#fef3f2!important}\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.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: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["skipTargets"], outputs: ["clickOutside"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeSelectComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        TreeModule,
+                        ClickOutsideDirective,
+                        CpsIconComponent,
+                        CpsChipComponent,
+                        CpsProgressLinearComponent,
+                        LabelByValuePipe,
+                        CombineLabelsPipe
+                    ], providers: [LabelByValuePipe, CombineLabelsPipe], selector: 'cps-tree-select', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-treeselect\"\n  tabindex=\"0\"\n  [ngClass]=\"{ disabled: disabled, error: error }\"\n  #selectContainer\n  (keydown)=\"onKeyDown($event, selectContainer)\"\n  (blur)=\"onBlur()\">\n  <label *ngIf=\"label\" class=\"cps-treeselect-label\">{{ label }} </label>\n  <div\n    class=\"cps-treeselect-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear\n    }\"\n    (clickOutside)=\"onClickOutside(selectContainer)\">\n    <div class=\"cps-treeselect-box\" (click)=\"onBoxClick(selectContainer)\">\n      <div class=\"cps-treeselect-box-left\">\n        <cps-icon\n          *ngIf=\"prefixIcon\"\n          [icon]=\"prefixIcon\"\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 | combineLabels : options : '' : '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(selectContainer, $event)\"></cps-icon>\n        </span>\n        <span class=\"cps-treeselect-box-chevron\">\n          <cps-icon\n            icon=\"chevron-down\"\n            size=\"small\"\n            color=\"text-dark\"></cps-icon>\n        </span>\n      </span>\n    </div>\n\n    <div class=\"cps-treeselect-options\">\n      <p-tree\n        #treeList\n        [virtualScroll]=\"virtualScroll\"\n        [virtualScrollItemSize]=\"virtualScrollItemSize\"\n        [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n        [scrollHeight]=\"virtualListHeight + 'px'\"\n        (onNodeSelect)=\"onSelectNode()\"\n        (onNodeExpand)=\"recalcVirtualListHeight()\"\n        (onNodeCollapse)=\"recalcVirtualListHeight()\"\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 class=\"cps-treeselect-option-label\">{{ node.label }}</span>\n            </span>\n            <span class=\"cps-treeselect-option-info\">{{ node.info }}</span>\n          </span>\n        </ng-template>\n      </p-tree>\n    </div>\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"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;display:grid}:host .cps-treeselect-container{position:relative}:host .cps-treeselect-container .treeselect-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeselect.active .cps-treeselect-options{display:block}: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 .cps-treeselect-label{display:inline-block;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem}: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:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-text-lightest);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.active .cps-treeselect-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-options{z-index:1001;position:absolute;width:100%;background:white;box-shadow:0 5px 20px #0000000d;border-radius:4px;overflow-x:hidden;display:none;max-height:242px;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree{border:1px solid #dee2e6;background:#ffffff;color:var(--cps-color-text-dark);padding:0}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:8px}:host .cps-treeselect .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}:host .cps-treeselect .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)}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:6px;color:var(--cps-color-text-light)}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{transition:box-shadow .2s;padding:.25rem}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-treenode-content{display:flex;align-items:center}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}:host .cps-treeselect .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}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:#f8f4f5}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:focus{outline:0 none;outline-offset:0}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{background-color:#f8f4f5}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:#efe4e7;color:var(--cps-color-calm);font-weight:600}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeselect-option-check{opacity:1}:host .cps-treeselect .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}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}:host .cps-treeselect .cps-treeselect-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-treeselect .cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:16px}:host .cps-treeselect .cps-treeselect-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect .cps-treeselect-error{color:#c33;font-weight:700;font-size:.75rem;min-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:#c33!important;background:#fef3f2!important}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }, { type: i0.ChangeDetectorRef }];
+    }, propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], chips: [{
+                type: Input
+            }], closableChips: [{
+                type: Input
+            }], clearable: [{
+                type: Input
+            }], openOnClear: [{
+                type: Input
+            }], optionLabel: [{
+                type: Input
+            }], optionInfo: [{
+                type: Input
+            }], hideDetails: [{
+                type: Input
+            }], persistentClear: [{
+                type: Input
+            }], prefixIcon: [{
+                type: Input
+            }], prefixIconSize: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], virtualScroll: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], _value: [{
+                type: Input,
+                args: ['value']
+            }], valueChanged: [{
+                type: Output
+            }], selectContainer: [{
+                type: ViewChild,
+                args: ['selectContainer']
+            }], treeList: [{
+                type: ViewChild,
+                args: ['treeList']
+            }] } });
+
 class CpsAutocompleteComponent {
     get value() {
         return this._value;
@@ -1256,7 +1716,7 @@ class CpsAutocompleteComponent {
                 selected.scrollIntoView({
                     behavior: 'instant',
                     block: 'nearest',
-                    inline: 'start'
+                    inline: 'center'
                 });
         }
     }
@@ -1333,7 +1793,7 @@ class CpsAutocompleteComponent {
         if (elRect.top < parentRect.top || elRect.bottom > parentRect.bottom) {
             el.scrollIntoView({
                 block: 'nearest',
-                inline: 'start'
+                inline: 'center'
             });
         }
     }
@@ -1944,6 +2404,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Output
             }] } });
 
+class CpsProgressCircularComponent {
+    constructor() {
+        this.diameter = 40;
+        this.strokeWidth = 4;
+        this.color = 'calm';
+    }
+    ngOnInit() {
+        this.diameter = convertSize(this.diameter);
+        this.strokeWidth = convertSize(this.strokeWidth);
+        this.color = getCSSColor(this.color);
+    }
+}
+CpsProgressCircularComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsProgressCircularComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CpsProgressCircularComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsProgressCircularComponent, isStandalone: true, selector: "cps-progress-circular", inputs: { diameter: "diameter", strokeWidth: "strokeWidth", color: "color" }, ngImport: i0, template: "<div\n  class=\"cps-progress-circular\"\n  [style.width]=\"diameter\"\n  [style.border]=\"strokeWidth + ' solid ' + color\"></div>\n", styles: [":host{display:inline-block}:host .cps-progress-circular{box-sizing:border-box;aspect-ratio:1;border-radius:50%;border-right-color:transparent!important;border-bottom:unset!important;animation:cps-progress-circular-animation .8s linear infinite}@keyframes cps-progress-circular-animation{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsProgressCircularComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule], selector: 'cps-progress-circular', template: "<div\n  class=\"cps-progress-circular\"\n  [style.width]=\"diameter\"\n  [style.border]=\"strokeWidth + ' solid ' + color\"></div>\n", styles: [":host{display:inline-block}:host .cps-progress-circular{box-sizing:border-box;aspect-ratio:1;border-radius:50%;border-right-color:transparent!important;border-bottom:unset!important;animation:cps-progress-circular-animation .8s linear infinite}@keyframes cps-progress-circular-animation{to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { diameter: [{
+                type: Input
+            }], strokeWidth: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
 class CpsDatepickerComponent {
     set value(value) {
         this._value = value;
@@ -2305,10 +2790,10 @@ class CpsTextareaComponent {
     }
 }
 CpsTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTextareaComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-CpsTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTextareaComponent, isStandalone: true, selector: "cps-textarea", inputs: { label: "label", placeholder: "placeholder", rows: "rows", cols: "cols", autofocus: "autofocus", hint: "hint", disabled: "disabled", width: "width", clearable: "clearable", hideDetails: "hideDetails", persistentClear: "persistentClear", error: "error", resizable: "resizable", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred" }, ngImport: i0, template: "<div class=\"cps-textarea-container\" [ngStyle]=\"{ width: cvtWidth }\">\n  <label\n    class=\"cps-textarea-label-text\"\n    [ngClass]=\"{ 'cps-textarea-label-text-disabled': disabled }\"\n    >{{ label }}</label\n  >\n\n  <div\n    class=\"cps-textarea-wrap\"\n    [ngClass]=\"{\n      'cps-textarea-wrap-error': error,\n      clearable: clearable,\n      'persistent-clear': persistentClear\n    }\">\n    <textarea\n      [cols]=\"cols\"\n      [rows]=\"rows\"\n      [autofocus]=\"autofocus\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      [ngStyle]=\"{\n        width: cvtWidth,\n        resize: resizable\n      }\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      (input)=\"updateValueEvent($event)\"></textarea>\n\n    <span\n      *ngIf=\"clearable && !disabled\"\n      [style.visibility]=\"\n        persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n      \"\n      class=\"clear-btn\">\n      <cps-icon icon=\"delete\" size=\"small\" (click)=\"clear()\"></cps-icon>\n    </span>\n    <div *ngIf=\"!error && !hideDetails\" class=\"cps-textarea-hint-text\">\n      {{ hint }}\n    </div>\n    <div *ngIf=\"error && !hideDetails\" class=\"cps-textarea-error-text\">\n      {{ error }}\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-textarea-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-textarea-container .cps-textarea-wrap{position:relative;overflow:hidden}:host .cps-textarea-container .cps-textarea-wrap:hover textarea:enabled{border:1px solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap-error textarea{border-color:#c33!important}:host .cps-textarea-container .cps-textarea-wrap-error textarea:not(:focus){background:#fef3f2!important}:host .cps-textarea-container .cps-textarea-wrap textarea{font-family:Source Sans Pro,sans-serif;font-size:1rem;color:var(--cps-color-text-dark);background:#ffffff;padding:.375rem .75rem;line-height:1.5;min-height:38px;border:1px solid var(--cps-color-text-lightest);transition-property:border-color;transition-duration:.2s;-webkit-appearance:none;appearance:none;border-radius:4px;width:100%}:host .cps-textarea-container .cps-textarea-wrap textarea:focus{border:1px solid var(--cps-color-calm);outline:0}:host .cps-textarea-container .cps-textarea-wrap textarea:disabled{color:var(--cps-color-text-light);background-color:#f7f7f7;opacity:1;pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap textarea:focus+.clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap:hover .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap .clear-btn{position:absolute;top:.75rem;right:.75rem;cursor:pointer;color:var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon:hover{opacity:1!important}:host .cps-textarea-container .persistent-clear .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .clearable>textarea{padding-right:2.2rem}:host .cps-textarea-container .cps-textarea-hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-textarea-container .cps-textarea-label-text-disabled{color:var(--cps-color-text-mild)}:host .cps-textarea-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-lightest);font-style:italic;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] });
+CpsTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTextareaComponent, isStandalone: true, selector: "cps-textarea", inputs: { label: "label", placeholder: "placeholder", rows: "rows", cols: "cols", autofocus: "autofocus", hint: "hint", disabled: "disabled", width: "width", clearable: "clearable", hideDetails: "hideDetails", persistentClear: "persistentClear", error: "error", resizable: "resizable", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred" }, ngImport: i0, template: "<div class=\"cps-textarea-container\" [ngStyle]=\"{ width: cvtWidth }\">\n  <label\n    class=\"cps-textarea-label-text\"\n    [ngClass]=\"{ 'cps-textarea-label-text-disabled': disabled }\"\n    >{{ label }}</label\n  >\n\n  <div\n    class=\"cps-textarea-wrap\"\n    [ngClass]=\"{\n      'cps-textarea-wrap-error': error,\n      clearable: clearable,\n      'persistent-clear': persistentClear\n    }\">\n    <textarea\n      [cols]=\"cols\"\n      [rows]=\"rows\"\n      [autofocus]=\"autofocus\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      [ngStyle]=\"{\n        width: cvtWidth,\n        resize: resizable\n      }\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      (input)=\"updateValueEvent($event)\"></textarea>\n\n    <span\n      *ngIf=\"clearable && !disabled\"\n      [style.visibility]=\"\n        persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n      \"\n      class=\"clear-btn\">\n      <cps-icon icon=\"delete\" size=\"small\" (click)=\"clear()\"></cps-icon>\n    </span>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-textarea-hint-text\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-textarea-error-text\">\n    {{ error }}\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-textarea-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-textarea-container .cps-textarea-wrap{position:relative;overflow:hidden}:host .cps-textarea-container .cps-textarea-wrap:hover textarea:enabled{border:1px solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap-error textarea{border-color:#c33!important}:host .cps-textarea-container .cps-textarea-wrap-error textarea:not(:focus){background:#fef3f2!important}:host .cps-textarea-container .cps-textarea-wrap textarea{display:block;font-family:Source Sans Pro,sans-serif;font-size:1rem;color:var(--cps-color-text-dark);background:#ffffff;padding:.375rem .75rem;line-height:1.5;min-height:38px;border:1px solid var(--cps-color-text-lightest);transition-property:border-color;transition-duration:.2s;-webkit-appearance:none;appearance:none;border-radius:4px;width:100%}:host .cps-textarea-container .cps-textarea-wrap textarea:focus{border:1px solid var(--cps-color-calm);outline:0}:host .cps-textarea-container .cps-textarea-wrap textarea:disabled{color:var(--cps-color-text-light);background-color:#f7f7f7;opacity:1;pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap textarea:focus+.clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap:hover .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap .clear-btn{position:absolute;top:.75rem;right:.75rem;cursor:pointer;color:var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon:hover{opacity:1!important}:host .cps-textarea-container .persistent-clear .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .clearable>textarea{padding-right:2.2rem}:host .cps-textarea-container .cps-textarea-hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-textarea-container .cps-textarea-label-text-disabled{color:var(--cps-color-text-mild)}:host .cps-textarea-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-lightest);font-style:italic;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTextareaComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'cps-textarea', imports: [CommonModule, CpsIconComponent], template: "<div class=\"cps-textarea-container\" [ngStyle]=\"{ width: cvtWidth }\">\n  <label\n    class=\"cps-textarea-label-text\"\n    [ngClass]=\"{ 'cps-textarea-label-text-disabled': disabled }\"\n    >{{ label }}</label\n  >\n\n  <div\n    class=\"cps-textarea-wrap\"\n    [ngClass]=\"{\n      'cps-textarea-wrap-error': error,\n      clearable: clearable,\n      'persistent-clear': persistentClear\n    }\">\n    <textarea\n      [cols]=\"cols\"\n      [rows]=\"rows\"\n      [autofocus]=\"autofocus\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      [ngStyle]=\"{\n        width: cvtWidth,\n        resize: resizable\n      }\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      (input)=\"updateValueEvent($event)\"></textarea>\n\n    <span\n      *ngIf=\"clearable && !disabled\"\n      [style.visibility]=\"\n        persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n      \"\n      class=\"clear-btn\">\n      <cps-icon icon=\"delete\" size=\"small\" (click)=\"clear()\"></cps-icon>\n    </span>\n    <div *ngIf=\"!error && !hideDetails\" class=\"cps-textarea-hint-text\">\n      {{ hint }}\n    </div>\n    <div *ngIf=\"error && !hideDetails\" class=\"cps-textarea-error-text\">\n      {{ error }}\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-textarea-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-textarea-container .cps-textarea-wrap{position:relative;overflow:hidden}:host .cps-textarea-container .cps-textarea-wrap:hover textarea:enabled{border:1px solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap-error textarea{border-color:#c33!important}:host .cps-textarea-container .cps-textarea-wrap-error textarea:not(:focus){background:#fef3f2!important}:host .cps-textarea-container .cps-textarea-wrap textarea{font-family:Source Sans Pro,sans-serif;font-size:1rem;color:var(--cps-color-text-dark);background:#ffffff;padding:.375rem .75rem;line-height:1.5;min-height:38px;border:1px solid var(--cps-color-text-lightest);transition-property:border-color;transition-duration:.2s;-webkit-appearance:none;appearance:none;border-radius:4px;width:100%}:host .cps-textarea-container .cps-textarea-wrap textarea:focus{border:1px solid var(--cps-color-calm);outline:0}:host .cps-textarea-container .cps-textarea-wrap textarea:disabled{color:var(--cps-color-text-light);background-color:#f7f7f7;opacity:1;pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap textarea:focus+.clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap:hover .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap .clear-btn{position:absolute;top:.75rem;right:.75rem;cursor:pointer;color:var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon:hover{opacity:1!important}:host .cps-textarea-container .persistent-clear .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .clearable>textarea{padding-right:2.2rem}:host .cps-textarea-container .cps-textarea-hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-textarea-container .cps-textarea-label-text-disabled{color:var(--cps-color-text-mild)}:host .cps-textarea-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-lightest);font-style:italic;opacity:1}\n"] }]
+            args: [{ standalone: true, selector: 'cps-textarea', imports: [CommonModule, CpsIconComponent], template: "<div class=\"cps-textarea-container\" [ngStyle]=\"{ width: cvtWidth }\">\n  <label\n    class=\"cps-textarea-label-text\"\n    [ngClass]=\"{ 'cps-textarea-label-text-disabled': disabled }\"\n    >{{ label }}</label\n  >\n\n  <div\n    class=\"cps-textarea-wrap\"\n    [ngClass]=\"{\n      'cps-textarea-wrap-error': error,\n      clearable: clearable,\n      'persistent-clear': persistentClear\n    }\">\n    <textarea\n      [cols]=\"cols\"\n      [rows]=\"rows\"\n      [autofocus]=\"autofocus\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      [ngStyle]=\"{\n        width: cvtWidth,\n        resize: resizable\n      }\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      (input)=\"updateValueEvent($event)\"></textarea>\n\n    <span\n      *ngIf=\"clearable && !disabled\"\n      [style.visibility]=\"\n        persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n      \"\n      class=\"clear-btn\">\n      <cps-icon icon=\"delete\" size=\"small\" (click)=\"clear()\"></cps-icon>\n    </span>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-textarea-hint-text\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-textarea-error-text\">\n    {{ error }}\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-textarea-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-textarea-container .cps-textarea-wrap{position:relative;overflow:hidden}:host .cps-textarea-container .cps-textarea-wrap:hover textarea:enabled{border:1px solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap-error textarea{border-color:#c33!important}:host .cps-textarea-container .cps-textarea-wrap-error textarea:not(:focus){background:#fef3f2!important}:host .cps-textarea-container .cps-textarea-wrap textarea{display:block;font-family:Source Sans Pro,sans-serif;font-size:1rem;color:var(--cps-color-text-dark);background:#ffffff;padding:.375rem .75rem;line-height:1.5;min-height:38px;border:1px solid var(--cps-color-text-lightest);transition-property:border-color;transition-duration:.2s;-webkit-appearance:none;appearance:none;border-radius:4px;width:100%}:host .cps-textarea-container .cps-textarea-wrap textarea:focus{border:1px solid var(--cps-color-calm);outline:0}:host .cps-textarea-container .cps-textarea-wrap textarea:disabled{color:var(--cps-color-text-light);background-color:#f7f7f7;opacity:1;pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap textarea:focus+.clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap:hover .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap .clear-btn{position:absolute;top:.75rem;right:.75rem;cursor:pointer;color:var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon:hover{opacity:1!important}:host .cps-textarea-container .persistent-clear .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .clearable>textarea{padding-right:2.2rem}:host .cps-textarea-container .cps-textarea-hint-text{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error-text{color:#c33;font-weight:700;font-size:.75rem;min-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label-text{color:var(--cps-color-text-dark);font-size:.875rem}:host .cps-textarea-container .cps-textarea-label-text-disabled{color:var(--cps-color-text-mild)}:host .cps-textarea-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-lightest);font-style:italic;opacity:1}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1.NgControl, decorators: [{
                         type: Self
@@ -2470,5 +2955,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsExpansionPanelComponent, CpsIconComponent, CpsInputComponent, CpsLoaderComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTagComponent, CpsTextareaComponent, getCSSColor, getCpsColors, getTextColor, iconNames };
+export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsExpansionPanelComponent, CpsIconComponent, CpsInputComponent, CpsLoaderComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTagComponent, CpsTextareaComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames };
 //# sourceMappingURL=cps-ui-kit.mjs.map