npm - cps-ui-kit - Versions diffs - 0.165.0 → 17.1.0 - Mend

cps-ui-kit 0.165.0 → 17.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (166) hide show

package/{fesm2020 → fesm2022}/cps-ui-kit.mjs RENAMED Viewed

@@ -251,7 +251,7 @@ class CpsIconComponent {
          */
         this.color = 'currentColor';
         this.iconColor = 'currentColor';
-        this.url = '../../../../assets/';
+        this.url = 'assets/';
         this.cvtSize = '';
         this.classesList = ['cps-icon'];
     }
@@ -286,10 +286,10 @@ class CpsIconComponent {
                 break;
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsIconComponent, isStandalone: true, selector: "cps-icon", inputs: { icon: "icon", size: "size", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<i\n  *ngIf=\"icon\"\n  [ngClass]=\"classesList\"\n  [style.color]=\"iconColor\"\n  [ngStyle]=\"{\n    width: cvtSize || 'none',\n    height: cvtSize || 'none',\n    display: 'flex'\n  }\">\n  <svg>\n    <use attr.xlink:href=\"{{ url }}icons.svg#{{ icon }}\"></use>\n  </svg>\n</i>\n", styles: [":host{display:inline-flex}:host .cps-icon--fill{width:100%;height:100%}:host .cps-icon--xsmall{width:12px;height:12px}:host .cps-icon--small{width:16px;height:16px}:host .cps-icon--normal{width:24px;height:24px}:host .cps-icon--large{width:32px;height:32px}:host svg{color:inherit;fill:currentColor;height:100%;width:100%}\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"] }] }); }
 }
-CpsIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CpsIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsIconComponent, isStandalone: true, selector: "cps-icon", inputs: { icon: "icon", size: "size", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<i\n  *ngIf=\"icon\"\n  [ngClass]=\"classesList\"\n  [style.color]=\"iconColor\"\n  [ngStyle]=\"{\n    width: cvtSize || 'none',\n    height: cvtSize || 'none',\n    display: 'flex'\n  }\">\n  <svg>\n    <use attr.xlink:href=\"{{ url }}icons.svg#{{ icon }}\"></use>\n  </svg>\n</i>\n", styles: [":host{display:inline-flex}:host .cps-icon--fill{width:100%;height:100%}:host .cps-icon--xsmall{width:12px;height:12px}:host .cps-icon--small{width:16px;height:16px}:host .cps-icon--normal{width:24px;height:24px}:host .cps-icon--large{width:32px;height:32px}:host svg{color:inherit;fill:currentColor;height:100%;width:100%}\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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsIconComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule], selector: 'cps-icon', template: "<i\n  *ngIf=\"icon\"\n  [ngClass]=\"classesList\"\n  [style.color]=\"iconColor\"\n  [ngStyle]=\"{\n    width: cvtSize || 'none',\n    height: cvtSize || 'none',\n    display: 'flex'\n  }\">\n  <svg>\n    <use attr.xlink:href=\"{{ url }}icons.svg#{{ icon }}\"></use>\n  </svg>\n</i>\n", styles: [":host{display:inline-flex}:host .cps-icon--fill{width:100%;height:100%}:host .cps-icon--xsmall{width:12px;height:12px}:host .cps-icon--small{width:16px;height:16px}:host .cps-icon--normal{width:24px;height:24px}:host .cps-icon--large{width:32px;height:32px}:host svg{color:inherit;fill:currentColor;height:100%;width:100%}\n"] }]
         }], propDecorators: { icon: [{
@@ -344,10 +344,10 @@ class CpsProgressLinearComponent {
         this.color = getCSSColor(this.color);
         this.bgColor = getCSSColor(this.bgColor);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsProgressLinearComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", 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"] }] }); }
 }
-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': 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", 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': 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: [{
@@ -366,7 +366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
 /**
  * CpsTooltipDirective provides advisory information for a target element.
- * @group Directives
+ * @group Components
  */
 class CpsTooltipDirective {
     // eslint-disable-next-line no-useless-constructor
@@ -567,16 +567,16 @@ class CpsTooltipDirective {
         if (this._popup)
             this._destroyTooltip(event);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTooltipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: CpsTooltipDirective, isStandalone: true, selector: "[cpsTooltip]", inputs: { tooltip: ["cpsTooltip", "tooltip"], tooltipOpenDelay: "tooltipOpenDelay", tooltipCloseDelay: "tooltipCloseDelay", tooltipOpenOn: "tooltipOpenOn", tooltipPosition: "tooltipPosition", tooltipPersistent: "tooltipPersistent", tooltipDisabled: "tooltipDisabled", tooltipMaxWidth: "tooltipMaxWidth", tooltipContentClass: "tooltipContentClass" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()", "click": "onClick()", "document:click": "onDocumentClick($event.target)", "window:resize": "onPageResize($event)" } }, ngImport: i0 }); }
 }
-CpsTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTooltipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-CpsTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTooltipDirective, isStandalone: true, selector: "[cpsTooltip]", inputs: { tooltip: ["cpsTooltip", "tooltip"], tooltipOpenDelay: "tooltipOpenDelay", tooltipCloseDelay: "tooltipCloseDelay", tooltipOpenOn: "tooltipOpenOn", tooltipPosition: "tooltipPosition", tooltipPersistent: "tooltipPersistent", tooltipDisabled: "tooltipDisabled", tooltipMaxWidth: "tooltipMaxWidth", tooltipContentClass: "tooltipContentClass" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()", "click": "onClick()", "document:click": "onDocumentClick($event.target)", "window:resize": "onPageResize($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cpsTooltip]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { tooltip: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { tooltip: [{
                 type: Input,
                 args: ['cpsTooltip']
             }], tooltipOpenDelay: [{
@@ -655,10 +655,10 @@ class CpsInfoCircleComponent {
          */
         this.tooltipPersistent = false;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsInfoCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsInfoCircleComponent, isStandalone: true, selector: "cps-info-circle", inputs: { size: "size", tooltipText: "tooltipText", tooltipPosition: "tooltipPosition", tooltipContentClass: "tooltipContentClass", tooltipMaxWidth: "tooltipMaxWidth", tooltipPersistent: "tooltipPersistent" }, ngImport: i0, template: "<cps-icon\n  icon=\"info-circle\"\n  [size]=\"size\"\n  color=\"info\"\n  [cpsTooltip]=\"tooltipText\"\n  tooltipOpenDelay=\"0\"\n  tooltipCloseDelay=\"100\"\n  [tooltipPosition]=\"tooltipPosition\"\n  [tooltipMaxWidth]=\"tooltipMaxWidth\"\n  [tooltipPersistent]=\"tooltipPersistent\"\n  [tooltipContentClass]=\"tooltipContentClass\">\n</cps-icon>\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass"] }] }); }
 }
-CpsInfoCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsInfoCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CpsInfoCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsInfoCircleComponent, isStandalone: true, selector: "cps-info-circle", inputs: { size: "size", tooltipText: "tooltipText", tooltipPosition: "tooltipPosition", tooltipContentClass: "tooltipContentClass", tooltipMaxWidth: "tooltipMaxWidth", tooltipPersistent: "tooltipPersistent" }, ngImport: i0, template: "<cps-icon\n  icon=\"info-circle\"\n  [size]=\"size\"\n  color=\"info\"\n  [cpsTooltip]=\"tooltipText\"\n  tooltipOpenDelay=\"0\"\n  tooltipCloseDelay=\"100\"\n  [tooltipPosition]=\"tooltipPosition\"\n  [tooltipMaxWidth]=\"tooltipMaxWidth\"\n  [tooltipPersistent]=\"tooltipPersistent\"\n  [tooltipContentClass]=\"tooltipContentClass\">\n</cps-icon>\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsInfoCircleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsInfoCircleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cps-info-circle', standalone: true, imports: [CpsIconComponent, CpsTooltipDirective], template: "<cps-icon\n  icon=\"info-circle\"\n  [size]=\"size\"\n  color=\"info\"\n  [cpsTooltip]=\"tooltipText\"\n  tooltipOpenDelay=\"0\"\n  tooltipCloseDelay=\"100\"\n  [tooltipPosition]=\"tooltipPosition\"\n  [tooltipMaxWidth]=\"tooltipMaxWidth\"\n  [tooltipPersistent]=\"tooltipPersistent\"\n  [tooltipContentClass]=\"tooltipContentClass\">\n</cps-icon>\n", styles: [":host{display:inline-flex}\n"] }]
         }], propDecorators: { size: [{
@@ -971,22 +971,22 @@ class CpsInputComponent {
     focus() {
         this.elementRef?.nativeElement?.querySelector('input')?.focus();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsInputComponent, isStandalone: true, selector: "cps-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", width: "width", type: "type", loading: "loading", clearable: "clearable", prefixIcon: "prefixIcon", prefixIconClickable: "prefixIconClickable", prefixIconSize: "prefixIconSize", prefixText: "prefixText", hideDetails: "hideDetails", persistentClear: "persistentClear", error: "error", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", valueToDisplay: "valueToDisplay", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred", cleared: "cleared", enterClicked: "enterClicked" }, viewQueries: [{ propertyName: "prefixTextSpan", first: true, predicate: ["prefixTextSpan"], descendants: true }], ngImport: i0, template: "<div class=\"cps-input-container\" [ngStyle]=\"{ width: cvtWidth }\">\n  <div\n    class=\"cps-input-label\"\n    [ngClass]=\"{ 'cps-input-label-disabled': disabled && !readonly }\"\n    *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-input-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\n  <div\n    class=\"cps-input-wrap\"\n    [ngClass]=\"{\n      password: type === 'password',\n      'cps-input-wrap-error': error,\n      clearable: clearable,\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <input\n      *ngIf=\"!valueToDisplay\"\n      spellcheck=\"false\"\n      [type]=\"currentType\"\n      [value]=\"value\"\n      (input)=\"updateValueEvent($event)\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (keydown.enter)=\"onInputEnterKeyDown()\"\n      [ngStyle]=\"{\n        width: cvtWidth,\n        'padding-left': prefixWidth || 'none'\n      }\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\" />\n\n    <input\n      *ngIf=\"valueToDisplay\"\n      [value]=\"valueToDisplay\"\n      [disabled]=\"true\"\n      [readonly]=\"true\"\n      [ngStyle]=\"{\n        width: cvtWidth,\n        'padding-left': prefixWidth || 'none'\n      }\" />\n\n    <div class=\"cps-input-prefix\">\n      <span *ngIf=\"prefixIcon\" class=\"cps-input-prefix-icon\">\n        <cps-icon\n          [icon]=\"prefixIcon\"\n          [size]=\"prefixIconSize\"\n          [style.color]=\"disabled ? '#9a9595' : null\"\n          [style.cursor]=\"\n            prefixIconClickable && !disabled && !readonly\n              ? 'pointer'\n              : 'default'\n          \"\n          (click)=\"onClickPrefixIcon()\">\n        </cps-icon>\n      </span>\n\n      <span *ngIf=\"prefixText\" class=\"cps-input-prefix-text\" #prefixTextSpan>\n        {{ prefixText }}\n      </span>\n    </div>\n\n    <div class=\"cps-input-action-btns\" *ngIf=\"!disabled && !readonly\">\n      <span\n        *ngIf=\"clearable\"\n        [style.visibility]=\"\n          persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n        \"\n        class=\"clear-btn\">\n        <cps-icon icon=\"delete\" size=\"small\" (click)=\"onClear()\"></cps-icon>\n      </span>\n\n      <span\n        *ngIf=\"type === 'password'\"\n        class=\"password-show-btn\"\n        [ngClass]=\"{ 'password-show-btn-active': currentType === 'text' }\">\n        <cps-icon icon=\"eye\" size=\"18px\" (click)=\"togglePassword()\"></cps-icon>\n      </span>\n    </div>\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"cps-input-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-input-hint\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-input-error\">\n    {{ error }}\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden}:host .cps-input-container .cps-input-wrap:hover input:enabled:not(:read-only){border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap-error input{border-color:var(--cps-color-error)!important}:host .cps-input-container .cps-input-wrap-error input:not(:focus){background:#fef3f2!important}:host .cps-input-container .cps-input-wrap-error .cps-input-prefix-icon{color:var(--cps-color-error)!important}:host .cps-input-container .cps-input-wrap input{min-height:38px;font-family:Source Sans Pro,sans-serif;font-size:1rem;color:var(--cps-color-text-dark);background:#fff;padding:.375rem .75rem;line-height:1.5;border:1px solid var(--cps-color-line-light);transition-duration:.2s;appearance:none;border-radius:4px;width:100%}:host .cps-input-container .cps-input-wrap input:focus{outline:0}:host .cps-input-container .cps-input-wrap input:focus:not(:read-only){border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:read-only{cursor:default}:host .cps-input-container .cps-input-wrap input:disabled{opacity:1}:host .cps-input-container .cps-input-wrap input:disabled:not([readonly]){color:var(--cps-color-text-light);background-color:#f7f7f7;pointer-events:none}:host .cps-input-container .cps-input-wrap input[type=password]{font-family:Verdana}:host .cps-input-container .cps-input-wrap input:focus:not(:read-only)+.cps-input-prefix>.cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap input:hover:not(:read-only)+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:disabled+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix+.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{display:flex;cursor:pointer;color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:not(:read-only)+.cps-input-prefix:hover>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{display:flex;position:absolute;height:100%;top:50%;left:.8rem;transform:translateY(-50%)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{display:flex;flex-direction:column;justify-content:center;transition-duration:.2s;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{display:flex;flex-direction:column;justify-content:center;color:var(--cps-color-text-mild);cursor:default;line-height:1.2}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:1px;padding:0 1px;display:block}:host .cps-input-container .cps-input-wrap.borderless input,:host .cps-input-container .cps-input-wrap.underlined input{line-height:1;border:none!important;border-radius:0}:host .cps-input-container .cps-input-wrap.underlined input{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.8rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.2rem}:host .cps-input-container .cps-input-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-input-container .cps-input-label .cps-input-label-info-circle{margin-left:8px}:host .cps-input-container .cps-input-label-disabled{color:var(--cps-color-text-mild)}:host .cps-input-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"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }] }); }
 }
-CpsInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CpsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsInputComponent, isStandalone: true, selector: "cps-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", width: "width", type: "type", loading: "loading", clearable: "clearable", prefixIcon: "prefixIcon", prefixIconClickable: "prefixIconClickable", prefixIconSize: "prefixIconSize", prefixText: "prefixText", hideDetails: "hideDetails", persistentClear: "persistentClear", error: "error", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", valueToDisplay: "valueToDisplay", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred", cleared: "cleared", enterClicked: "enterClicked" }, viewQueries: [{ propertyName: "prefixTextSpan", first: true, predicate: ["prefixTextSpan"], descendants: true }], ngImport: i0, template: "<div class=\"cps-input-container\" [ngStyle]=\"{ width: cvtWidth }\">\n  <div\n    class=\"cps-input-label\"\n    [ngClass]=\"{ 'cps-input-label-disabled': disabled && !readonly }\"\n    *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-input-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\n  <div\n    class=\"cps-input-wrap\"\n    [ngClass]=\"{\n      password: type === 'password',\n      'cps-input-wrap-error': error,\n      clearable: clearable,\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <input\n      *ngIf=\"!valueToDisplay\"\n      spellcheck=\"false\"\n      [type]=\"currentType\"\n      [value]=\"value\"\n      (input)=\"updateValueEvent($event)\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (keydown.enter)=\"onInputEnterKeyDown()\"\n      [ngStyle]=\"{\n        width: cvtWidth,\n        'padding-left': prefixWidth || 'none'\n      }\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\" />\n\n    <input\n      *ngIf=\"valueToDisplay\"\n      [value]=\"valueToDisplay\"\n      [disabled]=\"true\"\n      [readonly]=\"true\"\n      [ngStyle]=\"{\n        width: cvtWidth,\n        'padding-left': prefixWidth || 'none'\n      }\" />\n\n    <div class=\"cps-input-prefix\">\n      <span *ngIf=\"prefixIcon\" class=\"cps-input-prefix-icon\">\n        <cps-icon\n          [icon]=\"prefixIcon\"\n          [size]=\"prefixIconSize\"\n          [style.color]=\"disabled ? '#9a9595' : null\"\n          [style.cursor]=\"\n            prefixIconClickable && !disabled && !readonly\n              ? 'pointer'\n              : 'default'\n          \"\n          (click)=\"onClickPrefixIcon()\">\n        </cps-icon>\n      </span>\n\n      <span *ngIf=\"prefixText\" class=\"cps-input-prefix-text\" #prefixTextSpan>\n        {{ prefixText }}\n      </span>\n    </div>\n\n    <div class=\"cps-input-action-btns\" *ngIf=\"!disabled && !readonly\">\n      <span\n        *ngIf=\"clearable\"\n        [style.visibility]=\"\n          persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n        \"\n        class=\"clear-btn\">\n        <cps-icon icon=\"delete\" size=\"small\" (click)=\"onClear()\"></cps-icon>\n      </span>\n\n      <span\n        *ngIf=\"type === 'password'\"\n        class=\"password-show-btn\"\n        [ngClass]=\"{ 'password-show-btn-active': currentType === 'text' }\">\n        <cps-icon icon=\"eye\" size=\"18px\" (click)=\"togglePassword()\"></cps-icon>\n      </span>\n    </div>\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"cps-input-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-input-hint\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-input-error\">\n    {{ error }}\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden}:host .cps-input-container .cps-input-wrap:hover input:enabled:not(:read-only){border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap-error input{border-color:var(--cps-color-error)!important}:host .cps-input-container .cps-input-wrap-error input:not(:focus){background:#fef3f2!important}:host .cps-input-container .cps-input-wrap-error .cps-input-prefix-icon{color:var(--cps-color-error)!important}:host .cps-input-container .cps-input-wrap input{min-height:38px;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;border:1px solid var(--cps-color-line-light);transition-duration:.2s;-webkit-appearance:none;appearance:none;border-radius:4px;width:100%}:host .cps-input-container .cps-input-wrap input:focus{outline:0}:host .cps-input-container .cps-input-wrap input:focus:not(:read-only){border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:read-only{cursor:default}:host .cps-input-container .cps-input-wrap input:disabled{opacity:1}:host .cps-input-container .cps-input-wrap input:disabled:not([readonly]){color:var(--cps-color-text-light);background-color:#f7f7f7;pointer-events:none}:host .cps-input-container .cps-input-wrap input[type=password]{font-family:Verdana}:host .cps-input-container .cps-input-wrap input:focus:not(:read-only)+.cps-input-prefix>.cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap input:hover:not(:read-only)+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:disabled+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix+.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{display:flex;cursor:pointer;color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:not(:read-only)+.cps-input-prefix:hover>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{display:flex;position:absolute;height:100%;top:50%;left:.8rem;transform:translateY(-50%)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{display:flex;flex-direction:column;justify-content:center;transition-duration:.2s;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{display:flex;flex-direction:column;justify-content:center;color:var(--cps-color-text-mild);cursor:default;line-height:1.2}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:1px;padding:0 1px;display:block}:host .cps-input-container .cps-input-wrap.borderless input,:host .cps-input-container .cps-input-wrap.underlined input{line-height:1;border:none!important;border-radius:0}:host .cps-input-container .cps-input-wrap.underlined input{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.8rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.2rem}:host .cps-input-container .cps-input-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-input-container .cps-input-label .cps-input-label-info-circle{margin-left:8px}:host .cps-input-container .cps-input-label-disabled{color:var(--cps-color-text-mild)}:host .cps-input-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"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsInputComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         CommonModule,
                         CpsIconComponent,
                         CpsInfoCircleComponent,
                         CpsProgressLinearComponent
-                    ], selector: 'cps-input', template: "<div class=\"cps-input-container\" [ngStyle]=\"{ width: cvtWidth }\">\n  <div\n    class=\"cps-input-label\"\n    [ngClass]=\"{ 'cps-input-label-disabled': disabled && !readonly }\"\n    *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-input-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\n  <div\n    class=\"cps-input-wrap\"\n    [ngClass]=\"{\n      password: type === 'password',\n      'cps-input-wrap-error': error,\n      clearable: clearable,\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <input\n      *ngIf=\"!valueToDisplay\"\n      spellcheck=\"false\"\n      [type]=\"currentType\"\n      [value]=\"value\"\n      (input)=\"updateValueEvent($event)\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (keydown.enter)=\"onInputEnterKeyDown()\"\n      [ngStyle]=\"{\n        width: cvtWidth,\n        'padding-left': prefixWidth || 'none'\n      }\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\" />\n\n    <input\n      *ngIf=\"valueToDisplay\"\n      [value]=\"valueToDisplay\"\n      [disabled]=\"true\"\n      [readonly]=\"true\"\n      [ngStyle]=\"{\n        width: cvtWidth,\n        'padding-left': prefixWidth || 'none'\n      }\" />\n\n    <div class=\"cps-input-prefix\">\n      <span *ngIf=\"prefixIcon\" class=\"cps-input-prefix-icon\">\n        <cps-icon\n          [icon]=\"prefixIcon\"\n          [size]=\"prefixIconSize\"\n          [style.color]=\"disabled ? '#9a9595' : null\"\n          [style.cursor]=\"\n            prefixIconClickable && !disabled && !readonly\n              ? 'pointer'\n              : 'default'\n          \"\n          (click)=\"onClickPrefixIcon()\">\n        </cps-icon>\n      </span>\n\n      <span *ngIf=\"prefixText\" class=\"cps-input-prefix-text\" #prefixTextSpan>\n        {{ prefixText }}\n      </span>\n    </div>\n\n    <div class=\"cps-input-action-btns\" *ngIf=\"!disabled && !readonly\">\n      <span\n        *ngIf=\"clearable\"\n        [style.visibility]=\"\n          persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n        \"\n        class=\"clear-btn\">\n        <cps-icon icon=\"delete\" size=\"small\" (click)=\"onClear()\"></cps-icon>\n      </span>\n\n      <span\n        *ngIf=\"type === 'password'\"\n        class=\"password-show-btn\"\n        [ngClass]=\"{ 'password-show-btn-active': currentType === 'text' }\">\n        <cps-icon icon=\"eye\" size=\"18px\" (click)=\"togglePassword()\"></cps-icon>\n      </span>\n    </div>\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"cps-input-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-input-hint\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-input-error\">\n    {{ error }}\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden}:host .cps-input-container .cps-input-wrap:hover input:enabled:not(:read-only){border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap-error input{border-color:var(--cps-color-error)!important}:host .cps-input-container .cps-input-wrap-error input:not(:focus){background:#fef3f2!important}:host .cps-input-container .cps-input-wrap-error .cps-input-prefix-icon{color:var(--cps-color-error)!important}:host .cps-input-container .cps-input-wrap input{min-height:38px;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;border:1px solid var(--cps-color-line-light);transition-duration:.2s;-webkit-appearance:none;appearance:none;border-radius:4px;width:100%}:host .cps-input-container .cps-input-wrap input:focus{outline:0}:host .cps-input-container .cps-input-wrap input:focus:not(:read-only){border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:read-only{cursor:default}:host .cps-input-container .cps-input-wrap input:disabled{opacity:1}:host .cps-input-container .cps-input-wrap input:disabled:not([readonly]){color:var(--cps-color-text-light);background-color:#f7f7f7;pointer-events:none}:host .cps-input-container .cps-input-wrap input[type=password]{font-family:Verdana}:host .cps-input-container .cps-input-wrap input:focus:not(:read-only)+.cps-input-prefix>.cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap input:hover:not(:read-only)+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:disabled+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix+.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{display:flex;cursor:pointer;color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:not(:read-only)+.cps-input-prefix:hover>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{display:flex;position:absolute;height:100%;top:50%;left:.8rem;transform:translateY(-50%)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{display:flex;flex-direction:column;justify-content:center;transition-duration:.2s;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{display:flex;flex-direction:column;justify-content:center;color:var(--cps-color-text-mild);cursor:default;line-height:1.2}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:1px;padding:0 1px;display:block}:host .cps-input-container .cps-input-wrap.borderless input,:host .cps-input-container .cps-input-wrap.underlined input{line-height:1;border:none!important;border-radius:0}:host .cps-input-container .cps-input-wrap.underlined input{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.8rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.2rem}:host .cps-input-container .cps-input-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-input-container .cps-input-label .cps-input-label-info-circle{margin-left:8px}:host .cps-input-container .cps-input-label-disabled{color:var(--cps-color-text-mild)}:host .cps-input-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: [{
+                    ], selector: 'cps-input', template: "<div class=\"cps-input-container\" [ngStyle]=\"{ width: cvtWidth }\">\n  <div\n    class=\"cps-input-label\"\n    [ngClass]=\"{ 'cps-input-label-disabled': disabled && !readonly }\"\n    *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-input-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\n  <div\n    class=\"cps-input-wrap\"\n    [ngClass]=\"{\n      password: type === 'password',\n      'cps-input-wrap-error': error,\n      clearable: clearable,\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <input\n      *ngIf=\"!valueToDisplay\"\n      spellcheck=\"false\"\n      [type]=\"currentType\"\n      [value]=\"value\"\n      (input)=\"updateValueEvent($event)\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      (keydown.enter)=\"onInputEnterKeyDown()\"\n      [ngStyle]=\"{\n        width: cvtWidth,\n        'padding-left': prefixWidth || 'none'\n      }\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\" />\n\n    <input\n      *ngIf=\"valueToDisplay\"\n      [value]=\"valueToDisplay\"\n      [disabled]=\"true\"\n      [readonly]=\"true\"\n      [ngStyle]=\"{\n        width: cvtWidth,\n        'padding-left': prefixWidth || 'none'\n      }\" />\n\n    <div class=\"cps-input-prefix\">\n      <span *ngIf=\"prefixIcon\" class=\"cps-input-prefix-icon\">\n        <cps-icon\n          [icon]=\"prefixIcon\"\n          [size]=\"prefixIconSize\"\n          [style.color]=\"disabled ? '#9a9595' : null\"\n          [style.cursor]=\"\n            prefixIconClickable && !disabled && !readonly\n              ? 'pointer'\n              : 'default'\n          \"\n          (click)=\"onClickPrefixIcon()\">\n        </cps-icon>\n      </span>\n\n      <span *ngIf=\"prefixText\" class=\"cps-input-prefix-text\" #prefixTextSpan>\n        {{ prefixText }}\n      </span>\n    </div>\n\n    <div class=\"cps-input-action-btns\" *ngIf=\"!disabled && !readonly\">\n      <span\n        *ngIf=\"clearable\"\n        [style.visibility]=\"\n          persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n        \"\n        class=\"clear-btn\">\n        <cps-icon icon=\"delete\" size=\"small\" (click)=\"onClear()\"></cps-icon>\n      </span>\n\n      <span\n        *ngIf=\"type === 'password'\"\n        class=\"password-show-btn\"\n        [ngClass]=\"{ 'password-show-btn-active': currentType === 'text' }\">\n        <cps-icon icon=\"eye\" size=\"18px\" (click)=\"togglePassword()\"></cps-icon>\n      </span>\n    </div>\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"cps-input-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-input-hint\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-input-error\">\n    {{ error }}\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden}:host .cps-input-container .cps-input-wrap:hover input:enabled:not(:read-only){border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap-error input{border-color:var(--cps-color-error)!important}:host .cps-input-container .cps-input-wrap-error input:not(:focus){background:#fef3f2!important}:host .cps-input-container .cps-input-wrap-error .cps-input-prefix-icon{color:var(--cps-color-error)!important}:host .cps-input-container .cps-input-wrap input{min-height:38px;font-family:Source Sans Pro,sans-serif;font-size:1rem;color:var(--cps-color-text-dark);background:#fff;padding:.375rem .75rem;line-height:1.5;border:1px solid var(--cps-color-line-light);transition-duration:.2s;appearance:none;border-radius:4px;width:100%}:host .cps-input-container .cps-input-wrap input:focus{outline:0}:host .cps-input-container .cps-input-wrap input:focus:not(:read-only){border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:read-only{cursor:default}:host .cps-input-container .cps-input-wrap input:disabled{opacity:1}:host .cps-input-container .cps-input-wrap input:disabled:not([readonly]){color:var(--cps-color-text-light);background-color:#f7f7f7;pointer-events:none}:host .cps-input-container .cps-input-wrap input[type=password]{font-family:Verdana}:host .cps-input-container .cps-input-wrap input:focus:not(:read-only)+.cps-input-prefix>.cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap input:hover:not(:read-only)+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:disabled+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix+.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{display:flex;cursor:pointer;color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:not(:read-only)+.cps-input-prefix:hover>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{display:flex;position:absolute;height:100%;top:50%;left:.8rem;transform:translateY(-50%)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{display:flex;flex-direction:column;justify-content:center;transition-duration:.2s;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{display:flex;flex-direction:column;justify-content:center;color:var(--cps-color-text-mild);cursor:default;line-height:1.2}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:1px;padding:0 1px;display:block}:host .cps-input-container .cps-input-wrap.borderless input,:host .cps-input-container .cps-input-wrap.underlined input{line-height:1;border:none!important;border-radius:0}:host .cps-input-container .cps-input-wrap.underlined input{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.8rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.2rem}:host .cps-input-container .cps-input-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-input-container .cps-input-label .cps-input-label-info-circle{margin-left:8px}:host .cps-input-container .cps-input-label-disabled{color:var(--cps-color-text-mild)}:host .cps-input-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-lightest);font-style:italic;opacity:1}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { label: [{
+                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
                 type: Input
@@ -1118,12 +1118,12 @@ class CpsChipComponent {
         event.stopPropagation();
         this.closed.emit(this.label);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsChipComponent, isStandalone: true, selector: "cps-chip", inputs: { label: "label", icon: "icon", iconColor: "iconColor", iconPosition: "iconPosition", closable: "closable", disabled: "disabled" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"classesList\">\n  <cps-icon\n    *ngIf=\"icon\"\n    class=\"cps-chip-icon\"\n    [icon]=\"icon\"\n    [color]=\"iconColor\"></cps-icon>\n  <span class=\"cps-chip-label\">{{ label }}</span>\n  <cps-icon\n    *ngIf=\"closable\"\n    class=\"cps-chip-close-icon\"\n    icon=\"close-x\"\n    size=\"xsmall\"\n    color=\"text-darkest\"\n    (click)=\"onCloseClick($event)\"></cps-icon>\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-chip{align-items:center;display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:14px;line-height:16px;padding:4px 12px;cursor:default}:host .cps-chip-close-icon{margin-left:6px;cursor:pointer}:host .cps-chip-close-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-calm)!important}:host .cps-chip-label{font-size:14px;color:var(--cps-color-text-darkest);font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400}:host .cps-chip.cps-chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .cps-chip.cps-chip-disabled .cps-chip-label{color:var(--cps-color-text-light)}:host .cps-chip.cps-chip-disabled .cps-chip-icon ::ng-deep .cps-icon,:host .cps-chip.cps-chip-disabled .cps-chip-close-icon ::ng-deep .cps-icon{color:var(--cps-color-text-light)!important}:host .cps-chip.cps-chip--icon-before .cps-chip-icon{margin-right:6px}:host .cps-chip.cps-chip--icon-after .cps-chip-icon{margin-left:6px;order: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: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] }); }
 }
-CpsChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CpsChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsChipComponent, isStandalone: true, selector: "cps-chip", inputs: { label: "label", icon: "icon", iconColor: "iconColor", iconPosition: "iconPosition", closable: "closable", disabled: "disabled" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"classesList\">\n  <cps-icon\n    *ngIf=\"icon\"\n    class=\"cps-chip-icon\"\n    [icon]=\"icon\"\n    [color]=\"iconColor\"></cps-icon>\n  <span class=\"cps-chip-label\">{{ label }}</span>\n  <cps-icon\n    *ngIf=\"closable\"\n    class=\"cps-chip-close-icon\"\n    icon=\"close-x\"\n    size=\"xsmall\"\n    color=\"text-darkest\"\n    (click)=\"onCloseClick($event)\"></cps-icon>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .cps-chip{align-items:center;display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:14px;line-height:16px;padding:4px 12px;cursor:default}:host .cps-chip-close-icon{margin-left:6px;cursor:pointer}:host .cps-chip-close-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-calm)!important}:host .cps-chip-label{font-size:14px;color:var(--cps-color-text-darkest);font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400}:host .cps-chip.cps-chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .cps-chip.cps-chip-disabled .cps-chip-label{color:var(--cps-color-text-light)}:host .cps-chip.cps-chip-disabled .cps-chip-icon ::ng-deep .cps-icon,:host .cps-chip.cps-chip-disabled .cps-chip-close-icon ::ng-deep .cps-icon{color:var(--cps-color-text-light)!important}:host .cps-chip.cps-chip--icon-before .cps-chip-icon{margin-right:6px}:host .cps-chip.cps-chip--icon-after .cps-chip-icon{margin-left:6px;order: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: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsChipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsChipComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, CpsIconComponent], selector: 'cps-chip', template: "<div [ngClass]=\"classesList\">\n  <cps-icon\n    *ngIf=\"icon\"\n    class=\"cps-chip-icon\"\n    [icon]=\"icon\"\n    [color]=\"iconColor\"></cps-icon>\n  <span class=\"cps-chip-label\">{{ label }}</span>\n  <cps-icon\n    *ngIf=\"closable\"\n    class=\"cps-chip-close-icon\"\n    icon=\"close-x\"\n    size=\"xsmall\"\n    color=\"text-darkest\"\n    (click)=\"onCloseClick($event)\"></cps-icon>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .cps-chip{align-items:center;display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:14px;line-height:16px;padding:4px 12px;cursor:default}:host .cps-chip-close-icon{margin-left:6px;cursor:pointer}:host .cps-chip-close-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-calm)!important}:host .cps-chip-label{font-size:14px;color:var(--cps-color-text-darkest);font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400}:host .cps-chip.cps-chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .cps-chip.cps-chip-disabled .cps-chip-label{color:var(--cps-color-text-light)}:host .cps-chip.cps-chip-disabled .cps-chip-icon ::ng-deep .cps-icon,:host .cps-chip.cps-chip-disabled .cps-chip-close-icon ::ng-deep .cps-icon{color:var(--cps-color-text-light)!important}:host .cps-chip.cps-chip--icon-before .cps-chip-icon{margin-right:6px}:host .cps-chip.cps-chip--icon-after .cps-chip-icon{margin-left:6px;order:1}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, CpsIconComponent], selector: 'cps-chip', template: "<div [ngClass]=\"classesList\">\n  <cps-icon\n    *ngIf=\"icon\"\n    class=\"cps-chip-icon\"\n    [icon]=\"icon\"\n    [color]=\"iconColor\"></cps-icon>\n  <span class=\"cps-chip-label\">{{ label }}</span>\n  <cps-icon\n    *ngIf=\"closable\"\n    class=\"cps-chip-close-icon\"\n    icon=\"close-x\"\n    size=\"xsmall\"\n    color=\"text-darkest\"\n    (click)=\"onCloseClick($event)\"></cps-icon>\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-chip{align-items:center;display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:14px;line-height:16px;padding:4px 12px;cursor:default}:host .cps-chip-close-icon{margin-left:6px;cursor:pointer}:host .cps-chip-close-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-calm)!important}:host .cps-chip-label{font-size:14px;color:var(--cps-color-text-darkest);font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400}:host .cps-chip.cps-chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .cps-chip.cps-chip-disabled .cps-chip-label{color:var(--cps-color-text-light)}:host .cps-chip.cps-chip-disabled .cps-chip-icon ::ng-deep .cps-icon,:host .cps-chip.cps-chip-disabled .cps-chip-close-icon ::ng-deep .cps-icon{color:var(--cps-color-text-light)!important}:host .cps-chip.cps-chip--icon-before .cps-chip-icon{margin-right:6px}:host .cps-chip.cps-chip--icon-after .cps-chip-icon{margin-left:6px;order:1}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], icon: [{
@@ -1145,10 +1145,10 @@ class LabelByValuePipe {
         const option = options.find((opt) => isEqual(opt[valueKey], value));
         return option ? option[labelKey] : '';
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: LabelByValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: LabelByValuePipe, isStandalone: true, name: "labelByValue" }); }
 }
-LabelByValuePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LabelByValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-LabelByValuePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: LabelByValuePipe, isStandalone: true, name: "labelByValue" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: LabelByValuePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: LabelByValuePipe, decorators: [{
             type: Pipe,
             args: [{ standalone: true, name: 'labelByValue' }]
         }] });
@@ -1167,10 +1167,10 @@ class CombineLabelsPipe {
         })
             .join(', ');
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CombineLabelsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: CombineLabelsPipe, isStandalone: true, name: "combineLabels" }); }
 }
-CombineLabelsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CombineLabelsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-CombineLabelsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: CombineLabelsPipe, isStandalone: true, name: "combineLabels" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CombineLabelsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CombineLabelsPipe, decorators: [{
             type: Pipe,
             args: [{ standalone: true, name: 'combineLabels' }]
         }] });
@@ -1188,10 +1188,10 @@ class CheckOptionSelectedPipe {
                 ? isEqual(option, value)
                 : isEqual(option[optionValue], value);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CheckOptionSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: CheckOptionSelectedPipe, isStandalone: true, name: "checkOptionSelected" }); }
 }
-CheckOptionSelectedPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckOptionSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-CheckOptionSelectedPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: CheckOptionSelectedPipe, isStandalone: true, name: "checkOptionSelected" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckOptionSelectedPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CheckOptionSelectedPipe, decorators: [{
             type: Pipe,
             args: [{ standalone: true, name: 'checkOptionSelected' }]
         }] });
@@ -1223,10 +1223,10 @@ class CpsProgressCircularComponent {
         this.strokeWidth = convertSize(this.strokeWidth);
         this.color = getCSSColor(this.color);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsProgressCircularComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", 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;border-bottom-right-radius:unset;animation:cps-progress-circular-animation .8s linear infinite}@keyframes cps-progress-circular-animation{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-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;border-bottom-right-radius:unset;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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", 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;border-bottom-right-radius:unset;animation:cps-progress-circular-animation .8s linear infinite}@keyframes cps-progress-circular-animation{to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { diameter: [{
@@ -1696,27 +1696,27 @@ class CpsMenuComponent {
     ngOnDestroy() {
         this._destroy();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsMenuComponent, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$1.PrimeNGConfig }, { token: i1$1.OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsMenuComponent, isStandalone: true, selector: "cps-menu", inputs: { header: "header", items: "items", withArrow: "withArrow", compressed: "compressed", focusOnShow: "focusOnShow", persistent: "persistent", containerClass: "containerClass", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { menuShown: "menuShown", menuHidden: "menuHidden", beforeMenuHidden: "beforeMenuHidden", contentClicked: "contentClicked" }, usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"render\"\n  class=\"cps-menu-container\"\n  [ngClass]=\"{ 'cps-menu-no-arrow': !withArrow }\"\n  [class]=\"containerClass\"\n  (mousedown)=\"onOverlayClick($event)\"\n  [@animation]=\"{\n    value: overlayVisible ? 'open' : 'close',\n    params: {\n      showTransitionParams: showTransitionOptions,\n      hideTransitionParams: hideTransitionOptions\n    }\n  }\"\n  (@animation.start)=\"onAnimationStart($event)\"\n  (@animation.done)=\"onAnimationEnd($event)\">\n  <div (mousedown)=\"onContentClick()\" (touchstart)=\"onContentClick()\">\n    <ng-container *ngIf=\"items.length < 1\">\n      <ng-content></ng-content>\n    </ng-container>\n    <div\n      *ngIf=\"items.length > 0\"\n      class=\"cps-menu-content\"\n      [ngClass]=\"{ 'cps-menu-content-compressed': compressed }\">\n      <div *ngIf=\"header && !compressed\" class=\"cps-menu-header\">\n        {{ header }}\n      </div>\n\n      <ng-container *ngFor=\"let item of items; let i = index\">\n        <a\n          *ngIf=\"!item.url\"\n          (click)=\"onItemClick($event, item)\"\n          [ngClass]=\"itemsClasses[i]\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate;\n              context: {\n                item: item\n              }\n            \"></ng-container>\n        </a>\n        <a\n          *ngIf=\"item.url && item.url.startsWith('/')\"\n          (click)=\"onItemClick($event, item)\"\n          [routerLink]=\"item.url\"\n          [target]=\"item.target\"\n          [ngClass]=\"itemsClasses[i]\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate;\n              context: {\n                item: item\n              }\n            \"></ng-container>\n        </a>\n        <a\n          *ngIf=\"item.url && !item.url.startsWith('/')\"\n          (click)=\"onItemClick($event, item)\"\n          [href]=\"item.url\"\n          [attr.target]=\"item.target\"\n          [ngClass]=\"itemsClasses[i]\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate;\n              context: {\n                item: item\n              }\n            \"></ng-container>\n        </a>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #itemTemplate let-item=\"item\">\n  <ng-container *ngIf=\"!item.loading; else spinnerMenuItem\">\n    <div class=\"cps-menu-item-icon\" *ngIf=\"withIcons\">\n      <cps-icon\n        *ngIf=\"item.icon\"\n        [icon]=\"item.icon\"\n        [color]=\"item.disabled ? 'text-light' : 'text-dark'\"\n        [size]=\"compressed ? 'small' : 'normal'\"></cps-icon>\n    </div>\n    <div class=\"cps-menu-item-content\">\n      <span class=\"cps-menu-item-content-title\">{{ item.title }}</span>\n      <span\n        *ngIf=\"item.desc && !compressed\"\n        class=\"cps-menu-item-content-desc\"\n        >{{ item.desc }}</span\n      >\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #spinnerMenuItem>\n  <span class=\"cps-menu-item-spinner\">\n    <cps-progress-circular\n      [strokeWidth]=\"2\"\n      [color]=\"compressed ? 'prepared' : 'calm'\"\n      [diameter]=\"16\">\n    </cps-progress-circular>\n  </span>\n</ng-template>\n", styles: [".cps-menu-container{background:#fff;border:0 none;box-shadow:0 1px 3px #0000004d;position:absolute;margin-top:14px;top:0;left:0;font-family:Source Sans Pro,sans-serif}.cps-menu-container:not(.cps-menu-no-arrow):before{border-width:14px;margin-left:-14px;border:solid transparent;border-color:#fff0;border-bottom-color:var(--cps-color-line-light)}.cps-menu-container:not(.cps-menu-no-arrow):after,.cps-menu-container:not(.cps-menu-no-arrow):before{bottom:100%;left:var(--overlayArrowLeft, 12);content:\" \";height:0;width:0;position:absolute;pointer-events:none}.cps-menu-container .cps-menu-content{padding:.75rem}.cps-menu-container .cps-menu-content{font-family:Source Sans Pro,sans-serif;display:flex;flex-direction:column;-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-menu-container .cps-menu-content .cps-menu-header{display:flex;align-items:center;min-height:50px;padding-bottom:8px;font-weight:600;color:var(--cps-color-text-dark);cursor:default}.cps-menu-container .cps-menu-content .cps-menu-item{text-decoration:unset;display:flex;align-items:center;padding:8px 48px 8px 0;border-top:1px solid rgba(0,0,0,.1215686275);cursor:pointer;min-height:58px}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-icon{width:48px;align-items:center;display:flex}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-icon cps-icon{margin-left:8px}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-content{display:flex;flex-direction:column}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-content .cps-menu-item-content-title{font-weight:600;font-size:15px;line-height:150%;color:var(--cps-color-text-dark)}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-content .cps-menu-item-content-desc{font-size:12px;line-height:150%;color:var(--cps-color-text-light)}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-spinner{width:100%;display:flex;align-items:center;justify-content:center}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-disabled{pointer-events:none}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-disabled .cps-menu-item-content .cps-menu-item-content-title{color:var(--cps-color-text-light)}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-disabled .cps-menu-item-content .cps-menu-item-content-desc{color:var(--cps-color-text-lightest)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):hover{background:var(--cps-color-highlight-hover)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):hover .cps-menu-item-content .cps-menu-item-content-title{color:var(--cps-color-calm)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):hover .cps-menu-item-content .cps-menu-item-content-desc{color:var(--cps-color-text-mild)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):not(.cps-menu-item-compressed):hover .cps-menu-item-icon cps-icon i{color:var(--cps-color-calm)!important}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):active{background:var(--cps-color-highlight-active)}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-first{border-top:none}.cps-menu-container .cps-menu-content.cps-menu-content-compressed{padding:0}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item{padding:0 16px;min-height:40px}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item .cps-menu-item-icon{width:36px}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item .cps-menu-item-content .cps-menu-item-content-title{font-weight:500}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item.cps-menu-item-compressed.cps-menu-item-compressed-with-icons{padding:0 26px 0 16px}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item:not(.cps-menu-item-disabled) .cps-menu-item-icon cps-icon i{color:var(--cps-color-prepared)!important}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item:not(.cps-menu-item-disabled) .cps-menu-item-content .cps-menu-item-content-title{color:var(--cps-color-prepared)}.cps-menu-container:not(.cps-menu-no-arrow):after{border-width:12px;margin-left:-12px;border:solid transparent;border-color:#fff0;border-bottom-color:#fff}.cps-menu-container-flipped{margin-top:0;margin-bottom:10px}.cps-menu-container:not(.cps-menu-no-arrow):after{border-width:12px;margin-left:-12px}.cps-menu-container:not(.cps-menu-no-arrow):before{border-width:14px;margin-left:-14px}.cps-menu-container-flipped:not(.cps-menu-no-arrow):after,.cps-menu-container-flipped:not(.cps-menu-no-arrow):before{bottom:auto;top:100%}.cps-menu-container.cps-menu-container-flipped:not(.cps-menu-no-arrow):after{border-bottom-color:transparent}.cps-menu-container.cps-menu-container-flipped:not(.cps-menu-no-arrow):before{border-bottom-color:transparent}.cps-menu-no-arrow{margin-top:0;margin-bottom:0}\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: "ngmodule", type: SharedModule }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsProgressCircularComponent, selector: "cps-progress-circular", inputs: ["diameter", "strokeWidth", "color"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], animations: [
+            trigger('animation', [
+                state('void', style({
+                    transform: 'scaleY(0.8)',
+                    opacity: 0
+                })),
+                state('close', style({
+                    transform: 'scaleY(0.8)',
+                    opacity: 0
+                })),
+                state('open', style({
+                    transform: 'translateY(0)',
+                    opacity: 1
+                })),
+                transition('void => open', animate('{{showTransitionParams}}')),
+                transition('open => close', animate('{{hideTransitionParams}}'))
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-CpsMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsMenuComponent, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$1.PrimeNGConfig }, { token: i1$1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-CpsMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsMenuComponent, isStandalone: true, selector: "cps-menu", inputs: { header: "header", items: "items", withArrow: "withArrow", compressed: "compressed", focusOnShow: "focusOnShow", persistent: "persistent", containerClass: "containerClass", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { menuShown: "menuShown", menuHidden: "menuHidden", beforeMenuHidden: "beforeMenuHidden", contentClicked: "contentClicked" }, usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"render\"\n  class=\"cps-menu-container\"\n  [ngClass]=\"{ 'cps-menu-no-arrow': !withArrow }\"\n  [class]=\"containerClass\"\n  (mousedown)=\"onOverlayClick($event)\"\n  [@animation]=\"{\n    value: overlayVisible ? 'open' : 'close',\n    params: {\n      showTransitionParams: showTransitionOptions,\n      hideTransitionParams: hideTransitionOptions\n    }\n  }\"\n  (@animation.start)=\"onAnimationStart($event)\"\n  (@animation.done)=\"onAnimationEnd($event)\">\n  <div (mousedown)=\"onContentClick()\" (touchstart)=\"onContentClick()\">\n    <ng-container *ngIf=\"items.length < 1\">\n      <ng-content></ng-content>\n    </ng-container>\n    <div\n      *ngIf=\"items.length > 0\"\n      class=\"cps-menu-content\"\n      [ngClass]=\"{ 'cps-menu-content-compressed': compressed }\">\n      <div *ngIf=\"header && !compressed\" class=\"cps-menu-header\">\n        {{ header }}\n      </div>\n\n      <ng-container *ngFor=\"let item of items; let i = index\">\n        <a\n          *ngIf=\"!item.url\"\n          (click)=\"onItemClick($event, item)\"\n          [ngClass]=\"itemsClasses[i]\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate;\n              context: {\n                item: item\n              }\n            \"></ng-container>\n        </a>\n        <a\n          *ngIf=\"item.url && item.url.startsWith('/')\"\n          (click)=\"onItemClick($event, item)\"\n          [routerLink]=\"item.url\"\n          [target]=\"item.target\"\n          [ngClass]=\"itemsClasses[i]\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate;\n              context: {\n                item: item\n              }\n            \"></ng-container>\n        </a>\n        <a\n          *ngIf=\"item.url && !item.url.startsWith('/')\"\n          (click)=\"onItemClick($event, item)\"\n          [href]=\"item.url\"\n          [attr.target]=\"item.target\"\n          [ngClass]=\"itemsClasses[i]\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate;\n              context: {\n                item: item\n              }\n            \"></ng-container>\n        </a>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #itemTemplate let-item=\"item\">\n  <ng-container *ngIf=\"!item.loading; else spinnerMenuItem\">\n    <div class=\"cps-menu-item-icon\" *ngIf=\"withIcons\">\n      <cps-icon\n        *ngIf=\"item.icon\"\n        [icon]=\"item.icon\"\n        [color]=\"item.disabled ? 'text-light' : 'text-dark'\"\n        [size]=\"compressed ? 'small' : 'normal'\"></cps-icon>\n    </div>\n    <div class=\"cps-menu-item-content\">\n      <span class=\"cps-menu-item-content-title\">{{ item.title }}</span>\n      <span\n        *ngIf=\"item.desc && !compressed\"\n        class=\"cps-menu-item-content-desc\"\n        >{{ item.desc }}</span\n      >\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #spinnerMenuItem>\n  <span class=\"cps-menu-item-spinner\">\n    <cps-progress-circular\n      [strokeWidth]=\"2\"\n      [color]=\"compressed ? 'prepared' : 'calm'\"\n      [diameter]=\"16\">\n    </cps-progress-circular>\n  </span>\n</ng-template>\n", styles: [".cps-menu-container{background:#ffffff;border:0 none;box-shadow:0 1px 3px #0000004d;position:absolute;margin-top:14px;top:0;left:0;font-family:Source Sans Pro,sans-serif}.cps-menu-container:not(.cps-menu-no-arrow):before{border-width:14px;margin-left:-14px;border:solid transparent;border-color:#fff0;border-bottom-color:var(--cps-color-line-light)}.cps-menu-container:not(.cps-menu-no-arrow):after,.cps-menu-container:not(.cps-menu-no-arrow):before{bottom:100%;left:var(--overlayArrowLeft, 12);content:\" \";height:0;width:0;position:absolute;pointer-events:none}.cps-menu-container .cps-menu-content{padding:.75rem}.cps-menu-container .cps-menu-content{font-family:Source Sans Pro,sans-serif;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none}.cps-menu-container .cps-menu-content .cps-menu-header{display:flex;align-items:center;min-height:50px;padding-bottom:8px;font-weight:600;color:var(--cps-color-text-dark);cursor:default}.cps-menu-container .cps-menu-content .cps-menu-item{text-decoration:unset;display:flex;align-items:center;padding:8px 48px 8px 0;border-top:1px solid rgba(0,0,0,.1215686275);cursor:pointer;min-height:58px}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-icon{width:48px;align-items:center;display:flex}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-icon cps-icon{margin-left:8px}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-content{display:flex;flex-direction:column}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-content .cps-menu-item-content-title{font-weight:600;font-size:15px;line-height:150%;color:var(--cps-color-text-dark)}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-content .cps-menu-item-content-desc{font-size:12px;line-height:150%;color:var(--cps-color-text-light)}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-spinner{width:100%;display:flex;align-items:center;justify-content:center}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-disabled{pointer-events:none}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-disabled .cps-menu-item-content .cps-menu-item-content-title{color:var(--cps-color-text-light)}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-disabled .cps-menu-item-content .cps-menu-item-content-desc{color:var(--cps-color-text-lightest)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):hover{background:var(--cps-color-highlight-hover)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):hover .cps-menu-item-content .cps-menu-item-content-title{color:var(--cps-color-calm)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):hover .cps-menu-item-content .cps-menu-item-content-desc{color:var(--cps-color-text-mild)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):not(.cps-menu-item-compressed):hover .cps-menu-item-icon cps-icon i{color:var(--cps-color-calm)!important}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):active{background:var(--cps-color-highlight-active)}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-first{border-top:none}.cps-menu-container .cps-menu-content.cps-menu-content-compressed{padding:0}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item{padding:0 16px;min-height:40px}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item .cps-menu-item-icon{width:36px}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item .cps-menu-item-content .cps-menu-item-content-title{font-weight:500}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item.cps-menu-item-compressed.cps-menu-item-compressed-with-icons{padding:0 26px 0 16px}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item:not(.cps-menu-item-disabled) .cps-menu-item-icon cps-icon i{color:var(--cps-color-prepared)!important}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item:not(.cps-menu-item-disabled) .cps-menu-item-content .cps-menu-item-content-title{color:var(--cps-color-prepared)}.cps-menu-container:not(.cps-menu-no-arrow):after{border-width:12px;margin-left:-12px;border:solid transparent;border-color:#fff0;border-bottom-color:#fff}.cps-menu-container-flipped{margin-top:0;margin-bottom:10px}.cps-menu-container:not(.cps-menu-no-arrow):after{border-width:12px;margin-left:-12px}.cps-menu-container:not(.cps-menu-no-arrow):before{border-width:14px;margin-left:-14px}.cps-menu-container-flipped:not(.cps-menu-no-arrow):after,.cps-menu-container-flipped:not(.cps-menu-no-arrow):before{bottom:auto;top:100%}.cps-menu-container.cps-menu-container-flipped:not(.cps-menu-no-arrow):after{border-bottom-color:transparent}.cps-menu-container.cps-menu-container-flipped:not(.cps-menu-no-arrow):before{border-bottom-color:transparent}.cps-menu-no-arrow{margin-top:0;margin-bottom:0}\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: "ngmodule", type: SharedModule }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsProgressCircularComponent, selector: "cps-progress-circular", inputs: ["diameter", "strokeWidth", "color"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], animations: [
-        trigger('animation', [
-            state('void', style({
-                transform: 'scaleY(0.8)',
-                opacity: 0
-            })),
-            state('close', style({
-                transform: 'scaleY(0.8)',
-                opacity: 0
-            })),
-            state('open', style({
-                transform: 'translateY(0)',
-                opacity: 1
-            })),
-            transition('void => open', animate('{{showTransitionParams}}')),
-            transition('open => close', animate('{{hideTransitionParams}}'))
-        ])
-    ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsMenuComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         CommonModule,
@@ -1741,14 +1741,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             transition('void => open', animate('{{showTransitionParams}}')),
                             transition('open => close', animate('{{hideTransitionParams}}'))
                         ])
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  *ngIf=\"render\"\n  class=\"cps-menu-container\"\n  [ngClass]=\"{ 'cps-menu-no-arrow': !withArrow }\"\n  [class]=\"containerClass\"\n  (mousedown)=\"onOverlayClick($event)\"\n  [@animation]=\"{\n    value: overlayVisible ? 'open' : 'close',\n    params: {\n      showTransitionParams: showTransitionOptions,\n      hideTransitionParams: hideTransitionOptions\n    }\n  }\"\n  (@animation.start)=\"onAnimationStart($event)\"\n  (@animation.done)=\"onAnimationEnd($event)\">\n  <div (mousedown)=\"onContentClick()\" (touchstart)=\"onContentClick()\">\n    <ng-container *ngIf=\"items.length < 1\">\n      <ng-content></ng-content>\n    </ng-container>\n    <div\n      *ngIf=\"items.length > 0\"\n      class=\"cps-menu-content\"\n      [ngClass]=\"{ 'cps-menu-content-compressed': compressed }\">\n      <div *ngIf=\"header && !compressed\" class=\"cps-menu-header\">\n        {{ header }}\n      </div>\n\n      <ng-container *ngFor=\"let item of items; let i = index\">\n        <a\n          *ngIf=\"!item.url\"\n          (click)=\"onItemClick($event, item)\"\n          [ngClass]=\"itemsClasses[i]\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate;\n              context: {\n                item: item\n              }\n            \"></ng-container>\n        </a>\n        <a\n          *ngIf=\"item.url && item.url.startsWith('/')\"\n          (click)=\"onItemClick($event, item)\"\n          [routerLink]=\"item.url\"\n          [target]=\"item.target\"\n          [ngClass]=\"itemsClasses[i]\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate;\n              context: {\n                item: item\n              }\n            \"></ng-container>\n        </a>\n        <a\n          *ngIf=\"item.url && !item.url.startsWith('/')\"\n          (click)=\"onItemClick($event, item)\"\n          [href]=\"item.url\"\n          [attr.target]=\"item.target\"\n          [ngClass]=\"itemsClasses[i]\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate;\n              context: {\n                item: item\n              }\n            \"></ng-container>\n        </a>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #itemTemplate let-item=\"item\">\n  <ng-container *ngIf=\"!item.loading; else spinnerMenuItem\">\n    <div class=\"cps-menu-item-icon\" *ngIf=\"withIcons\">\n      <cps-icon\n        *ngIf=\"item.icon\"\n        [icon]=\"item.icon\"\n        [color]=\"item.disabled ? 'text-light' : 'text-dark'\"\n        [size]=\"compressed ? 'small' : 'normal'\"></cps-icon>\n    </div>\n    <div class=\"cps-menu-item-content\">\n      <span class=\"cps-menu-item-content-title\">{{ item.title }}</span>\n      <span\n        *ngIf=\"item.desc && !compressed\"\n        class=\"cps-menu-item-content-desc\"\n        >{{ item.desc }}</span\n      >\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #spinnerMenuItem>\n  <span class=\"cps-menu-item-spinner\">\n    <cps-progress-circular\n      [strokeWidth]=\"2\"\n      [color]=\"compressed ? 'prepared' : 'calm'\"\n      [diameter]=\"16\">\n    </cps-progress-circular>\n  </span>\n</ng-template>\n", styles: [".cps-menu-container{background:#ffffff;border:0 none;box-shadow:0 1px 3px #0000004d;position:absolute;margin-top:14px;top:0;left:0;font-family:Source Sans Pro,sans-serif}.cps-menu-container:not(.cps-menu-no-arrow):before{border-width:14px;margin-left:-14px;border:solid transparent;border-color:#fff0;border-bottom-color:var(--cps-color-line-light)}.cps-menu-container:not(.cps-menu-no-arrow):after,.cps-menu-container:not(.cps-menu-no-arrow):before{bottom:100%;left:var(--overlayArrowLeft, 12);content:\" \";height:0;width:0;position:absolute;pointer-events:none}.cps-menu-container .cps-menu-content{padding:.75rem}.cps-menu-container .cps-menu-content{font-family:Source Sans Pro,sans-serif;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none}.cps-menu-container .cps-menu-content .cps-menu-header{display:flex;align-items:center;min-height:50px;padding-bottom:8px;font-weight:600;color:var(--cps-color-text-dark);cursor:default}.cps-menu-container .cps-menu-content .cps-menu-item{text-decoration:unset;display:flex;align-items:center;padding:8px 48px 8px 0;border-top:1px solid rgba(0,0,0,.1215686275);cursor:pointer;min-height:58px}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-icon{width:48px;align-items:center;display:flex}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-icon cps-icon{margin-left:8px}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-content{display:flex;flex-direction:column}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-content .cps-menu-item-content-title{font-weight:600;font-size:15px;line-height:150%;color:var(--cps-color-text-dark)}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-content .cps-menu-item-content-desc{font-size:12px;line-height:150%;color:var(--cps-color-text-light)}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-spinner{width:100%;display:flex;align-items:center;justify-content:center}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-disabled{pointer-events:none}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-disabled .cps-menu-item-content .cps-menu-item-content-title{color:var(--cps-color-text-light)}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-disabled .cps-menu-item-content .cps-menu-item-content-desc{color:var(--cps-color-text-lightest)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):hover{background:var(--cps-color-highlight-hover)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):hover .cps-menu-item-content .cps-menu-item-content-title{color:var(--cps-color-calm)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):hover .cps-menu-item-content .cps-menu-item-content-desc{color:var(--cps-color-text-mild)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):not(.cps-menu-item-compressed):hover .cps-menu-item-icon cps-icon i{color:var(--cps-color-calm)!important}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):active{background:var(--cps-color-highlight-active)}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-first{border-top:none}.cps-menu-container .cps-menu-content.cps-menu-content-compressed{padding:0}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item{padding:0 16px;min-height:40px}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item .cps-menu-item-icon{width:36px}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item .cps-menu-item-content .cps-menu-item-content-title{font-weight:500}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item.cps-menu-item-compressed.cps-menu-item-compressed-with-icons{padding:0 26px 0 16px}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item:not(.cps-menu-item-disabled) .cps-menu-item-icon cps-icon i{color:var(--cps-color-prepared)!important}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item:not(.cps-menu-item-disabled) .cps-menu-item-content .cps-menu-item-content-title{color:var(--cps-color-prepared)}.cps-menu-container:not(.cps-menu-no-arrow):after{border-width:12px;margin-left:-12px;border:solid transparent;border-color:#fff0;border-bottom-color:#fff}.cps-menu-container-flipped{margin-top:0;margin-bottom:10px}.cps-menu-container:not(.cps-menu-no-arrow):after{border-width:12px;margin-left:-12px}.cps-menu-container:not(.cps-menu-no-arrow):before{border-width:14px;margin-left:-14px}.cps-menu-container-flipped:not(.cps-menu-no-arrow):after,.cps-menu-container-flipped:not(.cps-menu-no-arrow):before{bottom:auto;top:100%}.cps-menu-container.cps-menu-container-flipped:not(.cps-menu-no-arrow):after{border-bottom-color:transparent}.cps-menu-container.cps-menu-container-flipped:not(.cps-menu-no-arrow):before{border-bottom-color:transparent}.cps-menu-no-arrow{margin-top:0;margin-bottom:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: Document, decorators: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  *ngIf=\"render\"\n  class=\"cps-menu-container\"\n  [ngClass]=\"{ 'cps-menu-no-arrow': !withArrow }\"\n  [class]=\"containerClass\"\n  (mousedown)=\"onOverlayClick($event)\"\n  [@animation]=\"{\n    value: overlayVisible ? 'open' : 'close',\n    params: {\n      showTransitionParams: showTransitionOptions,\n      hideTransitionParams: hideTransitionOptions\n    }\n  }\"\n  (@animation.start)=\"onAnimationStart($event)\"\n  (@animation.done)=\"onAnimationEnd($event)\">\n  <div (mousedown)=\"onContentClick()\" (touchstart)=\"onContentClick()\">\n    <ng-container *ngIf=\"items.length < 1\">\n      <ng-content></ng-content>\n    </ng-container>\n    <div\n      *ngIf=\"items.length > 0\"\n      class=\"cps-menu-content\"\n      [ngClass]=\"{ 'cps-menu-content-compressed': compressed }\">\n      <div *ngIf=\"header && !compressed\" class=\"cps-menu-header\">\n        {{ header }}\n      </div>\n\n      <ng-container *ngFor=\"let item of items; let i = index\">\n        <a\n          *ngIf=\"!item.url\"\n          (click)=\"onItemClick($event, item)\"\n          [ngClass]=\"itemsClasses[i]\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate;\n              context: {\n                item: item\n              }\n            \"></ng-container>\n        </a>\n        <a\n          *ngIf=\"item.url && item.url.startsWith('/')\"\n          (click)=\"onItemClick($event, item)\"\n          [routerLink]=\"item.url\"\n          [target]=\"item.target\"\n          [ngClass]=\"itemsClasses[i]\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate;\n              context: {\n                item: item\n              }\n            \"></ng-container>\n        </a>\n        <a\n          *ngIf=\"item.url && !item.url.startsWith('/')\"\n          (click)=\"onItemClick($event, item)\"\n          [href]=\"item.url\"\n          [attr.target]=\"item.target\"\n          [ngClass]=\"itemsClasses[i]\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate;\n              context: {\n                item: item\n              }\n            \"></ng-container>\n        </a>\n      </ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #itemTemplate let-item=\"item\">\n  <ng-container *ngIf=\"!item.loading; else spinnerMenuItem\">\n    <div class=\"cps-menu-item-icon\" *ngIf=\"withIcons\">\n      <cps-icon\n        *ngIf=\"item.icon\"\n        [icon]=\"item.icon\"\n        [color]=\"item.disabled ? 'text-light' : 'text-dark'\"\n        [size]=\"compressed ? 'small' : 'normal'\"></cps-icon>\n    </div>\n    <div class=\"cps-menu-item-content\">\n      <span class=\"cps-menu-item-content-title\">{{ item.title }}</span>\n      <span\n        *ngIf=\"item.desc && !compressed\"\n        class=\"cps-menu-item-content-desc\"\n        >{{ item.desc }}</span\n      >\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #spinnerMenuItem>\n  <span class=\"cps-menu-item-spinner\">\n    <cps-progress-circular\n      [strokeWidth]=\"2\"\n      [color]=\"compressed ? 'prepared' : 'calm'\"\n      [diameter]=\"16\">\n    </cps-progress-circular>\n  </span>\n</ng-template>\n", styles: [".cps-menu-container{background:#fff;border:0 none;box-shadow:0 1px 3px #0000004d;position:absolute;margin-top:14px;top:0;left:0;font-family:Source Sans Pro,sans-serif}.cps-menu-container:not(.cps-menu-no-arrow):before{border-width:14px;margin-left:-14px;border:solid transparent;border-color:#fff0;border-bottom-color:var(--cps-color-line-light)}.cps-menu-container:not(.cps-menu-no-arrow):after,.cps-menu-container:not(.cps-menu-no-arrow):before{bottom:100%;left:var(--overlayArrowLeft, 12);content:\" \";height:0;width:0;position:absolute;pointer-events:none}.cps-menu-container .cps-menu-content{padding:.75rem}.cps-menu-container .cps-menu-content{font-family:Source Sans Pro,sans-serif;display:flex;flex-direction:column;-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-menu-container .cps-menu-content .cps-menu-header{display:flex;align-items:center;min-height:50px;padding-bottom:8px;font-weight:600;color:var(--cps-color-text-dark);cursor:default}.cps-menu-container .cps-menu-content .cps-menu-item{text-decoration:unset;display:flex;align-items:center;padding:8px 48px 8px 0;border-top:1px solid rgba(0,0,0,.1215686275);cursor:pointer;min-height:58px}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-icon{width:48px;align-items:center;display:flex}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-icon cps-icon{margin-left:8px}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-content{display:flex;flex-direction:column}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-content .cps-menu-item-content-title{font-weight:600;font-size:15px;line-height:150%;color:var(--cps-color-text-dark)}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-content .cps-menu-item-content-desc{font-size:12px;line-height:150%;color:var(--cps-color-text-light)}.cps-menu-container .cps-menu-content .cps-menu-item .cps-menu-item-spinner{width:100%;display:flex;align-items:center;justify-content:center}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-disabled{pointer-events:none}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-disabled .cps-menu-item-content .cps-menu-item-content-title{color:var(--cps-color-text-light)}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-disabled .cps-menu-item-content .cps-menu-item-content-desc{color:var(--cps-color-text-lightest)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):hover{background:var(--cps-color-highlight-hover)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):hover .cps-menu-item-content .cps-menu-item-content-title{color:var(--cps-color-calm)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):hover .cps-menu-item-content .cps-menu-item-content-desc{color:var(--cps-color-text-mild)}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):not(.cps-menu-item-compressed):hover .cps-menu-item-icon cps-icon i{color:var(--cps-color-calm)!important}.cps-menu-container .cps-menu-content .cps-menu-item:not(.cps-menu-item-disabled):active{background:var(--cps-color-highlight-active)}.cps-menu-container .cps-menu-content .cps-menu-item.cps-menu-item-first{border-top:none}.cps-menu-container .cps-menu-content.cps-menu-content-compressed{padding:0}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item{padding:0 16px;min-height:40px}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item .cps-menu-item-icon{width:36px}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item .cps-menu-item-content .cps-menu-item-content-title{font-weight:500}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item.cps-menu-item-compressed.cps-menu-item-compressed-with-icons{padding:0 26px 0 16px}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item:not(.cps-menu-item-disabled) .cps-menu-item-icon cps-icon i{color:var(--cps-color-prepared)!important}.cps-menu-container .cps-menu-content.cps-menu-content-compressed .cps-menu-item:not(.cps-menu-item-disabled) .cps-menu-item-content .cps-menu-item-content-title{color:var(--cps-color-prepared)}.cps-menu-container:not(.cps-menu-no-arrow):after{border-width:12px;margin-left:-12px;border:solid transparent;border-color:#fff0;border-bottom-color:#fff}.cps-menu-container-flipped{margin-top:0;margin-bottom:10px}.cps-menu-container:not(.cps-menu-no-arrow):after{border-width:12px;margin-left:-12px}.cps-menu-container:not(.cps-menu-no-arrow):before{border-width:14px;margin-left:-14px}.cps-menu-container-flipped:not(.cps-menu-no-arrow):after,.cps-menu-container-flipped:not(.cps-menu-no-arrow):before{bottom:auto;top:100%}.cps-menu-container.cps-menu-container-flipped:not(.cps-menu-no-arrow):after{border-bottom-color:transparent}.cps-menu-container.cps-menu-container-flipped:not(.cps-menu-no-arrow):before{border-bottom-color:transparent}.cps-menu-no-arrow{margin-top:0;margin-bottom:0}\n"] }]
+        }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$1.PrimeNGConfig }, { type: i1$1.OverlayService }]; }, propDecorators: { header: [{
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$1.PrimeNGConfig }, { type: i1$1.OverlayService }], propDecorators: { header: [{
                 type: Input
             }], items: [{
                 type: Input
@@ -2265,10 +2265,10 @@ class CpsSelectComponent {
             (typeof this.value === 'string' && this.value.trim() === '') ||
             Number.isNaN(this.value));
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsSelectComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsSelectComponent, isStandalone: true, selector: "cps-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", 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", optionsClass: "optionsClass", appearance: "appearance", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true }, { propertyName: "selectContainer", first: true, predicate: ["selectContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-select\"\n  tabindex=\"0\"\n  [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n  #selectContainer\n  (keydown)=\"onKeyDown($event)\"\n  (blur)=\"onBlur()\">\n  <div class=\"cps-select-label\" *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-select-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-select-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div class=\"cps-select-box\" #selectBox (click)=\"onBoxClick()\">\n      <div class=\"cps-select-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-select-box-placeholder\"\n          *ngIf=\"\n            (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n          \">\n          {{ placeholder }}\n        </div>\n        <div\n          class=\"cps-select-box-items\"\n          *ngIf=\"\n            (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n          \">\n          <span *ngIf=\"!multiple\" class=\"single-item\">\n            {{\n              returnObject\n                ? value[optionLabel]\n                : (value | labelByValue : options : optionValue : optionLabel)\n            }}</span\n          >\n          <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n            <span class=\"text-group-item\">\n              {{\n                value\n                  | combineLabels\n                    : options\n                    : optionValue\n                    : optionLabel\n                    : returnObject\n              }}\n            </span>\n          </div>\n\n          <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n            <cps-chip\n              *ngFor=\"let val of value\"\n              [disabled]=\"disabled\"\n              [closable]=\"closableChips\"\n              (closed)=\"select(val, true)\"\n              [label]=\"\n                returnObject\n                  ? val[optionLabel]\n                  : (val | labelByValue : options : optionValue : optionLabel)\n              \">\n            </cps-chip>\n          </div>\n        </div>\n      </div>\n      <span class=\"cps-select-box-icons\">\n        <span\n          *ngIf=\"clearable && !disabled\"\n          [style.visibility]=\"\n            persistentClear ||\n            (!persistentClear &&\n              ((multiple && value?.length) || (!multiple && !isEmptyValue())))\n              ? 'visible'\n              : 'hidden'\n          \"\n          class=\"cps-select-box-clear-icon\">\n          <cps-icon\n            icon=\"delete\"\n            size=\"small\"\n            (click)=\"clear($event)\"></cps-icon>\n        </span>\n        <span class=\"cps-select-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-select-options-menu ' + optionsClass\">\n      <div\n        #optionsList\n        class=\"cps-select-options\"\n        [ngStyle]=\"{\n          width: selectBoxWidth + 'px'\n        }\">\n        <ng-container *ngIf=\"!virtualScroll\">\n          <div\n            class=\"cps-select-options-option select-all-option\"\n            [class.allselected]=\"value?.length === options.length\"\n            *ngIf=\"multiple && selectAll && options.length > 1\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-select-options-option-left\">\n              <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n              </span>\n              <span class=\"cps-select-options-option-label\">Select all</span>\n            </span>\n          </div>\n          <ng-container *ngFor=\"let item of options\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                  item: item\n                }\n              \"></ng-container>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"virtualScroll\">\n          <p-virtualScroller\n            #virtualList\n            [value]=\"options\"\n            [delay]=\"0\"\n            [scrollHeight]=\"virtualListHeight + 'px'\"\n            [options]=\"{ numToleratedItems: numToleratedItems }\"\n            [itemSize]=\"virtualScrollItemSize\">\n            <ng-template pTemplate=\"item\" let-item>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item\n                  }\n                \"></ng-container>\n            </ng-template>\n          </p-virtualScroller>\n        </ng-container>\n      </div>\n    </cps-menu>\n\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"select-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-select-hint\">{{ hint }}</div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-select-error\">{{ error }}</div>\n</div>\n\n<ng-template #itemTemplate let-item=\"item\">\n  <div\n    class=\"cps-select-options-option\"\n    (click)=\"onOptionClick(item)\"\n    [class.selected]=\"\n      item | checkOptionSelected : value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-select-options-option-left\">\n      <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\"> </span>\n      <span\n        class=\"cps-select-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-select-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-select .cps-select-container{position:relative}:host .cps-select .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-select .cps-select-container.borderless .cps-select-box,:host .cps-select .cps-select-container.underlined .cps-select-box{line-height:1;border:none!important;border-radius:0}:host .cps-select .cps-select-container.underlined .cps-select-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-select .cps-select-label .cps-select-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5}:host .cps-select .cps-select-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-select .cps-select-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:3px;margin-bottom:3px}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select .cps-select-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-select .cps-select-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-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:#f7f7f7}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:var(--cps-color-error)!important;background:#fef3f2!important}.cps-select-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-select-options .cps-select-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-select-options .cps-select-options-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-select-options .cps-select-options-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-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-select-options .cps-select-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-select-options .cps-select-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-select-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-options .virtual-row{white-space:nowrap}\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: "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: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }, { kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i3.VirtualScroller, selector: "p-virtualScroller", inputs: ["value", "itemSize", "style", "styleClass", "scrollHeight", "lazy", "options", "delay"], outputs: ["onLazyLoad"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] }); }
 }
-CpsSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsSelectComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-CpsSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsSelectComponent, isStandalone: true, selector: "cps-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", 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", optionsClass: "optionsClass", appearance: "appearance", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true }, { propertyName: "selectContainer", first: true, predicate: ["selectContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-select\"\n  tabindex=\"0\"\n  [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n  #selectContainer\n  (keydown)=\"onKeyDown($event)\"\n  (blur)=\"onBlur()\">\n  <div class=\"cps-select-label\" *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-select-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-select-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div class=\"cps-select-box\" #selectBox (click)=\"onBoxClick()\">\n      <div class=\"cps-select-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-select-box-placeholder\"\n          *ngIf=\"\n            (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n          \">\n          {{ placeholder }}\n        </div>\n        <div\n          class=\"cps-select-box-items\"\n          *ngIf=\"\n            (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n          \">\n          <span *ngIf=\"!multiple\" class=\"single-item\">\n            {{\n              returnObject\n                ? value[optionLabel]\n                : (value | labelByValue : options : optionValue : optionLabel)\n            }}</span\n          >\n          <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n            <span class=\"text-group-item\">\n              {{\n                value\n                  | combineLabels\n                    : options\n                    : optionValue\n                    : optionLabel\n                    : returnObject\n              }}\n            </span>\n          </div>\n\n          <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n            <cps-chip\n              *ngFor=\"let val of value\"\n              [disabled]=\"disabled\"\n              [closable]=\"closableChips\"\n              (closed)=\"select(val, true)\"\n              [label]=\"\n                returnObject\n                  ? val[optionLabel]\n                  : (val | labelByValue : options : optionValue : optionLabel)\n              \">\n            </cps-chip>\n          </div>\n        </div>\n      </div>\n      <span class=\"cps-select-box-icons\">\n        <span\n          *ngIf=\"clearable && !disabled\"\n          [style.visibility]=\"\n            persistentClear ||\n            (!persistentClear &&\n              ((multiple && value?.length) || (!multiple && !isEmptyValue())))\n              ? 'visible'\n              : 'hidden'\n          \"\n          class=\"cps-select-box-clear-icon\">\n          <cps-icon\n            icon=\"delete\"\n            size=\"small\"\n            (click)=\"clear($event)\"></cps-icon>\n        </span>\n        <span class=\"cps-select-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-select-options-menu ' + optionsClass\">\n      <div\n        #optionsList\n        class=\"cps-select-options\"\n        [ngStyle]=\"{\n          width: selectBoxWidth + 'px'\n        }\">\n        <ng-container *ngIf=\"!virtualScroll\">\n          <div\n            class=\"cps-select-options-option select-all-option\"\n            [class.allselected]=\"value?.length === options.length\"\n            *ngIf=\"multiple && selectAll && options.length > 1\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-select-options-option-left\">\n              <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n              </span>\n              <span class=\"cps-select-options-option-label\">Select all</span>\n            </span>\n          </div>\n          <ng-container *ngFor=\"let item of options\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                  item: item\n                }\n              \"></ng-container>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"virtualScroll\">\n          <p-virtualScroller\n            #virtualList\n            [value]=\"options\"\n            [delay]=\"0\"\n            [scrollHeight]=\"virtualListHeight + 'px'\"\n            [options]=\"{ numToleratedItems: numToleratedItems }\"\n            [itemSize]=\"virtualScrollItemSize\">\n            <ng-template pTemplate=\"item\" let-item>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item\n                  }\n                \"></ng-container>\n            </ng-template>\n          </p-virtualScroller>\n        </ng-container>\n      </div>\n    </cps-menu>\n\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"select-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-select-hint\">{{ hint }}</div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-select-error\">{{ error }}</div>\n</div>\n\n<ng-template #itemTemplate let-item=\"item\">\n  <div\n    class=\"cps-select-options-option\"\n    (click)=\"onOptionClick(item)\"\n    [class.selected]=\"\n      item | checkOptionSelected : value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-select-options-option-left\">\n      <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\"> </span>\n      <span\n        class=\"cps-select-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-select-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-select .cps-select-container{position:relative}:host .cps-select .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-select .cps-select-container.borderless .cps-select-box,:host .cps-select .cps-select-container.underlined .cps-select-box{line-height:1;border:none!important;border-radius:0}:host .cps-select .cps-select-container.underlined .cps-select-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-select .cps-select-label .cps-select-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5}:host .cps-select .cps-select-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-line-light);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:3px;margin-bottom:3px}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select .cps-select-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-select .cps-select-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-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:#f7f7f7}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:var(--cps-color-error)!important;background:#fef3f2!important}.cps-select-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-select-options .cps-select-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-select-options .cps-select-options-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-select-options .cps-select-options-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-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-select-options .cps-select-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-select-options .cps-select-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-select-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-options .virtual-row{white-space:nowrap}\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: "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: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }, { kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i3.VirtualScroller, selector: "p-virtualScroller", inputs: ["value", "itemSize", "style", "styleClass", "scrollHeight", "lazy", "options", "delay"], outputs: ["onLazyLoad"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: "15.2.9", ngImport: i0, type: CpsSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsSelectComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         CommonModule,
@@ -2282,12 +2282,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         CheckOptionSelectedPipe,
                         VirtualScrollerModule,
                         CpsMenuComponent
-                    ], providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], selector: 'cps-select', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-select\"\n  tabindex=\"0\"\n  [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n  #selectContainer\n  (keydown)=\"onKeyDown($event)\"\n  (blur)=\"onBlur()\">\n  <div class=\"cps-select-label\" *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-select-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-select-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div class=\"cps-select-box\" #selectBox (click)=\"onBoxClick()\">\n      <div class=\"cps-select-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-select-box-placeholder\"\n          *ngIf=\"\n            (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n          \">\n          {{ placeholder }}\n        </div>\n        <div\n          class=\"cps-select-box-items\"\n          *ngIf=\"\n            (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n          \">\n          <span *ngIf=\"!multiple\" class=\"single-item\">\n            {{\n              returnObject\n                ? value[optionLabel]\n                : (value | labelByValue : options : optionValue : optionLabel)\n            }}</span\n          >\n          <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n            <span class=\"text-group-item\">\n              {{\n                value\n                  | combineLabels\n                    : options\n                    : optionValue\n                    : optionLabel\n                    : returnObject\n              }}\n            </span>\n          </div>\n\n          <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n            <cps-chip\n              *ngFor=\"let val of value\"\n              [disabled]=\"disabled\"\n              [closable]=\"closableChips\"\n              (closed)=\"select(val, true)\"\n              [label]=\"\n                returnObject\n                  ? val[optionLabel]\n                  : (val | labelByValue : options : optionValue : optionLabel)\n              \">\n            </cps-chip>\n          </div>\n        </div>\n      </div>\n      <span class=\"cps-select-box-icons\">\n        <span\n          *ngIf=\"clearable && !disabled\"\n          [style.visibility]=\"\n            persistentClear ||\n            (!persistentClear &&\n              ((multiple && value?.length) || (!multiple && !isEmptyValue())))\n              ? 'visible'\n              : 'hidden'\n          \"\n          class=\"cps-select-box-clear-icon\">\n          <cps-icon\n            icon=\"delete\"\n            size=\"small\"\n            (click)=\"clear($event)\"></cps-icon>\n        </span>\n        <span class=\"cps-select-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-select-options-menu ' + optionsClass\">\n      <div\n        #optionsList\n        class=\"cps-select-options\"\n        [ngStyle]=\"{\n          width: selectBoxWidth + 'px'\n        }\">\n        <ng-container *ngIf=\"!virtualScroll\">\n          <div\n            class=\"cps-select-options-option select-all-option\"\n            [class.allselected]=\"value?.length === options.length\"\n            *ngIf=\"multiple && selectAll && options.length > 1\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-select-options-option-left\">\n              <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n              </span>\n              <span class=\"cps-select-options-option-label\">Select all</span>\n            </span>\n          </div>\n          <ng-container *ngFor=\"let item of options\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                  item: item\n                }\n              \"></ng-container>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"virtualScroll\">\n          <p-virtualScroller\n            #virtualList\n            [value]=\"options\"\n            [delay]=\"0\"\n            [scrollHeight]=\"virtualListHeight + 'px'\"\n            [options]=\"{ numToleratedItems: numToleratedItems }\"\n            [itemSize]=\"virtualScrollItemSize\">\n            <ng-template pTemplate=\"item\" let-item>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item\n                  }\n                \"></ng-container>\n            </ng-template>\n          </p-virtualScroller>\n        </ng-container>\n      </div>\n    </cps-menu>\n\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"select-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-select-hint\">{{ hint }}</div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-select-error\">{{ error }}</div>\n</div>\n\n<ng-template #itemTemplate let-item=\"item\">\n  <div\n    class=\"cps-select-options-option\"\n    (click)=\"onOptionClick(item)\"\n    [class.selected]=\"\n      item | checkOptionSelected : value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-select-options-option-left\">\n      <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\"> </span>\n      <span\n        class=\"cps-select-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-select-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-select .cps-select-container{position:relative}:host .cps-select .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-select .cps-select-container.borderless .cps-select-box,:host .cps-select .cps-select-container.underlined .cps-select-box{line-height:1;border:none!important;border-radius:0}:host .cps-select .cps-select-container.underlined .cps-select-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-select .cps-select-label .cps-select-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5}:host .cps-select .cps-select-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-line-light);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:3px;margin-bottom:3px}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select .cps-select-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-select .cps-select-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-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:#f7f7f7}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:var(--cps-color-error)!important;background:#fef3f2!important}.cps-select-options{background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-select-options .cps-select-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-select-options .cps-select-options-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-select-options .cps-select-options-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-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-select-options .cps-select-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-select-options .cps-select-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-select-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-options .virtual-row{white-space:nowrap}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+                    ], providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], selector: 'cps-select', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-select\"\n  tabindex=\"0\"\n  [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n  #selectContainer\n  (keydown)=\"onKeyDown($event)\"\n  (blur)=\"onBlur()\">\n  <div class=\"cps-select-label\" *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-select-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-select-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div class=\"cps-select-box\" #selectBox (click)=\"onBoxClick()\">\n      <div class=\"cps-select-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-select-box-placeholder\"\n          *ngIf=\"\n            (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n          \">\n          {{ placeholder }}\n        </div>\n        <div\n          class=\"cps-select-box-items\"\n          *ngIf=\"\n            (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n          \">\n          <span *ngIf=\"!multiple\" class=\"single-item\">\n            {{\n              returnObject\n                ? value[optionLabel]\n                : (value | labelByValue : options : optionValue : optionLabel)\n            }}</span\n          >\n          <div *ngIf=\"multiple && !chips\" class=\"text-group\">\n            <span class=\"text-group-item\">\n              {{\n                value\n                  | combineLabels\n                    : options\n                    : optionValue\n                    : optionLabel\n                    : returnObject\n              }}\n            </span>\n          </div>\n\n          <div *ngIf=\"multiple && chips\" class=\"chips-group\">\n            <cps-chip\n              *ngFor=\"let val of value\"\n              [disabled]=\"disabled\"\n              [closable]=\"closableChips\"\n              (closed)=\"select(val, true)\"\n              [label]=\"\n                returnObject\n                  ? val[optionLabel]\n                  : (val | labelByValue : options : optionValue : optionLabel)\n              \">\n            </cps-chip>\n          </div>\n        </div>\n      </div>\n      <span class=\"cps-select-box-icons\">\n        <span\n          *ngIf=\"clearable && !disabled\"\n          [style.visibility]=\"\n            persistentClear ||\n            (!persistentClear &&\n              ((multiple && value?.length) || (!multiple && !isEmptyValue())))\n              ? 'visible'\n              : 'hidden'\n          \"\n          class=\"cps-select-box-clear-icon\">\n          <cps-icon\n            icon=\"delete\"\n            size=\"small\"\n            (click)=\"clear($event)\"></cps-icon>\n        </span>\n        <span class=\"cps-select-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-select-options-menu ' + optionsClass\">\n      <div\n        #optionsList\n        class=\"cps-select-options\"\n        [ngStyle]=\"{\n          width: selectBoxWidth + 'px'\n        }\">\n        <ng-container *ngIf=\"!virtualScroll\">\n          <div\n            class=\"cps-select-options-option select-all-option\"\n            [class.allselected]=\"value?.length === options.length\"\n            *ngIf=\"multiple && selectAll && options.length > 1\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-select-options-option-left\">\n              <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\">\n              </span>\n              <span class=\"cps-select-options-option-label\">Select all</span>\n            </span>\n          </div>\n          <ng-container *ngFor=\"let item of options\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                  item: item\n                }\n              \"></ng-container>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"virtualScroll\">\n          <p-virtualScroller\n            #virtualList\n            [value]=\"options\"\n            [delay]=\"0\"\n            [scrollHeight]=\"virtualListHeight + 'px'\"\n            [options]=\"{ numToleratedItems: numToleratedItems }\"\n            [itemSize]=\"virtualScrollItemSize\">\n            <ng-template pTemplate=\"item\" let-item>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item\n                  }\n                \"></ng-container>\n            </ng-template>\n          </p-virtualScroller>\n        </ng-container>\n      </div>\n    </cps-menu>\n\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"select-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-select-hint\">{{ hint }}</div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-select-error\">{{ error }}</div>\n</div>\n\n<ng-template #itemTemplate let-item=\"item\">\n  <div\n    class=\"cps-select-options-option\"\n    (click)=\"onOptionClick(item)\"\n    [class.selected]=\"\n      item | checkOptionSelected : value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-select-options-option-left\">\n      <span *ngIf=\"multiple\" class=\"cps-select-options-option-check\"> </span>\n      <span\n        class=\"cps-select-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-select-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-select .cps-select-container{position:relative}:host .cps-select .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-select .cps-select-container.borderless .cps-select-box,:host .cps-select .cps-select-container.underlined .cps-select-box{line-height:1;border:none!important;border-radius:0}:host .cps-select .cps-select-container.underlined .cps-select-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-select .cps-select-label .cps-select-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5}:host .cps-select .cps-select-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-select .cps-select-box-placeholder{color:var(--cps-color-text-lightest);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:3px;margin-bottom:3px}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select .cps-select-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-select .cps-select-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-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:#f7f7f7}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:var(--cps-color-error)!important;background:#fef3f2!important}.cps-select-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-select-options .cps-select-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-select-options .cps-select-options-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-select-options .cps-select-options-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-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-select-options .cps-select-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-select-options .cps-select-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-select-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-options .virtual-row{white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }]; }, propDecorators: { label: [{
+                }] }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -2712,7 +2712,9 @@ class CpsBaseTreeDropdownComponent {
                     else
                         key = this.treeSelection.key;
                     if (key) {
-                        const idx = this.treeList?.serializedValue?.findIndex((v) => v.node.key === key) || -1;
+                        const idx = this.treeList?.serializedValue?.findIndex(
+                        // Todo: Add explicit type
+                        (v) => v.node.key === key) || -1;
                         if (idx >= 0)
                             this.treeList.scrollToVirtualIndex(idx);
                     }
@@ -2730,7 +2732,7 @@ class CpsBaseTreeDropdownComponent {
         if (!this.isOpened)
             return;
         if (!this.optionFocused) {
-            const firstElem = this.treeContainerElement?.querySelector('.p-treenode-content');
+            const firstElem = this.treeContainerElement?.querySelector('.p-treenode');
             if (firstElem)
                 firstElem.focus();
             this.optionFocused = true;
@@ -2741,7 +2743,8 @@ class CpsBaseTreeDropdownComponent {
         setTimeout(() => {
             this.optionsMenu.align();
         });
-        elem?.focus();
+        if (elem?.parentElement)
+            (elem?.parentElement).focus();
     }
     _nodeToggledWithChevron(elem) {
         this._nodeToggled(elem);
@@ -2898,19 +2901,19 @@ class CpsBaseTreeDropdownComponent {
             return;
         this.options = [...this.options];
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", 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.1.2", 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", 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 }); }
 }
-CpsBaseTreeDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsBaseTreeDropdownComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CpsBaseTreeDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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", 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsBaseTreeDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsBaseTreeDropdownComponent, decorators: [{
             type: Component,
             args: [{
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { label: [{
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
                 type: Input
@@ -3028,10 +3031,10 @@ class CpsTreeSelectComponent extends CpsBaseTreeDropdownComponent {
             this.initArrowsNavigaton();
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", 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.1.2", 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 | 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($event)\"></cps-icon>\n        </span>\n        <span 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"] }] }); }
 }
-CpsTreeSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeSelectComponent, deps: [{ token: i1.NgControl, optional: 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: { 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 | 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($event)\"></cps-icon>\n        </span>\n        <span 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:white;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:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeselect-options ::ng-deep .p-tree{background:#ffffff;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}.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 .p-treenode-content:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{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 .p-treenode-content.p-highlight:focus{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 .p-treenode-content .p-tree-toggler:focus{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;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: "15.2.9", ngImport: i0, type: CpsTreeSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTreeSelectComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         CommonModule,
@@ -3043,10 +3046,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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              {{\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($event)\"></cps-icon>\n        </span>\n        <span 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:white;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:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeselect-options ::ng-deep .p-tree{background:#ffffff;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}.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 .p-treenode-content:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{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 .p-treenode-content.p-highlight:focus{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 .p-treenode-content .p-tree-toggler:focus{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;user-select:none}.cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:16px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+                    ], 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 | 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($event)\"></cps-icon>\n        </span>\n        <span 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"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Optional
-                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { appearance: [{
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { appearance: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -3737,10 +3740,10 @@ class CpsAutocompleteComponent {
             (typeof this.value === 'string' && this.value.trim() === '') ||
             Number.isNaN(this.value));
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsAutocompleteComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: LabelByValuePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", showChevron: "showChevron", withOptionsAliases: "withOptionsAliases", useOptionsAliasesWhenNoMatch: "useOptionsAliasesWhenNoMatch", optionAlias: "optionAlias", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", emptyMessage: "emptyMessage", showEmptyMessage: "showEmptyMessage", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", externalError: "externalError", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged", blurred: "blurred" }, providers: [LabelByValuePipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "autocompleteBox", first: true, predicate: ["autocompleteBox"], descendants: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], ngImport: i0, template: "<div\n  data-cy-id=\"cps-autocomplete\"\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  tabindex=\"1\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isOpened\n  }\"\n  #autocompleteContainer>\n  <div class=\"cps-autocomplete-label\" *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-autocomplete-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-autocomplete-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-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-autocomplete-box-items\"\n          *ngIf=\"\n            (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple);\n            else autocompleteInput\n          \">\n          <span *ngIf=\"!multiple\" class=\"single-item\">\n            <div class=\"single-item-selection\">\n              <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                returnObject\n                  ? value[optionLabel]\n                  : (value | labelByValue : options : optionValue : optionLabel)\n              }}</span>\n            </div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                autocompleteInput;\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 value; let last = last\"\n              class=\"text-group-item\"\n              [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n              {{\n                returnObject\n                  ? val[optionLabel]\n                  : (val | labelByValue : options : optionValue : optionLabel)\n              }}{{ !last ? ',' : '' }}\n            </div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                autocompleteInput;\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 value; let last = last\"\n              [disabled]=\"disabled\"\n              [closable]=\"closableChips\"\n              (closed)=\"select(val, true)\"\n              [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n              [label]=\"\n                returnObject\n                  ? val[optionLabel]\n                  : (val | labelByValue : options : optionValue : optionLabel)\n              \">\n            </cps-chip>\n            <ng-container\n              *ngTemplateOutlet=\"\n                autocompleteInput;\n                context: {\n                  inputClass: 'multi-chip-input'\n                }\n              \"></ng-container>\n          </div>\n        </div>\n        <span class=\"cps-autocomplete-box-icons\">\n          <span\n            *ngIf=\"clearable && !disabled\"\n            [style.visibility]=\"\n              persistentClear ||\n              (!persistentClear &&\n                ((multiple && value?.length) || (!multiple && !isEmptyValue())))\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-autocomplete-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-autocomplete-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-autocomplete-options-menu\">\n      <div\n        #optionsList\n        class=\"cps-autocomplete-options\"\n        [ngStyle]=\"{\n          width: autocompleteBoxWidth + 'px'\n        }\">\n        <div\n          *ngIf=\"showEmptyMessage && filteredOptions.length < 1\"\n          class=\"cps-autocomplete-options-empty\">\n          {{ emptyMessage }}\n        </div>\n        <ng-container *ngIf=\"!virtualScroll\">\n          <div\n            class=\"cps-autocomplete-options-option select-all-option\"\n            [class.allselected]=\"value?.length === options.length\"\n            *ngIf=\"\n              multiple &&\n              selectAll &&\n              filteredOptions.length === options.length &&\n              options.length > 1\n            \"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-autocomplete-options-option-left\">\n              <span\n                *ngIf=\"multiple\"\n                class=\"cps-autocomplete-options-option-check\">\n              </span>\n              <span class=\"cps-autocomplete-options-option-label\"\n                >Select all</span\n              >\n            </span>\n          </div>\n          <ng-container *ngFor=\"let item of filteredOptions\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                  item: item\n                }\n              \"></ng-container>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"virtualScroll\">\n          <p-virtualScroller\n            #virtualList\n            [value]=\"filteredOptions\"\n            [delay]=\"0\"\n            [scrollHeight]=\"virtualListHeight + 'px'\"\n            [options]=\"{ numToleratedItems: numToleratedItems }\"\n            [itemSize]=\"virtualScrollItemSize\">\n            <ng-template pTemplate=\"item\" let-item>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item\n                  }\n                \"></ng-container>\n            </ng-template>\n          </p-virtualScroller>\n        </ng-container>\n      </div>\n    </cps-menu>\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"autocomplete-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div\n    *ngIf=\"!error && !externalError && !hideDetails\"\n    class=\"cps-autocomplete-hint\">\n    {{ hint }}\n  </div>\n  <div\n    *ngIf=\"(error || externalError) && !hideDetails\"\n    class=\"cps-autocomplete-error\">\n    {{ error }}\n  </div>\n</div>\n\n<ng-template\n  #autocompleteInput\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    class=\"cps-autocomplete-box-input\"\n    spellcheck=\"false\"\n    [class]=\"inputClass\"\n    [style]=\"inputStyle\"\n    [placeholder]=\"\n      (!multiple && isEmptyValue()) || (value?.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\n<ng-template #itemTemplate let-item=\"item\">\n  <div\n    class=\"cps-autocomplete-options-option\"\n    (click)=\"onOptionClick(item)\"\n    [class.selected]=\"\n      item | checkOptionSelected : value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n      </span>\n      <span\n        data-cy-id=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box{background:#fff!important}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-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-autocomplete .cps-autocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-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-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-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-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-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-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:28px}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-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-autocomplete .cps-autocomplete-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-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:#f7f7f7}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-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-autocomplete-options{font-family:Source Sans Pro,sans-serif;background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty{padding:11px;font-size:16px;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-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-autocomplete-options .cps-autocomplete-options-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-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\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: "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: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }, { kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i3.VirtualScroller, selector: "p-virtualScroller", inputs: ["value", "itemSize", "style", "styleClass", "scrollHeight", "lazy", "options", "delay"], outputs: ["onLazyLoad"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] }); }
 }
-CpsAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsAutocompleteComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: LabelByValuePipe }], target: i0.ɵɵFactoryTarget.Component });
-CpsAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", showChevron: "showChevron", withOptionsAliases: "withOptionsAliases", useOptionsAliasesWhenNoMatch: "useOptionsAliasesWhenNoMatch", optionAlias: "optionAlias", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", emptyMessage: "emptyMessage", showEmptyMessage: "showEmptyMessage", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", externalError: "externalError", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged", blurred: "blurred" }, providers: [LabelByValuePipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "autocompleteBox", first: true, predicate: ["autocompleteBox"], descendants: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], ngImport: i0, template: "<div\n  data-cy-id=\"cps-autocomplete\"\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  tabindex=\"1\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isOpened\n  }\"\n  #autocompleteContainer>\n  <div class=\"cps-autocomplete-label\" *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-autocomplete-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-autocomplete-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-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-autocomplete-box-items\"\n          *ngIf=\"\n            (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple);\n            else autocompleteInput\n          \">\n          <span *ngIf=\"!multiple\" class=\"single-item\">\n            <div class=\"single-item-selection\">\n              <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                returnObject\n                  ? value[optionLabel]\n                  : (value | labelByValue : options : optionValue : optionLabel)\n              }}</span>\n            </div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                autocompleteInput;\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 value; let last = last\"\n              class=\"text-group-item\"\n              [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n              {{\n                returnObject\n                  ? val[optionLabel]\n                  : (val | labelByValue : options : optionValue : optionLabel)\n              }}{{ !last ? ',' : '' }}\n            </div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                autocompleteInput;\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 value; let last = last\"\n              [disabled]=\"disabled\"\n              [closable]=\"closableChips\"\n              (closed)=\"select(val, true)\"\n              [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n              [label]=\"\n                returnObject\n                  ? val[optionLabel]\n                  : (val | labelByValue : options : optionValue : optionLabel)\n              \">\n            </cps-chip>\n            <ng-container\n              *ngTemplateOutlet=\"\n                autocompleteInput;\n                context: {\n                  inputClass: 'multi-chip-input'\n                }\n              \"></ng-container>\n          </div>\n        </div>\n        <span class=\"cps-autocomplete-box-icons\">\n          <span\n            *ngIf=\"clearable && !disabled\"\n            [style.visibility]=\"\n              persistentClear ||\n              (!persistentClear &&\n                ((multiple && value?.length) || (!multiple && !isEmptyValue())))\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-autocomplete-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-autocomplete-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-autocomplete-options-menu\">\n      <div\n        #optionsList\n        class=\"cps-autocomplete-options\"\n        [ngStyle]=\"{\n          width: autocompleteBoxWidth + 'px'\n        }\">\n        <div\n          *ngIf=\"showEmptyMessage && filteredOptions.length < 1\"\n          class=\"cps-autocomplete-options-empty\">\n          {{ emptyMessage }}\n        </div>\n        <ng-container *ngIf=\"!virtualScroll\">\n          <div\n            class=\"cps-autocomplete-options-option select-all-option\"\n            [class.allselected]=\"value?.length === options.length\"\n            *ngIf=\"\n              multiple &&\n              selectAll &&\n              filteredOptions.length === options.length &&\n              options.length > 1\n            \"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-autocomplete-options-option-left\">\n              <span\n                *ngIf=\"multiple\"\n                class=\"cps-autocomplete-options-option-check\">\n              </span>\n              <span class=\"cps-autocomplete-options-option-label\"\n                >Select all</span\n              >\n            </span>\n          </div>\n          <ng-container *ngFor=\"let item of filteredOptions\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                  item: item\n                }\n              \"></ng-container>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"virtualScroll\">\n          <p-virtualScroller\n            #virtualList\n            [value]=\"filteredOptions\"\n            [delay]=\"0\"\n            [scrollHeight]=\"virtualListHeight + 'px'\"\n            [options]=\"{ numToleratedItems: numToleratedItems }\"\n            [itemSize]=\"virtualScrollItemSize\">\n            <ng-template pTemplate=\"item\" let-item>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item\n                  }\n                \"></ng-container>\n            </ng-template>\n          </p-virtualScroller>\n        </ng-container>\n      </div>\n    </cps-menu>\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"autocomplete-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div\n    *ngIf=\"!error && !externalError && !hideDetails\"\n    class=\"cps-autocomplete-hint\">\n    {{ hint }}\n  </div>\n  <div\n    *ngIf=\"(error || externalError) && !hideDetails\"\n    class=\"cps-autocomplete-error\">\n    {{ error }}\n  </div>\n</div>\n\n<ng-template\n  #autocompleteInput\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    class=\"cps-autocomplete-box-input\"\n    spellcheck=\"false\"\n    [class]=\"inputClass\"\n    [style]=\"inputStyle\"\n    [placeholder]=\"\n      (!multiple && isEmptyValue()) || (value?.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\n<ng-template #itemTemplate let-item=\"item\">\n  <div\n    class=\"cps-autocomplete-options-option\"\n    (click)=\"onOptionClick(item)\"\n    [class.selected]=\"\n      item | checkOptionSelected : value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n      </span>\n      <span\n        data-cy-id=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box{background:white!important}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-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-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-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-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-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-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:28px}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-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-autocomplete .cps-autocomplete-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-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:#f7f7f7}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-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-autocomplete-options{font-family:Source Sans Pro,sans-serif;background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty{padding:11px;font-size:16px;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-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-autocomplete-options .cps-autocomplete-options-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-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\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: "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: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }, { kind: "ngmodule", type: VirtualScrollerModule }, { kind: "component", type: i3.VirtualScroller, selector: "p-virtualScroller", inputs: ["value", "itemSize", "style", "styleClass", "scrollHeight", "lazy", "options", "delay"], outputs: ["onLazyLoad"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: "15.2.9", ngImport: i0, type: CpsAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         CommonModule,
@@ -3753,12 +3756,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         CheckOptionSelectedPipe,
                         VirtualScrollerModule,
                         CpsMenuComponent
-                    ], providers: [LabelByValuePipe, CheckOptionSelectedPipe], selector: 'cps-autocomplete', template: "<div\n  data-cy-id=\"cps-autocomplete\"\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  tabindex=\"1\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isOpened\n  }\"\n  #autocompleteContainer>\n  <div class=\"cps-autocomplete-label\" *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-autocomplete-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-autocomplete-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-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-autocomplete-box-items\"\n          *ngIf=\"\n            (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple);\n            else autocompleteInput\n          \">\n          <span *ngIf=\"!multiple\" class=\"single-item\">\n            <div class=\"single-item-selection\">\n              <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                returnObject\n                  ? value[optionLabel]\n                  : (value | labelByValue : options : optionValue : optionLabel)\n              }}</span>\n            </div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                autocompleteInput;\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 value; let last = last\"\n              class=\"text-group-item\"\n              [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n              {{\n                returnObject\n                  ? val[optionLabel]\n                  : (val | labelByValue : options : optionValue : optionLabel)\n              }}{{ !last ? ',' : '' }}\n            </div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                autocompleteInput;\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 value; let last = last\"\n              [disabled]=\"disabled\"\n              [closable]=\"closableChips\"\n              (closed)=\"select(val, true)\"\n              [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n              [label]=\"\n                returnObject\n                  ? val[optionLabel]\n                  : (val | labelByValue : options : optionValue : optionLabel)\n              \">\n            </cps-chip>\n            <ng-container\n              *ngTemplateOutlet=\"\n                autocompleteInput;\n                context: {\n                  inputClass: 'multi-chip-input'\n                }\n              \"></ng-container>\n          </div>\n        </div>\n        <span class=\"cps-autocomplete-box-icons\">\n          <span\n            *ngIf=\"clearable && !disabled\"\n            [style.visibility]=\"\n              persistentClear ||\n              (!persistentClear &&\n                ((multiple && value?.length) || (!multiple && !isEmptyValue())))\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-autocomplete-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-autocomplete-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-autocomplete-options-menu\">\n      <div\n        #optionsList\n        class=\"cps-autocomplete-options\"\n        [ngStyle]=\"{\n          width: autocompleteBoxWidth + 'px'\n        }\">\n        <div\n          *ngIf=\"showEmptyMessage && filteredOptions.length < 1\"\n          class=\"cps-autocomplete-options-empty\">\n          {{ emptyMessage }}\n        </div>\n        <ng-container *ngIf=\"!virtualScroll\">\n          <div\n            class=\"cps-autocomplete-options-option select-all-option\"\n            [class.allselected]=\"value?.length === options.length\"\n            *ngIf=\"\n              multiple &&\n              selectAll &&\n              filteredOptions.length === options.length &&\n              options.length > 1\n            \"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-autocomplete-options-option-left\">\n              <span\n                *ngIf=\"multiple\"\n                class=\"cps-autocomplete-options-option-check\">\n              </span>\n              <span class=\"cps-autocomplete-options-option-label\"\n                >Select all</span\n              >\n            </span>\n          </div>\n          <ng-container *ngFor=\"let item of filteredOptions\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                  item: item\n                }\n              \"></ng-container>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"virtualScroll\">\n          <p-virtualScroller\n            #virtualList\n            [value]=\"filteredOptions\"\n            [delay]=\"0\"\n            [scrollHeight]=\"virtualListHeight + 'px'\"\n            [options]=\"{ numToleratedItems: numToleratedItems }\"\n            [itemSize]=\"virtualScrollItemSize\">\n            <ng-template pTemplate=\"item\" let-item>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item\n                  }\n                \"></ng-container>\n            </ng-template>\n          </p-virtualScroller>\n        </ng-container>\n      </div>\n    </cps-menu>\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"autocomplete-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div\n    *ngIf=\"!error && !externalError && !hideDetails\"\n    class=\"cps-autocomplete-hint\">\n    {{ hint }}\n  </div>\n  <div\n    *ngIf=\"(error || externalError) && !hideDetails\"\n    class=\"cps-autocomplete-error\">\n    {{ error }}\n  </div>\n</div>\n\n<ng-template\n  #autocompleteInput\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    class=\"cps-autocomplete-box-input\"\n    spellcheck=\"false\"\n    [class]=\"inputClass\"\n    [style]=\"inputStyle\"\n    [placeholder]=\"\n      (!multiple && isEmptyValue()) || (value?.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\n<ng-template #itemTemplate let-item=\"item\">\n  <div\n    class=\"cps-autocomplete-options-option\"\n    (click)=\"onOptionClick(item)\"\n    [class.selected]=\"\n      item | checkOptionSelected : value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n      </span>\n      <span\n        data-cy-id=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box{background:white!important}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:white;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-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-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-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-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-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-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:28px}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-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-autocomplete .cps-autocomplete-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-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:#f7f7f7}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-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-autocomplete-options{font-family:Source Sans Pro,sans-serif;background:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty{padding:11px;font-size:16px;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-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-autocomplete-options .cps-autocomplete-options-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-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+                    ], providers: [LabelByValuePipe, CheckOptionSelectedPipe], selector: 'cps-autocomplete', template: "<div\n  data-cy-id=\"cps-autocomplete\"\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  tabindex=\"1\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isOpened\n  }\"\n  #autocompleteContainer>\n  <div class=\"cps-autocomplete-label\" *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-autocomplete-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-autocomplete-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-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-autocomplete-box-items\"\n          *ngIf=\"\n            (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple);\n            else autocompleteInput\n          \">\n          <span *ngIf=\"!multiple\" class=\"single-item\">\n            <div class=\"single-item-selection\">\n              <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                returnObject\n                  ? value[optionLabel]\n                  : (value | labelByValue : options : optionValue : optionLabel)\n              }}</span>\n            </div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                autocompleteInput;\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 value; let last = last\"\n              class=\"text-group-item\"\n              [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\">\n              {{\n                returnObject\n                  ? val[optionLabel]\n                  : (val | labelByValue : options : optionValue : optionLabel)\n              }}{{ !last ? ',' : '' }}\n            </div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                autocompleteInput;\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 value; let last = last\"\n              [disabled]=\"disabled\"\n              [closable]=\"closableChips\"\n              (closed)=\"select(val, true)\"\n              [ngClass]=\"{ 'about-to-remove': last && backspaceClickedOnce }\"\n              [label]=\"\n                returnObject\n                  ? val[optionLabel]\n                  : (val | labelByValue : options : optionValue : optionLabel)\n              \">\n            </cps-chip>\n            <ng-container\n              *ngTemplateOutlet=\"\n                autocompleteInput;\n                context: {\n                  inputClass: 'multi-chip-input'\n                }\n              \"></ng-container>\n          </div>\n        </div>\n        <span class=\"cps-autocomplete-box-icons\">\n          <span\n            *ngIf=\"clearable && !disabled\"\n            [style.visibility]=\"\n              persistentClear ||\n              (!persistentClear &&\n                ((multiple && value?.length) || (!multiple && !isEmptyValue())))\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-autocomplete-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-autocomplete-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-autocomplete-options-menu\">\n      <div\n        #optionsList\n        class=\"cps-autocomplete-options\"\n        [ngStyle]=\"{\n          width: autocompleteBoxWidth + 'px'\n        }\">\n        <div\n          *ngIf=\"showEmptyMessage && filteredOptions.length < 1\"\n          class=\"cps-autocomplete-options-empty\">\n          {{ emptyMessage }}\n        </div>\n        <ng-container *ngIf=\"!virtualScroll\">\n          <div\n            class=\"cps-autocomplete-options-option select-all-option\"\n            [class.allselected]=\"value?.length === options.length\"\n            *ngIf=\"\n              multiple &&\n              selectAll &&\n              filteredOptions.length === options.length &&\n              options.length > 1\n            \"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-autocomplete-options-option-left\">\n              <span\n                *ngIf=\"multiple\"\n                class=\"cps-autocomplete-options-option-check\">\n              </span>\n              <span class=\"cps-autocomplete-options-option-label\"\n                >Select all</span\n              >\n            </span>\n          </div>\n          <ng-container *ngFor=\"let item of filteredOptions\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                  item: item\n                }\n              \"></ng-container>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"virtualScroll\">\n          <p-virtualScroller\n            #virtualList\n            [value]=\"filteredOptions\"\n            [delay]=\"0\"\n            [scrollHeight]=\"virtualListHeight + 'px'\"\n            [options]=\"{ numToleratedItems: numToleratedItems }\"\n            [itemSize]=\"virtualScrollItemSize\">\n            <ng-template pTemplate=\"item\" let-item>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item\n                  }\n                \"></ng-container>\n            </ng-template>\n          </p-virtualScroller>\n        </ng-container>\n      </div>\n    </cps-menu>\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"autocomplete-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div\n    *ngIf=\"!error && !externalError && !hideDetails\"\n    class=\"cps-autocomplete-hint\">\n    {{ hint }}\n  </div>\n  <div\n    *ngIf=\"(error || externalError) && !hideDetails\"\n    class=\"cps-autocomplete-error\">\n    {{ error }}\n  </div>\n</div>\n\n<ng-template\n  #autocompleteInput\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    class=\"cps-autocomplete-box-input\"\n    spellcheck=\"false\"\n    [class]=\"inputClass\"\n    [style]=\"inputStyle\"\n    [placeholder]=\"\n      (!multiple && isEmptyValue()) || (value?.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\n<ng-template #itemTemplate let-item=\"item\">\n  <div\n    class=\"cps-autocomplete-options-option\"\n    (click)=\"onOptionClick(item)\"\n    [class.selected]=\"\n      item | checkOptionSelected : value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      <span *ngIf=\"multiple\" class=\"cps-autocomplete-options-option-check\">\n      </span>\n      <span\n        data-cy-id=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box{background:#fff!important}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container.focused .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-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-autocomplete .cps-autocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-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-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-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-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-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-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:28px}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-autocomplete .cps-autocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-autocomplete .cps-autocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-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-autocomplete .cps-autocomplete-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-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:#f7f7f7}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-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-autocomplete-options{font-family:Source Sans Pro,sans-serif;background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty{padding:11px;font-size:16px;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-light);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-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-autocomplete-options .cps-autocomplete-options-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-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: LabelByValuePipe }]; }, propDecorators: { label: [{
+                }] }, { type: LabelByValuePipe }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -4033,6 +4036,7 @@ class CpsTreeAutocompleteComponent extends CpsBaseTreeDropdownComponent {
             this._closeAndClear();
             return;
         }
+        // Todo: Add explicit type
         const found = this.treeList?.serializedValue?.find((sv) => sv?.node?.label?.toLowerCase() === searchVal);
         if (found) {
             this._select(found.node);
@@ -4065,10 +4069,10 @@ class CpsTreeAutocompleteComponent extends CpsBaseTreeDropdownComponent {
             this.focusInput();
         }, 0);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", 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.1.2", 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            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"] }] }); }
 }
-CpsTreeAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeAutocompleteComponent, deps: [{ token: i1.NgControl, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CpsTreeAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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            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:white!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:white;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:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#ffffff;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}.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 .p-treenode-content:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{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 .p-treenode-content.p-highlight:focus{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 .p-treenode-content .p-tree-toggler:focus{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;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: "15.2.9", ngImport: i0, type: CpsTreeAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTreeAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         CommonModule,
@@ -4079,10 +4083,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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            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:white!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:white;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:white;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#ffffff;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}.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 .p-treenode-content:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):focus{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 .p-treenode-content.p-highlight:focus{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 .p-treenode-content .p-tree-toggler:focus{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;user-select:none}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-directory-elem{font-weight:700;font-size:16px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+                    ], 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            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"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Optional
-                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { emptyMessage: [{
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { emptyMessage: [{
                 type: Input
             }], appearance: [{
                 type: Input
@@ -4237,12 +4241,12 @@ class CpsButtonComponent {
     onClick(event) {
         this.clicked.emit(event);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsButtonComponent, isStandalone: true, selector: "cps-button", inputs: { color: "color", contentColor: "contentColor", type: "type", label: "label", icon: "icon", iconPosition: "iconPosition", size: "size", width: "width", height: "height", disabled: "disabled", loading: "loading" }, outputs: { clicked: "clicked" }, host: { properties: { "style.width": "this.cvtWidth" } }, ngImport: i0, template: "<div>\n  <button\n    type=\"button\"\n    [ngClass]=\"classesList\"\n    [disabled]=\"disabled || loading\"\n    (click)=\"onClick($event)\"\n    [class.loading]=\"loading\"\n    [ngStyle]=\"{\n    'background-color': type==='solid' ? buttonColor : 'transparent',\n    color: textColor,\n    height: cvtHeight || 'none',\n  }\">\n    <div class=\"cps-button__spinner\">\n      <cps-progress-circular\n        *ngIf=\"loading\"\n        color=\"currentColor\"\n        [diameter]=\"cvtIconSize\"\n        strokeWidth=\"2\">\n      </cps-progress-circular>\n    </div>\n    <div\n      class=\"cps-button__content\"\n      [style.visibility]=\"loading ? 'hidden' : null\">\n      <cps-icon\n        *ngIf=\"icon\"\n        class=\"cps-button__icon\"\n        [icon]=\"icon\"\n        [color]=\"disabled ? 'text-light' : textColor\"\n        [size]=\"cvtIconSize\">\n      </cps-icon>\n      <span\n        class=\"cps-button__text\"\n        *ngIf=\"label\"\n        [ngStyle]=\"{ 'font-size': cvtFontSize || null }\"\n        >{{ label }}</span\n      >\n    </div>\n  </button>\n</div>\n", styles: [":host{width:fit-content;display:inline-block}:host .cps-button{width:100%;letter-spacing:normal;font-family:Source Sans Pro,sans-serif;display:inline-flex;align-items:center;justify-content:center;position:relative;border-radius:4px;border:none;cursor:pointer;outline:none;padding:0 16px;font-weight:500}:host .cps-button:hover:not(:active):not(:disabled){background-image:linear-gradient(#ffffff1a 0 0);box-shadow:0 2px 4px #0c0c0d33}:host .cps-button:active:not(:disabled){background-image:linear-gradient(#0000001a 0 0)}:host .cps-button__content{display:inline-flex}:host .cps-button__icon{align-self:center}:host .cps-button:disabled{cursor:default}:host .cps-button--solid{border:0}:host .cps-button--solid:disabled{background-color:var(--cps-color-line-mid)!important;color:var(--cps-color-text-light)!important}:host .cps-button--outlined{border:2px solid;box-sizing:border-box}:host .cps-button--outlined:disabled{border-color:var(--cps-color-line-dark)!important;color:var(--cps-color-text-light)!important}:host .cps-button--borderless:disabled{color:var(--cps-color-text-light)!important}:host .cps-button--borderless:hover:not(:active):not(:disabled){box-shadow:0 1px 4px #0c0c0d1a}:host .cps-button--large{min-height:48px}:host .cps-button--large .cps-button__icon{width:20px;height:20px}:host .cps-button--large .cps-button__text{font-size:20px}:host .cps-button--large .cps-button__spinner ::ng-deep .cps-progress-circular{width:22px}:host .cps-button--large.loading{min-width:56px}:host .cps-button--normal{min-height:40px}:host .cps-button--normal .cps-button__icon{width:16px;height:16px}:host .cps-button--normal .cps-button__text{font-size:16px}:host .cps-button--normal .cps-button__spinner ::ng-deep .cps-progress-circular{width:18px}:host .cps-button--normal.loading{min-width:48px}:host .cps-button--small{min-height:32px}:host .cps-button--small .cps-button__icon{width:14px;height:14px}:host .cps-button--small .cps-button__text{font-size:14px}:host .cps-button--small .cps-button__spinner ::ng-deep .cps-progress-circular{width:14px}:host .cps-button--small.loading{min-width:40px}:host .cps-button--xsmall{min-height:24px}:host .cps-button--xsmall .cps-button__icon{width:12px;height:12px}:host .cps-button--xsmall .cps-button__text{font-size:12px}:host .cps-button--xsmall .cps-button__spinner ::ng-deep .cps-progress-circular{width:10px}:host .cps-button--xsmall.loading{min-width:32px}:host .cps-button.cps-button--icon-before .cps-button__icon{margin-right:8px}:host .cps-button.cps-button--icon-after .cps-button__icon{margin-left:8px;order:1}:host .cps-button .cps-button__text{line-height:1}:host .cps-button .cps-button__spinner{position:absolute;display:flex}\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"] }, { kind: "component", type: CpsProgressCircularComponent, selector: "cps-progress-circular", inputs: ["diameter", "strokeWidth", "color"] }] }); }
 }
-CpsButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CpsButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsButtonComponent, isStandalone: true, selector: "cps-button", inputs: { color: "color", contentColor: "contentColor", type: "type", label: "label", icon: "icon", iconPosition: "iconPosition", size: "size", width: "width", height: "height", disabled: "disabled", loading: "loading" }, outputs: { clicked: "clicked" }, host: { properties: { "style.width": "this.cvtWidth" } }, ngImport: i0, template: "<div>\n  <button\n    type=\"button\"\n    [ngClass]=\"classesList\"\n    [disabled]=\"disabled || loading\"\n    (click)=\"onClick($event)\"\n    [class.loading]=\"loading\"\n    [ngStyle]=\"{\n    'background-color': type==='solid' ? buttonColor : 'transparent',\n    color: textColor,\n    height: cvtHeight || 'none',\n  }\">\n    <div class=\"cps-button__spinner\">\n      <cps-progress-circular\n        *ngIf=\"loading\"\n        color=\"currentColor\"\n        [diameter]=\"cvtIconSize\"\n        strokeWidth=\"2\">\n      </cps-progress-circular>\n    </div>\n    <div\n      class=\"cps-button__content\"\n      [style.visibility]=\"loading ? 'hidden' : null\">\n      <cps-icon\n        *ngIf=\"icon\"\n        class=\"cps-button__icon\"\n        [icon]=\"icon\"\n        [color]=\"disabled ? 'text-light' : textColor\"\n        [size]=\"cvtIconSize\">\n      </cps-icon>\n      <span\n        class=\"cps-button__text\"\n        *ngIf=\"label\"\n        [ngStyle]=\"{ 'font-size': cvtFontSize || null }\"\n        >{{ label }}</span\n      >\n    </div>\n  </button>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .cps-button{width:100%;letter-spacing:normal;font-family:Source Sans Pro,sans-serif;display:inline-flex;align-items:center;justify-content:center;position:relative;border-radius:4px;border:none;cursor:pointer;outline:none;padding:0 16px;font-weight:500}:host .cps-button:hover:not(:active):not(:disabled){background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0);box-shadow:0 2px 4px #0c0c0d33}:host .cps-button:active:not(:disabled){background-image:linear-gradient(hsla(0,0%,0%,.1) 0 0)}:host .cps-button__content{display:inline-flex}:host .cps-button__icon{align-self:center}:host .cps-button:disabled{cursor:default}:host .cps-button--solid{border:0}:host .cps-button--solid:disabled{background-color:var(--cps-color-line-mid)!important;color:var(--cps-color-text-light)!important}:host .cps-button--outlined{border:2px solid;box-sizing:border-box}:host .cps-button--outlined:disabled{border-color:var(--cps-color-line-dark)!important;color:var(--cps-color-text-light)!important}:host .cps-button--borderless:disabled{color:var(--cps-color-text-light)!important}:host .cps-button--borderless:hover:not(:active):not(:disabled){box-shadow:0 1px 4px #0c0c0d1a}:host .cps-button--large{min-height:48px}:host .cps-button--large .cps-button__icon{width:20px;height:20px}:host .cps-button--large .cps-button__text{font-size:20px}:host .cps-button--large .cps-button__spinner ::ng-deep .cps-progress-circular{width:22px}:host .cps-button--large.loading{min-width:56px}:host .cps-button--normal{min-height:40px}:host .cps-button--normal .cps-button__icon{width:16px;height:16px}:host .cps-button--normal .cps-button__text{font-size:16px}:host .cps-button--normal .cps-button__spinner ::ng-deep .cps-progress-circular{width:18px}:host .cps-button--normal.loading{min-width:48px}:host .cps-button--small{min-height:32px}:host .cps-button--small .cps-button__icon{width:14px;height:14px}:host .cps-button--small .cps-button__text{font-size:14px}:host .cps-button--small .cps-button__spinner ::ng-deep .cps-progress-circular{width:14px}:host .cps-button--small.loading{min-width:40px}:host .cps-button--xsmall{min-height:24px}:host .cps-button--xsmall .cps-button__icon{width:12px;height:12px}:host .cps-button--xsmall .cps-button__text{font-size:12px}:host .cps-button--xsmall .cps-button__spinner ::ng-deep .cps-progress-circular{width:10px}:host .cps-button--xsmall.loading{min-width:32px}:host .cps-button.cps-button--icon-before .cps-button__icon{margin-right:8px}:host .cps-button.cps-button--icon-after .cps-button__icon{margin-left:8px;order:1}:host .cps-button .cps-button__text{line-height:1}:host .cps-button .cps-button__spinner{position:absolute;display:flex}\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"] }, { kind: "component", type: CpsProgressCircularComponent, selector: "cps-progress-circular", inputs: ["diameter", "strokeWidth", "color"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsButtonComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, CpsIconComponent, CpsProgressCircularComponent], selector: 'cps-button', template: "<div>\n  <button\n    type=\"button\"\n    [ngClass]=\"classesList\"\n    [disabled]=\"disabled || loading\"\n    (click)=\"onClick($event)\"\n    [class.loading]=\"loading\"\n    [ngStyle]=\"{\n    'background-color': type==='solid' ? buttonColor : 'transparent',\n    color: textColor,\n    height: cvtHeight || 'none',\n  }\">\n    <div class=\"cps-button__spinner\">\n      <cps-progress-circular\n        *ngIf=\"loading\"\n        color=\"currentColor\"\n        [diameter]=\"cvtIconSize\"\n        strokeWidth=\"2\">\n      </cps-progress-circular>\n    </div>\n    <div\n      class=\"cps-button__content\"\n      [style.visibility]=\"loading ? 'hidden' : null\">\n      <cps-icon\n        *ngIf=\"icon\"\n        class=\"cps-button__icon\"\n        [icon]=\"icon\"\n        [color]=\"disabled ? 'text-light' : textColor\"\n        [size]=\"cvtIconSize\">\n      </cps-icon>\n      <span\n        class=\"cps-button__text\"\n        *ngIf=\"label\"\n        [ngStyle]=\"{ 'font-size': cvtFontSize || null }\"\n        >{{ label }}</span\n      >\n    </div>\n  </button>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .cps-button{width:100%;letter-spacing:normal;font-family:Source Sans Pro,sans-serif;display:inline-flex;align-items:center;justify-content:center;position:relative;border-radius:4px;border:none;cursor:pointer;outline:none;padding:0 16px;font-weight:500}:host .cps-button:hover:not(:active):not(:disabled){background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0);box-shadow:0 2px 4px #0c0c0d33}:host .cps-button:active:not(:disabled){background-image:linear-gradient(hsla(0,0%,0%,.1) 0 0)}:host .cps-button__content{display:inline-flex}:host .cps-button__icon{align-self:center}:host .cps-button:disabled{cursor:default}:host .cps-button--solid{border:0}:host .cps-button--solid:disabled{background-color:var(--cps-color-line-mid)!important;color:var(--cps-color-text-light)!important}:host .cps-button--outlined{border:2px solid;box-sizing:border-box}:host .cps-button--outlined:disabled{border-color:var(--cps-color-line-dark)!important;color:var(--cps-color-text-light)!important}:host .cps-button--borderless:disabled{color:var(--cps-color-text-light)!important}:host .cps-button--borderless:hover:not(:active):not(:disabled){box-shadow:0 1px 4px #0c0c0d1a}:host .cps-button--large{min-height:48px}:host .cps-button--large .cps-button__icon{width:20px;height:20px}:host .cps-button--large .cps-button__text{font-size:20px}:host .cps-button--large .cps-button__spinner ::ng-deep .cps-progress-circular{width:22px}:host .cps-button--large.loading{min-width:56px}:host .cps-button--normal{min-height:40px}:host .cps-button--normal .cps-button__icon{width:16px;height:16px}:host .cps-button--normal .cps-button__text{font-size:16px}:host .cps-button--normal .cps-button__spinner ::ng-deep .cps-progress-circular{width:18px}:host .cps-button--normal.loading{min-width:48px}:host .cps-button--small{min-height:32px}:host .cps-button--small .cps-button__icon{width:14px;height:14px}:host .cps-button--small .cps-button__text{font-size:14px}:host .cps-button--small .cps-button__spinner ::ng-deep .cps-progress-circular{width:14px}:host .cps-button--small.loading{min-width:40px}:host .cps-button--xsmall{min-height:24px}:host .cps-button--xsmall .cps-button__icon{width:12px;height:12px}:host .cps-button--xsmall .cps-button__text{font-size:12px}:host .cps-button--xsmall .cps-button__spinner ::ng-deep .cps-progress-circular{width:10px}:host .cps-button--xsmall.loading{min-width:32px}:host .cps-button.cps-button--icon-before .cps-button__icon{margin-right:8px}:host .cps-button.cps-button--icon-after .cps-button__icon{margin-left:8px;order:1}:host .cps-button .cps-button__text{line-height:1}:host .cps-button .cps-button__spinner{position:absolute;display:flex}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule, CpsIconComponent, CpsProgressCircularComponent], selector: 'cps-button', template: "<div>\n  <button\n    type=\"button\"\n    [ngClass]=\"classesList\"\n    [disabled]=\"disabled || loading\"\n    (click)=\"onClick($event)\"\n    [class.loading]=\"loading\"\n    [ngStyle]=\"{\n    'background-color': type==='solid' ? buttonColor : 'transparent',\n    color: textColor,\n    height: cvtHeight || 'none',\n  }\">\n    <div class=\"cps-button__spinner\">\n      <cps-progress-circular\n        *ngIf=\"loading\"\n        color=\"currentColor\"\n        [diameter]=\"cvtIconSize\"\n        strokeWidth=\"2\">\n      </cps-progress-circular>\n    </div>\n    <div\n      class=\"cps-button__content\"\n      [style.visibility]=\"loading ? 'hidden' : null\">\n      <cps-icon\n        *ngIf=\"icon\"\n        class=\"cps-button__icon\"\n        [icon]=\"icon\"\n        [color]=\"disabled ? 'text-light' : textColor\"\n        [size]=\"cvtIconSize\">\n      </cps-icon>\n      <span\n        class=\"cps-button__text\"\n        *ngIf=\"label\"\n        [ngStyle]=\"{ 'font-size': cvtFontSize || null }\"\n        >{{ label }}</span\n      >\n    </div>\n  </button>\n</div>\n", styles: [":host{width:fit-content;display:inline-block}:host .cps-button{width:100%;letter-spacing:normal;font-family:Source Sans Pro,sans-serif;display:inline-flex;align-items:center;justify-content:center;position:relative;border-radius:4px;border:none;cursor:pointer;outline:none;padding:0 16px;font-weight:500}:host .cps-button:hover:not(:active):not(:disabled){background-image:linear-gradient(#ffffff1a 0 0);box-shadow:0 2px 4px #0c0c0d33}:host .cps-button:active:not(:disabled){background-image:linear-gradient(#0000001a 0 0)}:host .cps-button__content{display:inline-flex}:host .cps-button__icon{align-self:center}:host .cps-button:disabled{cursor:default}:host .cps-button--solid{border:0}:host .cps-button--solid:disabled{background-color:var(--cps-color-line-mid)!important;color:var(--cps-color-text-light)!important}:host .cps-button--outlined{border:2px solid;box-sizing:border-box}:host .cps-button--outlined:disabled{border-color:var(--cps-color-line-dark)!important;color:var(--cps-color-text-light)!important}:host .cps-button--borderless:disabled{color:var(--cps-color-text-light)!important}:host .cps-button--borderless:hover:not(:active):not(:disabled){box-shadow:0 1px 4px #0c0c0d1a}:host .cps-button--large{min-height:48px}:host .cps-button--large .cps-button__icon{width:20px;height:20px}:host .cps-button--large .cps-button__text{font-size:20px}:host .cps-button--large .cps-button__spinner ::ng-deep .cps-progress-circular{width:22px}:host .cps-button--large.loading{min-width:56px}:host .cps-button--normal{min-height:40px}:host .cps-button--normal .cps-button__icon{width:16px;height:16px}:host .cps-button--normal .cps-button__text{font-size:16px}:host .cps-button--normal .cps-button__spinner ::ng-deep .cps-progress-circular{width:18px}:host .cps-button--normal.loading{min-width:48px}:host .cps-button--small{min-height:32px}:host .cps-button--small .cps-button__icon{width:14px;height:14px}:host .cps-button--small .cps-button__text{font-size:14px}:host .cps-button--small .cps-button__spinner ::ng-deep .cps-progress-circular{width:14px}:host .cps-button--small.loading{min-width:40px}:host .cps-button--xsmall{min-height:24px}:host .cps-button--xsmall .cps-button__icon{width:12px;height:12px}:host .cps-button--xsmall .cps-button__text{font-size:12px}:host .cps-button--xsmall .cps-button__spinner ::ng-deep .cps-progress-circular{width:10px}:host .cps-button--xsmall.loading{min-width:32px}:host .cps-button.cps-button--icon-before .cps-button__icon{margin-right:8px}:host .cps-button.cps-button--icon-after .cps-button__icon{margin-left:8px;order:1}:host .cps-button .cps-button__text{line-height:1}:host .cps-button .cps-button__spinner{position:absolute;display:flex}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], contentColor: [{
@@ -4379,17 +4383,17 @@ class CpsCheckboxComponent {
     focus() {
         this._elementRef?.nativeElement?.querySelector('input')?.focus();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsCheckboxComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsCheckboxComponent, isStandalone: true, selector: "cps-checkbox", inputs: { label: "label", disabled: "disabled", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", icon: "icon", iconColor: "iconColor", value: "value" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<div class=\"cps-checkbox-container\">\n  <label\n    class=\"cps-checkbox\"\n    [ngClass]=\"{\n      'cps-checkbox-disabled': disabled\n    }\">\n    <input\n      type=\"checkbox\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      (change)=\"updateValueEvent($event)\" />\n    <span class=\"cps-checkbox-indicator\"></span>\n    <cps-icon\n      class=\"cps-checkbox-icon\"\n      *ngIf=\"icon\"\n      [icon]=\"icon\"\n      size=\"small\"\n      [color]=\"disabled ? 'text-light' : iconColor\">\n    </cps-icon>\n    <span *ngIf=\"label\" class=\"cps-checkbox-label\">{{ label }}</span>\n  </label>\n  <cps-info-circle\n    *ngIf=\"infoTooltip\"\n    class=\"cps-checkbox-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", styles: [":host{min-width:max-content;display:inline-block}:host .cps-checkbox-container{line-height:normal;display:flex;align-items:center}:host .cps-checkbox-container .cps-checkbox{display:flex;align-items:center;font-size:1rem;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400;color:var(--cps-color-text-dark);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .cps-checkbox-container .cps-checkbox-disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}:host .cps-checkbox-container .cps-checkbox-indicator{position:relative;display:inline-block;width:18px;height:18px;border:2px solid var(--cps-color-text-mild);border-radius:2px}:host .cps-checkbox-container .cps-checkbox-label,:host .cps-checkbox-container .cps-checkbox-icon{margin-left:10px}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:checked~.cps-checkbox-indicator{color:#fff;background:var(--cps-color-calm) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:disabled~.cps-checkbox-indicator{border-color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:checked:disabled~.cps-checkbox-indicator{background:var(--cps-color-text-lightest) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border-color:var(--cps-color-text-lightest)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:not(:disabled):hover~.cps-checkbox-indicator{border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-info-circle{margin-left:8px}:host .cps-checkbox-container .cps-checkbox-info-circle ::ng-deep cps-icon i{width:14px;height:14px}\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: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] }); }
 }
-CpsCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsCheckboxComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-CpsCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsCheckboxComponent, isStandalone: true, selector: "cps-checkbox", inputs: { label: "label", disabled: "disabled", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", icon: "icon", iconColor: "iconColor", value: "value" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<div class=\"cps-checkbox-container\">\n  <label\n    class=\"cps-checkbox\"\n    [ngClass]=\"{\n      'cps-checkbox-disabled': disabled\n    }\">\n    <input\n      type=\"checkbox\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      (change)=\"updateValueEvent($event)\" />\n    <span class=\"cps-checkbox-indicator\"></span>\n    <cps-icon\n      class=\"cps-checkbox-icon\"\n      *ngIf=\"icon\"\n      [icon]=\"icon\"\n      size=\"small\"\n      [color]=\"disabled ? 'text-light' : iconColor\">\n    </cps-icon>\n    <span *ngIf=\"label\" class=\"cps-checkbox-label\">{{ label }}</span>\n  </label>\n  <cps-info-circle\n    *ngIf=\"infoTooltip\"\n    class=\"cps-checkbox-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", styles: [":host{min-width:max-content;display:inline-block}:host .cps-checkbox-container{line-height:normal;display:flex;align-items:center}:host .cps-checkbox-container .cps-checkbox{display:flex;align-items:center;font-size:1rem;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400;color:var(--cps-color-text-dark);cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-checkbox-container .cps-checkbox-disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}:host .cps-checkbox-container .cps-checkbox-indicator{position:relative;display:inline-block;width:18px;height:18px;border:2px solid var(--cps-color-text-mild);border-radius:2px}:host .cps-checkbox-container .cps-checkbox-label,:host .cps-checkbox-container .cps-checkbox-icon{margin-left:10px}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:checked~.cps-checkbox-indicator{color:#fff;background:var(--cps-color-calm) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:disabled~.cps-checkbox-indicator{border-color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:checked:disabled~.cps-checkbox-indicator{background:var(--cps-color-text-lightest) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border-color:var(--cps-color-text-lightest)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:not(:disabled):hover~.cps-checkbox-indicator{border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-info-circle{margin-left:8px}:host .cps-checkbox-container .cps-checkbox-info-circle ::ng-deep cps-icon i{width:14px;height:14px}\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: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, CpsInfoCircleComponent, CpsIconComponent], selector: 'cps-checkbox', template: "<div class=\"cps-checkbox-container\">\n  <label\n    class=\"cps-checkbox\"\n    [ngClass]=\"{\n      'cps-checkbox-disabled': disabled\n    }\">\n    <input\n      type=\"checkbox\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      (change)=\"updateValueEvent($event)\" />\n    <span class=\"cps-checkbox-indicator\"></span>\n    <cps-icon\n      class=\"cps-checkbox-icon\"\n      *ngIf=\"icon\"\n      [icon]=\"icon\"\n      size=\"small\"\n      [color]=\"disabled ? 'text-light' : iconColor\">\n    </cps-icon>\n    <span *ngIf=\"label\" class=\"cps-checkbox-label\">{{ label }}</span>\n  </label>\n  <cps-info-circle\n    *ngIf=\"infoTooltip\"\n    class=\"cps-checkbox-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", styles: [":host{min-width:max-content;display:inline-block}:host .cps-checkbox-container{line-height:normal;display:flex;align-items:center}:host .cps-checkbox-container .cps-checkbox{display:flex;align-items:center;font-size:1rem;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400;color:var(--cps-color-text-dark);cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-checkbox-container .cps-checkbox-disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}:host .cps-checkbox-container .cps-checkbox-indicator{position:relative;display:inline-block;width:18px;height:18px;border:2px solid var(--cps-color-text-mild);border-radius:2px}:host .cps-checkbox-container .cps-checkbox-label,:host .cps-checkbox-container .cps-checkbox-icon{margin-left:10px}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:checked~.cps-checkbox-indicator{color:#fff;background:var(--cps-color-calm) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:disabled~.cps-checkbox-indicator{border-color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:checked:disabled~.cps-checkbox-indicator{background:var(--cps-color-text-lightest) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border-color:var(--cps-color-text-lightest)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:not(:disabled):hover~.cps-checkbox-indicator{border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-info-circle{margin-left:8px}:host .cps-checkbox-container .cps-checkbox-info-circle ::ng-deep cps-icon i{width:14px;height:14px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+            args: [{ standalone: true, imports: [CommonModule, CpsInfoCircleComponent, CpsIconComponent], selector: 'cps-checkbox', template: "<div class=\"cps-checkbox-container\">\n  <label\n    class=\"cps-checkbox\"\n    [ngClass]=\"{\n      'cps-checkbox-disabled': disabled\n    }\">\n    <input\n      type=\"checkbox\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      (change)=\"updateValueEvent($event)\" />\n    <span class=\"cps-checkbox-indicator\"></span>\n    <cps-icon\n      class=\"cps-checkbox-icon\"\n      *ngIf=\"icon\"\n      [icon]=\"icon\"\n      size=\"small\"\n      [color]=\"disabled ? 'text-light' : iconColor\">\n    </cps-icon>\n    <span *ngIf=\"label\" class=\"cps-checkbox-label\">{{ label }}</span>\n  </label>\n  <cps-info-circle\n    *ngIf=\"infoTooltip\"\n    class=\"cps-checkbox-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", styles: [":host{min-width:max-content;display:inline-block}:host .cps-checkbox-container{line-height:normal;display:flex;align-items:center}:host .cps-checkbox-container .cps-checkbox{display:flex;align-items:center;font-size:1rem;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400;color:var(--cps-color-text-dark);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .cps-checkbox-container .cps-checkbox-disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}:host .cps-checkbox-container .cps-checkbox-indicator{position:relative;display:inline-block;width:18px;height:18px;border:2px solid var(--cps-color-text-mild);border-radius:2px}:host .cps-checkbox-container .cps-checkbox-label,:host .cps-checkbox-container .cps-checkbox-icon{margin-left:10px}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:checked~.cps-checkbox-indicator{color:#fff;background:var(--cps-color-calm) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:disabled~.cps-checkbox-indicator{border-color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:checked:disabled~.cps-checkbox-indicator{background:var(--cps-color-text-lightest) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTIgOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TC4wNTcgNS42NGwuODI5LTEuMjI3TDQuNDcgNy4yNjggMTAuOTIxLjA4NmwuOTIzIDEuMTAzLTYuODYzIDcuNjRjLS4xMzQtLjAwMy0uNDA2LjE0OC0uNDA2LjE0OHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPg0KPC9zdmc+) 50% 40% no-repeat;border-color:var(--cps-color-text-lightest)}:host .cps-checkbox-container .cps-checkbox input[type=checkbox]:not(:disabled):hover~.cps-checkbox-indicator{border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-info-circle{margin-left:8px}:host .cps-checkbox-container .cps-checkbox-info-circle ::ng-deep cps-icon i{width:14px;height:14px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: i0.ElementRef }]; }, propDecorators: { label: [{
+                }] }, { type: i0.ElementRef }], propDecorators: { label: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -4447,10 +4451,10 @@ class CpsRadioButtonComponent {
             return;
         this.updateValueEvent.emit(this.option.value);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsRadioButtonComponent, isStandalone: true, selector: "cps-radio-button", inputs: { option: "option", checked: "checked", groupDisabled: "groupDisabled" }, outputs: { updateValueEvent: "updateValueEvent" }, ngImport: i0, template: "<div\n  *ngIf=\"option.tooltip\"\n  class=\"cps-radio-group-content-button\"\n  [cpsTooltip]=\"option.tooltip\"\n  tooltipCloseDelay=\"0\"\n  tooltipPosition=\"bottom\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      optionRadioTemplate;\n      context: {\n        option: option\n      }\n    \"></ng-container>\n</div>\n<div *ngIf=\"!option?.tooltip\" class=\"cps-radio-group-content-button\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      optionRadioTemplate;\n      context: {\n        option: option\n      }\n    \"></ng-container>\n</div>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n  <input\n    [id]=\"inputId\"\n    type=\"radio\"\n    [disabled]=\"option.disabled || groupDisabled\"\n    [value]=\"option.value\"\n    [checked]=\"checked\"\n    (change)=\"updateValue($event)\" />\n  <div #contentRef class=\"content\">\n    <ng-content></ng-content>\n  </div>\n  <label\n    *ngIf=\"!contentRef.innerHTML.trim()\"\n    [for]=\"inputId\"\n    class=\"cps-radio-group-content-button-label\"\n    [ngStyle]=\"{\n      cursor: option.disabled || groupDisabled ? 'default' : 'pointer'\n    }\"\n    >{{ option.label }}\n  </label>\n</ng-template>\n", styles: [":host .cps-radio-group-content-button{display:grid;grid-template-columns:1rem auto;align-items:center;gap:.75rem}:host .cps-radio-group-content-button-label{font-size:1rem;color:var(--cps-color-text-dark);font-style:normal;font-weight:400;line-height:1rem}:host .cps-radio-group-content-button input[type=radio]{-webkit-appearance:none;appearance:none;background-color:transparent;margin:0;cursor:pointer;font:inherit;color:var(--cps-color-text-mild);width:1.25rem;height:1.25rem;border:.15rem solid currentColor;border-radius:50%;display:grid;place-content:center}:host .cps-radio-group-content-button input[type=radio]:hover,:host .cps-radio-group-content-button input[type=radio]:checked{color:var(--cps-color-calm)}:host .cps-radio-group-content-button input[type=radio]:disabled{color:var(--cps-color-text-lightest);cursor:default}:host .cps-radio-group-content-button input[type=radio]:before{content:\"\";width:1.25rem;height:1.25rem;border-radius:50%;transform:scale(0);transition:.12s transform ease-in-out;box-shadow:inset 1rem 1rem var(--cps-color-calm);background-color:CanvasText}:host .cps-radio-group-content-button input[type=radio][disabled]:before{box-shadow:inset 1rem 1rem var(--cps-color-text-lightest)}:host .cps-radio-group-content-button input[type=radio]:disabled+.cps-radio-group-content-button-label{color:var(--cps-color-text-light)}:host .cps-radio-group-content-button input[type=radio]:checked:before{transform:scale(.5)}:host .cps-radio-group-content-button .cps-radio-group-content-button-label{-webkit-user-select:none;user-select:none}:host .cps-radio-group-content-button .content:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass"] }] }); }
 }
-CpsRadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CpsRadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsRadioButtonComponent, isStandalone: true, selector: "cps-radio-button", inputs: { option: "option", checked: "checked", groupDisabled: "groupDisabled" }, outputs: { updateValueEvent: "updateValueEvent" }, ngImport: i0, template: "<div\n  *ngIf=\"option.tooltip\"\n  class=\"cps-radio-group-content-button\"\n  [cpsTooltip]=\"option.tooltip\"\n  tooltipCloseDelay=\"0\"\n  tooltipPosition=\"bottom\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      optionRadioTemplate;\n      context: {\n        option: option\n      }\n    \"></ng-container>\n</div>\n<div *ngIf=\"!option?.tooltip\" class=\"cps-radio-group-content-button\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      optionRadioTemplate;\n      context: {\n        option: option\n      }\n    \"></ng-container>\n</div>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n  <input\n    [id]=\"inputId\"\n    type=\"radio\"\n    [disabled]=\"option.disabled || groupDisabled\"\n    [value]=\"option.value\"\n    [checked]=\"checked\"\n    (change)=\"updateValue($event)\" />\n  <div #contentRef class=\"content\">\n    <ng-content></ng-content>\n  </div>\n  <label\n    *ngIf=\"!contentRef.innerHTML.trim()\"\n    [for]=\"inputId\"\n    class=\"cps-radio-group-content-button-label\"\n    [ngStyle]=\"{\n      cursor: option.disabled || groupDisabled ? 'default' : 'pointer'\n    }\"\n    >{{ option.label }}\n  </label>\n</ng-template>\n", styles: [":host .cps-radio-group-content-button{display:grid;grid-template-columns:1rem auto;align-items:center;gap:.75rem}:host .cps-radio-group-content-button-label{font-size:1rem;color:var(--cps-color-text-dark);font-style:normal;font-weight:400;line-height:1rem}:host .cps-radio-group-content-button input[type=radio]{-webkit-appearance:none;appearance:none;background-color:transparent;margin:0;cursor:pointer;font:inherit;color:var(--cps-color-text-mild);width:1.25rem;height:1.25rem;border:.15rem solid currentColor;border-radius:50%;display:grid;place-content:center}:host .cps-radio-group-content-button input[type=radio]:hover,:host .cps-radio-group-content-button input[type=radio]:checked{color:var(--cps-color-calm)}:host .cps-radio-group-content-button input[type=radio]:disabled{color:var(--cps-color-text-lightest);cursor:default}:host .cps-radio-group-content-button input[type=radio]:before{content:\"\";width:1.25rem;height:1.25rem;border-radius:50%;transform:scale(0);transition:.12s transform ease-in-out;box-shadow:inset 1rem 1rem var(--cps-color-calm);background-color:CanvasText}:host .cps-radio-group-content-button input[type=radio][disabled]:before{box-shadow:inset 1rem 1rem var(--cps-color-text-lightest)}:host .cps-radio-group-content-button input[type=radio]:disabled+.cps-radio-group-content-button-label{color:var(--cps-color-text-light)}:host .cps-radio-group-content-button input[type=radio]:checked:before{transform:scale(.5)}:host .cps-radio-group-content-button .cps-radio-group-content-button-label{-webkit-user-select:none;user-select:none}:host .cps-radio-group-content-button .content:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsRadioButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsRadioButtonComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule, CpsTooltipDirective], selector: 'cps-radio-button', template: "<div\n  *ngIf=\"option.tooltip\"\n  class=\"cps-radio-group-content-button\"\n  [cpsTooltip]=\"option.tooltip\"\n  tooltipCloseDelay=\"0\"\n  tooltipPosition=\"bottom\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      optionRadioTemplate;\n      context: {\n        option: option\n      }\n    \"></ng-container>\n</div>\n<div *ngIf=\"!option?.tooltip\" class=\"cps-radio-group-content-button\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      optionRadioTemplate;\n      context: {\n        option: option\n      }\n    \"></ng-container>\n</div>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n  <input\n    [id]=\"inputId\"\n    type=\"radio\"\n    [disabled]=\"option.disabled || groupDisabled\"\n    [value]=\"option.value\"\n    [checked]=\"checked\"\n    (change)=\"updateValue($event)\" />\n  <div #contentRef class=\"content\">\n    <ng-content></ng-content>\n  </div>\n  <label\n    *ngIf=\"!contentRef.innerHTML.trim()\"\n    [for]=\"inputId\"\n    class=\"cps-radio-group-content-button-label\"\n    [ngStyle]=\"{\n      cursor: option.disabled || groupDisabled ? 'default' : 'pointer'\n    }\"\n    >{{ option.label }}\n  </label>\n</ng-template>\n", styles: [":host .cps-radio-group-content-button{display:grid;grid-template-columns:1rem auto;align-items:center;gap:.75rem}:host .cps-radio-group-content-button-label{font-size:1rem;color:var(--cps-color-text-dark);font-style:normal;font-weight:400;line-height:1rem}:host .cps-radio-group-content-button input[type=radio]{-webkit-appearance:none;appearance:none;background-color:transparent;margin:0;cursor:pointer;font:inherit;color:var(--cps-color-text-mild);width:1.25rem;height:1.25rem;border:.15rem solid currentColor;border-radius:50%;display:grid;place-content:center}:host .cps-radio-group-content-button input[type=radio]:hover,:host .cps-radio-group-content-button input[type=radio]:checked{color:var(--cps-color-calm)}:host .cps-radio-group-content-button input[type=radio]:disabled{color:var(--cps-color-text-lightest);cursor:default}:host .cps-radio-group-content-button input[type=radio]:before{content:\"\";width:1.25rem;height:1.25rem;border-radius:50%;transform:scale(0);transition:.12s transform ease-in-out;box-shadow:inset 1rem 1rem var(--cps-color-calm);background-color:CanvasText}:host .cps-radio-group-content-button input[type=radio][disabled]:before{box-shadow:inset 1rem 1rem var(--cps-color-text-lightest)}:host .cps-radio-group-content-button input[type=radio]:disabled+.cps-radio-group-content-button-label{color:var(--cps-color-text-light)}:host .cps-radio-group-content-button input[type=radio]:checked:before{transform:scale(.5)}:host .cps-radio-group-content-button .cps-radio-group-content-button-label{-webkit-user-select:none;user-select:none}:host .cps-radio-group-content-button .content:empty{display:none}\n"] }]
         }], propDecorators: { option: [{
@@ -4564,15 +4568,15 @@ class CpsRadioGroupComponent {
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     setDisabledState(disabled) { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsRadioGroupComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsRadioGroupComponent, isStandalone: true, selector: "cps-radio-group", inputs: { options: "options", groupLabel: "groupLabel", vertical: "vertical", disabled: "disabled", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", value: "value" }, outputs: { valueChanged: "valueChanged" }, providers: [
+            {
+                provide: CPS_RADIO_GROUP,
+                useExisting: CpsRadioGroupComponent
+            }
+        ], ngImport: i0, template: "<div class=\"cps-radio-group\">\n  <div class=\"cps-radio-group-label\" *ngIf=\"groupLabel\">\n    <span>{{ groupLabel }}</span>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-radio-group-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\n  <div\n    #contentRef\n    class=\"cps-radio-group-content\"\n    [ngClass]=\"\n      vertical\n        ? 'cps-radio-group-content-vertical'\n        : 'cps-radio-group-content-horizontal'\n    \">\n    <ng-content></ng-content>\n  </div>\n\n  <div\n    *ngIf=\"!contentRef.innerHTML.trim()\"\n    class=\"cps-radio-group-content\"\n    [ngClass]=\"\n      vertical\n        ? 'cps-radio-group-content-vertical'\n        : 'cps-radio-group-content-horizontal'\n    \">\n    <cps-radio-button\n      *ngFor=\"let option of options\"\n      [option]=\"option\"\n      [checked]=\"option.value === value\"\n      [groupDisabled]=\"disabled\"\n      (updateValueEvent)=\"updateValueEvent($event)\">\n    </cps-radio-button>\n  </div>\n</div>\n", styles: [":host{width:fit-content;display:inline-block}:host .cps-radio-group{font-family:Source Sans Pro,sans-serif}:host .cps-radio-group-label{font-style:normal;font-weight:700;font-size:1rem;color:var(--cps-color-text-dark);margin-bottom:.75rem;align-items:center;display:inline-flex;cursor:default}:host .cps-radio-group-label .cps-radio-group-label-info-circle{margin-left:8px}:host .cps-radio-group-label .cps-radio-group-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-radio-group-content{margin-left:.5rem;gap:1.25rem}:host .cps-radio-group-content-vertical{display:grid;grid-auto-rows:1fr}:host .cps-radio-group-content-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}:host .cps-radio-group-content .content:empty{display:none}\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: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsRadioButtonComponent, selector: "cps-radio-button", inputs: ["option", "checked", "groupDisabled"], outputs: ["updateValueEvent"] }] }); }
 }
-CpsRadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsRadioGroupComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-CpsRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsRadioGroupComponent, isStandalone: true, selector: "cps-radio-group", inputs: { options: "options", groupLabel: "groupLabel", vertical: "vertical", disabled: "disabled", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", value: "value" }, outputs: { valueChanged: "valueChanged" }, providers: [
-        {
-            provide: CPS_RADIO_GROUP,
-            useExisting: CpsRadioGroupComponent
-        }
-    ], ngImport: i0, template: "<div class=\"cps-radio-group\">\n  <div class=\"cps-radio-group-label\" *ngIf=\"groupLabel\">\n    <span>{{ groupLabel }}</span>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-radio-group-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\n  <div\n    #contentRef\n    class=\"cps-radio-group-content\"\n    [ngClass]=\"\n      vertical\n        ? 'cps-radio-group-content-vertical'\n        : 'cps-radio-group-content-horizontal'\n    \">\n    <ng-content></ng-content>\n  </div>\n\n  <div\n    *ngIf=\"!contentRef.innerHTML.trim()\"\n    class=\"cps-radio-group-content\"\n    [ngClass]=\"\n      vertical\n        ? 'cps-radio-group-content-vertical'\n        : 'cps-radio-group-content-horizontal'\n    \">\n    <cps-radio-button\n      *ngFor=\"let option of options\"\n      [option]=\"option\"\n      [checked]=\"option.value === value\"\n      [groupDisabled]=\"disabled\"\n      (updateValueEvent)=\"updateValueEvent($event)\">\n    </cps-radio-button>\n  </div>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .cps-radio-group{font-family:Source Sans Pro,sans-serif}:host .cps-radio-group-label{font-style:normal;font-weight:700;font-size:1rem;color:var(--cps-color-text-dark);margin-bottom:.75rem;align-items:center;display:inline-flex;cursor:default}:host .cps-radio-group-label .cps-radio-group-label-info-circle{margin-left:8px}:host .cps-radio-group-label .cps-radio-group-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-radio-group-content{margin-left:.5rem;gap:1.25rem}:host .cps-radio-group-content-vertical{display:grid;grid-auto-rows:1fr}:host .cps-radio-group-content-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}:host .cps-radio-group-content .content:empty{display:none}\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: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsRadioButtonComponent, selector: "cps-radio-button", inputs: ["option", "checked", "groupDisabled"], outputs: ["updateValueEvent"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsRadioGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsRadioGroupComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         CommonModule,
@@ -4584,12 +4588,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             provide: CPS_RADIO_GROUP,
                             useExisting: CpsRadioGroupComponent
                         }
-                    ], template: "<div class=\"cps-radio-group\">\n  <div class=\"cps-radio-group-label\" *ngIf=\"groupLabel\">\n    <span>{{ groupLabel }}</span>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-radio-group-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\n  <div\n    #contentRef\n    class=\"cps-radio-group-content\"\n    [ngClass]=\"\n      vertical\n        ? 'cps-radio-group-content-vertical'\n        : 'cps-radio-group-content-horizontal'\n    \">\n    <ng-content></ng-content>\n  </div>\n\n  <div\n    *ngIf=\"!contentRef.innerHTML.trim()\"\n    class=\"cps-radio-group-content\"\n    [ngClass]=\"\n      vertical\n        ? 'cps-radio-group-content-vertical'\n        : 'cps-radio-group-content-horizontal'\n    \">\n    <cps-radio-button\n      *ngFor=\"let option of options\"\n      [option]=\"option\"\n      [checked]=\"option.value === value\"\n      [groupDisabled]=\"disabled\"\n      (updateValueEvent)=\"updateValueEvent($event)\">\n    </cps-radio-button>\n  </div>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block}:host .cps-radio-group{font-family:Source Sans Pro,sans-serif}:host .cps-radio-group-label{font-style:normal;font-weight:700;font-size:1rem;color:var(--cps-color-text-dark);margin-bottom:.75rem;align-items:center;display:inline-flex;cursor:default}:host .cps-radio-group-label .cps-radio-group-label-info-circle{margin-left:8px}:host .cps-radio-group-label .cps-radio-group-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-radio-group-content{margin-left:.5rem;gap:1.25rem}:host .cps-radio-group-content-vertical{display:grid;grid-auto-rows:1fr}:host .cps-radio-group-content-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}:host .cps-radio-group-content .content:empty{display:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+                    ], template: "<div class=\"cps-radio-group\">\n  <div class=\"cps-radio-group-label\" *ngIf=\"groupLabel\">\n    <span>{{ groupLabel }}</span>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-radio-group-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\n  <div\n    #contentRef\n    class=\"cps-radio-group-content\"\n    [ngClass]=\"\n      vertical\n        ? 'cps-radio-group-content-vertical'\n        : 'cps-radio-group-content-horizontal'\n    \">\n    <ng-content></ng-content>\n  </div>\n\n  <div\n    *ngIf=\"!contentRef.innerHTML.trim()\"\n    class=\"cps-radio-group-content\"\n    [ngClass]=\"\n      vertical\n        ? 'cps-radio-group-content-vertical'\n        : 'cps-radio-group-content-horizontal'\n    \">\n    <cps-radio-button\n      *ngFor=\"let option of options\"\n      [option]=\"option\"\n      [checked]=\"option.value === value\"\n      [groupDisabled]=\"disabled\"\n      (updateValueEvent)=\"updateValueEvent($event)\">\n    </cps-radio-button>\n  </div>\n</div>\n", styles: [":host{width:fit-content;display:inline-block}:host .cps-radio-group{font-family:Source Sans Pro,sans-serif}:host .cps-radio-group-label{font-style:normal;font-weight:700;font-size:1rem;color:var(--cps-color-text-dark);margin-bottom:.75rem;align-items:center;display:inline-flex;cursor:default}:host .cps-radio-group-label .cps-radio-group-label-info-circle{margin-left:8px}:host .cps-radio-group-label .cps-radio-group-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-radio-group-content{margin-left:.5rem;gap:1.25rem}:host .cps-radio-group-content-vertical{display:grid;grid-auto-rows:1fr}:host .cps-radio-group-content-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}:host .cps-radio-group-content .content:empty{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }]; }, propDecorators: { options: [{
+                }] }], propDecorators: { options: [{
                 type: Input
             }], groupLabel: [{
                 type: Input
@@ -4628,10 +4632,10 @@ class CpsRadioComponent {
     updateValueEvent(value) {
         this.radioGroup?.updateValueEvent(value);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsRadioComponent, deps: [{ token: CPS_RADIO_GROUP, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsRadioComponent, isStandalone: true, selector: "cps-radio", inputs: { option: "option" }, ngImport: i0, template: "<cps-radio-button\n  [option]=\"option\"\n  [groupDisabled]=\"groupDisabled\"\n  [checked]=\"radioGroup?.value == option.value\"\n  (updateValueEvent)=\"updateValueEvent($event)\">\n  <ng-content></ng-content>\n</cps-radio-button>\n", styles: [":host{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CpsRadioButtonComponent, selector: "cps-radio-button", inputs: ["option", "checked", "groupDisabled"], outputs: ["updateValueEvent"] }] }); }
 }
-CpsRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsRadioComponent, deps: [{ token: CPS_RADIO_GROUP, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-CpsRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsRadioComponent, isStandalone: true, selector: "cps-radio", inputs: { option: "option" }, ngImport: i0, template: "<cps-radio-button\n  [option]=\"option\"\n  [groupDisabled]=\"groupDisabled\"\n  [checked]=\"radioGroup?.value == option.value\"\n  (updateValueEvent)=\"updateValueEvent($event)\">\n  <ng-content></ng-content>\n</cps-radio-button>\n", styles: [":host{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CpsRadioButtonComponent, selector: "cps-radio-button", inputs: ["option", "checked", "groupDisabled"], outputs: ["updateValueEvent"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsRadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsRadioComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'cps-radio', imports: [
                         CommonModule,
@@ -4639,12 +4643,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         CpsRadioGroupComponent,
                         CpsRadioButtonComponent
                     ], template: "<cps-radio-button\n  [option]=\"option\"\n  [groupDisabled]=\"groupDisabled\"\n  [checked]=\"radioGroup?.value == option.value\"\n  (updateValueEvent)=\"updateValueEvent($event)\">\n  <ng-content></ng-content>\n</cps-radio-button>\n", styles: [":host{display:flex;align-items:center}\n"] }]
-        }], ctorParameters: function () { return [{ type: CpsRadioGroupComponent, decorators: [{
+        }], ctorParameters: () => [{ type: CpsRadioGroupComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [CPS_RADIO_GROUP]
-                }] }]; }, propDecorators: { option: [{
+                }] }], propDecorators: { option: [{
                 type: Input
             }] } });
@@ -4680,12 +4684,12 @@ class CpsLoaderComponent {
         this.backgroundColor = `rgba(0, 0, 0, ${this.opacity})`;
         this.labelColor = getCSSColor(this.labelColor);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsLoaderComponent, isStandalone: true, selector: "cps-loader", inputs: { fullScreen: "fullScreen", opacity: "opacity", labelColor: "labelColor", showLabel: "showLabel" }, ngImport: i0, template: "<div\n  class=\"cps-loader-overlay\"\n  [ngStyle]=\"{\n    'background-color': backgroundColor,\n    position: fullScreen ? 'fixed' : 'relative'\n  }\">\n  <div class=\"cps-loader-overlay-content\">\n    <label\n      *ngIf=\"showLabel\"\n      class=\"cps-loader-overlay-content-text\"\n      [style.color]=\"labelColor\"\n      >Loading...\n    </label>\n    <div class=\"cps-loader-overlay-content-circles\">\n      <div class=\"cps-loader-overlay-content-circles-circle cps-sp1\">\n        <div class=\"cps-loader-overlay-content-circles-circle cps-sp2\">\n          <div class=\"cps-loader-overlay-content-circles-circle cps-sp3\"></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:contents}:host .cps-loader-overlay{width:100%;height:100%;inset:0;z-index:2000}:host .cps-loader-overlay-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}:host .cps-loader-overlay-content-text{display:block;text-align:center;font-size:20px;font-family:Source Sans Pro,sans-serif;font-weight:600;padding-bottom:15px;animation:cps-loader-text-animation 4s linear infinite;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-loader-overlay-content-circles{height:85px;width:90px}:host .cps-loader-overlay-content-circles-circle{border-left:5px solid;border-top-left-radius:100%;border-top:5px solid;margin:5px;animation-name:cps-loader-circles-animation;animation-duration:1s;animation-timing-function:linear;animation-delay:0s;animation-iteration-count:infinite;animation-direction:normal;animation-fill-mode:forwards}:host .cps-loader-overlay-content-circles .cps-sp1{border-left-color:var(--cps-color-calm);border-top-color:var(--cps-color-calm);width:40px;height:40px}:host .cps-loader-overlay-content-circles .cps-sp2{border-left-color:var(--cps-color-warmth);border-top-color:var(--cps-color-warmth);width:30px;height:30px}:host .cps-loader-overlay-content-circles .cps-sp3{width:20px;height:20px;border-left-color:var(--cps-color-energy);border-top-color:var(--cps-color-energy)}@keyframes cps-loader-text-animation{0%,to{filter:opacity(1)}50%{filter:opacity(.4)}}@keyframes cps-loader-circles-animation{0%{transform:rotate(0);transform-origin:right bottom}25%{transform:rotate(90deg);transform-origin:right bottom}50%{transform:rotate(180deg);transform-origin:right bottom}75%{transform:rotate(270deg);transform-origin:right bottom}to{transform:rotate(360deg);transform-origin:right bottom}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-CpsLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CpsLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsLoaderComponent, isStandalone: true, selector: "cps-loader", inputs: { fullScreen: "fullScreen", opacity: "opacity", labelColor: "labelColor", showLabel: "showLabel" }, ngImport: i0, template: "<div\n  class=\"cps-loader-overlay\"\n  [ngStyle]=\"{\n    'background-color': backgroundColor,\n    position: fullScreen ? 'fixed' : 'relative'\n  }\">\n  <div class=\"cps-loader-overlay-content\">\n    <label\n      *ngIf=\"showLabel\"\n      class=\"cps-loader-overlay-content-text\"\n      [style.color]=\"labelColor\"\n      >Loading...\n    </label>\n    <div class=\"cps-loader-overlay-content-circles\">\n      <div class=\"cps-loader-overlay-content-circles-circle cps-sp1\">\n        <div class=\"cps-loader-overlay-content-circles-circle cps-sp2\">\n          <div class=\"cps-loader-overlay-content-circles-circle cps-sp3\"></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:contents}:host .cps-loader-overlay{width:100%;height:100%;inset:0;z-index:2000}:host .cps-loader-overlay-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}:host .cps-loader-overlay-content-text{display:block;text-align:center;font-size:20px;font-family:Source Sans Pro,sans-serif;font-weight:600;padding-bottom:15px;animation:cps-loader-text-animation 4s linear infinite;-webkit-user-select:none;user-select:none}:host .cps-loader-overlay-content-circles{height:85px;width:90px}:host .cps-loader-overlay-content-circles-circle{border-left:5px solid;border-top-left-radius:100%;border-top:5px solid;margin:5px;animation-name:cps-loader-circles-animation;animation-duration:1s;animation-timing-function:linear;animation-delay:0s;animation-iteration-count:infinite;animation-direction:normal;animation-fill-mode:forwards}:host .cps-loader-overlay-content-circles .cps-sp1{border-left-color:var(--cps-color-calm);border-top-color:var(--cps-color-calm);width:40px;height:40px}:host .cps-loader-overlay-content-circles .cps-sp2{border-left-color:var(--cps-color-warmth);border-top-color:var(--cps-color-warmth);width:30px;height:30px}:host .cps-loader-overlay-content-circles .cps-sp3{width:20px;height:20px;border-left-color:var(--cps-color-energy);border-top-color:var(--cps-color-energy)}@keyframes cps-loader-text-animation{0%,to{filter:opacity(1)}50%{filter:opacity(.4)}}@keyframes cps-loader-circles-animation{0%{transform:rotate(0);transform-origin:right bottom}25%{transform:rotate(90deg);transform-origin:right bottom}50%{transform:rotate(180deg);transform-origin:right bottom}75%{transform:rotate(270deg);transform-origin:right bottom}to{transform:rotate(360deg);transform-origin:right bottom}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsLoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsLoaderComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule], selector: 'cps-loader', template: "<div\n  class=\"cps-loader-overlay\"\n  [ngStyle]=\"{\n    'background-color': backgroundColor,\n    position: fullScreen ? 'fixed' : 'relative'\n  }\">\n  <div class=\"cps-loader-overlay-content\">\n    <label\n      *ngIf=\"showLabel\"\n      class=\"cps-loader-overlay-content-text\"\n      [style.color]=\"labelColor\"\n      >Loading...\n    </label>\n    <div class=\"cps-loader-overlay-content-circles\">\n      <div class=\"cps-loader-overlay-content-circles-circle cps-sp1\">\n        <div class=\"cps-loader-overlay-content-circles-circle cps-sp2\">\n          <div class=\"cps-loader-overlay-content-circles-circle cps-sp3\"></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:contents}:host .cps-loader-overlay{width:100%;height:100%;inset:0;z-index:2000}:host .cps-loader-overlay-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}:host .cps-loader-overlay-content-text{display:block;text-align:center;font-size:20px;font-family:Source Sans Pro,sans-serif;font-weight:600;padding-bottom:15px;animation:cps-loader-text-animation 4s linear infinite;-webkit-user-select:none;user-select:none}:host .cps-loader-overlay-content-circles{height:85px;width:90px}:host .cps-loader-overlay-content-circles-circle{border-left:5px solid;border-top-left-radius:100%;border-top:5px solid;margin:5px;animation-name:cps-loader-circles-animation;animation-duration:1s;animation-timing-function:linear;animation-delay:0s;animation-iteration-count:infinite;animation-direction:normal;animation-fill-mode:forwards}:host .cps-loader-overlay-content-circles .cps-sp1{border-left-color:var(--cps-color-calm);border-top-color:var(--cps-color-calm);width:40px;height:40px}:host .cps-loader-overlay-content-circles .cps-sp2{border-left-color:var(--cps-color-warmth);border-top-color:var(--cps-color-warmth);width:30px;height:30px}:host .cps-loader-overlay-content-circles .cps-sp3{width:20px;height:20px;border-left-color:var(--cps-color-energy);border-top-color:var(--cps-color-energy)}@keyframes cps-loader-text-animation{0%,to{filter:opacity(1)}50%{filter:opacity(.4)}}@keyframes cps-loader-circles-animation{0%{transform:rotate(0);transform-origin:right bottom}25%{transform:rotate(90deg);transform-origin:right bottom}50%{transform:rotate(180deg);transform-origin:right bottom}75%{transform:rotate(270deg);transform-origin:right bottom}to{transform:rotate(360deg);transform-origin:right bottom}}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule], selector: 'cps-loader', template: "<div\n  class=\"cps-loader-overlay\"\n  [ngStyle]=\"{\n    'background-color': backgroundColor,\n    position: fullScreen ? 'fixed' : 'relative'\n  }\">\n  <div class=\"cps-loader-overlay-content\">\n    <label\n      *ngIf=\"showLabel\"\n      class=\"cps-loader-overlay-content-text\"\n      [style.color]=\"labelColor\"\n      >Loading...\n    </label>\n    <div class=\"cps-loader-overlay-content-circles\">\n      <div class=\"cps-loader-overlay-content-circles-circle cps-sp1\">\n        <div class=\"cps-loader-overlay-content-circles-circle cps-sp2\">\n          <div class=\"cps-loader-overlay-content-circles-circle cps-sp3\"></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:contents}:host .cps-loader-overlay{width:100%;height:100%;inset:0;z-index:2000}:host .cps-loader-overlay-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}:host .cps-loader-overlay-content-text{display:block;text-align:center;font-size:20px;font-family:Source Sans Pro,sans-serif;font-weight:600;padding-bottom:15px;animation:cps-loader-text-animation 4s linear infinite;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-loader-overlay-content-circles{height:85px;width:90px}:host .cps-loader-overlay-content-circles-circle{border-left:5px solid;border-top-left-radius:100%;border-top:5px solid;margin:5px;animation-name:cps-loader-circles-animation;animation-duration:1s;animation-timing-function:linear;animation-delay:0s;animation-iteration-count:infinite;animation-direction:normal;animation-fill-mode:forwards}:host .cps-loader-overlay-content-circles .cps-sp1{border-left-color:var(--cps-color-calm);border-top-color:var(--cps-color-calm);width:40px;height:40px}:host .cps-loader-overlay-content-circles .cps-sp2{border-left-color:var(--cps-color-warmth);border-top-color:var(--cps-color-warmth);width:30px;height:30px}:host .cps-loader-overlay-content-circles .cps-sp3{width:20px;height:20px;border-left-color:var(--cps-color-energy);border-top-color:var(--cps-color-energy)}@keyframes cps-loader-text-animation{0%,to{filter:opacity(1)}50%{filter:opacity(.4)}}@keyframes cps-loader-circles-animation{0%{transform:rotate(0);transform-origin:right bottom}25%{transform:rotate(90deg);transform-origin:right bottom}50%{transform:rotate(180deg);transform-origin:right bottom}75%{transform:rotate(270deg);transform-origin:right bottom}to{transform:rotate(360deg);transform-origin:right bottom}}\n"] }]
         }], propDecorators: { fullScreen: [{
                 type: Input
             }], opacity: [{
@@ -4764,10 +4768,10 @@ class TableRowMenuComponent {
             });
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TableRowMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TableRowMenuComponent, isStandalone: true, selector: "table-row-menu", inputs: { showRowRemoveButton: "showRowRemoveButton", showRowEditButton: "showRowEditButton" }, outputs: { editRowBtnClicked: "editRowBtnClicked", removeRowBtnClicked: "removeRowBtnClicked" }, ngImport: i0, template: "<cps-menu #rowMenu [items]=\"items\" [compressed]=\"true\" [withArrow]=\"false\">\n</cps-menu>\n<cps-icon\n  icon=\"dropdown-menu\"\n  size=\"22\"\n  (click)=\"rowMenu.toggle($event)\"\n  class=\"cps-table-row-menu-icon\">\n</cps-icon>\n", styles: [":host{height:22px;display:block}:host .cps-table-row-menu-icon{cursor:pointer}:host .cps-table-row-menu-icon:hover{color:var(--cps-color-calm)}\n"], dependencies: [{ kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] }); }
 }
-TableRowMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableRowMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableRowMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableRowMenuComponent, isStandalone: true, selector: "table-row-menu", inputs: { showRowRemoveButton: "showRowRemoveButton", showRowEditButton: "showRowEditButton" }, outputs: { editRowBtnClicked: "editRowBtnClicked", removeRowBtnClicked: "removeRowBtnClicked" }, ngImport: i0, template: "<cps-menu #rowMenu [items]=\"items\" [compressed]=\"true\" [withArrow]=\"false\">\n</cps-menu>\n<cps-icon\n  icon=\"dropdown-menu\"\n  size=\"22\"\n  (click)=\"rowMenu.toggle($event)\"\n  class=\"cps-table-row-menu-icon\">\n</cps-icon>\n", styles: [":host{height:22px;display:block}:host .cps-table-row-menu-icon{cursor:pointer}:host .cps-table-row-menu-icon:hover{color:var(--cps-color-calm)}\n"], dependencies: [{ kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { 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: "15.2.9", ngImport: i0, type: TableRowMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TableRowMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'table-row-menu', standalone: true, imports: [CpsIconComponent, CpsMenuComponent], template: "<cps-menu #rowMenu [items]=\"items\" [compressed]=\"true\" [withArrow]=\"false\">\n</cps-menu>\n<cps-icon\n  icon=\"dropdown-menu\"\n  size=\"22\"\n  (click)=\"rowMenu.toggle($event)\"\n  class=\"cps-table-row-menu-icon\">\n</cps-icon>\n", styles: [":host{height:22px;display:block}:host .cps-table-row-menu-icon{cursor:pointer}:host .cps-table-row-menu-icon:hover{color:var(--cps-color-calm)}\n"] }]
         }], propDecorators: { editRowBtnClicked: [{
@@ -4839,17 +4843,17 @@ class CpsSortIconComponent {
             this.subscription.unsubscribe();
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsSortIconComponent, deps: [{ token: i1$3.Table, optional: true }, { token: i2$1.TreeTable, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsSortIconComponent, isStandalone: true, selector: "cps-sort-icon", inputs: { field: "field" }, ngImport: i0, template: "<div *ngIf=\"sortOrder === 0\" class=\"cps-sortable-column-icon sort-unsorted\">\n  <div class=\"sort-unsorted-arrow-up\"></div>\n  <div class=\"sort-unsorted-arrow-down\"></div>\n</div>\n<div *ngIf=\"sortOrder === 1\" class=\"cps-sortable-column-icon sort-desc\"></div>\n<div *ngIf=\"sortOrder === -1\" class=\"cps-sortable-column-icon sort-asc\"></div>\n\n<span *ngIf=\"isMultiSorted()\" class=\"cps-sortable-column-badge\">{{\n  getBadgeValue()\n}}</span>\n", styles: [":host .cps-sortable-column-icon{display:inline-flex;margin-left:8px}:host .sort-desc{border:4px solid transparent;border-bottom-color:var(--cps-color-calm);margin-bottom:4px}:host .sort-asc{border:4px solid transparent;border-top-color:var(--cps-color-calm);margin-top:4px}:host .sort-unsorted{flex-direction:column;vertical-align:bottom}:host .sort-unsorted .sort-unsorted-arrow-up{display:inline-flex;border:4px solid transparent;border-bottom-color:var(--cps-color-line-dark);margin-bottom:4px;margin-top:-4px}:host .sort-unsorted .sort-unsorted-arrow-down{display:inline-flex;border:4px solid transparent;border-top-color:var(--cps-color-line-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-CpsSortIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsSortIconComponent, deps: [{ token: i1$3.Table, optional: true }, { token: i2$1.TreeTable, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CpsSortIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsSortIconComponent, isStandalone: true, selector: "cps-sort-icon", inputs: { field: "field" }, ngImport: i0, template: "<div *ngIf=\"sortOrder === 0\" class=\"cps-sortable-column-icon sort-unsorted\">\n  <div class=\"sort-unsorted-arrow-up\"></div>\n  <div class=\"sort-unsorted-arrow-down\"></div>\n</div>\n<div *ngIf=\"sortOrder === 1\" class=\"cps-sortable-column-icon sort-desc\"></div>\n<div *ngIf=\"sortOrder === -1\" class=\"cps-sortable-column-icon sort-asc\"></div>\n\n<span *ngIf=\"isMultiSorted()\" class=\"cps-sortable-column-badge\">{{\n  getBadgeValue()\n}}</span>\n", styles: [":host .cps-sortable-column-icon{display:inline-flex;margin-left:8px}:host .sort-desc{border:4px solid transparent;border-bottom-color:var(--cps-color-calm);margin-bottom:4px}:host .sort-asc{border:4px solid transparent;border-top-color:var(--cps-color-calm);margin-top:4px}:host .sort-unsorted{flex-direction:column;vertical-align:bottom}:host .sort-unsorted .sort-unsorted-arrow-up{display:inline-flex;border:4px solid transparent;border-bottom-color:var(--cps-color-line-dark);margin-bottom:4px;margin-top:-4px}:host .sort-unsorted .sort-unsorted-arrow-down{display:inline-flex;border:4px solid transparent;border-top-color:var(--cps-color-line-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsSortIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsSortIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cps-sort-icon', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"sortOrder === 0\" class=\"cps-sortable-column-icon sort-unsorted\">\n  <div class=\"sort-unsorted-arrow-up\"></div>\n  <div class=\"sort-unsorted-arrow-down\"></div>\n</div>\n<div *ngIf=\"sortOrder === 1\" class=\"cps-sortable-column-icon sort-desc\"></div>\n<div *ngIf=\"sortOrder === -1\" class=\"cps-sortable-column-icon sort-asc\"></div>\n\n<span *ngIf=\"isMultiSorted()\" class=\"cps-sortable-column-badge\">{{\n  getBadgeValue()\n}}</span>\n", styles: [":host .cps-sortable-column-icon{display:inline-flex;margin-left:8px}:host .sort-desc{border:4px solid transparent;border-bottom-color:var(--cps-color-calm);margin-bottom:4px}:host .sort-asc{border:4px solid transparent;border-top-color:var(--cps-color-calm);margin-top:4px}:host .sort-unsorted{flex-direction:column;vertical-align:bottom}:host .sort-unsorted .sort-unsorted-arrow-up{display:inline-flex;border:4px solid transparent;border-bottom-color:var(--cps-color-line-dark);margin-bottom:4px;margin-top:-4px}:host .sort-unsorted .sort-unsorted-arrow-down{display:inline-flex;border:4px solid transparent;border-top-color:var(--cps-color-line-dark)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.Table, decorators: [{
+        }], ctorParameters: () => [{ type: i1$3.Table, decorators: [{
                     type: Optional
                 }] }, { type: i2$1.TreeTable, decorators: [{
                     type: Optional
-                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { field: [{
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { field: [{
                 type: Input
             }] } });
@@ -4881,16 +4885,16 @@ class CpsTableColumnSortableDirective extends SortableColumn {
         this.sortIconRef.destroy();
         this.viewContainerRef.clear();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTableColumnSortableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$3.Table }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: CpsTableColumnSortableDirective, isStandalone: true, selector: "[cpsTColSortable]", inputs: { field: ["cpsTColSortable", "field"] }, usesInheritance: true, ngImport: i0 }); }
 }
-CpsTableColumnSortableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableColumnSortableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$3.Table }], target: i0.ɵɵFactoryTarget.Directive });
-CpsTableColumnSortableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTableColumnSortableDirective, isStandalone: true, selector: "[cpsTColSortable]", inputs: { field: ["cpsTColSortable", "field"] }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableColumnSortableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTableColumnSortableDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     selector: '[cpsTColSortable]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1$3.Table }]; }, propDecorators: { field: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1$3.Table }], propDecorators: { field: [{
                 type: Input,
                 args: ['cpsTColSortable']
             }] } });
@@ -4919,6 +4923,7 @@ class TableUnsortDirective {
             if (pTable.sortMode === 'multiple') {
                 let resetIndex = false;
                 const sortMeta = pTable.getSortMeta(event.field);
+                // Todo: Use explicit type in the whole block
                 if (sortMeta) {
                     for (let i = 0; i < pTable._multiSortMeta.length; i++) {
                         if (pTable._multiSortMeta[i].field === sortMeta.field) {
@@ -5004,6 +5009,7 @@ class TableUnsortDirective {
             if (pTable.groupRowsBy) {
                 if (!pTable._multiSortMeta)
                     pTable._multiSortMeta = [pTable.getGroupRowsMeta()];
+                // Replace with explicit type
                 else if (pTable.multiSortMeta[0].field !== pTable.groupRowsBy)
                     pTable._multiSortMeta = [
                         pTable.getGroupRowsMeta(),
@@ -5033,6 +5039,7 @@ class TableUnsortDirective {
                 pTable.onSort.emit({
                     multisortmeta: pTable.multiSortMeta
                 });
+                // Replace with explicit type
                 pTable.tableService.onSort(pTable.multiSortMeta);
             }
         };
@@ -5074,32 +5081,39 @@ class TableUnsortDirective {
         this.pTable._value = [...this.pTable.value];
     }
     _multisortField(data1, data2, index) {
-        const value1 = ObjectUtils.resolveFieldData(data1[0], this.pTable.multiSortMeta[index].field);
-        const value2 = ObjectUtils.resolveFieldData(data2[0], this.pTable.multiSortMeta[index].field);
+        const value1 = ObjectUtils.resolveFieldData(data1[0],
+        // Replace with explicit type
+        this.pTable.multiSortMeta[index].field);
+        const value2 = ObjectUtils.resolveFieldData(data2[0],
+        // Replace with explicit type
+        this.pTable.multiSortMeta[index].field);
         if (ObjectUtils.compare(value1, value2, this.pTable.filterLocale) === 0) {
+            // Replace with explicit type
             return this.pTable.multiSortMeta.length - 1 > index
                 ? this._multisortField(data1, data2, index + 1)
                 : 0;
         }
-        return this.pTable.compareValuesOnSort(value1, value2, this.pTable.multiSortMeta[index].order);
+        return this.pTable.compareValuesOnSort(value1, value2,
+        // Replace with explicit type
+        this.pTable.multiSortMeta[index].order);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TableUnsortDirective, deps: [{ token: i1$3.Table, host: true, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: TableUnsortDirective, isStandalone: true, selector: "[tWithUnsort]", exportAs: ["tWithUnsort"], ngImport: i0 }); }
 }
-TableUnsortDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableUnsortDirective, deps: [{ token: i1$3.Table, host: true, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-TableUnsortDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: TableUnsortDirective, isStandalone: true, selector: "[tWithUnsort]", exportAs: ["tWithUnsort"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableUnsortDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TableUnsortDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     selector: '[tWithUnsort]',
                     exportAs: 'tWithUnsort'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$3.Table, decorators: [{
+        }], ctorParameters: () => [{ type: i1$3.Table, decorators: [{
                     type: Host
                 }, {
                     type: Self
                 }, {
                     type: Optional
-                }] }]; } });
+                }] }] });
 // import jsPDF from 'jspdf';
 // import 'jspdf-autotable';
@@ -5668,6 +5682,7 @@ class CpsTableComponent {
         return Math.ceil(this.primengTable.totalRecords / this.rows);
     }
     getPage() {
+        // Todo: Use explicit type
         return Math.floor(this.primengTable.first / this.rows);
     }
     changePage(p) {
@@ -5800,18 +5815,18 @@ class CpsTableComponent {
             downloadLink.click();
         });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsTableComponent, isStandalone: true, selector: "cps-table", inputs: { columns: "columns", colHeaderName: "colHeaderName", colFieldName: "colFieldName", striped: "striped", bordered: "bordered", size: "size", selectable: "selectable", rowHover: "rowHover", dataKey: "dataKey", showRowMenu: "showRowMenu", showRowRemoveButton: "showRowRemoveButton", showRowEditButton: "showRowEditButton", reorderableRows: "reorderableRows", loading: "loading", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", sortable: "sortable", sortMode: "sortMode", customSort: "customSort", hasToolbar: "hasToolbar", toolbarSize: "toolbarSize", toolbarTitle: "toolbarTitle", toolbarIcon: "toolbarIcon", toolbarIconColor: "toolbarIconColor", scrollable: "scrollable", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", paginator: "paginator", alwaysShowPaginator: "alwaysShowPaginator", rowsPerPageOptions: "rowsPerPageOptions", first: "first", rows: "rows", resetPageOnRowsChange: "resetPageOnRowsChange", resetPageOnSort: "resetPageOnSort", totalRecords: "totalRecords", emptyMessage: "emptyMessage", emptyBodyHeight: "emptyBodyHeight", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", showGlobalFilter: "showGlobalFilter", globalFilterPlaceholder: "globalFilterPlaceholder", globalFilterFields: "globalFilterFields", clearGlobalFilterOnLoading: "clearGlobalFilterOnLoading", showRemoveBtnOnSelect: "showRemoveBtnOnSelect", removeBtnOnSelectDisabled: "removeBtnOnSelectDisabled", showAdditionalBtnOnSelect: "showAdditionalBtnOnSelect", additionalBtnOnSelectTitle: "additionalBtnOnSelectTitle", additionalBtnOnSelectDisabled: "additionalBtnOnSelectDisabled", showActionBtn: "showActionBtn", actionBtnTitle: "actionBtnTitle", actionBtnDisabled: "actionBtnDisabled", showExportBtn: "showExportBtn", exportBtnDisabled: "exportBtnDisabled", exportFilename: "exportFilename", csvSeparator: "csvSeparator", showDataReloadBtn: "showDataReloadBtn", dataReloadBtnDisabled: "dataReloadBtnDisabled", showColumnsToggleBtn: "showColumnsToggleBtn", columnsToggleBtnDisabled: "columnsToggleBtnDisabled", initialColumns: "initialColumns", data: "data" }, outputs: { rowsSelected: "rowsSelected", selectedRowIndexes: "selectedRowIndexes", actionBtnClicked: "actionBtnClicked", editRowBtnClicked: "editRowBtnClicked", rowsToRemove: "rowsToRemove", rowIndexesToRemove: "rowIndexesToRemove", pageChanged: "pageChanged", sorted: "sorted", filtered: "filtered", rowsReordered: "rowsReordered", columnsSelected: "columnsSelected", lazyLoaded: "lazyLoaded", dataReloadBtnClicked: "dataReloadBtnClicked", additionalBtnOnSelectClicked: "additionalBtnOnSelectClicked", customSortFunction: "customSortFunction" }, providers: [
+            TableService,
+            {
+                provide: Table,
+                useFactory: tableFactory,
+                // eslint-disable-next-line no-use-before-define
+                deps: [CpsTableComponent]
+            }
+        ], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }, { propertyName: "rowExpansionTemplate", first: true, predicate: ["rowexpansion"], descendants: true }], viewQueries: [{ propertyName: "primengTable", first: true, predicate: ["primengTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "exportMenu", first: true, predicate: ["exportMenu"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }, { propertyName: "tUnsortDirective", first: true, predicate: ["tUnsortDirective"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-table\n  #primengTable\n  #tUnsortDirective=\"tWithUnsort\"\n  tWithUnsort\n  [ngClass]=\"{ 'cps-table-loading': loading }\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [value]=\"data\"\n  [dataKey]=\"dataKey\"\n  [columns]=\"selectedColumns\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [showInitialSortBadge]=\"false\"\n  [loading]=\"loading\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [lazy]=\"lazy\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  [(selection)]=\"selectedRows\"\n  [metaKeySelection]=\"false\"\n  [rowHover]=\"rowHover\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [exportFilename]=\"exportFilename\"\n  [csvSeparator]=\"csvSeparator\"\n  (onPage)=\"onPageChange($event)\"\n  (onLazyLoad)=\"onLazyLoaded($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onSort)=\"onSort($event)\"\n  (onFilter)=\"onFilter($event)\"\n  (onRowReorder)=\"onRowReorder($event)\">\n  <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n    <ng-container *ngIf=\"toolbarTemplate\">\n      <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!toolbarTemplate\">\n      <div class=\"cps-table-tbar-left\">\n        <div *ngIf=\"toolbarIcon\" class=\"cps-table-tbar-icon\">\n          <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n        </div>\n        <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n        <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n          <cps-input\n            #globalFilterComp\n            prefixIcon=\"search\"\n            [placeholder]=\"globalFilterPlaceholder\"\n            (valueChanged)=\"onFilterGlobal($event)\"\n            [clearable]=\"true\"\n            [disabled]=\"loading\"\n            [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n            [hideDetails]=\"true\">\n          </cps-input>\n        </div>\n      </div>\n      <div class=\"cps-table-tbar-right\">\n        <div\n          *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-table-tbar-btn-on-select\">\n          <cps-button\n            label=\"Remove\"\n            [disabled]=\"removeBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            icon=\"remove\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"removeSelected()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-table-tbar-btn-on-select\">\n          <cps-button\n            [label]=\"additionalBtnOnSelectTitle\"\n            [disabled]=\"additionalBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickAdditionalBtnOnSelect()\">\n          </cps-button>\n        </div>\n        <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n          <cps-button\n            [label]=\"actionBtnTitle\"\n            [disabled]=\"actionBtnDisabled\"\n            color=\"prepared\"\n            type=\"outlined\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickActionBtn()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n          class=\"cps-table-tbar-coltoggle-btn\"\n          [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n          <cps-icon\n            icon=\"columns\"\n            size=\"normal\"\n            [color]=\"\n              columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n            \"\n            (click)=\"onColumnsToggle($event)\"></cps-icon>\n          <cps-menu #colToggleMenu [withArrow]=\"false\">\n            <div class=\"cps-table-coltoggle-menu\">\n              <div\n                class=\"cps-table-coltoggle-menu-item select-all-option\"\n                [class.allselected]=\"selectedColumns.length === columns.length\"\n                (click)=\"toggleAllColumns()\">\n                <span class=\"cps-table-coltoggle-menu-item-left\">\n                  <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n                  <span class=\"cps-table-coltoggle-menu-item-label\"\n                    >Show all columns</span\n                  >\n                </span>\n              </div>\n              <div\n                *ngFor=\"let col of columns\"\n                class=\"cps-table-coltoggle-menu-item\"\n                (click)=\"onSelectColumn(col)\"\n                [class.selected]=\"isColumnSelected(col)\">\n                <span class=\"cps-table-coltoggle-menu-item-left\">\n                  <span class=\"cps-table-coltoggle-menu-item-check\"></span>\n                  <span class=\"cps-table-coltoggle-menu-item-label\">{{\n                    col[colHeaderName]\n                  }}</span>\n                </span>\n              </div>\n            </div>\n          </cps-menu>\n        </div>\n        <div\n          *ngIf=\"showExportBtn\"\n          class=\"cps-table-tbar-export-btn\"\n          [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n          <cps-icon\n            icon=\"export\"\n            size=\"20\"\n            [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n            (click)=\"onExportData($event)\"></cps-icon>\n          <cps-menu\n            #exportMenu\n            [items]=\"exportMenuItems\"\n            [compressed]=\"true\"\n            [withArrow]=\"false\">\n          </cps-menu>\n        </div>\n        <div\n          *ngIf=\"showDataReloadBtn\"\n          class=\"cps-table-tbar-reload-btn\"\n          [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n          <cps-icon\n            icon=\"refresh\"\n            size=\"18\"\n            [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n            (click)=\"onReloadData()\">\n          </cps-icon>\n        </div>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n    <ng-container\n      *ngTemplateOutlet=\"\n      nestedHeaderTemplate;\n        context: {\n          $implicit: columns,\n        }\n      \"></ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n    <tr>\n      <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n      <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n      <th style=\"width: 4rem\" *ngIf=\"selectable\">\n        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n      </th>\n      <ng-container *ngIf=\"headerTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            headerTemplate;\n            context: {\n              $implicit: columns,\n            }\n          \"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n        <ng-container *ngIf=\"sortable\">\n          <th *ngFor=\"let col of columns\" [cpsTColSortable]=\"col[colFieldName]\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n        <ng-container *ngIf=\"!sortable\">\n          <th *ngFor=\"let col of columns\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n      </ng-container>\n      <th\n        style=\"width: 2rem\"\n        class=\"cps-table-row-menu-cell\"\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"></th>\n    </tr>\n  </ng-template>\n\n  <ng-template\n    pTemplate=\"body\"\n    let-rowData\n    let-columns=\"columns\"\n    let-item\n    let-rowIndex=\"rowIndex\"\n    let-expanded=\"expanded\">\n    <tr\n      [pReorderableRow]=\"rowIndex\"\n      [ngClass]=\"{\n        'cps-table-row-selected': selectable && primengTable.isSelected(item)\n      }\">\n      <td *ngIf=\"rowExpansionTemplate\" class=\"cps-table-row-chevron-cell\">\n        <div\n          class=\"cps-table-row-chevron\"\n          [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n          <cps-icon\n            icon=\"chevron-down\"\n            size=\"small\"\n            color=\"text-dark\"\n            [pRowToggler]=\"item\">\n          </cps-icon>\n        </div>\n      </td>\n      <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n        <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n      </td>\n      <td *ngIf=\"selectable\">\n        <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n      </td>\n      <ng-container *ngIf=\"bodyTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n              $implicit: item,\n              rowIndex: rowIndex,\n              columns: columns,\n              rowData: rowData\n            }\n          \">\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!bodyTemplate\">\n        <ng-container *ngIf=\"columns.length > 0\">\n          <td *ngFor=\"let col of columns\">\n            {{ rowData[col[colFieldName]] }}\n          </td>\n        </ng-container>\n      </ng-container>\n      <td\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n        class=\"cps-table-row-menu-cell\">\n        <table-row-menu\n          (editRowBtnClicked)=\"onEditRowClicked(item)\"\n          (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"\n          [showRowRemoveButton]=\"showRowRemoveButton\"\n          [showRowEditButton]=\"showRowEditButton\">\n        </table-row-menu>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n    <tr class=\"cps-table-row-expanded-content\">\n      <td colspan=\"100\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            rowExpansionTemplate;\n            context: {\n              $implicit: item\n            }\n          \"></ng-container>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-table-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-title{cursor:default}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-datatable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(2n){background:#fff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#fff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#fff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderablerow-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderablerow-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:#fff}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-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-table-coltoggle-menu .cps-table-coltoggle-menu-item-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-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: 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: TableModule }, { kind: "component", type: i1$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$3.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i1$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$3.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$3.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: TableUnsortDirective, selector: "[tWithUnsort]", exportAs: ["tWithUnsort"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", inputs: ["showRowRemoveButton", "showRowEditButton"], outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "directive", type: CpsTableColumnSortableDirective, selector: "[cpsTColSortable]", inputs: ["cpsTColSortable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-CpsTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CpsTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTableComponent, isStandalone: true, selector: "cps-table", inputs: { columns: "columns", colHeaderName: "colHeaderName", colFieldName: "colFieldName", striped: "striped", bordered: "bordered", size: "size", selectable: "selectable", rowHover: "rowHover", dataKey: "dataKey", showRowMenu: "showRowMenu", showRowRemoveButton: "showRowRemoveButton", showRowEditButton: "showRowEditButton", reorderableRows: "reorderableRows", loading: "loading", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", sortable: "sortable", sortMode: "sortMode", customSort: "customSort", hasToolbar: "hasToolbar", toolbarSize: "toolbarSize", toolbarTitle: "toolbarTitle", toolbarIcon: "toolbarIcon", toolbarIconColor: "toolbarIconColor", scrollable: "scrollable", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", paginator: "paginator", alwaysShowPaginator: "alwaysShowPaginator", rowsPerPageOptions: "rowsPerPageOptions", first: "first", rows: "rows", resetPageOnRowsChange: "resetPageOnRowsChange", resetPageOnSort: "resetPageOnSort", totalRecords: "totalRecords", emptyMessage: "emptyMessage", emptyBodyHeight: "emptyBodyHeight", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", showGlobalFilter: "showGlobalFilter", globalFilterPlaceholder: "globalFilterPlaceholder", globalFilterFields: "globalFilterFields", clearGlobalFilterOnLoading: "clearGlobalFilterOnLoading", showRemoveBtnOnSelect: "showRemoveBtnOnSelect", removeBtnOnSelectDisabled: "removeBtnOnSelectDisabled", showAdditionalBtnOnSelect: "showAdditionalBtnOnSelect", additionalBtnOnSelectTitle: "additionalBtnOnSelectTitle", additionalBtnOnSelectDisabled: "additionalBtnOnSelectDisabled", showActionBtn: "showActionBtn", actionBtnTitle: "actionBtnTitle", actionBtnDisabled: "actionBtnDisabled", showExportBtn: "showExportBtn", exportBtnDisabled: "exportBtnDisabled", exportFilename: "exportFilename", csvSeparator: "csvSeparator", showDataReloadBtn: "showDataReloadBtn", dataReloadBtnDisabled: "dataReloadBtnDisabled", showColumnsToggleBtn: "showColumnsToggleBtn", columnsToggleBtnDisabled: "columnsToggleBtnDisabled", initialColumns: "initialColumns", data: "data" }, outputs: { rowsSelected: "rowsSelected", selectedRowIndexes: "selectedRowIndexes", actionBtnClicked: "actionBtnClicked", editRowBtnClicked: "editRowBtnClicked", rowsToRemove: "rowsToRemove", rowIndexesToRemove: "rowIndexesToRemove", pageChanged: "pageChanged", sorted: "sorted", filtered: "filtered", rowsReordered: "rowsReordered", columnsSelected: "columnsSelected", lazyLoaded: "lazyLoaded", dataReloadBtnClicked: "dataReloadBtnClicked", additionalBtnOnSelectClicked: "additionalBtnOnSelectClicked", customSortFunction: "customSortFunction" }, providers: [
-        TableService,
-        {
-            provide: Table,
-            useFactory: tableFactory,
-            // eslint-disable-next-line no-use-before-define
-            deps: [CpsTableComponent]
-        }
-    ], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }, { propertyName: "rowExpansionTemplate", first: true, predicate: ["rowexpansion"], descendants: true }], viewQueries: [{ propertyName: "primengTable", first: true, predicate: ["primengTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "exportMenu", first: true, predicate: ["exportMenu"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }, { propertyName: "tUnsortDirective", first: true, predicate: ["tUnsortDirective"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-table\n  #primengTable\n  #tUnsortDirective=\"tWithUnsort\"\n  tWithUnsort\n  [ngClass]=\"{ 'cps-table-loading': loading }\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [value]=\"data\"\n  [dataKey]=\"dataKey\"\n  [columns]=\"selectedColumns\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [showInitialSortBadge]=\"false\"\n  [loading]=\"loading\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [lazy]=\"lazy\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  [(selection)]=\"selectedRows\"\n  [metaKeySelection]=\"false\"\n  [rowHover]=\"rowHover\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [exportFilename]=\"exportFilename\"\n  [csvSeparator]=\"csvSeparator\"\n  (onPage)=\"onPageChange($event)\"\n  (onLazyLoad)=\"onLazyLoaded($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onSort)=\"onSort($event)\"\n  (onFilter)=\"onFilter($event)\"\n  (onRowReorder)=\"onRowReorder($event)\">\n  <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n    <ng-container *ngIf=\"toolbarTemplate\">\n      <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!toolbarTemplate\">\n      <div class=\"cps-table-tbar-left\">\n        <div *ngIf=\"toolbarIcon\" class=\"cps-table-tbar-icon\">\n          <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n        </div>\n        <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n        <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n          <cps-input\n            #globalFilterComp\n            prefixIcon=\"search\"\n            [placeholder]=\"globalFilterPlaceholder\"\n            (valueChanged)=\"onFilterGlobal($event)\"\n            [clearable]=\"true\"\n            [disabled]=\"loading\"\n            [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n            [hideDetails]=\"true\">\n          </cps-input>\n        </div>\n      </div>\n      <div class=\"cps-table-tbar-right\">\n        <div\n          *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-table-tbar-btn-on-select\">\n          <cps-button\n            label=\"Remove\"\n            [disabled]=\"removeBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            icon=\"remove\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"removeSelected()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-table-tbar-btn-on-select\">\n          <cps-button\n            [label]=\"additionalBtnOnSelectTitle\"\n            [disabled]=\"additionalBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickAdditionalBtnOnSelect()\">\n          </cps-button>\n        </div>\n        <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n          <cps-button\n            [label]=\"actionBtnTitle\"\n            [disabled]=\"actionBtnDisabled\"\n            color=\"prepared\"\n            type=\"outlined\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickActionBtn()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n          class=\"cps-table-tbar-coltoggle-btn\"\n          [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n          <cps-icon\n            icon=\"columns\"\n            size=\"normal\"\n            [color]=\"\n              columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n            \"\n            (click)=\"onColumnsToggle($event)\"></cps-icon>\n          <cps-menu #colToggleMenu [withArrow]=\"false\">\n            <div class=\"cps-table-coltoggle-menu\">\n              <div\n                class=\"cps-table-coltoggle-menu-item select-all-option\"\n                [class.allselected]=\"selectedColumns.length === columns.length\"\n                (click)=\"toggleAllColumns()\">\n                <span class=\"cps-table-coltoggle-menu-item-left\">\n                  <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n                  <span class=\"cps-table-coltoggle-menu-item-label\"\n                    >Show all columns</span\n                  >\n                </span>\n              </div>\n              <div\n                *ngFor=\"let col of columns\"\n                class=\"cps-table-coltoggle-menu-item\"\n                (click)=\"onSelectColumn(col)\"\n                [class.selected]=\"isColumnSelected(col)\">\n                <span class=\"cps-table-coltoggle-menu-item-left\">\n                  <span class=\"cps-table-coltoggle-menu-item-check\"></span>\n                  <span class=\"cps-table-coltoggle-menu-item-label\">{{\n                    col[colHeaderName]\n                  }}</span>\n                </span>\n              </div>\n            </div>\n          </cps-menu>\n        </div>\n        <div\n          *ngIf=\"showExportBtn\"\n          class=\"cps-table-tbar-export-btn\"\n          [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n          <cps-icon\n            icon=\"export\"\n            size=\"20\"\n            [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n            (click)=\"onExportData($event)\"></cps-icon>\n          <cps-menu\n            #exportMenu\n            [items]=\"exportMenuItems\"\n            [compressed]=\"true\"\n            [withArrow]=\"false\">\n          </cps-menu>\n        </div>\n        <div\n          *ngIf=\"showDataReloadBtn\"\n          class=\"cps-table-tbar-reload-btn\"\n          [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n          <cps-icon\n            icon=\"refresh\"\n            size=\"18\"\n            [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n            (click)=\"onReloadData()\">\n          </cps-icon>\n        </div>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n    <ng-container\n      *ngTemplateOutlet=\"\n      nestedHeaderTemplate;\n        context: {\n          $implicit: columns,\n        }\n      \"></ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n    <tr>\n      <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n      <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n      <th style=\"width: 4rem\" *ngIf=\"selectable\">\n        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n      </th>\n      <ng-container *ngIf=\"headerTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            headerTemplate;\n            context: {\n              $implicit: columns,\n            }\n          \"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n        <ng-container *ngIf=\"sortable\">\n          <th *ngFor=\"let col of columns\" [cpsTColSortable]=\"col[colFieldName]\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n        <ng-container *ngIf=\"!sortable\">\n          <th *ngFor=\"let col of columns\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n      </ng-container>\n      <th\n        style=\"width: 2rem\"\n        class=\"cps-table-row-menu-cell\"\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"></th>\n    </tr>\n  </ng-template>\n\n  <ng-template\n    pTemplate=\"body\"\n    let-rowData\n    let-columns=\"columns\"\n    let-item\n    let-rowIndex=\"rowIndex\"\n    let-expanded=\"expanded\">\n    <tr\n      [pReorderableRow]=\"rowIndex\"\n      [ngClass]=\"{\n        'cps-table-row-selected': selectable && primengTable.isSelected(item)\n      }\">\n      <td *ngIf=\"rowExpansionTemplate\" class=\"cps-table-row-chevron-cell\">\n        <div\n          class=\"cps-table-row-chevron\"\n          [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n          <cps-icon\n            icon=\"chevron-down\"\n            size=\"small\"\n            color=\"text-dark\"\n            [pRowToggler]=\"item\">\n          </cps-icon>\n        </div>\n      </td>\n      <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n        <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n      </td>\n      <td *ngIf=\"selectable\">\n        <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n      </td>\n      <ng-container *ngIf=\"bodyTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n              $implicit: item,\n              rowIndex: rowIndex,\n              columns: columns,\n              rowData: rowData\n            }\n          \">\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!bodyTemplate\">\n        <ng-container *ngIf=\"columns.length > 0\">\n          <td *ngFor=\"let col of columns\">\n            {{ rowData[col[colFieldName]] }}\n          </td>\n        </ng-container>\n      </ng-container>\n      <td\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n        class=\"cps-table-row-menu-cell\">\n        <table-row-menu\n          (editRowBtnClicked)=\"onEditRowClicked(item)\"\n          (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"\n          [showRowRemoveButton]=\"showRowRemoveButton\"\n          [showRowEditButton]=\"showRowEditButton\">\n        </table-row-menu>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n    <tr class=\"cps-table-row-expanded-content\">\n      <td colspan=\"100\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            rowExpansionTemplate;\n            context: {\n              $implicit: item\n            }\n          \"></ng-container>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-table-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-title{cursor:default}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-datatable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(even){background:#ffffff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderablerow-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderablerow-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:white}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-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-table-coltoggle-menu .cps-table-coltoggle-menu-item-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-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: 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: TableModule }, { kind: "component", type: i1$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$3.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i1$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$3.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$3.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: TableUnsortDirective, selector: "[tWithUnsort]", exportAs: ["tWithUnsort"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", inputs: ["showRowRemoveButton", "showRowEditButton"], outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "directive", type: CpsTableColumnSortableDirective, selector: "[cpsTColSortable]", inputs: ["cpsTColSortable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cps-table', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FormsModule,
@@ -5834,8 +5849,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             // eslint-disable-next-line no-use-before-define
                             deps: [CpsTableComponent]
                         }
-                    ], template: "<p-table\n  #primengTable\n  #tUnsortDirective=\"tWithUnsort\"\n  tWithUnsort\n  [ngClass]=\"{ 'cps-table-loading': loading }\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [value]=\"data\"\n  [dataKey]=\"dataKey\"\n  [columns]=\"selectedColumns\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [showInitialSortBadge]=\"false\"\n  [loading]=\"loading\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [lazy]=\"lazy\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  [(selection)]=\"selectedRows\"\n  [metaKeySelection]=\"false\"\n  [rowHover]=\"rowHover\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [exportFilename]=\"exportFilename\"\n  [csvSeparator]=\"csvSeparator\"\n  (onPage)=\"onPageChange($event)\"\n  (onLazyLoad)=\"onLazyLoaded($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onSort)=\"onSort($event)\"\n  (onFilter)=\"onFilter($event)\"\n  (onRowReorder)=\"onRowReorder($event)\">\n  <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n    <ng-container *ngIf=\"toolbarTemplate\">\n      <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!toolbarTemplate\">\n      <div class=\"cps-table-tbar-left\">\n        <div *ngIf=\"toolbarIcon\" class=\"cps-table-tbar-icon\">\n          <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n        </div>\n        <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n        <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n          <cps-input\n            #globalFilterComp\n            prefixIcon=\"search\"\n            [placeholder]=\"globalFilterPlaceholder\"\n            (valueChanged)=\"onFilterGlobal($event)\"\n            [clearable]=\"true\"\n            [disabled]=\"loading\"\n            [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n            [hideDetails]=\"true\">\n          </cps-input>\n        </div>\n      </div>\n      <div class=\"cps-table-tbar-right\">\n        <div\n          *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-table-tbar-btn-on-select\">\n          <cps-button\n            label=\"Remove\"\n            [disabled]=\"removeBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            icon=\"remove\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"removeSelected()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-table-tbar-btn-on-select\">\n          <cps-button\n            [label]=\"additionalBtnOnSelectTitle\"\n            [disabled]=\"additionalBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickAdditionalBtnOnSelect()\">\n          </cps-button>\n        </div>\n        <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n          <cps-button\n            [label]=\"actionBtnTitle\"\n            [disabled]=\"actionBtnDisabled\"\n            color=\"prepared\"\n            type=\"outlined\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickActionBtn()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n          class=\"cps-table-tbar-coltoggle-btn\"\n          [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n          <cps-icon\n            icon=\"columns\"\n            size=\"normal\"\n            [color]=\"\n              columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n            \"\n            (click)=\"onColumnsToggle($event)\"></cps-icon>\n          <cps-menu #colToggleMenu [withArrow]=\"false\">\n            <div class=\"cps-table-coltoggle-menu\">\n              <div\n                class=\"cps-table-coltoggle-menu-item select-all-option\"\n                [class.allselected]=\"selectedColumns.length === columns.length\"\n                (click)=\"toggleAllColumns()\">\n                <span class=\"cps-table-coltoggle-menu-item-left\">\n                  <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n                  <span class=\"cps-table-coltoggle-menu-item-label\"\n                    >Show all columns</span\n                  >\n                </span>\n              </div>\n              <div\n                *ngFor=\"let col of columns\"\n                class=\"cps-table-coltoggle-menu-item\"\n                (click)=\"onSelectColumn(col)\"\n                [class.selected]=\"isColumnSelected(col)\">\n                <span class=\"cps-table-coltoggle-menu-item-left\">\n                  <span class=\"cps-table-coltoggle-menu-item-check\"></span>\n                  <span class=\"cps-table-coltoggle-menu-item-label\">{{\n                    col[colHeaderName]\n                  }}</span>\n                </span>\n              </div>\n            </div>\n          </cps-menu>\n        </div>\n        <div\n          *ngIf=\"showExportBtn\"\n          class=\"cps-table-tbar-export-btn\"\n          [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n          <cps-icon\n            icon=\"export\"\n            size=\"20\"\n            [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n            (click)=\"onExportData($event)\"></cps-icon>\n          <cps-menu\n            #exportMenu\n            [items]=\"exportMenuItems\"\n            [compressed]=\"true\"\n            [withArrow]=\"false\">\n          </cps-menu>\n        </div>\n        <div\n          *ngIf=\"showDataReloadBtn\"\n          class=\"cps-table-tbar-reload-btn\"\n          [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n          <cps-icon\n            icon=\"refresh\"\n            size=\"18\"\n            [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n            (click)=\"onReloadData()\">\n          </cps-icon>\n        </div>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n    <ng-container\n      *ngTemplateOutlet=\"\n      nestedHeaderTemplate;\n        context: {\n          $implicit: columns,\n        }\n      \"></ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n    <tr>\n      <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n      <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n      <th style=\"width: 4rem\" *ngIf=\"selectable\">\n        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n      </th>\n      <ng-container *ngIf=\"headerTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            headerTemplate;\n            context: {\n              $implicit: columns,\n            }\n          \"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n        <ng-container *ngIf=\"sortable\">\n          <th *ngFor=\"let col of columns\" [cpsTColSortable]=\"col[colFieldName]\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n        <ng-container *ngIf=\"!sortable\">\n          <th *ngFor=\"let col of columns\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n      </ng-container>\n      <th\n        style=\"width: 2rem\"\n        class=\"cps-table-row-menu-cell\"\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"></th>\n    </tr>\n  </ng-template>\n\n  <ng-template\n    pTemplate=\"body\"\n    let-rowData\n    let-columns=\"columns\"\n    let-item\n    let-rowIndex=\"rowIndex\"\n    let-expanded=\"expanded\">\n    <tr\n      [pReorderableRow]=\"rowIndex\"\n      [ngClass]=\"{\n        'cps-table-row-selected': selectable && primengTable.isSelected(item)\n      }\">\n      <td *ngIf=\"rowExpansionTemplate\" class=\"cps-table-row-chevron-cell\">\n        <div\n          class=\"cps-table-row-chevron\"\n          [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n          <cps-icon\n            icon=\"chevron-down\"\n            size=\"small\"\n            color=\"text-dark\"\n            [pRowToggler]=\"item\">\n          </cps-icon>\n        </div>\n      </td>\n      <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n        <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n      </td>\n      <td *ngIf=\"selectable\">\n        <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n      </td>\n      <ng-container *ngIf=\"bodyTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n              $implicit: item,\n              rowIndex: rowIndex,\n              columns: columns,\n              rowData: rowData\n            }\n          \">\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!bodyTemplate\">\n        <ng-container *ngIf=\"columns.length > 0\">\n          <td *ngFor=\"let col of columns\">\n            {{ rowData[col[colFieldName]] }}\n          </td>\n        </ng-container>\n      </ng-container>\n      <td\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n        class=\"cps-table-row-menu-cell\">\n        <table-row-menu\n          (editRowBtnClicked)=\"onEditRowClicked(item)\"\n          (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"\n          [showRowRemoveButton]=\"showRowRemoveButton\"\n          [showRowEditButton]=\"showRowEditButton\">\n        </table-row-menu>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n    <tr class=\"cps-table-row-expanded-content\">\n      <td colspan=\"100\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            rowExpansionTemplate;\n            context: {\n              $implicit: item\n            }\n          \"></ng-container>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-table-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-title{cursor:default}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-datatable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(even){background:#ffffff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderablerow-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderablerow-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:white}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-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-table-coltoggle-menu .cps-table-coltoggle-menu-item-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-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { columns: [{
+                    ], template: "<p-table\n  #primengTable\n  #tUnsortDirective=\"tWithUnsort\"\n  tWithUnsort\n  [ngClass]=\"{ 'cps-table-loading': loading }\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [value]=\"data\"\n  [dataKey]=\"dataKey\"\n  [columns]=\"selectedColumns\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [showInitialSortBadge]=\"false\"\n  [loading]=\"loading\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [lazy]=\"lazy\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  [(selection)]=\"selectedRows\"\n  [metaKeySelection]=\"false\"\n  [rowHover]=\"rowHover\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [exportFilename]=\"exportFilename\"\n  [csvSeparator]=\"csvSeparator\"\n  (onPage)=\"onPageChange($event)\"\n  (onLazyLoad)=\"onLazyLoaded($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onSort)=\"onSort($event)\"\n  (onFilter)=\"onFilter($event)\"\n  (onRowReorder)=\"onRowReorder($event)\">\n  <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n    <ng-container *ngIf=\"toolbarTemplate\">\n      <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!toolbarTemplate\">\n      <div class=\"cps-table-tbar-left\">\n        <div *ngIf=\"toolbarIcon\" class=\"cps-table-tbar-icon\">\n          <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n        </div>\n        <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n        <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n          <cps-input\n            #globalFilterComp\n            prefixIcon=\"search\"\n            [placeholder]=\"globalFilterPlaceholder\"\n            (valueChanged)=\"onFilterGlobal($event)\"\n            [clearable]=\"true\"\n            [disabled]=\"loading\"\n            [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n            [hideDetails]=\"true\">\n          </cps-input>\n        </div>\n      </div>\n      <div class=\"cps-table-tbar-right\">\n        <div\n          *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-table-tbar-btn-on-select\">\n          <cps-button\n            label=\"Remove\"\n            [disabled]=\"removeBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            icon=\"remove\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"removeSelected()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-table-tbar-btn-on-select\">\n          <cps-button\n            [label]=\"additionalBtnOnSelectTitle\"\n            [disabled]=\"additionalBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickAdditionalBtnOnSelect()\">\n          </cps-button>\n        </div>\n        <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n          <cps-button\n            [label]=\"actionBtnTitle\"\n            [disabled]=\"actionBtnDisabled\"\n            color=\"prepared\"\n            type=\"outlined\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickActionBtn()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n          class=\"cps-table-tbar-coltoggle-btn\"\n          [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n          <cps-icon\n            icon=\"columns\"\n            size=\"normal\"\n            [color]=\"\n              columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n            \"\n            (click)=\"onColumnsToggle($event)\"></cps-icon>\n          <cps-menu #colToggleMenu [withArrow]=\"false\">\n            <div class=\"cps-table-coltoggle-menu\">\n              <div\n                class=\"cps-table-coltoggle-menu-item select-all-option\"\n                [class.allselected]=\"selectedColumns.length === columns.length\"\n                (click)=\"toggleAllColumns()\">\n                <span class=\"cps-table-coltoggle-menu-item-left\">\n                  <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n                  <span class=\"cps-table-coltoggle-menu-item-label\"\n                    >Show all columns</span\n                  >\n                </span>\n              </div>\n              <div\n                *ngFor=\"let col of columns\"\n                class=\"cps-table-coltoggle-menu-item\"\n                (click)=\"onSelectColumn(col)\"\n                [class.selected]=\"isColumnSelected(col)\">\n                <span class=\"cps-table-coltoggle-menu-item-left\">\n                  <span class=\"cps-table-coltoggle-menu-item-check\"></span>\n                  <span class=\"cps-table-coltoggle-menu-item-label\">{{\n                    col[colHeaderName]\n                  }}</span>\n                </span>\n              </div>\n            </div>\n          </cps-menu>\n        </div>\n        <div\n          *ngIf=\"showExportBtn\"\n          class=\"cps-table-tbar-export-btn\"\n          [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n          <cps-icon\n            icon=\"export\"\n            size=\"20\"\n            [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n            (click)=\"onExportData($event)\"></cps-icon>\n          <cps-menu\n            #exportMenu\n            [items]=\"exportMenuItems\"\n            [compressed]=\"true\"\n            [withArrow]=\"false\">\n          </cps-menu>\n        </div>\n        <div\n          *ngIf=\"showDataReloadBtn\"\n          class=\"cps-table-tbar-reload-btn\"\n          [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n          <cps-icon\n            icon=\"refresh\"\n            size=\"18\"\n            [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n            (click)=\"onReloadData()\">\n          </cps-icon>\n        </div>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n    <ng-container\n      *ngTemplateOutlet=\"\n      nestedHeaderTemplate;\n        context: {\n          $implicit: columns,\n        }\n      \"></ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n    <tr>\n      <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n      <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n      <th style=\"width: 4rem\" *ngIf=\"selectable\">\n        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n      </th>\n      <ng-container *ngIf=\"headerTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            headerTemplate;\n            context: {\n              $implicit: columns,\n            }\n          \"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n        <ng-container *ngIf=\"sortable\">\n          <th *ngFor=\"let col of columns\" [cpsTColSortable]=\"col[colFieldName]\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n        <ng-container *ngIf=\"!sortable\">\n          <th *ngFor=\"let col of columns\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n      </ng-container>\n      <th\n        style=\"width: 2rem\"\n        class=\"cps-table-row-menu-cell\"\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"></th>\n    </tr>\n  </ng-template>\n\n  <ng-template\n    pTemplate=\"body\"\n    let-rowData\n    let-columns=\"columns\"\n    let-item\n    let-rowIndex=\"rowIndex\"\n    let-expanded=\"expanded\">\n    <tr\n      [pReorderableRow]=\"rowIndex\"\n      [ngClass]=\"{\n        'cps-table-row-selected': selectable && primengTable.isSelected(item)\n      }\">\n      <td *ngIf=\"rowExpansionTemplate\" class=\"cps-table-row-chevron-cell\">\n        <div\n          class=\"cps-table-row-chevron\"\n          [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n          <cps-icon\n            icon=\"chevron-down\"\n            size=\"small\"\n            color=\"text-dark\"\n            [pRowToggler]=\"item\">\n          </cps-icon>\n        </div>\n      </td>\n      <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n        <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n      </td>\n      <td *ngIf=\"selectable\">\n        <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n      </td>\n      <ng-container *ngIf=\"bodyTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n              $implicit: item,\n              rowIndex: rowIndex,\n              columns: columns,\n              rowData: rowData\n            }\n          \">\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!bodyTemplate\">\n        <ng-container *ngIf=\"columns.length > 0\">\n          <td *ngFor=\"let col of columns\">\n            {{ rowData[col[colFieldName]] }}\n          </td>\n        </ng-container>\n      </ng-container>\n      <td\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n        class=\"cps-table-row-menu-cell\">\n        <table-row-menu\n          (editRowBtnClicked)=\"onEditRowClicked(item)\"\n          (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"\n          [showRowRemoveButton]=\"showRowRemoveButton\"\n          [showRowEditButton]=\"showRowEditButton\">\n        </table-row-menu>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n    <tr class=\"cps-table-row-expanded-content\">\n      <td colspan=\"100\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            rowExpansionTemplate;\n            context: {\n              $implicit: item\n            }\n          \"></ng-container>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-table-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-title{cursor:default}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-datatable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(2n){background:#fff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#fff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#fff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderablerow-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderablerow-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:#fff}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-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-table-coltoggle-menu .cps-table-coltoggle-menu-item-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-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { columns: [{
                 type: Input
             }], colHeaderName: [{
                 type: Input
@@ -6352,10 +6367,10 @@ class CpsDatepickerComponent {
             this.focusInput();
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsDatepickerComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsDatepickerComponent, isStandalone: true, selector: "cps-datepicker", inputs: { label: "label", disabled: "disabled", width: "width", placeholder: "placeholder", hint: "hint", clearable: "clearable", hideDetails: "hideDetails", persistentClear: "persistentClear", showTodayButton: "showTodayButton", openOnInputFocus: "openOnInputFocus", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", minDate: "minDate", maxDate: "maxDate", value: "value" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["datepickerInput"], descendants: true }, { propertyName: "calendarMenu", first: true, predicate: ["calendarMenu"], descendants: true }], ngImport: i0, template: "<div\n  class=\"cps-datepicker\"\n  [ngStyle]=\"{ width: cvtWidth }\"\n  [class.focused]=\"isOpened\">\n  <cps-input\n    #datepickerInput\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    prefixIcon=\"datepicker\"\n    [placeholder]=\"placeholder\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\n    (valueChanged)=\"onInputValueChanged($event)\"\n    [clearable]=\"clearable\"\n    (blurred)=\"onInputBlur()\"\n    (cleared)=\"onInputClear()\"\n    (enterClicked)=\"onInputEnterClicked()\"\n    [width]=\"width\"\n    [hint]=\"hint\"\n    [hideDetails]=\"hideDetails\"\n    [infoTooltip]=\"infoTooltip\"\n    [infoTooltipClass]=\"infoTooltipClass\"\n    [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n    [infoTooltipPersistent]=\"infoTooltipPersistent\"\n    [persistentClear]=\"persistentClear\"\n    [appearance]=\"appearance\"\n    [error]=\"error\"></cps-input>\n  <cps-menu\n    #calendarMenu\n    [withArrow]=\"false\"\n    (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n    (contentClicked)=\"onCalendarContentClick()\"\n    [focusOnShow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    containerClass=\"cps-datepicker-calendar-menu\">\n    <div class=\"cps-datepicker-calendar\">\n      <p-calendar\n        [(ngModel)]=\"value\"\n        [showIcon]=\"true\"\n        [showButtonBar]=\"showTodayButton\"\n        [inline]=\"true\"\n        (onSelect)=\"onSelectCalendarDate($event)\"\n        (onClearClick)=\"onClearCalendarDate()\"\n        [showOtherMonths]=\"false\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\">\n      </p-calendar>\n    </div>\n  </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep input{border:1px solid var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#fff;color:var(--cps-color-text-darkest);border:1px solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#fff;font-weight:600;margin:0;border-bottom:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-lightest);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-prepared)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}.cps-datepicker-calendar ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-family:Source Sans Pro,sans-serif;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-button:active{background-color:var(--cps-color-highlight-selected)}.cps-datepicker-calendar ::ng-deep .p-button .p-button-label{font-weight:700}\n"], dependencies: [{ kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$2.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] }); }
 }
-CpsDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsDatepickerComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-CpsDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsDatepickerComponent, isStandalone: true, selector: "cps-datepicker", inputs: { label: "label", disabled: "disabled", width: "width", placeholder: "placeholder", hint: "hint", clearable: "clearable", hideDetails: "hideDetails", persistentClear: "persistentClear", showTodayButton: "showTodayButton", openOnInputFocus: "openOnInputFocus", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", minDate: "minDate", maxDate: "maxDate", value: "value" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["datepickerInput"], descendants: true }, { propertyName: "calendarMenu", first: true, predicate: ["calendarMenu"], descendants: true }], ngImport: i0, template: "<div\n  class=\"cps-datepicker\"\n  [ngStyle]=\"{ width: cvtWidth }\"\n  [class.focused]=\"isOpened\">\n  <cps-input\n    #datepickerInput\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    prefixIcon=\"datepicker\"\n    [placeholder]=\"placeholder\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\n    (valueChanged)=\"onInputValueChanged($event)\"\n    [clearable]=\"clearable\"\n    (blurred)=\"onInputBlur()\"\n    (cleared)=\"onInputClear()\"\n    (enterClicked)=\"onInputEnterClicked()\"\n    [width]=\"width\"\n    [hint]=\"hint\"\n    [hideDetails]=\"hideDetails\"\n    [infoTooltip]=\"infoTooltip\"\n    [infoTooltipClass]=\"infoTooltipClass\"\n    [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n    [infoTooltipPersistent]=\"infoTooltipPersistent\"\n    [persistentClear]=\"persistentClear\"\n    [appearance]=\"appearance\"\n    [error]=\"error\"></cps-input>\n  <cps-menu\n    #calendarMenu\n    [withArrow]=\"false\"\n    (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n    (contentClicked)=\"onCalendarContentClick()\"\n    [focusOnShow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    containerClass=\"cps-datepicker-calendar-menu\">\n    <div class=\"cps-datepicker-calendar\">\n      <p-calendar\n        [(ngModel)]=\"value\"\n        [showIcon]=\"true\"\n        [showButtonBar]=\"showTodayButton\"\n        [inline]=\"true\"\n        (onSelect)=\"onSelectCalendarDate($event)\"\n        (onClearClick)=\"onClearCalendarDate()\"\n        [showOtherMonths]=\"false\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\">\n      </p-calendar>\n    </div>\n  </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep input{border:1px solid var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#ffffff;color:var(--cps-color-text-darkest);border:1px solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#ffffff;font-weight:600;margin:0;border-bottom:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-lightest);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-prepared)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}.cps-datepicker-calendar ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-family:Source Sans Pro,sans-serif;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-button:active{background-color:var(--cps-color-highlight-selected)}.cps-datepicker-calendar ::ng-deep .p-button .p-button-label{font-weight:700}\n"], dependencies: [{ kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$2.Calendar, selector: "p-calendar", inputs: ["style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "view", "defaultDate", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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: "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: "15.2.9", ngImport: i0, type: CpsDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsDatepickerComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         CpsInputComponent,
@@ -6363,12 +6378,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         CommonModule,
                         FormsModule,
                         CpsMenuComponent
-                    ], selector: 'cps-datepicker', template: "<div\n  class=\"cps-datepicker\"\n  [ngStyle]=\"{ width: cvtWidth }\"\n  [class.focused]=\"isOpened\">\n  <cps-input\n    #datepickerInput\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    prefixIcon=\"datepicker\"\n    [placeholder]=\"placeholder\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\n    (valueChanged)=\"onInputValueChanged($event)\"\n    [clearable]=\"clearable\"\n    (blurred)=\"onInputBlur()\"\n    (cleared)=\"onInputClear()\"\n    (enterClicked)=\"onInputEnterClicked()\"\n    [width]=\"width\"\n    [hint]=\"hint\"\n    [hideDetails]=\"hideDetails\"\n    [infoTooltip]=\"infoTooltip\"\n    [infoTooltipClass]=\"infoTooltipClass\"\n    [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n    [infoTooltipPersistent]=\"infoTooltipPersistent\"\n    [persistentClear]=\"persistentClear\"\n    [appearance]=\"appearance\"\n    [error]=\"error\"></cps-input>\n  <cps-menu\n    #calendarMenu\n    [withArrow]=\"false\"\n    (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n    (contentClicked)=\"onCalendarContentClick()\"\n    [focusOnShow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    containerClass=\"cps-datepicker-calendar-menu\">\n    <div class=\"cps-datepicker-calendar\">\n      <p-calendar\n        [(ngModel)]=\"value\"\n        [showIcon]=\"true\"\n        [showButtonBar]=\"showTodayButton\"\n        [inline]=\"true\"\n        (onSelect)=\"onSelectCalendarDate($event)\"\n        (onClearClick)=\"onClearCalendarDate()\"\n        [showOtherMonths]=\"false\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\">\n      </p-calendar>\n    </div>\n  </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep input{border:1px solid var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#ffffff;color:var(--cps-color-text-darkest);border:1px solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#ffffff;font-weight:600;margin:0;border-bottom:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-lightest);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-prepared)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}.cps-datepicker-calendar ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-family:Source Sans Pro,sans-serif;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-button:active{background-color:var(--cps-color-highlight-selected)}.cps-datepicker-calendar ::ng-deep .p-button .p-button-label{font-weight:700}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+                    ], selector: 'cps-datepicker', template: "<div\n  class=\"cps-datepicker\"\n  [ngStyle]=\"{ width: cvtWidth }\"\n  [class.focused]=\"isOpened\">\n  <cps-input\n    #datepickerInput\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    prefixIcon=\"datepicker\"\n    [placeholder]=\"placeholder\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\n    (valueChanged)=\"onInputValueChanged($event)\"\n    [clearable]=\"clearable\"\n    (blurred)=\"onInputBlur()\"\n    (cleared)=\"onInputClear()\"\n    (enterClicked)=\"onInputEnterClicked()\"\n    [width]=\"width\"\n    [hint]=\"hint\"\n    [hideDetails]=\"hideDetails\"\n    [infoTooltip]=\"infoTooltip\"\n    [infoTooltipClass]=\"infoTooltipClass\"\n    [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n    [infoTooltipPersistent]=\"infoTooltipPersistent\"\n    [persistentClear]=\"persistentClear\"\n    [appearance]=\"appearance\"\n    [error]=\"error\"></cps-input>\n  <cps-menu\n    #calendarMenu\n    [withArrow]=\"false\"\n    (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n    (contentClicked)=\"onCalendarContentClick()\"\n    [focusOnShow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    containerClass=\"cps-datepicker-calendar-menu\">\n    <div class=\"cps-datepicker-calendar\">\n      <p-calendar\n        [(ngModel)]=\"value\"\n        [showIcon]=\"true\"\n        [showButtonBar]=\"showTodayButton\"\n        [inline]=\"true\"\n        (onSelect)=\"onSelectCalendarDate($event)\"\n        (onClearClick)=\"onClearCalendarDate()\"\n        [showOtherMonths]=\"false\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\">\n      </p-calendar>\n    </div>\n  </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep input{border:1px solid var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#fff;color:var(--cps-color-text-darkest);border:1px solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#fff;font-weight:600;margin:0;border-bottom:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-lightest);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-prepared)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}.cps-datepicker-calendar ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-family:Source Sans Pro,sans-serif;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-button:active{background-color:var(--cps-color-highlight-selected)}.cps-datepicker-calendar ::ng-deep .p-button .p-button-label{font-weight:700}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }]; }, propDecorators: { label: [{
+                }] }], propDecorators: { label: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -6594,10 +6609,10 @@ class CpsButtonToggleComponent {
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     setDisabledState(disabled) { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsButtonToggleComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", equalWidths: "equalWidths", optionTooltipPosition: "optionTooltipPosition", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], ngImport: i0, template: "<div class=\"cps-btn-toggle\">\n  <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n    <span>{{ label }}</span>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-btn-toggle-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 class=\"cps-btn-toggle-content\">\n    <ng-container *ngFor=\"let option of options\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          optionContainerTemplate;\n          context: {\n            option: option,\n            tooltip: option.tooltip\n          }\n        \"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #optionContainerTemplate let-option=\"option\" let-tooltip=\"tooltip\">\n  <label\n    class=\"cps-btn-toggle-content-option\"\n    *ngIf=\"tooltip\"\n    [cpsTooltip]=\"option.tooltip\"\n    tooltipCloseDelay=\"0\"\n    [tooltipPosition]=\"optionTooltipPosition\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </label>\n  <label class=\"cps-btn-toggle-content-option\" *ngIf=\"!tooltip\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </label>\n</ng-template>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n  <input\n    class=\"cps-btn-toggle-content-option-input\"\n    [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n    [disabled]=\"option.disabled || disabled\"\n    [value]=\"option.value\"\n    [checked]=\"\n      option.value | checkOptionSelected : value : multiple : true : ''\n    \"\n    (change)=\"updateValueEvent($event, option.value)\" />\n  <span\n    class=\"cps-btn-toggle-content-option-content\"\n    [ngStyle]=\"{\n      'min-width': largestButtonWidth ? largestButtonWidth + 'px' : 'none'\n    }\">\n    <cps-icon\n      *ngIf=\"option.icon\"\n      [ngClass]=\"{ 'me-2': !!option.label }\"\n      [icon]=\"option.icon\">\n    </cps-icon>\n    <span *ngIf=\"option.label\">{{ option.label }}</span>\n  </span>\n</ng-template>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:inline-flex;font-weight:700;font-size:16px;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:8px}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(#ffffff1a 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-text-lightest);border-right:0;font-weight:400;font-size:16px;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:var(--cps-color-highlight-hover)}:host .cps-btn-toggle-content-option-content:active{background:var(--cps-color-highlight-active)}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-text-lightest)}\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: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass"] }] }); }
 }
-CpsButtonToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonToggleComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-CpsButtonToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", equalWidths: "equalWidths", optionTooltipPosition: "optionTooltipPosition", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], ngImport: i0, template: "<div class=\"cps-btn-toggle\">\n  <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n    <span>{{ label }}</span>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-btn-toggle-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 class=\"cps-btn-toggle-content\">\n    <ng-container *ngFor=\"let option of options\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          optionContainerTemplate;\n          context: {\n            option: option,\n            tooltip: option.tooltip\n          }\n        \"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #optionContainerTemplate let-option=\"option\" let-tooltip=\"tooltip\">\n  <label\n    class=\"cps-btn-toggle-content-option\"\n    *ngIf=\"tooltip\"\n    [cpsTooltip]=\"option.tooltip\"\n    tooltipCloseDelay=\"0\"\n    [tooltipPosition]=\"optionTooltipPosition\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </label>\n  <label class=\"cps-btn-toggle-content-option\" *ngIf=\"!tooltip\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </label>\n</ng-template>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n  <input\n    class=\"cps-btn-toggle-content-option-input\"\n    [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n    [disabled]=\"option.disabled || disabled\"\n    [value]=\"option.value\"\n    [checked]=\"\n      option.value | checkOptionSelected : value : multiple : true : ''\n    \"\n    (change)=\"updateValueEvent($event, option.value)\" />\n  <span\n    class=\"cps-btn-toggle-content-option-content\"\n    [ngStyle]=\"{\n      'min-width': largestButtonWidth ? largestButtonWidth + 'px' : 'none'\n    }\">\n    <cps-icon\n      *ngIf=\"option.icon\"\n      [ngClass]=\"{ 'me-2': !!option.label }\"\n      [icon]=\"option.icon\">\n    </cps-icon>\n    <span *ngIf=\"option.label\">{{ option.label }}</span>\n  </span>\n</ng-template>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:inline-flex;font-weight:700;font-size:16px;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:8px}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-text-lightest);border-right:0;font-weight:400;font-size:16px;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:var(--cps-color-highlight-hover)}:host .cps-btn-toggle-content-option-content:active{background:var(--cps-color-highlight-active)}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-text-lightest)}\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: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsButtonToggleComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         CommonModule,
@@ -6605,12 +6620,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         CpsInfoCircleComponent,
                         CpsIconComponent,
                         CpsTooltipDirective
-                    ], providers: [CheckOptionSelectedPipe], selector: 'cps-button-toggle', template: "<div class=\"cps-btn-toggle\">\n  <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n    <span>{{ label }}</span>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-btn-toggle-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 class=\"cps-btn-toggle-content\">\n    <ng-container *ngFor=\"let option of options\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          optionContainerTemplate;\n          context: {\n            option: option,\n            tooltip: option.tooltip\n          }\n        \"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #optionContainerTemplate let-option=\"option\" let-tooltip=\"tooltip\">\n  <label\n    class=\"cps-btn-toggle-content-option\"\n    *ngIf=\"tooltip\"\n    [cpsTooltip]=\"option.tooltip\"\n    tooltipCloseDelay=\"0\"\n    [tooltipPosition]=\"optionTooltipPosition\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </label>\n  <label class=\"cps-btn-toggle-content-option\" *ngIf=\"!tooltip\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </label>\n</ng-template>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n  <input\n    class=\"cps-btn-toggle-content-option-input\"\n    [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n    [disabled]=\"option.disabled || disabled\"\n    [value]=\"option.value\"\n    [checked]=\"\n      option.value | checkOptionSelected : value : multiple : true : ''\n    \"\n    (change)=\"updateValueEvent($event, option.value)\" />\n  <span\n    class=\"cps-btn-toggle-content-option-content\"\n    [ngStyle]=\"{\n      'min-width': largestButtonWidth ? largestButtonWidth + 'px' : 'none'\n    }\">\n    <cps-icon\n      *ngIf=\"option.icon\"\n      [ngClass]=\"{ 'me-2': !!option.label }\"\n      [icon]=\"option.icon\">\n    </cps-icon>\n    <span *ngIf=\"option.label\">{{ option.label }}</span>\n  </span>\n</ng-template>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:inline-flex;font-weight:700;font-size:16px;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:8px}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-text-lightest);border-right:0;font-weight:400;font-size:16px;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:var(--cps-color-highlight-hover)}:host .cps-btn-toggle-content-option-content:active{background:var(--cps-color-highlight-active)}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-text-lightest)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+                    ], providers: [CheckOptionSelectedPipe], selector: 'cps-button-toggle', template: "<div class=\"cps-btn-toggle\">\n  <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n    <span>{{ label }}</span>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-btn-toggle-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 class=\"cps-btn-toggle-content\">\n    <ng-container *ngFor=\"let option of options\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          optionContainerTemplate;\n          context: {\n            option: option,\n            tooltip: option.tooltip\n          }\n        \"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #optionContainerTemplate let-option=\"option\" let-tooltip=\"tooltip\">\n  <label\n    class=\"cps-btn-toggle-content-option\"\n    *ngIf=\"tooltip\"\n    [cpsTooltip]=\"option.tooltip\"\n    tooltipCloseDelay=\"0\"\n    [tooltipPosition]=\"optionTooltipPosition\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </label>\n  <label class=\"cps-btn-toggle-content-option\" *ngIf=\"!tooltip\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </label>\n</ng-template>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n  <input\n    class=\"cps-btn-toggle-content-option-input\"\n    [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n    [disabled]=\"option.disabled || disabled\"\n    [value]=\"option.value\"\n    [checked]=\"\n      option.value | checkOptionSelected : value : multiple : true : ''\n    \"\n    (change)=\"updateValueEvent($event, option.value)\" />\n  <span\n    class=\"cps-btn-toggle-content-option-content\"\n    [ngStyle]=\"{\n      'min-width': largestButtonWidth ? largestButtonWidth + 'px' : 'none'\n    }\">\n    <cps-icon\n      *ngIf=\"option.icon\"\n      [ngClass]=\"{ 'me-2': !!option.label }\"\n      [icon]=\"option.icon\">\n    </cps-icon>\n    <span *ngIf=\"option.label\">{{ option.label }}</span>\n  </span>\n</ng-template>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:inline-flex;font-weight:700;font-size:16px;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:8px}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(#ffffff1a 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-text-lightest);border-right:0;font-weight:400;font-size:16px;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:var(--cps-color-highlight-hover)}:host .cps-btn-toggle-content-option-content:active{background:var(--cps-color-highlight-active)}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-text-lightest)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: i0.Renderer2 }]; }, propDecorators: { label: [{
+                }] }, { type: i0.Renderer2 }], propDecorators: { label: [{
                 type: Input
             }], options: [{
                 type: Input
@@ -6720,6 +6735,7 @@ class TableColumnFilterConstraintComponent {
                         fillCats(v.children);
                     });
                 };
+                // Todo: Use explicit type
                 fillCats(this._tableInstance.value);
             }
             this.categories =
@@ -6739,10 +6755,10 @@ class TableColumnFilterConstraintComponent {
         this._tableInstance._filter();
         event.preventDefault();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TableColumnFilterConstraintComponent, deps: [{ token: i1$3.Table, optional: true }, { token: i2$1.TreeTable, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TableColumnFilterConstraintComponent, isStandalone: true, selector: "table-column-filter-constraint", inputs: { type: "type", field: "field", filterConstraint: "filterConstraint", categoryOptions: "categoryOptions", asButtonToggle: "asButtonToggle", singleSelection: "singleSelection", placeholder: "placeholder", hasApplyButton: "hasApplyButton" }, viewQueries: [{ propertyName: "categoryAutocompleteComponent", first: true, predicate: ["categoryAutocompleteComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n  <cps-input\n    *ngSwitchCase=\"'text'\"\n    [placeholder]=\"placeholder\"\n    [hideDetails]=\"true\"\n    (keydown.enter)=\"onEnterKeyDown($event)\"\n    [value]=\"filterConstraint?.value\"\n    (valueChanged)=\"onValueChange($event)\"\n    type=\"text\"></cps-input>\n\n  <cps-input\n    *ngSwitchCase=\"'number'\"\n    [hideDetails]=\"true\"\n    [placeholder]=\"placeholder\"\n    (keydown.enter)=\"onEnterKeyDown($event)\"\n    [value]=\"filterConstraint?.value\"\n    (valueChanged)=\"onValueChange($event)\"\n    type=\"number\"></cps-input>\n\n  <div\n    class=\"cps-table-col-filter-constraint-btn-toggles\"\n    *ngSwitchCase=\"'boolean'\">\n    <cps-button-toggle\n      [options]=\"booleanOptions\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      [mandatory]=\"false\">\n    </cps-button-toggle>\n  </div>\n\n  <cps-datepicker\n    *ngSwitchCase=\"'date'\"\n    [openOnInputFocus]=\"true\"\n    [hideDetails]=\"true\"\n    [placeholder]=\"placeholder\"\n    [value]=\"filterConstraint?.value\"\n    (keydown.enter)=\"onEnterKeyDown($event)\"\n    (valueChanged)=\"onValueChange($event)\">\n  </cps-datepicker>\n\n  <ng-container *ngSwitchCase=\"'category'\">\n    <cps-autocomplete\n      #categoryAutocompleteComponent\n      *ngIf=\"!asButtonToggle\"\n      class=\"cps-table-col-filter-category-autocomplete\"\n      [placeholder]=\"placeholder\"\n      [options]=\"categories\"\n      [hideDetails]=\"true\"\n      [clearable]=\"true\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      [returnObject]=\"false\"\n      [multiple]=\"!singleSelection\">\n    </cps-autocomplete>\n    <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n      <cps-button-toggle\n        *ngIf=\"asButtonToggle\"\n        [options]=\"categories\"\n        [value]=\"filterConstraint?.value\"\n        (valueChanged)=\"onValueChange($event)\"\n        [mandatory]=\"false\"\n        [multiple]=\"!singleSelection\">\n      </cps-button-toggle>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host .cps-table-col-filter-constraint-btn-toggles{display:flex;justify-content:center}:host .cps-table-col-filter-category-autocomplete{min-width:200px;max-width:400px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsDatepickerComponent, selector: "cps-datepicker", inputs: ["label", "disabled", "width", "placeholder", "hint", "clearable", "hideDetails", "persistentClear", "showTodayButton", "openOnInputFocus", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "minDate", "maxDate", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "value"], outputs: ["valueChanged", "blurred"] }] }); }
 }
-TableColumnFilterConstraintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterConstraintComponent, deps: [{ token: i1$3.Table, optional: true }, { token: i2$1.TreeTable, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TableColumnFilterConstraintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableColumnFilterConstraintComponent, isStandalone: true, selector: "table-column-filter-constraint", inputs: { type: "type", field: "field", filterConstraint: "filterConstraint", categoryOptions: "categoryOptions", asButtonToggle: "asButtonToggle", singleSelection: "singleSelection", placeholder: "placeholder", hasApplyButton: "hasApplyButton" }, viewQueries: [{ propertyName: "categoryAutocompleteComponent", first: true, predicate: ["categoryAutocompleteComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n  <cps-input\n    *ngSwitchCase=\"'text'\"\n    [placeholder]=\"placeholder\"\n    [hideDetails]=\"true\"\n    (keydown.enter)=\"onEnterKeyDown($event)\"\n    [value]=\"filterConstraint?.value\"\n    (valueChanged)=\"onValueChange($event)\"\n    type=\"text\"></cps-input>\n\n  <cps-input\n    *ngSwitchCase=\"'number'\"\n    [hideDetails]=\"true\"\n    [placeholder]=\"placeholder\"\n    (keydown.enter)=\"onEnterKeyDown($event)\"\n    [value]=\"filterConstraint?.value\"\n    (valueChanged)=\"onValueChange($event)\"\n    type=\"number\"></cps-input>\n\n  <div\n    class=\"cps-table-col-filter-constraint-btn-toggles\"\n    *ngSwitchCase=\"'boolean'\">\n    <cps-button-toggle\n      [options]=\"booleanOptions\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      [mandatory]=\"false\">\n    </cps-button-toggle>\n  </div>\n\n  <cps-datepicker\n    *ngSwitchCase=\"'date'\"\n    [openOnInputFocus]=\"true\"\n    [hideDetails]=\"true\"\n    [placeholder]=\"placeholder\"\n    [value]=\"filterConstraint?.value\"\n    (keydown.enter)=\"onEnterKeyDown($event)\"\n    (valueChanged)=\"onValueChange($event)\">\n  </cps-datepicker>\n\n  <ng-container *ngSwitchCase=\"'category'\">\n    <cps-autocomplete\n      #categoryAutocompleteComponent\n      *ngIf=\"!asButtonToggle\"\n      class=\"cps-table-col-filter-category-autocomplete\"\n      [placeholder]=\"placeholder\"\n      [options]=\"categories\"\n      [hideDetails]=\"true\"\n      [clearable]=\"true\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      [returnObject]=\"false\"\n      [multiple]=\"!singleSelection\">\n    </cps-autocomplete>\n    <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n      <cps-button-toggle\n        *ngIf=\"asButtonToggle\"\n        [options]=\"categories\"\n        [value]=\"filterConstraint?.value\"\n        (valueChanged)=\"onValueChange($event)\"\n        [mandatory]=\"false\"\n        [multiple]=\"!singleSelection\">\n      </cps-button-toggle>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host .cps-table-col-filter-constraint-btn-toggles{display:flex;justify-content:center}:host .cps-table-col-filter-category-autocomplete{min-width:200px;max-width:400px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsDatepickerComponent, selector: "cps-datepicker", inputs: ["label", "disabled", "width", "placeholder", "hint", "clearable", "hideDetails", "persistentClear", "showTodayButton", "openOnInputFocus", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "minDate", "maxDate", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "value"], outputs: ["valueChanged", "blurred"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterConstraintComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TableColumnFilterConstraintComponent, decorators: [{
             type: Component,
             args: [{ selector: 'table-column-filter-constraint', standalone: true, imports: [
                         CommonModule,
@@ -6752,11 +6768,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         CpsButtonToggleComponent,
                         CpsAutocompleteComponent
                     ], template: "<ng-container [ngSwitch]=\"type\">\n  <cps-input\n    *ngSwitchCase=\"'text'\"\n    [placeholder]=\"placeholder\"\n    [hideDetails]=\"true\"\n    (keydown.enter)=\"onEnterKeyDown($event)\"\n    [value]=\"filterConstraint?.value\"\n    (valueChanged)=\"onValueChange($event)\"\n    type=\"text\"></cps-input>\n\n  <cps-input\n    *ngSwitchCase=\"'number'\"\n    [hideDetails]=\"true\"\n    [placeholder]=\"placeholder\"\n    (keydown.enter)=\"onEnterKeyDown($event)\"\n    [value]=\"filterConstraint?.value\"\n    (valueChanged)=\"onValueChange($event)\"\n    type=\"number\"></cps-input>\n\n  <div\n    class=\"cps-table-col-filter-constraint-btn-toggles\"\n    *ngSwitchCase=\"'boolean'\">\n    <cps-button-toggle\n      [options]=\"booleanOptions\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      [mandatory]=\"false\">\n    </cps-button-toggle>\n  </div>\n\n  <cps-datepicker\n    *ngSwitchCase=\"'date'\"\n    [openOnInputFocus]=\"true\"\n    [hideDetails]=\"true\"\n    [placeholder]=\"placeholder\"\n    [value]=\"filterConstraint?.value\"\n    (keydown.enter)=\"onEnterKeyDown($event)\"\n    (valueChanged)=\"onValueChange($event)\">\n  </cps-datepicker>\n\n  <ng-container *ngSwitchCase=\"'category'\">\n    <cps-autocomplete\n      #categoryAutocompleteComponent\n      *ngIf=\"!asButtonToggle\"\n      class=\"cps-table-col-filter-category-autocomplete\"\n      [placeholder]=\"placeholder\"\n      [options]=\"categories\"\n      [hideDetails]=\"true\"\n      [clearable]=\"true\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      [returnObject]=\"false\"\n      [multiple]=\"!singleSelection\">\n    </cps-autocomplete>\n    <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n      <cps-button-toggle\n        *ngIf=\"asButtonToggle\"\n        [options]=\"categories\"\n        [value]=\"filterConstraint?.value\"\n        (valueChanged)=\"onValueChange($event)\"\n        [mandatory]=\"false\"\n        [multiple]=\"!singleSelection\">\n      </cps-button-toggle>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host .cps-table-col-filter-constraint-btn-toggles{display:flex;justify-content:center}:host .cps-table-col-filter-category-autocomplete{min-width:200px;max-width:400px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.Table, decorators: [{
+        }], ctorParameters: () => [{ type: i1$3.Table, decorators: [{
                     type: Optional
                 }] }, { type: i2$1.TreeTable, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { type: [{
+                }] }], propDecorators: { type: [{
                 type: Input
             }], field: [{
                 type: Input
@@ -7102,10 +7118,10 @@ class TableColumnFilterComponent {
     ngOnDestroy() {
         this._tableInstance?.onFilter?.unsubscribe();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TableColumnFilterComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.Table, optional: true }, { token: i2$1.TreeTable, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TableColumnFilterComponent, isStandalone: true, selector: "table-column-filter", inputs: { field: "field", type: "type", persistent: "persistent", showClearButton: "showClearButton", showApplyButton: "showApplyButton", showCloseButton: "showCloseButton", showMatchModes: "showMatchModes", matchModes: "matchModes", showOperator: "showOperator", maxConstraints: "maxConstraints", headerTitle: "headerTitle", hideOnClear: "hideOnClear", categoryOptions: "categoryOptions", asButtonToggle: "asButtonToggle", singleSelection: "singleSelection", placeholder: "placeholder" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseOver()", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "columnFilterMenu", first: true, predicate: ["columnFilterMenu"], descendants: true }, { propertyName: "constraintCompList", predicate: ["constraintComponent"], descendants: true }], ngImport: i0, template: "<div class=\"cps-table-col-filter\">\n  <cps-menu\n    #columnFilterMenu\n    [withArrow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    [persistent]=\"persistent || (showApplyButton && isCategoryDropdownOpened)\"\n    (menuShown)=\"onMenuShown()\"\n    (menuHidden)=\"onMenuHidden()\"\n    (beforeMenuHidden)=\"onBeforeMenuHidden()\">\n    <div class=\"cps-table-col-filter-menu-content\">\n      <div\n        class=\"cps-table-col-filter-menu-content-header\"\n        *ngIf=\"showCloseButton || headerTitle\">\n        <span class=\"cps-table-col-filter-menu-content-header-title\">\n          {{ headerTitle }}\n        </span>\n        <cps-icon\n          *ngIf=\"showCloseButton\"\n          icon=\"close-x\"\n          (click)=\"onCloseClick()\"></cps-icon>\n      </div>\n      <div\n        class=\"cps-table-col-filter-menu-content-operator\"\n        *ngIf=\"isShowOperator\">\n        <cps-select\n          [hideDetails]=\"true\"\n          [disabled]=\"!fieldConstraints || fieldConstraints.length < 2\"\n          [returnObject]=\"false\"\n          [options]=\"operatorOptions\"\n          [ngModel]=\"operator\"\n          (valueChanged)=\"onOperatorChange($event)\"></cps-select>\n      </div>\n      <div class=\"cps-table-col-filter-menu-content-constraints\">\n        <div\n          *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\"\n          class=\"cps-table-col-filter-menu-content-constraint\">\n          <cps-select\n            *ngIf=\"showMatchModes && currentMatchModes\"\n            class=\"cps-table-col-filter-match-mode-select\"\n            [hideDetails]=\"true\"\n            [returnObject]=\"false\"\n            [options]=\"currentMatchModes\"\n            [ngModel]=\"fieldConstraint.matchMode\"\n            (valueChanged)=\"\n              onMenuMatchModeChange($event, fieldConstraint)\n            \"></cps-select>\n          <table-column-filter-constraint\n            #constraintComponent\n            [type]=\"type\"\n            [field]=\"field\"\n            [asButtonToggle]=\"asButtonToggle\"\n            [singleSelection]=\"singleSelection\"\n            [categoryOptions]=\"categoryOptions\"\n            [filterConstraint]=\"fieldConstraint\"\n            [hasApplyButton]=\"showApplyButton\"\n            [placeholder]=\"placeholder\">\n          </table-column-filter-constraint>\n          <div\n            class=\"cps-table-col-filter-remove-rule-btn\"\n            *ngIf=\"showRemoveIcon\">\n            <cps-button\n              type=\"borderless\"\n              width=\"100%\"\n              size=\"small\"\n              color=\"prepared\"\n              icon=\"delete\"\n              (clicked)=\"removeConstraint(fieldConstraint)\"\n              label=\"Remove condition\">\n            </cps-button>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"cps-table-col-filter-add-rule-btn\"\n        *ngIf=\"isShowAddConstraint\">\n        <cps-button\n          label=\"Add condition\"\n          type=\"borderless\"\n          width=\"100%\"\n          size=\"small\"\n          color=\"surprise\"\n          icon=\"add\"\n          (clicked)=\"addConstraint()\">\n        </cps-button>\n      </div>\n      <div class=\"cps-table-col-filter-buttonbar\">\n        <cps-button\n          *ngIf=\"showClearButton\"\n          (clicked)=\"clearFilter()\"\n          type=\"borderless\"\n          color=\"prepared\"\n          size=\"small\"\n          label=\"Clear\"></cps-button>\n        <cps-button\n          *ngIf=\"showApplyButton\"\n          (clicked)=\"applyFilter()\"\n          color=\"prepared\"\n          size=\"small\"\n          label=\"Apply\"></cps-button>\n      </div>\n    </div>\n  </cps-menu>\n  <cps-icon\n    [icon]=\"isFilterApplied ? 'filter-funnel-filled' : 'filter-funnel'\"\n    size=\"13\"\n    (click)=\"columnFilterMenu.toggle($event)\"\n    class=\"cps-table-col-filter-menu-button\"\n    [ngClass]=\"{\n      'cps-table-col-filter-menu-button-active': isFilterApplied\n    }\"\n    >>\n  </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:8px;padding-right:4px}:host .cps-table-col-filter .cps-table-col-filter-menu-button:not(.cps-table-col-filter-menu-button-active):hover{color:var(--cps-color-text-dark)}:host .cps-table-col-filter .cps-table-col-filter-menu-button-active{color:var(--cps-color-calm-lighten1)}.cps-table-col-filter-menu-content{padding-bottom:12px;min-width:200px;max-height:500px;overflow:auto}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header{min-height:32px;padding:8px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light);display:flex;justify-content:space-between;align-items:center}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header-title{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-darkest);max-width:390px;cursor:default}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon{margin-left:8px;cursor:pointer}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon:hover{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-operator{padding:12px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint{border-bottom:1px solid var(--cps-color-line-mid);padding:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint .cps-table-col-filter-match-mode-select{margin-bottom:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint:last-child{border-bottom:none}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-remove-rule-btn{padding-top:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-add-rule-btn{padding:8px 12px}.cps-table-col-filter-menu-content .cps-table-col-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0}\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: "ngmodule", type: FormsModule }, { 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: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }, { kind: "component", type: TableColumnFilterConstraintComponent, selector: "table-column-filter-constraint", inputs: ["type", "field", "filterConstraint", "categoryOptions", "asButtonToggle", "singleSelection", "placeholder", "hasApplyButton"] }] }); }
 }
-TableColumnFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.Table, optional: true }, { token: i2$1.TreeTable, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableColumnFilterComponent, isStandalone: true, selector: "table-column-filter", inputs: { field: "field", type: "type", persistent: "persistent", showClearButton: "showClearButton", showApplyButton: "showApplyButton", showCloseButton: "showCloseButton", showMatchModes: "showMatchModes", matchModes: "matchModes", showOperator: "showOperator", maxConstraints: "maxConstraints", headerTitle: "headerTitle", hideOnClear: "hideOnClear", categoryOptions: "categoryOptions", asButtonToggle: "asButtonToggle", singleSelection: "singleSelection", placeholder: "placeholder" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseOver()", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "columnFilterMenu", first: true, predicate: ["columnFilterMenu"], descendants: true }, { propertyName: "constraintCompList", predicate: ["constraintComponent"], descendants: true }], ngImport: i0, template: "<div class=\"cps-table-col-filter\">\n  <cps-menu\n    #columnFilterMenu\n    [withArrow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    [persistent]=\"persistent || (showApplyButton && isCategoryDropdownOpened)\"\n    (menuShown)=\"onMenuShown()\"\n    (menuHidden)=\"onMenuHidden()\"\n    (beforeMenuHidden)=\"onBeforeMenuHidden()\">\n    <div class=\"cps-table-col-filter-menu-content\">\n      <div\n        class=\"cps-table-col-filter-menu-content-header\"\n        *ngIf=\"showCloseButton || headerTitle\">\n        <span class=\"cps-table-col-filter-menu-content-header-title\">\n          {{ headerTitle }}\n        </span>\n        <cps-icon\n          *ngIf=\"showCloseButton\"\n          icon=\"close-x\"\n          (click)=\"onCloseClick()\"></cps-icon>\n      </div>\n      <div\n        class=\"cps-table-col-filter-menu-content-operator\"\n        *ngIf=\"isShowOperator\">\n        <cps-select\n          [hideDetails]=\"true\"\n          [disabled]=\"!fieldConstraints || fieldConstraints.length < 2\"\n          [returnObject]=\"false\"\n          [options]=\"operatorOptions\"\n          [ngModel]=\"operator\"\n          (valueChanged)=\"onOperatorChange($event)\"></cps-select>\n      </div>\n      <div class=\"cps-table-col-filter-menu-content-constraints\">\n        <div\n          *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\"\n          class=\"cps-table-col-filter-menu-content-constraint\">\n          <cps-select\n            *ngIf=\"showMatchModes && currentMatchModes\"\n            class=\"cps-table-col-filter-match-mode-select\"\n            [hideDetails]=\"true\"\n            [returnObject]=\"false\"\n            [options]=\"currentMatchModes\"\n            [ngModel]=\"fieldConstraint.matchMode\"\n            (valueChanged)=\"\n              onMenuMatchModeChange($event, fieldConstraint)\n            \"></cps-select>\n          <table-column-filter-constraint\n            #constraintComponent\n            [type]=\"type\"\n            [field]=\"field\"\n            [asButtonToggle]=\"asButtonToggle\"\n            [singleSelection]=\"singleSelection\"\n            [categoryOptions]=\"categoryOptions\"\n            [filterConstraint]=\"fieldConstraint\"\n            [hasApplyButton]=\"showApplyButton\"\n            [placeholder]=\"placeholder\">\n          </table-column-filter-constraint>\n          <div\n            class=\"cps-table-col-filter-remove-rule-btn\"\n            *ngIf=\"showRemoveIcon\">\n            <cps-button\n              type=\"borderless\"\n              width=\"100%\"\n              size=\"small\"\n              color=\"prepared\"\n              icon=\"delete\"\n              (clicked)=\"removeConstraint(fieldConstraint)\"\n              label=\"Remove condition\">\n            </cps-button>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"cps-table-col-filter-add-rule-btn\"\n        *ngIf=\"isShowAddConstraint\">\n        <cps-button\n          label=\"Add condition\"\n          type=\"borderless\"\n          width=\"100%\"\n          size=\"small\"\n          color=\"surprise\"\n          icon=\"add\"\n          (clicked)=\"addConstraint()\">\n        </cps-button>\n      </div>\n      <div class=\"cps-table-col-filter-buttonbar\">\n        <cps-button\n          *ngIf=\"showClearButton\"\n          (clicked)=\"clearFilter()\"\n          type=\"borderless\"\n          color=\"prepared\"\n          size=\"small\"\n          label=\"Clear\"></cps-button>\n        <cps-button\n          *ngIf=\"showApplyButton\"\n          (clicked)=\"applyFilter()\"\n          color=\"prepared\"\n          size=\"small\"\n          label=\"Apply\"></cps-button>\n      </div>\n    </div>\n  </cps-menu>\n  <cps-icon\n    [icon]=\"isFilterApplied ? 'filter-funnel-filled' : 'filter-funnel'\"\n    size=\"13\"\n    (click)=\"columnFilterMenu.toggle($event)\"\n    class=\"cps-table-col-filter-menu-button\"\n    [ngClass]=\"{\n      'cps-table-col-filter-menu-button-active': isFilterApplied\n    }\"\n    >>\n  </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:8px;padding-right:4px}:host .cps-table-col-filter .cps-table-col-filter-menu-button:not(.cps-table-col-filter-menu-button-active):hover{color:var(--cps-color-text-dark)}:host .cps-table-col-filter .cps-table-col-filter-menu-button-active{color:var(--cps-color-calm-lighten1)}.cps-table-col-filter-menu-content{padding-bottom:12px;min-width:200px;max-height:500px;overflow:auto}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header{min-height:32px;padding:8px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light);display:flex;justify-content:space-between;align-items:center}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header-title{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-darkest);max-width:390px;cursor:default}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon{margin-left:8px;cursor:pointer}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon:hover{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-operator{padding:12px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint{border-bottom:1px solid var(--cps-color-line-mid);padding:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint .cps-table-col-filter-match-mode-select{margin-bottom:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint:last-child{border-bottom:none}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-remove-rule-btn{padding-top:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-add-rule-btn{padding:8px 12px}.cps-table-col-filter-menu-content .cps-table-col-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0}\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: "ngmodule", type: FormsModule }, { 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: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }, { kind: "component", type: TableColumnFilterConstraintComponent, selector: "table-column-filter-constraint", inputs: ["type", "field", "filterConstraint", "categoryOptions", "asButtonToggle", "singleSelection", "placeholder", "hasApplyButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TableColumnFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'table-column-filter', standalone: true, imports: [
                         CommonModule,
@@ -7116,11 +7132,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         CpsSelectComponent,
                         TableColumnFilterConstraintComponent
                     ], template: "<div class=\"cps-table-col-filter\">\n  <cps-menu\n    #columnFilterMenu\n    [withArrow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    [persistent]=\"persistent || (showApplyButton && isCategoryDropdownOpened)\"\n    (menuShown)=\"onMenuShown()\"\n    (menuHidden)=\"onMenuHidden()\"\n    (beforeMenuHidden)=\"onBeforeMenuHidden()\">\n    <div class=\"cps-table-col-filter-menu-content\">\n      <div\n        class=\"cps-table-col-filter-menu-content-header\"\n        *ngIf=\"showCloseButton || headerTitle\">\n        <span class=\"cps-table-col-filter-menu-content-header-title\">\n          {{ headerTitle }}\n        </span>\n        <cps-icon\n          *ngIf=\"showCloseButton\"\n          icon=\"close-x\"\n          (click)=\"onCloseClick()\"></cps-icon>\n      </div>\n      <div\n        class=\"cps-table-col-filter-menu-content-operator\"\n        *ngIf=\"isShowOperator\">\n        <cps-select\n          [hideDetails]=\"true\"\n          [disabled]=\"!fieldConstraints || fieldConstraints.length < 2\"\n          [returnObject]=\"false\"\n          [options]=\"operatorOptions\"\n          [ngModel]=\"operator\"\n          (valueChanged)=\"onOperatorChange($event)\"></cps-select>\n      </div>\n      <div class=\"cps-table-col-filter-menu-content-constraints\">\n        <div\n          *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\"\n          class=\"cps-table-col-filter-menu-content-constraint\">\n          <cps-select\n            *ngIf=\"showMatchModes && currentMatchModes\"\n            class=\"cps-table-col-filter-match-mode-select\"\n            [hideDetails]=\"true\"\n            [returnObject]=\"false\"\n            [options]=\"currentMatchModes\"\n            [ngModel]=\"fieldConstraint.matchMode\"\n            (valueChanged)=\"\n              onMenuMatchModeChange($event, fieldConstraint)\n            \"></cps-select>\n          <table-column-filter-constraint\n            #constraintComponent\n            [type]=\"type\"\n            [field]=\"field\"\n            [asButtonToggle]=\"asButtonToggle\"\n            [singleSelection]=\"singleSelection\"\n            [categoryOptions]=\"categoryOptions\"\n            [filterConstraint]=\"fieldConstraint\"\n            [hasApplyButton]=\"showApplyButton\"\n            [placeholder]=\"placeholder\">\n          </table-column-filter-constraint>\n          <div\n            class=\"cps-table-col-filter-remove-rule-btn\"\n            *ngIf=\"showRemoveIcon\">\n            <cps-button\n              type=\"borderless\"\n              width=\"100%\"\n              size=\"small\"\n              color=\"prepared\"\n              icon=\"delete\"\n              (clicked)=\"removeConstraint(fieldConstraint)\"\n              label=\"Remove condition\">\n            </cps-button>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"cps-table-col-filter-add-rule-btn\"\n        *ngIf=\"isShowAddConstraint\">\n        <cps-button\n          label=\"Add condition\"\n          type=\"borderless\"\n          width=\"100%\"\n          size=\"small\"\n          color=\"surprise\"\n          icon=\"add\"\n          (clicked)=\"addConstraint()\">\n        </cps-button>\n      </div>\n      <div class=\"cps-table-col-filter-buttonbar\">\n        <cps-button\n          *ngIf=\"showClearButton\"\n          (clicked)=\"clearFilter()\"\n          type=\"borderless\"\n          color=\"prepared\"\n          size=\"small\"\n          label=\"Clear\"></cps-button>\n        <cps-button\n          *ngIf=\"showApplyButton\"\n          (clicked)=\"applyFilter()\"\n          color=\"prepared\"\n          size=\"small\"\n          label=\"Apply\"></cps-button>\n      </div>\n    </div>\n  </cps-menu>\n  <cps-icon\n    [icon]=\"isFilterApplied ? 'filter-funnel-filled' : 'filter-funnel'\"\n    size=\"13\"\n    (click)=\"columnFilterMenu.toggle($event)\"\n    class=\"cps-table-col-filter-menu-button\"\n    [ngClass]=\"{\n      'cps-table-col-filter-menu-button-active': isFilterApplied\n    }\"\n    >>\n  </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:8px;padding-right:4px}:host .cps-table-col-filter .cps-table-col-filter-menu-button:not(.cps-table-col-filter-menu-button-active):hover{color:var(--cps-color-text-dark)}:host .cps-table-col-filter .cps-table-col-filter-menu-button-active{color:var(--cps-color-calm-lighten1)}.cps-table-col-filter-menu-content{padding-bottom:12px;min-width:200px;max-height:500px;overflow:auto}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header{min-height:32px;padding:8px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light);display:flex;justify-content:space-between;align-items:center}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header-title{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-darkest);max-width:390px;cursor:default}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon{margin-left:8px;cursor:pointer}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon:hover{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-operator{padding:12px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint{border-bottom:1px solid var(--cps-color-line-mid);padding:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint .cps-table-col-filter-match-mode-select{margin-bottom:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint:last-child{border-bottom:none}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-remove-rule-btn{padding-top:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-add-rule-btn{padding:8px 12px}.cps-table-col-filter-menu-content .cps-table-col-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$3.Table, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$3.Table, decorators: [{
                     type: Optional
                 }] }, { type: i2$1.TreeTable, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { field: [{
+                }] }], propDecorators: { field: [{
                 type: Input
             }], type: [{
                 type: Input
@@ -7302,17 +7318,17 @@ class CpsTableColumnFilterDirective {
         this.filterCompRef.destroy();
         this.viewContainerRef.clear();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTableColumnFilterDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: CpsTableColumnFilterDirective, isStandalone: true, selector: "[cpsTColFilter]", inputs: { field: ["cpsTColFilter", "field"], filterType: "filterType", filterPersistent: "filterPersistent", filterShowClearButton: "filterShowClearButton", filterShowApplyButton: "filterShowApplyButton", filterShowCloseButton: "filterShowCloseButton", filterShowMatchModes: "filterShowMatchModes", filterMatchModes: "filterMatchModes", filterShowOperator: "filterShowOperator", filterMaxConstraints: "filterMaxConstraints", filterHeaderTitle: "filterHeaderTitle", filterHideOnClear: "filterHideOnClear", filterCategoryOptions: "filterCategoryOptions", filterAsButtonToggle: "filterAsButtonToggle", filterSingleSelection: "filterSingleSelection", filterPlaceholder: "filterPlaceholder" }, exportAs: ["cpsTColFilter"], usesOnChanges: true, ngImport: i0 }); }
 }
-CpsTableColumnFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableColumnFilterDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-CpsTableColumnFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTableColumnFilterDirective, isStandalone: true, selector: "[cpsTColFilter]", inputs: { field: ["cpsTColFilter", "field"], filterType: "filterType", filterPersistent: "filterPersistent", filterShowClearButton: "filterShowClearButton", filterShowApplyButton: "filterShowApplyButton", filterShowCloseButton: "filterShowCloseButton", filterShowMatchModes: "filterShowMatchModes", filterMatchModes: "filterMatchModes", filterShowOperator: "filterShowOperator", filterMaxConstraints: "filterMaxConstraints", filterHeaderTitle: "filterHeaderTitle", filterHideOnClear: "filterHideOnClear", filterCategoryOptions: "filterCategoryOptions", filterAsButtonToggle: "filterAsButtonToggle", filterSingleSelection: "filterSingleSelection", filterPlaceholder: "filterPlaceholder" }, exportAs: ["cpsTColFilter"], usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableColumnFilterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTableColumnFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     selector: '[cpsTColFilter]',
                     exportAs: 'cpsTColFilter'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { field: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { field: [{
                 type: Input,
                 args: ['cpsTColFilter']
             }], filterType: [{
@@ -7365,16 +7381,16 @@ class CpsTableHeaderSelectableDirective {
         this.checkboxCompRef.destroy();
         this.viewContainerRef.clear();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTableHeaderSelectableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: CpsTableHeaderSelectableDirective, isStandalone: true, selector: "[cpsTHdrSelectable]", ngImport: i0 }); }
 }
-CpsTableHeaderSelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableHeaderSelectableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-CpsTableHeaderSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTableHeaderSelectableDirective, isStandalone: true, selector: "[cpsTHdrSelectable]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableHeaderSelectableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTableHeaderSelectableDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     selector: '[cpsTHdrSelectable]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }] });
 /**
  * CpsTableRowSelectableDirective is a directive used to apply a checkbox to a body cell.
@@ -7394,16 +7410,16 @@ class CpsTableRowSelectableDirective {
         this.checkboxCompRef.destroy();
         this.viewContainerRef.clear();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTableRowSelectableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: CpsTableRowSelectableDirective, isStandalone: true, selector: "[cpsTRowSelectable]", inputs: { value: ["cpsTRowSelectable", "value"] }, ngImport: i0 }); }
 }
-CpsTableRowSelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableRowSelectableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-CpsTableRowSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTableRowSelectableDirective, isStandalone: true, selector: "[cpsTRowSelectable]", inputs: { value: ["cpsTRowSelectable", "value"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableRowSelectableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTableRowSelectableDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     selector: '[cpsTRowSelectable]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { value: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { value: [{
                 type: Input,
                 args: ['cpsTRowSelectable']
             }] } });
@@ -7436,16 +7452,16 @@ class CpsTreeTableColumnSortableDirective extends TTSortableColumn {
         this.sortIconRef.destroy();
         this.viewContainerRef.clear();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTreeTableColumnSortableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i2$1.TreeTable }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: CpsTreeTableColumnSortableDirective, isStandalone: true, selector: "[cpsTTColSortable]", inputs: { field: ["cpsTTColSortable", "field"] }, usesInheritance: true, ngImport: i0 }); }
 }
-CpsTreeTableColumnSortableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableColumnSortableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i2$1.TreeTable }], target: i0.ɵɵFactoryTarget.Directive });
-CpsTreeTableColumnSortableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeTableColumnSortableDirective, isStandalone: true, selector: "[cpsTTColSortable]", inputs: { field: ["cpsTTColSortable", "field"] }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableColumnSortableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTreeTableColumnSortableDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     selector: '[cpsTTColSortable]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i2$1.TreeTable }]; }, propDecorators: { field: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i2$1.TreeTable }], propDecorators: { field: [{
                 type: Input,
                 args: ['cpsTTColSortable']
             }] } });
@@ -7469,6 +7485,7 @@ class TreeTableUnsortDirective {
             if (pTreeTable.sortMode === 'multiple') {
                 let resetIndex = false;
                 const sortMeta = pTreeTable.getSortMeta(event.field);
+                // Todo: Use explicit type in the whole block
                 if (sortMeta) {
                     for (let i = 0; i < pTreeTable._multiSortMeta.length; i++) {
                         if (pTreeTable._multiSortMeta[i].field === sortMeta.field) {
@@ -7505,11 +7522,13 @@ class TreeTableUnsortDirective {
             if (!nodes || nodes.length === 0) {
                 return;
             }
+            // Replace with explicit type
             this._syncNodesParams(pTreeTable.filteredNodes, nodes);
             if (pTreeTable.customSort) {
                 pTreeTable.sortFunction.emit({
                     data: nodes,
                     mode: pTreeTable.sortMode,
+                    // Todo: Use explicit type
                     field: pTreeTable.sortField,
                     order: pTreeTable.sortOrder
                 });
@@ -7538,6 +7557,7 @@ class TreeTableUnsortDirective {
                 });
             }
             for (const node of nodes) {
+                // Todo: Use explicit type
                 pTreeTable.sortNodes(node.children);
             }
         };
@@ -7545,6 +7565,7 @@ class TreeTableUnsortDirective {
             if (!nodes || nodes.length === 0) {
                 return;
             }
+            // Replace with explicit type
             this._syncNodesParams(pTreeTable.filteredNodes, nodes);
             if (pTreeTable.customSort) {
                 pTreeTable.sortFunction.emit({
@@ -7555,10 +7576,13 @@ class TreeTableUnsortDirective {
             }
             else {
                 nodes.sort((node1, node2) => {
-                    return pTreeTable.multisortField(node1, node2, pTreeTable.multiSortMeta, 0);
+                    return pTreeTable.multisortField(node1, node2,
+                    // Replace with explicit type
+                    pTreeTable.multiSortMeta, 0);
                 });
             }
             for (const node of nodes) {
+                // Replace with explicit type
                 pTreeTable.sortMultipleNodes(node.children);
             }
         };
@@ -7569,10 +7593,12 @@ class TreeTableUnsortDirective {
             }
             const isUnsort = multiSortMeta[index].field === '_defaultSortOrder';
             const value1 = isUnsort
-                ? node1._defaultSortOrder
+                ? // Todo: Use explicit type
+                    node1._defaultSortOrder
                 : ObjectUtils.resolveFieldData(node1.data, multiSortMeta[index].field);
             const value2 = isUnsort
-                ? node2._defaultSortOrder
+                ? // Todo: Use explicit type
+                    node2._defaultSortOrder
                 : ObjectUtils.resolveFieldData(node2.data, multiSortMeta[index].field);
             let result = 0;
             if (value1 == null && value2 != null)
@@ -7622,6 +7648,7 @@ class TreeTableUnsortDirective {
                             globalFilterFieldsArray =
                                 pTreeTable.globalFilterFields || pTreeTable.columns;
                     }
+                    // Replace with explicit type
                     this._syncNodesParams(pTreeTable.filteredNodes, pTreeTable.value);
                     pTreeTable.filteredNodes = [];
                     const isStrictMode = pTreeTable.filterMode === 'strict';
@@ -7649,10 +7676,13 @@ class TreeTableUnsortDirective {
                                 };
                                 if ((isStrictMode &&
                                     !(pTreeTable.findFilteredNodes(copyNode, paramsWithoutNode) ||
+                                        // Replace with explicit type
                                         pTreeTable.isFilterMatched(copyNode, paramsWithoutNode))) ||
                                     (!isStrictMode &&
-                                        !(pTreeTable.isFilterMatched(copyNode, paramsWithoutNode) ||
-                                            pTreeTable.findFilteredNodes(copyNode, paramsWithoutNode)))) {
+                                        !(
+                                        // Replace with explicit type
+                                        (pTreeTable.isFilterMatched(copyNode, paramsWithoutNode) ||
+                                            pTreeTable.findFilteredNodes(copyNode, paramsWithoutNode))))) {
                                     localMatch = false;
                                 }
                                 if (!localMatch) {
@@ -7678,9 +7708,13 @@ class TreeTableUnsortDirective {
                                 };
                                 if ((isStrictMode &&
                                     (pTreeTable.findFilteredNodes(copyNodeForGlobal, paramsWithoutNode) ||
-                                        pTreeTable.isFilterMatched(copyNodeForGlobal, paramsWithoutNode))) ||
+                                        pTreeTable.isFilterMatched(copyNodeForGlobal,
+                                        // Replace with explicit type
+                                        paramsWithoutNode))) ||
                                     (!isStrictMode &&
-                                        (pTreeTable.isFilterMatched(copyNodeForGlobal, paramsWithoutNode) ||
+                                        (pTreeTable.isFilterMatched(copyNodeForGlobal,
+                                        // Replace with explicit type
+                                        paramsWithoutNode) ||
                                             pTreeTable.findFilteredNodes(copyNodeForGlobal, paramsWithoutNode)))) {
                                     globalMatch = true;
                                     copyNode = copyNodeForGlobal;
@@ -7692,6 +7726,7 @@ class TreeTableUnsortDirective {
                             matches = localMatch && globalMatch;
                         }
                         if (matches) {
+                            // Replace with explicit type
                             copyNode._idx = idx;
                             pTreeTable.filteredNodes.push(copyNode);
                         }
@@ -7736,6 +7771,7 @@ class TreeTableUnsortDirective {
                         const copyChildNode = { ...childNode };
                         if (pTreeTable.isFilterMatched(copyChildNode, paramsWithoutNode)) {
                             matched = true;
+                            // Replace with explicit type
                             copyChildNode._idx = idx;
                             node.children.push(copyChildNode);
                         }
@@ -7763,22 +7799,22 @@ class TreeTableUnsortDirective {
             }
         });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TreeTableUnsortDirective, deps: [{ token: i2$1.TreeTable, host: true, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: TreeTableUnsortDirective, isStandalone: true, selector: "[ttWithUnsort]", ngImport: i0 }); }
 }
-TreeTableUnsortDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TreeTableUnsortDirective, deps: [{ token: i2$1.TreeTable, host: true, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-TreeTableUnsortDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: TreeTableUnsortDirective, isStandalone: true, selector: "[ttWithUnsort]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TreeTableUnsortDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TreeTableUnsortDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     selector: '[ttWithUnsort]'
                 }]
-        }], ctorParameters: function () { return [{ type: i2$1.TreeTable, decorators: [{
+        }], ctorParameters: () => [{ type: i2$1.TreeTable, decorators: [{
                     type: Host
                 }, {
                     type: Self
                 }, {
                     type: Optional
-                }] }]; } });
+                }] }] });
 /**
  * CpsTreeTableHeaderSelectableDirective is a directive used to apply a checkbox to a header cell.
@@ -7799,16 +7835,16 @@ class CpsTreeTableHeaderSelectableDirective {
         this.checkboxCompRef.destroy();
         this.viewContainerRef.clear();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTreeTableHeaderSelectableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: CpsTreeTableHeaderSelectableDirective, isStandalone: true, selector: "[cpsTTHdrSelectable]", ngImport: i0 }); }
 }
-CpsTreeTableHeaderSelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableHeaderSelectableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-CpsTreeTableHeaderSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeTableHeaderSelectableDirective, isStandalone: true, selector: "[cpsTTHdrSelectable]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableHeaderSelectableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTreeTableHeaderSelectableDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     selector: '[cpsTTHdrSelectable]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }] });
 /**
  * CpsTreeTableRowSelectableDirective is a directive used to apply a checkbox to a body cell.
@@ -7829,16 +7865,16 @@ class CpsTreeTableRowSelectableDirective {
         this.checkboxCompRef.destroy();
         this.viewContainerRef.clear();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTreeTableRowSelectableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: CpsTreeTableRowSelectableDirective, isStandalone: true, selector: "[cpsTTRowSelectable]", inputs: { value: ["cpsTTRowSelectable", "value"] }, ngImport: i0 }); }
 }
-CpsTreeTableRowSelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableRowSelectableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-CpsTreeTableRowSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeTableRowSelectableDirective, isStandalone: true, selector: "[cpsTTRowSelectable]", inputs: { value: ["cpsTTRowSelectable", "value"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableRowSelectableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTreeTableRowSelectableDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     selector: '[cpsTTRowSelectable]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { value: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { value: [{
                 type: Input,
                 args: ['cpsTTRowSelectable']
             }] } });
@@ -7869,16 +7905,16 @@ class CpsTreetableRowTogglerDirective {
         this.togglerCompRef.destroy();
         this.viewContainerRef.clear();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTreetableRowTogglerDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: CpsTreetableRowTogglerDirective, isStandalone: true, selector: "[cpsTTRowToggler]", inputs: { rowNode: ["cpsTTRowToggler", "rowNode"] }, ngImport: i0 }); }
 }
-CpsTreetableRowTogglerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreetableRowTogglerDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-CpsTreetableRowTogglerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreetableRowTogglerDirective, isStandalone: true, selector: "[cpsTTRowToggler]", inputs: { rowNode: ["cpsTTRowToggler", "rowNode"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreetableRowTogglerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTreetableRowTogglerDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     selector: '[cpsTTRowToggler]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { rowNode: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { rowNode: [{
                 type: Input,
                 args: ['cpsTTRowToggler']
             }] } });
@@ -8308,6 +8344,7 @@ class CpsTreeTableComponent {
         this.customSortFunction = new EventEmitter();
         this.selectedColumns = [];
         this.rowOptions = [];
+        // Todo: Add explicit type
         this.selectedRows = [];
         this.virtualScrollItemSize = 0;
         this.defScrollHeight = '';
@@ -8664,6 +8701,7 @@ class CpsTreeTableComponent {
         setTimeout(() => {
             if (this.virtualScroll && this.defScrollHeight) {
                 this._updateVirtualScrollItemSize();
+                // Todo: Add explicit type
                 const itemsLen = this.primengTreeTable.serializedValue.length;
                 if (itemsLen < 1) {
                     this.scrollHeight = this.emptyBodyHeight
@@ -8690,6 +8728,7 @@ class CpsTreeTableComponent {
     clearGlobalFilter() {
         this.globalFilterComp?.clear();
     }
+    // Todo: Use explicit type
     onSortFunction(event) {
         this.customSortFunction.emit(event);
     }
@@ -8826,21 +8865,22 @@ class CpsTreeTableComponent {
             this._calcAutoLayoutHeaderWidths(true);
         });
     }
+    // Replace with explicit type
     onSelectionChanged(selection) {
         this.rowsSelected.emit(selection);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTreeTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsTreeTableComponent, isStandalone: true, selector: "cps-tree-table", inputs: { columns: "columns", colHeaderName: "colHeaderName", colFieldName: "colFieldName", minWidth: "minWidth", minWidthForBodyOnly: "minWidthForBodyOnly", autoLayout: "autoLayout", striped: "striped", bordered: "bordered", size: "size", selectable: "selectable", rowHover: "rowHover", showRowMenu: "showRowMenu", showRowRemoveButton: "showRowRemoveButton", showRowEditButton: "showRowEditButton", loading: "loading", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", sortable: "sortable", sortMode: "sortMode", customSort: "customSort", hasToolbar: "hasToolbar", toolbarSize: "toolbarSize", toolbarTitle: "toolbarTitle", toolbarIcon: "toolbarIcon", toolbarIconColor: "toolbarIconColor", scrollable: "scrollable", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", virtualScrollItemHeight: "virtualScrollItemHeight", numToleratedItems: "numToleratedItems", paginator: "paginator", alwaysShowPaginator: "alwaysShowPaginator", rowsPerPageOptions: "rowsPerPageOptions", first: "first", rows: "rows", resetPageOnRowsChange: "resetPageOnRowsChange", resetPageOnSort: "resetPageOnSort", totalRecords: "totalRecords", emptyMessage: "emptyMessage", emptyBodyHeight: "emptyBodyHeight", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", showGlobalFilter: "showGlobalFilter", globalFilterPlaceholder: "globalFilterPlaceholder", globalFilterFields: "globalFilterFields", clearGlobalFilterOnLoading: "clearGlobalFilterOnLoading", showRemoveBtnOnSelect: "showRemoveBtnOnSelect", removeBtnOnSelectDisabled: "removeBtnOnSelectDisabled", showAdditionalBtnOnSelect: "showAdditionalBtnOnSelect", additionalBtnOnSelectTitle: "additionalBtnOnSelectTitle", additionalBtnOnSelectDisabled: "additionalBtnOnSelectDisabled", showActionBtn: "showActionBtn", actionBtnTitle: "actionBtnTitle", actionBtnDisabled: "actionBtnDisabled", showDataReloadBtn: "showDataReloadBtn", dataReloadBtnDisabled: "dataReloadBtnDisabled", showColumnsToggleBtn: "showColumnsToggleBtn", columnsToggleBtnDisabled: "columnsToggleBtnDisabled", initialColumns: "initialColumns", data: "data" }, outputs: { rowsSelected: "rowsSelected", actionBtnClicked: "actionBtnClicked", additionalBtnOnSelectClicked: "additionalBtnOnSelectClicked", editRowBtnClicked: "editRowBtnClicked", rowsToRemove: "rowsToRemove", pageChanged: "pageChanged", sorted: "sorted", filtered: "filtered", columnsSelected: "columnsSelected", lazyLoaded: "lazyLoaded", dataReloadBtnClicked: "dataReloadBtnClicked", nodeExpanded: "nodeExpanded", nodeCollapsed: "nodeCollapsed", nodeSelected: "nodeSelected", nodeUnselected: "nodeUnselected", customSortFunction: "customSortFunction" }, providers: [
+            TreeTableService,
+            {
+                provide: TreeTable,
+                useFactory: treeTableFactory,
+                // eslint-disable-next-line no-use-before-define
+                deps: [CpsTreeTableComponent]
+            }
+        ], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }], viewQueries: [{ propertyName: "primengTreeTable", first: true, predicate: ["primengTreeTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-treeTable\n  #primengTreeTable\n  ttWithUnsort\n  [ngClass]=\"{\n    'cps-treetable-loading': loading,\n    'cps-treetable-flex': defScrollHeight === 'flex',\n    'cps-treetable-nonvirtual': !virtualScroll,\n    'cps-treetable-autolayout-calced': autoLayout && scrollable,\n  }\"\n  [value]=\"data\"\n  [autoLayout]=\"autoLayout && !scrollable\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{\n    numToleratedItems: numToleratedItems,\n    autoSize: false\n  }\"\n  [columns]=\"selectedColumns\"\n  [loading]=\"loading\"\n  [rowHover]=\"rowHover\"\n  [lazy]=\"lazy\"\n  [(selection)]=\"selectedRows\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  compareSelectionBy=\"deepEquals\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  (onPage)=\"onPageChange($event)\"\n  (onSort)=\"onSort($event)\"\n  (onFilter)=\"onFilter($event)\"\n  (onLazyLoad)=\"onLazyLoaded($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onNodeExpand)=\"onNodeExpanded($event)\"\n  (onNodeCollapse)=\"onNodeCollapsed($event)\"\n  (onNodeSelect)=\"onNodeSelected($event)\"\n  (onNodeUnselect)=\"onNodeUnselected($event)\">\n  <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n    <ng-container *ngIf=\"toolbarTemplate\">\n      <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!toolbarTemplate\">\n      <div class=\"cps-treetable-tbar-left\">\n        <div *ngIf=\"toolbarIcon\" class=\"cps-treetable-tbar-icon\">\n          <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n        </div>\n        <div class=\"cps-treetable-tbar-title\">{{ toolbarTitle }}</div>\n        <div *ngIf=\"showGlobalFilter\" class=\"cps-treetable-tbar-global-filter\">\n          <cps-input\n            #globalFilterComp\n            prefixIcon=\"search\"\n            [placeholder]=\"globalFilterPlaceholder\"\n            (valueChanged)=\"onFilterGlobal($event)\"\n            [clearable]=\"true\"\n            [disabled]=\"loading\"\n            [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n            [hideDetails]=\"true\">\n          </cps-input>\n        </div>\n      </div>\n      <div class=\"cps-treetable-tbar-right\">\n        <div\n          *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-treetable-tbar-btn-on-select\">\n          <cps-button\n            label=\"Remove\"\n            [disabled]=\"removeBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            icon=\"remove\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"removeSelected()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-treetable-tbar-btn-on-select\">\n          <cps-button\n            [label]=\"additionalBtnOnSelectTitle\"\n            [disabled]=\"additionalBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickAdditionalBtnOnSelect()\">\n          </cps-button>\n        </div>\n        <div *ngIf=\"showActionBtn\" class=\"cps-treetable-tbar-action-btn\">\n          <cps-button\n            [label]=\"actionBtnTitle\"\n            [disabled]=\"actionBtnDisabled\"\n            color=\"prepared\"\n            type=\"outlined\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickActionBtn()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n          class=\"cps-treetable-tbar-coltoggle-btn\"\n          [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n          <cps-icon\n            icon=\"columns\"\n            size=\"normal\"\n            [color]=\"\n              columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n            \"\n            (click)=\"onColumnsToggle($event)\"></cps-icon>\n          <cps-menu #colToggleMenu [withArrow]=\"false\">\n            <div class=\"cps-treetable-coltoggle-menu\">\n              <div\n                class=\"cps-treetable-coltoggle-menu-item select-all-option\"\n                [class.allselected]=\"selectedColumns.length === columns.length\"\n                (click)=\"toggleAllColumns()\">\n                <span class=\"cps-treetable-coltoggle-menu-item-left\">\n                  <span class=\"cps-treetable-coltoggle-menu-item-check\"> </span>\n                  <span class=\"cps-treetable-coltoggle-menu-item-label\"\n                    >Show all columns</span\n                  >\n                </span>\n              </div>\n              <div\n                *ngFor=\"let col of columns\"\n                class=\"cps-treetable-coltoggle-menu-item\"\n                (click)=\"onSelectColumn(col)\"\n                [class.selected]=\"isColumnSelected(col)\">\n                <span class=\"cps-treetable-coltoggle-menu-item-left\">\n                  <span class=\"cps-treetable-coltoggle-menu-item-check\"></span>\n                  <span class=\"cps-treetable-coltoggle-menu-item-label\">{{\n                    col[colHeaderName]\n                  }}</span>\n                </span>\n              </div>\n            </div>\n          </cps-menu>\n        </div>\n        <div\n          *ngIf=\"showDataReloadBtn\"\n          class=\"cps-treetable-tbar-reload-btn\"\n          [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n          <cps-icon\n            icon=\"refresh\"\n            size=\"18\"\n            [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n            (click)=\"onReloadData()\">\n          </cps-icon>\n        </div>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n    <ng-container\n      *ngTemplateOutlet=\"\n      nestedHeaderTemplate;\n        context: {\n          $implicit: columns,\n        }\n      \"></ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n    <tr>\n      <!-- <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th> -->\n      <th *ngIf=\"selectable\" cpsTTHdrSelectable></th>\n      <ng-container *ngIf=\"headerTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            headerTemplate;\n            context: {\n              $implicit: columns,\n            }\n          \"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n        <ng-container *ngIf=\"sortable\">\n          <th\n            *ngFor=\"let col of columns\"\n            [cpsTTColSortable]=\"col[colFieldName]\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n        <ng-container *ngIf=\"!sortable\">\n          <th *ngFor=\"let col of columns\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n      </ng-container>\n      <th\n        class=\"cps-treetable-row-menu-cell\"\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"></th>\n    </tr>\n  </ng-template>\n\n  <ng-template\n    pTemplate=\"body\"\n    let-rowData=\"rowData\"\n    let-columns=\"columns\"\n    let-rowNode\n    let-rowIndex=\"rowIndex\">\n    <tr\n      [ttRow]=\"rowNode\"\n      [ngClass]=\"{\n        'cps-treetable-row-selected':\n          selectable && primengTreeTable.isSelected(rowNode.node)\n      }\">\n      <!-- <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n        <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n      </td> -->\n      <td [cpsTTRowSelectable]=\"rowNode\" *ngIf=\"selectable\"></td>\n      <ng-container *ngIf=\"bodyTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n              $implicit: rowNode,\n              rowIndex: rowIndex,\n              columns: columns,\n              rowData: rowData\n            }\n          \">\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!bodyTemplate\">\n        <ng-container *ngIf=\"columns.length > 0\">\n          <ng-container *ngFor=\"let col of columns; let i = index\">\n            <td *ngIf=\"i === 0\" [cpsTTRowToggler]=\"rowNode\">\n              {{ rowData[col[colFieldName]] }}\n            </td>\n            <td *ngIf=\"i > 0\">{{ rowData[col[colFieldName]] }}</td>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n      <td\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n        class=\"cps-treetable-row-menu-cell\">\n        <table-row-menu\n          (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n          (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\"\n          [showRowRemoveButton]=\"showRowRemoveButton\"\n          [showRowEditButton]=\"showRowEditButton\">\n        </table-row-menu>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-treetable-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"paginatorfirstpagelinkicon\">\n    <AngleDoubleLeftIcon />\n  </ng-template>\n  <ng-template pTemplate=\"paginatorpreviouspagelinkicon\">\n    <AngleLeftIcon />\n  </ng-template>\n  <ng-template pTemplate=\"paginatornextpagelinkicon\">\n    <AngleRightIcon />\n  </ng-template>\n  <ng-template pTemplate=\"paginatorlastpagelinkicon\">\n    <AngleDoubleRightIcon />\n  </ng-template>\n</p-treeTable>\n", styles: [":host ::ng-deep .p-treetable{position:relative}:host ::ng-deep .p-component,:host ::ng-deep .p-component *{box-sizing:border-box}:host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-treetable-scrollable-wrapper{position:relative;background:#fff}:host ::ng-deep .p-treetable-wrapper{background:#fff}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-normal .p-treetable-scrollable-wrapper{height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-small .p-treetable-scrollable-wrapper{height:calc(100% - 43px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-wrapper .p-treetable-scrollable-view .p-treetable-scrollable-header{display:contents}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:#fff}:host ::ng-deep .p-treetable-scrollable-header,:host ::ng-deep .p-treetable-scrollable-footer{overflow:hidden}:host ::ng-deep .p-treetable table{border-collapse:collapse;width:100%;table-layout:fixed}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s;overflow:hidden}:host ::ng-deep .p-treetable-scrollable-body{overflow:auto!important;position:relative}:host ::ng-deep .cps-treetable-flex .p-treetable-scrollable-body{height:100%}:host ::ng-deep .p-treetable .p-treetable-tbody{background:#fff}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#fff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.cps-treetable-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep p-treetable:not(.cps-treetable-autolayout-calced) .p-treetable .p-treetable-tbody>tr>td{overflow:hidden}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){opacity:0;border-left-color:#fff}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable.p-treetable-striped .p-treetable-scrollable-body .p-treetable-tbody>tr:nth-child(odd)>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-bg-light)}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr:hover>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-treetable-auto-layout table{table-layout:auto}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler{width:1rem;height:1rem;color:var(--cps-color-text-dark);border:0 none;background:transparent;border-radius:50%;margin-right:.5rem}:host ::ng-deep .p-treetable-toggler{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;overflow:hidden;position:relative}:host ::ng-deep .p-ripple{overflow:hidden;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif;border-radius:6px}:host ::ng-deep input[type=button],:host ::ng-deep input[type=submit],:host ::ng-deep input[type=reset],:host ::ng-deep input[type=file]::-webkit-file-upload-button,:host ::ng-deep button{border-radius:0}:host ::ng-deep .p-treetable .p-treetable-tbody>tr:focus{outline:0 none;outline-offset:-.15rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:unset}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-treetable .p-paginator{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep span.p-paginator-icon{display:contents}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-treetable-empty-message-td{text-align:center!important;font-weight:600;background:#fff}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-treetable .p-treetable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-title{cursor:default}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn{display:contents}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-treetable .p-treetable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-treetable .p-treetable-header{height:72px}:host ::ng-deep .p-treetable .p-treetable-footer{background:#fff;color:#343a40;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem;font-weight:700}:host ::ng-deep .p-treetable .p-treetable-tfoot>tr>td{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:700;color:#343a40;background:#fff}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-treetable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler.p-icon{width:2rem;height:2rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.p-highlight{background:#eff6ff;color:#1d4ed8}:host ::ng-deep .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody>tr:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable-hoverable-rows .p-treetable-tbody>tr{cursor:auto}:host ::ng-deep .p-treetable .p-column-resizer-helper{background:#3b82f6}:host ::ng-deep .p-treetable .p-treetable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable.cps-tbar-small .p-treetable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-treetable.cps-tbar-normal .p-treetable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-loading .p-treetable{min-height:200px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-footer{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-top{border-width:0 1px 0 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tfoot>tr>td{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tfoot>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-footer{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tbody>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-footer{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(2n){background:#fff}:host ::ng-deep .cps-treetable-row-menu-cell{width:55px;border-left:none!important}:host ::ng-deep .cps-treetable-selectable-cell{width:55px;text-align:center!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#fff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-checkbox .p-checkbox-box minusicon .p-checkbox-icon{color:var(--cps-color-calm);width:12px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td p-treetablecheckbox .p-checkbox{margin-right:0}::ng-deep .p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}.cps-treetable-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-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-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-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-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected{font-weight:600}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-label,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-check,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-check{opacity:1}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-treetable-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: 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: TreeTableModule }, { kind: "component", type: i2$1.TreeTable, selector: "p-treeTable", inputs: ["columns", "style", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$1.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: AngleDoubleLeftIcon, selector: "AngleDoubleLeftIcon" }, { kind: "component", type: AngleLeftIcon, selector: "AngleLeftIcon" }, { kind: "component", type: AngleRightIcon, selector: "AngleRightIcon" }, { kind: "component", type: AngleDoubleRightIcon, selector: "AngleDoubleRightIcon" }, { kind: "directive", type: CpsTreeTableColumnSortableDirective, selector: "[cpsTTColSortable]", inputs: ["cpsTTColSortable"] }, { kind: "directive", type: CpsTreeTableHeaderSelectableDirective, selector: "[cpsTTHdrSelectable]" }, { kind: "directive", type: CpsTreeTableRowSelectableDirective, selector: "[cpsTTRowSelectable]", inputs: ["cpsTTRowSelectable"] }, { kind: "directive", type: CpsTreetableRowTogglerDirective, selector: "[cpsTTRowToggler]", inputs: ["cpsTTRowToggler"] }, { kind: "directive", type: TreeTableUnsortDirective, selector: "[ttWithUnsort]" }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", inputs: ["showRowRemoveButton", "showRowEditButton"], outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-CpsTreeTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-CpsTreeTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeTableComponent, isStandalone: true, selector: "cps-tree-table", inputs: { columns: "columns", colHeaderName: "colHeaderName", colFieldName: "colFieldName", minWidth: "minWidth", minWidthForBodyOnly: "minWidthForBodyOnly", autoLayout: "autoLayout", striped: "striped", bordered: "bordered", size: "size", selectable: "selectable", rowHover: "rowHover", showRowMenu: "showRowMenu", showRowRemoveButton: "showRowRemoveButton", showRowEditButton: "showRowEditButton", loading: "loading", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", sortable: "sortable", sortMode: "sortMode", customSort: "customSort", hasToolbar: "hasToolbar", toolbarSize: "toolbarSize", toolbarTitle: "toolbarTitle", toolbarIcon: "toolbarIcon", toolbarIconColor: "toolbarIconColor", scrollable: "scrollable", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", virtualScrollItemHeight: "virtualScrollItemHeight", numToleratedItems: "numToleratedItems", paginator: "paginator", alwaysShowPaginator: "alwaysShowPaginator", rowsPerPageOptions: "rowsPerPageOptions", first: "first", rows: "rows", resetPageOnRowsChange: "resetPageOnRowsChange", resetPageOnSort: "resetPageOnSort", totalRecords: "totalRecords", emptyMessage: "emptyMessage", emptyBodyHeight: "emptyBodyHeight", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", showGlobalFilter: "showGlobalFilter", globalFilterPlaceholder: "globalFilterPlaceholder", globalFilterFields: "globalFilterFields", clearGlobalFilterOnLoading: "clearGlobalFilterOnLoading", showRemoveBtnOnSelect: "showRemoveBtnOnSelect", removeBtnOnSelectDisabled: "removeBtnOnSelectDisabled", showAdditionalBtnOnSelect: "showAdditionalBtnOnSelect", additionalBtnOnSelectTitle: "additionalBtnOnSelectTitle", additionalBtnOnSelectDisabled: "additionalBtnOnSelectDisabled", showActionBtn: "showActionBtn", actionBtnTitle: "actionBtnTitle", actionBtnDisabled: "actionBtnDisabled", showDataReloadBtn: "showDataReloadBtn", dataReloadBtnDisabled: "dataReloadBtnDisabled", showColumnsToggleBtn: "showColumnsToggleBtn", columnsToggleBtnDisabled: "columnsToggleBtnDisabled", initialColumns: "initialColumns", data: "data" }, outputs: { rowsSelected: "rowsSelected", actionBtnClicked: "actionBtnClicked", additionalBtnOnSelectClicked: "additionalBtnOnSelectClicked", editRowBtnClicked: "editRowBtnClicked", rowsToRemove: "rowsToRemove", pageChanged: "pageChanged", sorted: "sorted", filtered: "filtered", columnsSelected: "columnsSelected", lazyLoaded: "lazyLoaded", dataReloadBtnClicked: "dataReloadBtnClicked", nodeExpanded: "nodeExpanded", nodeCollapsed: "nodeCollapsed", nodeSelected: "nodeSelected", nodeUnselected: "nodeUnselected", customSortFunction: "customSortFunction" }, providers: [
-        TreeTableService,
-        {
-            provide: TreeTable,
-            useFactory: treeTableFactory,
-            // eslint-disable-next-line no-use-before-define
-            deps: [CpsTreeTableComponent]
-        }
-    ], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }], viewQueries: [{ propertyName: "primengTreeTable", first: true, predicate: ["primengTreeTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-treeTable\n  #primengTreeTable\n  ttWithUnsort\n  [ngClass]=\"{\n    'cps-treetable-loading': loading,\n    'cps-treetable-flex': defScrollHeight === 'flex',\n    'cps-treetable-nonvirtual': !virtualScroll,\n    'cps-treetable-autolayout-calced': autoLayout && scrollable,\n  }\"\n  [value]=\"data\"\n  [autoLayout]=\"autoLayout && !scrollable\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{\n    numToleratedItems: numToleratedItems,\n    autoSize: false\n  }\"\n  [columns]=\"selectedColumns\"\n  [loading]=\"loading\"\n  [rowHover]=\"rowHover\"\n  [lazy]=\"lazy\"\n  [(selection)]=\"selectedRows\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  compareSelectionBy=\"deepEquals\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  (onPage)=\"onPageChange($event)\"\n  (onSort)=\"onSort($event)\"\n  (onFilter)=\"onFilter($event)\"\n  (onLazyLoad)=\"onLazyLoaded($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onNodeExpand)=\"onNodeExpanded($event)\"\n  (onNodeCollapse)=\"onNodeCollapsed($event)\"\n  (onNodeSelect)=\"onNodeSelected($event)\"\n  (onNodeUnselect)=\"onNodeUnselected($event)\">\n  <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n    <ng-container *ngIf=\"toolbarTemplate\">\n      <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!toolbarTemplate\">\n      <div class=\"cps-treetable-tbar-left\">\n        <div *ngIf=\"toolbarIcon\" class=\"cps-treetable-tbar-icon\">\n          <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n        </div>\n        <div class=\"cps-treetable-tbar-title\">{{ toolbarTitle }}</div>\n        <div *ngIf=\"showGlobalFilter\" class=\"cps-treetable-tbar-global-filter\">\n          <cps-input\n            #globalFilterComp\n            prefixIcon=\"search\"\n            [placeholder]=\"globalFilterPlaceholder\"\n            (valueChanged)=\"onFilterGlobal($event)\"\n            [clearable]=\"true\"\n            [disabled]=\"loading\"\n            [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n            [hideDetails]=\"true\">\n          </cps-input>\n        </div>\n      </div>\n      <div class=\"cps-treetable-tbar-right\">\n        <div\n          *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-treetable-tbar-btn-on-select\">\n          <cps-button\n            label=\"Remove\"\n            [disabled]=\"removeBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            icon=\"remove\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"removeSelected()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-treetable-tbar-btn-on-select\">\n          <cps-button\n            [label]=\"additionalBtnOnSelectTitle\"\n            [disabled]=\"additionalBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickAdditionalBtnOnSelect()\">\n          </cps-button>\n        </div>\n        <div *ngIf=\"showActionBtn\" class=\"cps-treetable-tbar-action-btn\">\n          <cps-button\n            [label]=\"actionBtnTitle\"\n            [disabled]=\"actionBtnDisabled\"\n            color=\"prepared\"\n            type=\"outlined\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickActionBtn()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n          class=\"cps-treetable-tbar-coltoggle-btn\"\n          [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n          <cps-icon\n            icon=\"columns\"\n            size=\"normal\"\n            [color]=\"\n              columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n            \"\n            (click)=\"onColumnsToggle($event)\"></cps-icon>\n          <cps-menu #colToggleMenu [withArrow]=\"false\">\n            <div class=\"cps-treetable-coltoggle-menu\">\n              <div\n                class=\"cps-treetable-coltoggle-menu-item select-all-option\"\n                [class.allselected]=\"selectedColumns.length === columns.length\"\n                (click)=\"toggleAllColumns()\">\n                <span class=\"cps-treetable-coltoggle-menu-item-left\">\n                  <span class=\"cps-treetable-coltoggle-menu-item-check\"> </span>\n                  <span class=\"cps-treetable-coltoggle-menu-item-label\"\n                    >Show all columns</span\n                  >\n                </span>\n              </div>\n              <div\n                *ngFor=\"let col of columns\"\n                class=\"cps-treetable-coltoggle-menu-item\"\n                (click)=\"onSelectColumn(col)\"\n                [class.selected]=\"isColumnSelected(col)\">\n                <span class=\"cps-treetable-coltoggle-menu-item-left\">\n                  <span class=\"cps-treetable-coltoggle-menu-item-check\"></span>\n                  <span class=\"cps-treetable-coltoggle-menu-item-label\">{{\n                    col[colHeaderName]\n                  }}</span>\n                </span>\n              </div>\n            </div>\n          </cps-menu>\n        </div>\n        <div\n          *ngIf=\"showDataReloadBtn\"\n          class=\"cps-treetable-tbar-reload-btn\"\n          [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n          <cps-icon\n            icon=\"refresh\"\n            size=\"18\"\n            [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n            (click)=\"onReloadData()\">\n          </cps-icon>\n        </div>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n    <ng-container\n      *ngTemplateOutlet=\"\n      nestedHeaderTemplate;\n        context: {\n          $implicit: columns,\n        }\n      \"></ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n    <tr>\n      <!-- <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th> -->\n      <th *ngIf=\"selectable\" cpsTTHdrSelectable></th>\n      <ng-container *ngIf=\"headerTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            headerTemplate;\n            context: {\n              $implicit: columns,\n            }\n          \"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n        <ng-container *ngIf=\"sortable\">\n          <th\n            *ngFor=\"let col of columns\"\n            [cpsTTColSortable]=\"col[colFieldName]\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n        <ng-container *ngIf=\"!sortable\">\n          <th *ngFor=\"let col of columns\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n      </ng-container>\n      <th\n        class=\"cps-treetable-row-menu-cell\"\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"></th>\n    </tr>\n  </ng-template>\n\n  <ng-template\n    pTemplate=\"body\"\n    let-rowData=\"rowData\"\n    let-columns=\"columns\"\n    let-rowNode\n    let-rowIndex=\"rowIndex\">\n    <tr\n      [ttRow]=\"rowNode\"\n      [ngClass]=\"{\n        'cps-treetable-row-selected':\n          selectable && primengTreeTable.isSelected(rowNode.node)\n      }\">\n      <!-- <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n        <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n      </td> -->\n      <td [cpsTTRowSelectable]=\"rowNode\" *ngIf=\"selectable\"></td>\n      <ng-container *ngIf=\"bodyTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n              $implicit: rowNode,\n              rowIndex: rowIndex,\n              columns: columns,\n              rowData: rowData\n            }\n          \">\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!bodyTemplate\">\n        <ng-container *ngIf=\"columns.length > 0\">\n          <ng-container *ngFor=\"let col of columns; let i = index\">\n            <td *ngIf=\"i === 0\" [cpsTTRowToggler]=\"rowNode\">\n              {{ rowData[col[colFieldName]] }}\n            </td>\n            <td *ngIf=\"i > 0\">{{ rowData[col[colFieldName]] }}</td>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n      <td\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n        class=\"cps-treetable-row-menu-cell\">\n        <table-row-menu\n          (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n          (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\"\n          [showRowRemoveButton]=\"showRowRemoveButton\"\n          [showRowEditButton]=\"showRowEditButton\">\n        </table-row-menu>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-treetable-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"paginatorfirstpagelinkicon\">\n    <AngleDoubleLeftIcon />\n  </ng-template>\n  <ng-template pTemplate=\"paginatorpreviouspagelinkicon\">\n    <AngleLeftIcon />\n  </ng-template>\n  <ng-template pTemplate=\"paginatornextpagelinkicon\">\n    <AngleRightIcon />\n  </ng-template>\n  <ng-template pTemplate=\"paginatorlastpagelinkicon\">\n    <AngleDoubleRightIcon />\n  </ng-template>\n</p-treeTable>\n", styles: [":host ::ng-deep .p-treetable{position:relative}:host ::ng-deep .p-component,:host ::ng-deep .p-component *{box-sizing:border-box}:host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-treetable-scrollable-wrapper{position:relative;background:#ffffff}:host ::ng-deep .p-treetable-wrapper{background:#ffffff}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-normal .p-treetable-scrollable-wrapper{height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-small .p-treetable-scrollable-wrapper{height:calc(100% - 43px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-wrapper .p-treetable-scrollable-view .p-treetable-scrollable-header{display:contents}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:white}:host ::ng-deep .p-treetable-scrollable-header,:host ::ng-deep .p-treetable-scrollable-footer{overflow:hidden}:host ::ng-deep .p-treetable table{border-collapse:collapse;width:100%;table-layout:fixed}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s;overflow:hidden}:host ::ng-deep .p-treetable-scrollable-body{overflow:auto!important;position:relative}:host ::ng-deep .cps-treetable-flex .p-treetable-scrollable-body{height:100%}:host ::ng-deep .p-treetable .p-treetable-tbody{background:#ffffff}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.cps-treetable-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep p-treetable:not(.cps-treetable-autolayout-calced) .p-treetable .p-treetable-tbody>tr>td{overflow:hidden}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){opacity:0;border-left-color:#fff}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable.p-treetable-striped .p-treetable-scrollable-body .p-treetable-tbody>tr:nth-child(odd)>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-bg-light)}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr:hover>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-treetable-auto-layout table{table-layout:auto}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler{width:1rem;height:1rem;color:var(--cps-color-text-dark);border:0 none;background:transparent;border-radius:50%;margin-right:.5rem}:host ::ng-deep .p-treetable-toggler{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;overflow:hidden;position:relative}:host ::ng-deep .p-ripple{overflow:hidden;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif;border-radius:6px}:host ::ng-deep input[type=button],:host ::ng-deep input[type=submit],:host ::ng-deep input[type=reset],:host ::ng-deep input[type=file]::-webkit-file-upload-button,:host ::ng-deep button{border-radius:0}:host ::ng-deep .p-treetable .p-treetable-tbody>tr:focus{outline:0 none;outline-offset:-.15rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:unset}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-treetable .p-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep span.p-paginator-icon{display:contents}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-treetable-empty-message-td{text-align:center!important;font-weight:600;background:white}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-treetable .p-treetable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-title{cursor:default}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn{display:contents}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-treetable .p-treetable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-treetable .p-treetable-header{height:72px}:host ::ng-deep .p-treetable .p-treetable-footer{background:white;color:#343a40;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem;font-weight:700}:host ::ng-deep .p-treetable .p-treetable-tfoot>tr>td{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:700;color:#343a40;background:white}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-treetable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler.p-icon{width:2rem;height:2rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.p-highlight{background:#eff6ff;color:#1d4ed8}:host ::ng-deep .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody>tr:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable-hoverable-rows .p-treetable-tbody>tr{cursor:auto}:host ::ng-deep .p-treetable .p-column-resizer-helper{background:#3b82f6}:host ::ng-deep .p-treetable .p-treetable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable.cps-tbar-small .p-treetable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-treetable.cps-tbar-normal .p-treetable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-loading .p-treetable{min-height:200px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-footer{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-top{border-width:0 1px 0 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tfoot>tr>td{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tfoot>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-footer{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tbody>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-footer{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(even){background:#ffffff}:host ::ng-deep .cps-treetable-row-menu-cell{width:55px;border-left:none!important}:host ::ng-deep .cps-treetable-selectable-cell{width:55px;text-align:center!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-checkbox .p-checkbox-box minusicon .p-checkbox-icon{color:var(--cps-color-calm);width:12px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td p-treetablecheckbox .p-checkbox{margin-right:0}::ng-deep .p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}.cps-treetable-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-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-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-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-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected{font-weight:600}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-label,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-check,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-check{opacity:1}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-treetable-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: 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: TreeTableModule }, { kind: "component", type: i2$1.TreeTable, selector: "p-treeTable", inputs: ["columns", "style", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "virtualRowHeight", "value", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$1.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: AngleDoubleLeftIcon, selector: "AngleDoubleLeftIcon" }, { kind: "component", type: AngleLeftIcon, selector: "AngleLeftIcon" }, { kind: "component", type: AngleRightIcon, selector: "AngleRightIcon" }, { kind: "component", type: AngleDoubleRightIcon, selector: "AngleDoubleRightIcon" }, { kind: "directive", type: CpsTreeTableColumnSortableDirective, selector: "[cpsTTColSortable]", inputs: ["cpsTTColSortable"] }, { kind: "directive", type: CpsTreeTableHeaderSelectableDirective, selector: "[cpsTTHdrSelectable]" }, { kind: "directive", type: CpsTreeTableRowSelectableDirective, selector: "[cpsTTRowSelectable]", inputs: ["cpsTTRowSelectable"] }, { kind: "directive", type: CpsTreetableRowTogglerDirective, selector: "[cpsTTRowToggler]", inputs: ["cpsTTRowToggler"] }, { kind: "directive", type: TreeTableUnsortDirective, selector: "[ttWithUnsort]" }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", inputs: ["showRowRemoveButton", "showRowEditButton"], outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTreeTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cps-tree-table', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FormsModule,
@@ -8870,8 +8910,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             // eslint-disable-next-line no-use-before-define
                             deps: [CpsTreeTableComponent]
                         }
-                    ], template: "<p-treeTable\n  #primengTreeTable\n  ttWithUnsort\n  [ngClass]=\"{\n    'cps-treetable-loading': loading,\n    'cps-treetable-flex': defScrollHeight === 'flex',\n    'cps-treetable-nonvirtual': !virtualScroll,\n    'cps-treetable-autolayout-calced': autoLayout && scrollable,\n  }\"\n  [value]=\"data\"\n  [autoLayout]=\"autoLayout && !scrollable\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{\n    numToleratedItems: numToleratedItems,\n    autoSize: false\n  }\"\n  [columns]=\"selectedColumns\"\n  [loading]=\"loading\"\n  [rowHover]=\"rowHover\"\n  [lazy]=\"lazy\"\n  [(selection)]=\"selectedRows\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  compareSelectionBy=\"deepEquals\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  (onPage)=\"onPageChange($event)\"\n  (onSort)=\"onSort($event)\"\n  (onFilter)=\"onFilter($event)\"\n  (onLazyLoad)=\"onLazyLoaded($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onNodeExpand)=\"onNodeExpanded($event)\"\n  (onNodeCollapse)=\"onNodeCollapsed($event)\"\n  (onNodeSelect)=\"onNodeSelected($event)\"\n  (onNodeUnselect)=\"onNodeUnselected($event)\">\n  <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n    <ng-container *ngIf=\"toolbarTemplate\">\n      <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!toolbarTemplate\">\n      <div class=\"cps-treetable-tbar-left\">\n        <div *ngIf=\"toolbarIcon\" class=\"cps-treetable-tbar-icon\">\n          <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n        </div>\n        <div class=\"cps-treetable-tbar-title\">{{ toolbarTitle }}</div>\n        <div *ngIf=\"showGlobalFilter\" class=\"cps-treetable-tbar-global-filter\">\n          <cps-input\n            #globalFilterComp\n            prefixIcon=\"search\"\n            [placeholder]=\"globalFilterPlaceholder\"\n            (valueChanged)=\"onFilterGlobal($event)\"\n            [clearable]=\"true\"\n            [disabled]=\"loading\"\n            [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n            [hideDetails]=\"true\">\n          </cps-input>\n        </div>\n      </div>\n      <div class=\"cps-treetable-tbar-right\">\n        <div\n          *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-treetable-tbar-btn-on-select\">\n          <cps-button\n            label=\"Remove\"\n            [disabled]=\"removeBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            icon=\"remove\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"removeSelected()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-treetable-tbar-btn-on-select\">\n          <cps-button\n            [label]=\"additionalBtnOnSelectTitle\"\n            [disabled]=\"additionalBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickAdditionalBtnOnSelect()\">\n          </cps-button>\n        </div>\n        <div *ngIf=\"showActionBtn\" class=\"cps-treetable-tbar-action-btn\">\n          <cps-button\n            [label]=\"actionBtnTitle\"\n            [disabled]=\"actionBtnDisabled\"\n            color=\"prepared\"\n            type=\"outlined\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickActionBtn()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n          class=\"cps-treetable-tbar-coltoggle-btn\"\n          [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n          <cps-icon\n            icon=\"columns\"\n            size=\"normal\"\n            [color]=\"\n              columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n            \"\n            (click)=\"onColumnsToggle($event)\"></cps-icon>\n          <cps-menu #colToggleMenu [withArrow]=\"false\">\n            <div class=\"cps-treetable-coltoggle-menu\">\n              <div\n                class=\"cps-treetable-coltoggle-menu-item select-all-option\"\n                [class.allselected]=\"selectedColumns.length === columns.length\"\n                (click)=\"toggleAllColumns()\">\n                <span class=\"cps-treetable-coltoggle-menu-item-left\">\n                  <span class=\"cps-treetable-coltoggle-menu-item-check\"> </span>\n                  <span class=\"cps-treetable-coltoggle-menu-item-label\"\n                    >Show all columns</span\n                  >\n                </span>\n              </div>\n              <div\n                *ngFor=\"let col of columns\"\n                class=\"cps-treetable-coltoggle-menu-item\"\n                (click)=\"onSelectColumn(col)\"\n                [class.selected]=\"isColumnSelected(col)\">\n                <span class=\"cps-treetable-coltoggle-menu-item-left\">\n                  <span class=\"cps-treetable-coltoggle-menu-item-check\"></span>\n                  <span class=\"cps-treetable-coltoggle-menu-item-label\">{{\n                    col[colHeaderName]\n                  }}</span>\n                </span>\n              </div>\n            </div>\n          </cps-menu>\n        </div>\n        <div\n          *ngIf=\"showDataReloadBtn\"\n          class=\"cps-treetable-tbar-reload-btn\"\n          [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n          <cps-icon\n            icon=\"refresh\"\n            size=\"18\"\n            [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n            (click)=\"onReloadData()\">\n          </cps-icon>\n        </div>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n    <ng-container\n      *ngTemplateOutlet=\"\n      nestedHeaderTemplate;\n        context: {\n          $implicit: columns,\n        }\n      \"></ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n    <tr>\n      <!-- <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th> -->\n      <th *ngIf=\"selectable\" cpsTTHdrSelectable></th>\n      <ng-container *ngIf=\"headerTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            headerTemplate;\n            context: {\n              $implicit: columns,\n            }\n          \"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n        <ng-container *ngIf=\"sortable\">\n          <th\n            *ngFor=\"let col of columns\"\n            [cpsTTColSortable]=\"col[colFieldName]\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n        <ng-container *ngIf=\"!sortable\">\n          <th *ngFor=\"let col of columns\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n      </ng-container>\n      <th\n        class=\"cps-treetable-row-menu-cell\"\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"></th>\n    </tr>\n  </ng-template>\n\n  <ng-template\n    pTemplate=\"body\"\n    let-rowData=\"rowData\"\n    let-columns=\"columns\"\n    let-rowNode\n    let-rowIndex=\"rowIndex\">\n    <tr\n      [ttRow]=\"rowNode\"\n      [ngClass]=\"{\n        'cps-treetable-row-selected':\n          selectable && primengTreeTable.isSelected(rowNode.node)\n      }\">\n      <!-- <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n        <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n      </td> -->\n      <td [cpsTTRowSelectable]=\"rowNode\" *ngIf=\"selectable\"></td>\n      <ng-container *ngIf=\"bodyTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n              $implicit: rowNode,\n              rowIndex: rowIndex,\n              columns: columns,\n              rowData: rowData\n            }\n          \">\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!bodyTemplate\">\n        <ng-container *ngIf=\"columns.length > 0\">\n          <ng-container *ngFor=\"let col of columns; let i = index\">\n            <td *ngIf=\"i === 0\" [cpsTTRowToggler]=\"rowNode\">\n              {{ rowData[col[colFieldName]] }}\n            </td>\n            <td *ngIf=\"i > 0\">{{ rowData[col[colFieldName]] }}</td>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n      <td\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n        class=\"cps-treetable-row-menu-cell\">\n        <table-row-menu\n          (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n          (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\"\n          [showRowRemoveButton]=\"showRowRemoveButton\"\n          [showRowEditButton]=\"showRowEditButton\">\n        </table-row-menu>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-treetable-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"paginatorfirstpagelinkicon\">\n    <AngleDoubleLeftIcon />\n  </ng-template>\n  <ng-template pTemplate=\"paginatorpreviouspagelinkicon\">\n    <AngleLeftIcon />\n  </ng-template>\n  <ng-template pTemplate=\"paginatornextpagelinkicon\">\n    <AngleRightIcon />\n  </ng-template>\n  <ng-template pTemplate=\"paginatorlastpagelinkicon\">\n    <AngleDoubleRightIcon />\n  </ng-template>\n</p-treeTable>\n", styles: [":host ::ng-deep .p-treetable{position:relative}:host ::ng-deep .p-component,:host ::ng-deep .p-component *{box-sizing:border-box}:host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-treetable-scrollable-wrapper{position:relative;background:#ffffff}:host ::ng-deep .p-treetable-wrapper{background:#ffffff}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-normal .p-treetable-scrollable-wrapper{height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-small .p-treetable-scrollable-wrapper{height:calc(100% - 43px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-wrapper .p-treetable-scrollable-view .p-treetable-scrollable-header{display:contents}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:white}:host ::ng-deep .p-treetable-scrollable-header,:host ::ng-deep .p-treetable-scrollable-footer{overflow:hidden}:host ::ng-deep .p-treetable table{border-collapse:collapse;width:100%;table-layout:fixed}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s;overflow:hidden}:host ::ng-deep .p-treetable-scrollable-body{overflow:auto!important;position:relative}:host ::ng-deep .cps-treetable-flex .p-treetable-scrollable-body{height:100%}:host ::ng-deep .p-treetable .p-treetable-tbody{background:#ffffff}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#ffffff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.cps-treetable-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep p-treetable:not(.cps-treetable-autolayout-calced) .p-treetable .p-treetable-tbody>tr>td{overflow:hidden}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){opacity:0;border-left-color:#fff}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable.p-treetable-striped .p-treetable-scrollable-body .p-treetable-tbody>tr:nth-child(odd)>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-bg-light)}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr:hover>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-treetable-auto-layout table{table-layout:auto}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler{width:1rem;height:1rem;color:var(--cps-color-text-dark);border:0 none;background:transparent;border-radius:50%;margin-right:.5rem}:host ::ng-deep .p-treetable-toggler{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;overflow:hidden;position:relative}:host ::ng-deep .p-ripple{overflow:hidden;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif;border-radius:6px}:host ::ng-deep input[type=button],:host ::ng-deep input[type=submit],:host ::ng-deep input[type=reset],:host ::ng-deep input[type=file]::-webkit-file-upload-button,:host ::ng-deep button{border-radius:0}:host ::ng-deep .p-treetable .p-treetable-tbody>tr:focus{outline:0 none;outline-offset:-.15rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:unset}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-treetable .p-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep span.p-paginator-icon{display:contents}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-treetable-empty-message-td{text-align:center!important;font-weight:600;background:white}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-treetable .p-treetable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-title{cursor:default}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn{display:contents}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-treetable .p-treetable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-treetable .p-treetable-header{height:72px}:host ::ng-deep .p-treetable .p-treetable-footer{background:white;color:#343a40;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem;font-weight:700}:host ::ng-deep .p-treetable .p-treetable-tfoot>tr>td{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:700;color:#343a40;background:white}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-treetable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler.p-icon{width:2rem;height:2rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.p-highlight{background:#eff6ff;color:#1d4ed8}:host ::ng-deep .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody>tr:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable-hoverable-rows .p-treetable-tbody>tr{cursor:auto}:host ::ng-deep .p-treetable .p-column-resizer-helper{background:#3b82f6}:host ::ng-deep .p-treetable .p-treetable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable.cps-tbar-small .p-treetable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-treetable.cps-tbar-normal .p-treetable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-loading .p-treetable{min-height:200px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-footer{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-top{border-width:0 1px 0 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tfoot>tr>td{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tfoot>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-footer{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tbody>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-footer{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(even){background:#ffffff}:host ::ng-deep .cps-treetable-row-menu-cell{width:55px;border-left:none!important}:host ::ng-deep .cps-treetable-selectable-cell{width:55px;text-align:center!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-checkbox .p-checkbox-box minusicon .p-checkbox-icon{color:var(--cps-color-calm);width:12px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td p-treetablecheckbox .p-checkbox{margin-right:0}::ng-deep .p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}.cps-treetable-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-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-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-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-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected{font-weight:600}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-label,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-check,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-check{opacity:1}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-treetable-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { columns: [{
+                    ], template: "<p-treeTable\n  #primengTreeTable\n  ttWithUnsort\n  [ngClass]=\"{\n    'cps-treetable-loading': loading,\n    'cps-treetable-flex': defScrollHeight === 'flex',\n    'cps-treetable-nonvirtual': !virtualScroll,\n    'cps-treetable-autolayout-calced': autoLayout && scrollable,\n  }\"\n  [value]=\"data\"\n  [autoLayout]=\"autoLayout && !scrollable\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{\n    numToleratedItems: numToleratedItems,\n    autoSize: false\n  }\"\n  [columns]=\"selectedColumns\"\n  [loading]=\"loading\"\n  [rowHover]=\"rowHover\"\n  [lazy]=\"lazy\"\n  [(selection)]=\"selectedRows\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  compareSelectionBy=\"deepEquals\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  (onPage)=\"onPageChange($event)\"\n  (onSort)=\"onSort($event)\"\n  (onFilter)=\"onFilter($event)\"\n  (onLazyLoad)=\"onLazyLoaded($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onNodeExpand)=\"onNodeExpanded($event)\"\n  (onNodeCollapse)=\"onNodeCollapsed($event)\"\n  (onNodeSelect)=\"onNodeSelected($event)\"\n  (onNodeUnselect)=\"onNodeUnselected($event)\">\n  <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n    <ng-container *ngIf=\"toolbarTemplate\">\n      <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!toolbarTemplate\">\n      <div class=\"cps-treetable-tbar-left\">\n        <div *ngIf=\"toolbarIcon\" class=\"cps-treetable-tbar-icon\">\n          <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n        </div>\n        <div class=\"cps-treetable-tbar-title\">{{ toolbarTitle }}</div>\n        <div *ngIf=\"showGlobalFilter\" class=\"cps-treetable-tbar-global-filter\">\n          <cps-input\n            #globalFilterComp\n            prefixIcon=\"search\"\n            [placeholder]=\"globalFilterPlaceholder\"\n            (valueChanged)=\"onFilterGlobal($event)\"\n            [clearable]=\"true\"\n            [disabled]=\"loading\"\n            [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\n            [hideDetails]=\"true\">\n          </cps-input>\n        </div>\n      </div>\n      <div class=\"cps-treetable-tbar-right\">\n        <div\n          *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-treetable-tbar-btn-on-select\">\n          <cps-button\n            label=\"Remove\"\n            [disabled]=\"removeBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            icon=\"remove\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"removeSelected()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-treetable-tbar-btn-on-select\">\n          <cps-button\n            [label]=\"additionalBtnOnSelectTitle\"\n            [disabled]=\"additionalBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickAdditionalBtnOnSelect()\">\n          </cps-button>\n        </div>\n        <div *ngIf=\"showActionBtn\" class=\"cps-treetable-tbar-action-btn\">\n          <cps-button\n            [label]=\"actionBtnTitle\"\n            [disabled]=\"actionBtnDisabled\"\n            color=\"prepared\"\n            type=\"outlined\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickActionBtn()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n          class=\"cps-treetable-tbar-coltoggle-btn\"\n          [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n          <cps-icon\n            icon=\"columns\"\n            size=\"normal\"\n            [color]=\"\n              columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n            \"\n            (click)=\"onColumnsToggle($event)\"></cps-icon>\n          <cps-menu #colToggleMenu [withArrow]=\"false\">\n            <div class=\"cps-treetable-coltoggle-menu\">\n              <div\n                class=\"cps-treetable-coltoggle-menu-item select-all-option\"\n                [class.allselected]=\"selectedColumns.length === columns.length\"\n                (click)=\"toggleAllColumns()\">\n                <span class=\"cps-treetable-coltoggle-menu-item-left\">\n                  <span class=\"cps-treetable-coltoggle-menu-item-check\"> </span>\n                  <span class=\"cps-treetable-coltoggle-menu-item-label\"\n                    >Show all columns</span\n                  >\n                </span>\n              </div>\n              <div\n                *ngFor=\"let col of columns\"\n                class=\"cps-treetable-coltoggle-menu-item\"\n                (click)=\"onSelectColumn(col)\"\n                [class.selected]=\"isColumnSelected(col)\">\n                <span class=\"cps-treetable-coltoggle-menu-item-left\">\n                  <span class=\"cps-treetable-coltoggle-menu-item-check\"></span>\n                  <span class=\"cps-treetable-coltoggle-menu-item-label\">{{\n                    col[colHeaderName]\n                  }}</span>\n                </span>\n              </div>\n            </div>\n          </cps-menu>\n        </div>\n        <div\n          *ngIf=\"showDataReloadBtn\"\n          class=\"cps-treetable-tbar-reload-btn\"\n          [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n          <cps-icon\n            icon=\"refresh\"\n            size=\"18\"\n            [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n            (click)=\"onReloadData()\">\n          </cps-icon>\n        </div>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n    <ng-container\n      *ngTemplateOutlet=\"\n      nestedHeaderTemplate;\n        context: {\n          $implicit: columns,\n        }\n      \"></ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n    <tr>\n      <!-- <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th> -->\n      <th *ngIf=\"selectable\" cpsTTHdrSelectable></th>\n      <ng-container *ngIf=\"headerTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            headerTemplate;\n            context: {\n              $implicit: columns,\n            }\n          \"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n        <ng-container *ngIf=\"sortable\">\n          <th\n            *ngFor=\"let col of columns\"\n            [cpsTTColSortable]=\"col[colFieldName]\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n        <ng-container *ngIf=\"!sortable\">\n          <th *ngFor=\"let col of columns\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n      </ng-container>\n      <th\n        class=\"cps-treetable-row-menu-cell\"\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"></th>\n    </tr>\n  </ng-template>\n\n  <ng-template\n    pTemplate=\"body\"\n    let-rowData=\"rowData\"\n    let-columns=\"columns\"\n    let-rowNode\n    let-rowIndex=\"rowIndex\">\n    <tr\n      [ttRow]=\"rowNode\"\n      [ngClass]=\"{\n        'cps-treetable-row-selected':\n          selectable && primengTreeTable.isSelected(rowNode.node)\n      }\">\n      <!-- <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n        <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n      </td> -->\n      <td [cpsTTRowSelectable]=\"rowNode\" *ngIf=\"selectable\"></td>\n      <ng-container *ngIf=\"bodyTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n              $implicit: rowNode,\n              rowIndex: rowIndex,\n              columns: columns,\n              rowData: rowData\n            }\n          \">\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!bodyTemplate\">\n        <ng-container *ngIf=\"columns.length > 0\">\n          <ng-container *ngFor=\"let col of columns; let i = index\">\n            <td *ngIf=\"i === 0\" [cpsTTRowToggler]=\"rowNode\">\n              {{ rowData[col[colFieldName]] }}\n            </td>\n            <td *ngIf=\"i > 0\">{{ rowData[col[colFieldName]] }}</td>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n      <td\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n        class=\"cps-treetable-row-menu-cell\">\n        <table-row-menu\n          (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n          (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\"\n          [showRowRemoveButton]=\"showRowRemoveButton\"\n          [showRowEditButton]=\"showRowEditButton\">\n        </table-row-menu>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-treetable-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"paginatorfirstpagelinkicon\">\n    <AngleDoubleLeftIcon />\n  </ng-template>\n  <ng-template pTemplate=\"paginatorpreviouspagelinkicon\">\n    <AngleLeftIcon />\n  </ng-template>\n  <ng-template pTemplate=\"paginatornextpagelinkicon\">\n    <AngleRightIcon />\n  </ng-template>\n  <ng-template pTemplate=\"paginatorlastpagelinkicon\">\n    <AngleDoubleRightIcon />\n  </ng-template>\n</p-treeTable>\n", styles: [":host ::ng-deep .p-treetable{position:relative}:host ::ng-deep .p-component,:host ::ng-deep .p-component *{box-sizing:border-box}:host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-treetable-scrollable-wrapper{position:relative;background:#fff}:host ::ng-deep .p-treetable-wrapper{background:#fff}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-normal .p-treetable-scrollable-wrapper{height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-small .p-treetable-scrollable-wrapper{height:calc(100% - 43px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-wrapper .p-treetable-scrollable-view .p-treetable-scrollable-header{display:contents}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:#fff}:host ::ng-deep .p-treetable-scrollable-header,:host ::ng-deep .p-treetable-scrollable-footer{overflow:hidden}:host ::ng-deep .p-treetable table{border-collapse:collapse;width:100%;table-layout:fixed}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s;overflow:hidden}:host ::ng-deep .p-treetable-scrollable-body{overflow:auto!important;position:relative}:host ::ng-deep .cps-treetable-flex .p-treetable-scrollable-body{height:100%}:host ::ng-deep .p-treetable .p-treetable-tbody{background:#fff}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#fff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.cps-treetable-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep p-treetable:not(.cps-treetable-autolayout-calced) .p-treetable .p-treetable-tbody>tr>td{overflow:hidden}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){opacity:0;border-left-color:#fff}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable.p-treetable-striped .p-treetable-scrollable-body .p-treetable-tbody>tr:nth-child(odd)>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-bg-light)}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr:hover>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-treetable-auto-layout table{table-layout:auto}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler{width:1rem;height:1rem;color:var(--cps-color-text-dark);border:0 none;background:transparent;border-radius:50%;margin-right:.5rem}:host ::ng-deep .p-treetable-toggler{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;overflow:hidden;position:relative}:host ::ng-deep .p-ripple{overflow:hidden;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif;border-radius:6px}:host ::ng-deep input[type=button],:host ::ng-deep input[type=submit],:host ::ng-deep input[type=reset],:host ::ng-deep input[type=file]::-webkit-file-upload-button,:host ::ng-deep button{border-radius:0}:host ::ng-deep .p-treetable .p-treetable-tbody>tr:focus{outline:0 none;outline-offset:-.15rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:unset}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-treetable .p-paginator{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep span.p-paginator-icon{display:contents}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-treetable-empty-message-td{text-align:center!important;font-weight:600;background:#fff}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-treetable .p-treetable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-title{cursor:default}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn{display:contents}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-treetable .p-treetable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-treetable .p-treetable-header{height:72px}:host ::ng-deep .p-treetable .p-treetable-footer{background:#fff;color:#343a40;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem;font-weight:700}:host ::ng-deep .p-treetable .p-treetable-tfoot>tr>td{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:700;color:#343a40;background:#fff}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-treetable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler.p-icon{width:2rem;height:2rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.p-highlight{background:#eff6ff;color:#1d4ed8}:host ::ng-deep .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody>tr:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable-hoverable-rows .p-treetable-tbody>tr{cursor:auto}:host ::ng-deep .p-treetable .p-column-resizer-helper{background:#3b82f6}:host ::ng-deep .p-treetable .p-treetable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable.cps-tbar-small .p-treetable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-treetable.cps-tbar-normal .p-treetable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-loading .p-treetable{min-height:200px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-footer{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-top{border-width:0 1px 0 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tfoot>tr>td{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tfoot>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-footer{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tbody>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-footer{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(2n){background:#fff}:host ::ng-deep .cps-treetable-row-menu-cell{width:55px;border-left:none!important}:host ::ng-deep .cps-treetable-selectable-cell{width:55px;text-align:center!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#fff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-checkbox .p-checkbox-box minusicon .p-checkbox-icon{color:var(--cps-color-calm);width:12px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td p-treetablecheckbox .p-checkbox{margin-right:0}::ng-deep .p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}.cps-treetable-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-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-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-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-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected{font-weight:600}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-label,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-check,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-check{opacity:1}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-treetable-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { columns: [{
                 type: Input
             }], colHeaderName: [{
                 type: Input
@@ -9174,17 +9214,17 @@ class CpsTreeTableColumnFilterDirective {
         this.filterCompRef.destroy();
         this.viewContainerRef.clear();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTreeTableColumnFilterDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: CpsTreeTableColumnFilterDirective, isStandalone: true, selector: "[cpsTTColFilter]", inputs: { field: ["cpsTTColFilter", "field"], filterType: "filterType", filterPersistent: "filterPersistent", filterShowClearButton: "filterShowClearButton", filterShowApplyButton: "filterShowApplyButton", filterShowCloseButton: "filterShowCloseButton", filterShowMatchModes: "filterShowMatchModes", filterMatchModes: "filterMatchModes", filterShowOperator: "filterShowOperator", filterHeaderTitle: "filterHeaderTitle", filterHideOnClear: "filterHideOnClear", filterCategoryOptions: "filterCategoryOptions", filterAsButtonToggle: "filterAsButtonToggle", filterSingleSelection: "filterSingleSelection", filterPlaceholder: "filterPlaceholder" }, exportAs: ["cpsTTColFilter"], usesOnChanges: true, ngImport: i0 }); }
 }
-CpsTreeTableColumnFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableColumnFilterDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-CpsTreeTableColumnFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTreeTableColumnFilterDirective, isStandalone: true, selector: "[cpsTTColFilter]", inputs: { field: ["cpsTTColFilter", "field"], filterType: "filterType", filterPersistent: "filterPersistent", filterShowClearButton: "filterShowClearButton", filterShowApplyButton: "filterShowApplyButton", filterShowCloseButton: "filterShowCloseButton", filterShowMatchModes: "filterShowMatchModes", filterMatchModes: "filterMatchModes", filterShowOperator: "filterShowOperator", filterHeaderTitle: "filterHeaderTitle", filterHideOnClear: "filterHideOnClear", filterCategoryOptions: "filterCategoryOptions", filterAsButtonToggle: "filterAsButtonToggle", filterSingleSelection: "filterSingleSelection", filterPlaceholder: "filterPlaceholder" }, exportAs: ["cpsTTColFilter"], usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTreeTableColumnFilterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTreeTableColumnFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     selector: '[cpsTTColFilter]',
                     exportAs: 'cpsTTColFilter'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { field: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { field: [{
                 type: Input,
                 args: ['cpsTTColFilter']
             }], filterType: [{
@@ -9321,17 +9361,17 @@ class CpsTagComponent {
         this.onChange(value);
         this.valueChanged.emit(value);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTagComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsTagComponent, isStandalone: true, selector: "cps-tag", inputs: { type: "type", label: "label", color: "color", disabled: "disabled", selectable: "selectable", value: "value" }, outputs: { valueChanged: "valueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div\n  [ngClass]=\"classesList\"\n  [class.unselected]=\"!value && selectable\"\n  [ngStyle]=\"{ 'border-color': tagColor || 'none' }\"\n  (click)=\"toggleSelected()\">\n  <p>{{ label }}</p>\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-tag{font-family:Source Sans Pro,sans-serif;min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .cps-tag.cps-tag--security{border-color:var(--cps-color-warn)}:host .cps-tag.cps-tag--classification{border-color:var(--cps-color-info)}:host .cps-tag.cps-tag--selectable{cursor:pointer}:host .cps-tag.cps-tag--selectable:not(:active):not(:disabled){box-shadow:1px 3px 4px #0000001a}:host .cps-tag.cps-tag--disabled{pointer-events:none;border-color:var(--cps-color-line-dark)!important}:host .cps-tag.cps-tag--disabled p{color:var(--cps-color-text-light)}:host .cps-tag.unselected{border-color:var(--cps-color-text-light)!important}:host .cps-tag p{margin:0;font-size:11px;color:var(--cps-color-text-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-CpsTagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTagComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-CpsTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTagComponent, isStandalone: true, selector: "cps-tag", inputs: { type: "type", label: "label", color: "color", disabled: "disabled", selectable: "selectable", value: "value" }, outputs: { valueChanged: "valueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div\n  [ngClass]=\"classesList\"\n  [class.unselected]=\"!value && selectable\"\n  [ngStyle]=\"{ 'border-color': tagColor || 'none' }\"\n  (click)=\"toggleSelected()\">\n  <p>{{ label }}</p>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .cps-tag{font-family:Source Sans Pro,sans-serif;min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .cps-tag.cps-tag--security{border-color:var(--cps-color-warn)}:host .cps-tag.cps-tag--classification{border-color:var(--cps-color-info)}:host .cps-tag.cps-tag--selectable{cursor:pointer}:host .cps-tag.cps-tag--selectable:not(:active):not(:disabled){box-shadow:1px 3px 4px #0000001a}:host .cps-tag.cps-tag--disabled{pointer-events:none;border-color:var(--cps-color-line-dark)!important}:host .cps-tag.cps-tag--disabled p{color:var(--cps-color-text-light)}:host .cps-tag.unselected{border-color:var(--cps-color-text-light)!important}:host .cps-tag p{margin:0;font-size:11px;color:var(--cps-color-text-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTagComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule], selector: 'cps-tag', template: "<div\n  [ngClass]=\"classesList\"\n  [class.unselected]=\"!value && selectable\"\n  [ngStyle]=\"{ 'border-color': tagColor || 'none' }\"\n  (click)=\"toggleSelected()\">\n  <p>{{ label }}</p>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .cps-tag{font-family:Source Sans Pro,sans-serif;min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .cps-tag.cps-tag--security{border-color:var(--cps-color-warn)}:host .cps-tag.cps-tag--classification{border-color:var(--cps-color-info)}:host .cps-tag.cps-tag--selectable{cursor:pointer}:host .cps-tag.cps-tag--selectable:not(:active):not(:disabled){box-shadow:1px 3px 4px #0000001a}:host .cps-tag.cps-tag--disabled{pointer-events:none;border-color:var(--cps-color-line-dark)!important}:host .cps-tag.cps-tag--disabled p{color:var(--cps-color-text-light)}:host .cps-tag.unselected{border-color:var(--cps-color-text-light)!important}:host .cps-tag p{margin:0;font-size:11px;color:var(--cps-color-text-dark)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+            args: [{ standalone: true, imports: [CommonModule], selector: 'cps-tag', template: "<div\n  [ngClass]=\"classesList\"\n  [class.unselected]=\"!value && selectable\"\n  [ngStyle]=\"{ 'border-color': tagColor || 'none' }\"\n  (click)=\"toggleSelected()\">\n  <p>{{ label }}</p>\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-tag{font-family:Source Sans Pro,sans-serif;min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .cps-tag.cps-tag--security{border-color:var(--cps-color-warn)}:host .cps-tag.cps-tag--classification{border-color:var(--cps-color-info)}:host .cps-tag.cps-tag--selectable{cursor:pointer}:host .cps-tag.cps-tag--selectable:not(:active):not(:disabled){box-shadow:1px 3px 4px #0000001a}:host .cps-tag.cps-tag--disabled{pointer-events:none;border-color:var(--cps-color-line-dark)!important}:host .cps-tag.cps-tag--disabled p{color:var(--cps-color-text-light)}:host .cps-tag.unselected{border-color:var(--cps-color-text-light)!important}:host .cps-tag p{margin:0;font-size:11px;color:var(--cps-color-text-dark)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }]; }, propDecorators: { type: [{
+                }] }], propDecorators: { type: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -9423,12 +9463,13 @@ class CpsPaginatorComponent {
             this.paginator.first = 0;
         }
         this.paginator.rows = rows;
+        // Todo: Use explicit type
         this.paginator.onRppChange(rows);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsPaginatorComponent, isStandalone: true, selector: "cps-paginator", inputs: { first: "first", rows: "rows", totalRecords: "totalRecords", rowsPerPageOptions: "rowsPerPageOptions", alwaysShow: "alwaysShow", backgroundColor: "backgroundColor", resetPageOnRowsChange: "resetPageOnRowsChange" }, outputs: { pageChanged: "pageChanged" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], ngImport: i0, template: "<p-paginator\n  #paginator\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [style]=\"{ background: backgroundColor }\"\n  [totalRecords]=\"totalRecords\"\n  [showFirstLastIcon]=\"true\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShow]=\"alwaysShow\"\n  [templateLeft]=\"itemsPerPageTemplate\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n  <div class=\"cps-paginator-itms-per-page\">\n    <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n    <cps-select\n      [options]=\"rowOptions\"\n      [hideDetails]=\"true\"\n      [(ngModel)]=\"rows\"\n      (valueChanged)=\"onRowsPerPageChange($event)\"\n      [returnObject]=\"false\"\n      optionsClass=\"cps-paginator-page-options\"></cps-select>\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$4.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { 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: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }] }); }
 }
-CpsPaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CpsPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsPaginatorComponent, isStandalone: true, selector: "cps-paginator", inputs: { first: "first", rows: "rows", totalRecords: "totalRecords", rowsPerPageOptions: "rowsPerPageOptions", alwaysShow: "alwaysShow", backgroundColor: "backgroundColor", resetPageOnRowsChange: "resetPageOnRowsChange" }, outputs: { pageChanged: "pageChanged" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], ngImport: i0, template: "<p-paginator\n  #paginator\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [style]=\"{ background: backgroundColor }\"\n  [totalRecords]=\"totalRecords\"\n  [showFirstLastIcon]=\"true\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShow]=\"alwaysShow\"\n  [templateLeft]=\"itemsPerPageTemplate\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n  <div class=\"cps-paginator-itms-per-page\">\n    <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n    <cps-select\n      [options]=\"rowOptions\"\n      [hideDetails]=\"true\"\n      [(ngModel)]=\"rows\"\n      (valueChanged)=\"onRowsPerPageChange($event)\"\n      [returnObject]=\"false\"\n      optionsClass=\"cps-paginator-page-options\"></cps-select>\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$4.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "templateLeft", "templateRight", "dropdownAppendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "showPageLinks", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { 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: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "value"], outputs: ["valueChanged"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsPaginatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsPaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cps-paginator', standalone: true, imports: [CommonModule, PaginatorModule, CpsSelectComponent], template: "<p-paginator\n  #paginator\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [style]=\"{ background: backgroundColor }\"\n  [totalRecords]=\"totalRecords\"\n  [showFirstLastIcon]=\"true\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShow]=\"alwaysShow\"\n  [templateLeft]=\"itemsPerPageTemplate\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n  <div class=\"cps-paginator-itms-per-page\">\n    <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n    <cps-select\n      [options]=\"rowOptions\"\n      [hideDetails]=\"true\"\n      [(ngModel)]=\"rows\"\n      (valueChanged)=\"onRowsPerPageChange($event)\"\n      [returnObject]=\"false\"\n      optionsClass=\"cps-paginator-page-options\"></cps-select>\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
         }], propDecorators: { first: [{
@@ -9469,10 +9510,10 @@ class CpsPaginatePipe {
         const last = first + rows;
         return items.slice(first, last);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsPaginatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: CpsPaginatePipe, isStandalone: true, name: "cpsPaginate" }); }
 }
-CpsPaginatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsPaginatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-CpsPaginatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: CpsPaginatePipe, isStandalone: true, name: "cpsPaginate" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsPaginatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsPaginatePipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -9623,21 +9664,21 @@ class CpsExpansionPanelComponent {
             this._renderer.setStyle(el, 'visibility', 'hidden');
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsExpansionPanelComponent, deps: [{ token: i1$5.AnimationBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsExpansionPanelComponent, isStandalone: true, selector: "cps-expansion-panel", inputs: { headerTitle: "headerTitle", backgroundColor: "backgroundColor", showChevron: "showChevron", isExpanded: "isExpanded", disabled: "disabled", bordered: "bordered", borderRadius: "borderRadius", borderColor: "borderColor", width: "width", prefixIcon: "prefixIcon" }, outputs: { afterCollapse: "afterCollapse", afterExpand: "afterExpand" }, viewQueries: [{ propertyName: "panelContentElem", first: true, predicate: ["panelContentElem"], descendants: true }], ngImport: i0, template: "<div\n  class=\"cps-expansion-panel\"\n  [class.expanded]=\"isExpanded\"\n  [ngStyle]=\"{\n    'background-color': backgroundColor,\n    'border-radius': borderRadius,\n    width: width,\n    border: bordered ? '1px solid ' + borderColor : ''\n  }\">\n  <div\n    class=\"cps-expansion-panel-header\"\n    [@panelHeader]=\"\n      isExpanded\n        ? {\n            value: 'visible',\n            params: {\n              borderStyle: bordered ? '1px solid ' + borderColor : ''\n            }\n          }\n        : 'hidden'\n    \"\n    [ngClass]=\"{ disabled: disabled }\"\n    [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n    (click)=\"toggleExpansion()\">\n    <span class=\"cps-expansion-panel-prefix-icon\" *ngIf=\"prefixIcon\">\n      <cps-icon\n        [icon]=\"prefixIcon\"\n        size=\"small\"\n        [color]=\"disabled ? 'text-mild' : 'text-dark'\">\n      </cps-icon>\n    </span>\n    <div class=\"cps-expansion-panel-title\">{{ headerTitle }}</div>\n    <span class=\"cps-expansion-panel-chevron\" *ngIf=\"showChevron && !disabled\">\n      <cps-icon icon=\"chevron-down\" size=\"small\" color=\"text-dark\"> </cps-icon>\n    </span>\n  </div>\n  <div class=\"cps-expansion-panel-content\" #panelContentElem>\n    <div class=\"cps-expansion-panel-content-inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-expansion-panel{overflow:hidden;font-family:Source Sans Pro,sans-serif;line-height:20px;color:var(--cps-color-text-dark)}:host .cps-expansion-panel-header{border-bottom-color:transparent;display:flex;align-items:center;padding:10px 16px 10px 24px;font-size:16px;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .cps-expansion-panel-header:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-expansion-panel-header:active{background-color:var(--cps-color-highlight-active)}:host .cps-expansion-panel-header.disabled{pointer-events:none;color:var(--cps-color-text-mild)}:host .cps-expansion-panel-prefix-icon{display:flex;align-items:center;margin-right:12px;margin-bottom:2px}:host .cps-expansion-panel-prefix-icon cps-icon ::ng-deep .cps-icon{width:18px;height:18px}:host .cps-expansion-panel-title{flex:1 0 auto;display:inline-flex;font-weight:600}:host .cps-expansion-panel-chevron{width:16px;display:flex;align-items:center;transition-duration:.2s;margin-left:6px}:host .cps-expansion-panel-content{overflow:auto;color:var(--cps-color-text-dark);font-size:16px}:host .cps-expansion-panel-content-inner{padding:16px 24px}:host .cps-expansion-panel.expanded .cps-expansion-panel-content{max-height:500px}:host .cps-expansion-panel.expanded .cps-expansion-panel-chevron{transform:rotate(180deg)}\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"] }], animations: [
+            trigger('panelHeader', [
+                state('hidden', style({
+                    borderBottom: ''
+                })),
+                state('visible', style({
+                    borderBottom: '{{borderStyle}}'
+                }), { params: { borderStyle: '' } }),
+                transition('visible <=> hidden', [animate(transitionType)]),
+                transition('void => *', animate(0))
+            ])
+        ] }); }
 }
-CpsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsExpansionPanelComponent, deps: [{ token: i1$5.AnimationBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-CpsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsExpansionPanelComponent, isStandalone: true, selector: "cps-expansion-panel", inputs: { headerTitle: "headerTitle", backgroundColor: "backgroundColor", showChevron: "showChevron", isExpanded: "isExpanded", disabled: "disabled", bordered: "bordered", borderRadius: "borderRadius", borderColor: "borderColor", width: "width", prefixIcon: "prefixIcon" }, outputs: { afterCollapse: "afterCollapse", afterExpand: "afterExpand" }, viewQueries: [{ propertyName: "panelContentElem", first: true, predicate: ["panelContentElem"], descendants: true }], ngImport: i0, template: "<div\n  class=\"cps-expansion-panel\"\n  [class.expanded]=\"isExpanded\"\n  [ngStyle]=\"{\n    'background-color': backgroundColor,\n    'border-radius': borderRadius,\n    width: width,\n    border: bordered ? '1px solid ' + borderColor : ''\n  }\">\n  <div\n    class=\"cps-expansion-panel-header\"\n    [@panelHeader]=\"\n      isExpanded\n        ? {\n            value: 'visible',\n            params: {\n              borderStyle: bordered ? '1px solid ' + borderColor : ''\n            }\n          }\n        : 'hidden'\n    \"\n    [ngClass]=\"{ disabled: disabled }\"\n    [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n    (click)=\"toggleExpansion()\">\n    <span class=\"cps-expansion-panel-prefix-icon\" *ngIf=\"prefixIcon\">\n      <cps-icon\n        [icon]=\"prefixIcon\"\n        size=\"small\"\n        [color]=\"disabled ? 'text-mild' : 'text-dark'\">\n      </cps-icon>\n    </span>\n    <div class=\"cps-expansion-panel-title\">{{ headerTitle }}</div>\n    <span class=\"cps-expansion-panel-chevron\" *ngIf=\"showChevron && !disabled\">\n      <cps-icon icon=\"chevron-down\" size=\"small\" color=\"text-dark\"> </cps-icon>\n    </span>\n  </div>\n  <div class=\"cps-expansion-panel-content\" #panelContentElem>\n    <div class=\"cps-expansion-panel-content-inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-expansion-panel{overflow:hidden;font-family:Source Sans Pro,sans-serif;line-height:20px;color:var(--cps-color-text-dark)}:host .cps-expansion-panel-header{border-bottom-color:transparent;display:flex;align-items:center;padding:10px 16px 10px 24px;font-size:16px;justify-content:space-between;-webkit-user-select:none;user-select:none}:host .cps-expansion-panel-header:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-expansion-panel-header:active{background-color:var(--cps-color-highlight-active)}:host .cps-expansion-panel-header.disabled{pointer-events:none;color:var(--cps-color-text-mild)}:host .cps-expansion-panel-prefix-icon{display:flex;align-items:center;margin-right:12px;margin-bottom:2px}:host .cps-expansion-panel-prefix-icon cps-icon ::ng-deep .cps-icon{width:18px;height:18px}:host .cps-expansion-panel-title{flex:1 0 auto;display:inline-flex;font-weight:600}:host .cps-expansion-panel-chevron{width:16px;display:flex;align-items:center;transition-duration:.2s;margin-left:6px}:host .cps-expansion-panel-content{overflow:auto;color:var(--cps-color-text-dark);font-size:16px}:host .cps-expansion-panel-content-inner{padding:16px 24px}:host .cps-expansion-panel.expanded .cps-expansion-panel-content{max-height:500px}:host .cps-expansion-panel.expanded .cps-expansion-panel-chevron{transform:rotate(180deg)}\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"] }], animations: [
-        trigger('panelHeader', [
-            state('hidden', style({
-                borderBottom: ''
-            })),
-            state('visible', style({
-                borderBottom: '{{borderStyle}}'
-            }), { params: { borderStyle: '' } }),
-            transition('visible <=> hidden', [animate(transitionType)]),
-            transition('void => *', animate(0))
-        ])
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsExpansionPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsExpansionPanelComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule, CpsIconComponent], selector: 'cps-expansion-panel', animations: [
                         trigger('panelHeader', [
@@ -9650,8 +9691,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             transition('visible <=> hidden', [animate(transitionType)]),
                             transition('void => *', animate(0))
                         ])
-                    ], template: "<div\n  class=\"cps-expansion-panel\"\n  [class.expanded]=\"isExpanded\"\n  [ngStyle]=\"{\n    'background-color': backgroundColor,\n    'border-radius': borderRadius,\n    width: width,\n    border: bordered ? '1px solid ' + borderColor : ''\n  }\">\n  <div\n    class=\"cps-expansion-panel-header\"\n    [@panelHeader]=\"\n      isExpanded\n        ? {\n            value: 'visible',\n            params: {\n              borderStyle: bordered ? '1px solid ' + borderColor : ''\n            }\n          }\n        : 'hidden'\n    \"\n    [ngClass]=\"{ disabled: disabled }\"\n    [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n    (click)=\"toggleExpansion()\">\n    <span class=\"cps-expansion-panel-prefix-icon\" *ngIf=\"prefixIcon\">\n      <cps-icon\n        [icon]=\"prefixIcon\"\n        size=\"small\"\n        [color]=\"disabled ? 'text-mild' : 'text-dark'\">\n      </cps-icon>\n    </span>\n    <div class=\"cps-expansion-panel-title\">{{ headerTitle }}</div>\n    <span class=\"cps-expansion-panel-chevron\" *ngIf=\"showChevron && !disabled\">\n      <cps-icon icon=\"chevron-down\" size=\"small\" color=\"text-dark\"> </cps-icon>\n    </span>\n  </div>\n  <div class=\"cps-expansion-panel-content\" #panelContentElem>\n    <div class=\"cps-expansion-panel-content-inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-expansion-panel{overflow:hidden;font-family:Source Sans Pro,sans-serif;line-height:20px;color:var(--cps-color-text-dark)}:host .cps-expansion-panel-header{border-bottom-color:transparent;display:flex;align-items:center;padding:10px 16px 10px 24px;font-size:16px;justify-content:space-between;-webkit-user-select:none;user-select:none}:host .cps-expansion-panel-header:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-expansion-panel-header:active{background-color:var(--cps-color-highlight-active)}:host .cps-expansion-panel-header.disabled{pointer-events:none;color:var(--cps-color-text-mild)}:host .cps-expansion-panel-prefix-icon{display:flex;align-items:center;margin-right:12px;margin-bottom:2px}:host .cps-expansion-panel-prefix-icon cps-icon ::ng-deep .cps-icon{width:18px;height:18px}:host .cps-expansion-panel-title{flex:1 0 auto;display:inline-flex;font-weight:600}:host .cps-expansion-panel-chevron{width:16px;display:flex;align-items:center;transition-duration:.2s;margin-left:6px}:host .cps-expansion-panel-content{overflow:auto;color:var(--cps-color-text-dark);font-size:16px}:host .cps-expansion-panel-content-inner{padding:16px 24px}:host .cps-expansion-panel.expanded .cps-expansion-panel-content{max-height:500px}:host .cps-expansion-panel.expanded .cps-expansion-panel-chevron{transform:rotate(180deg)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$5.AnimationBuilder }, { type: i0.Renderer2 }]; }, propDecorators: { headerTitle: [{
+                    ], template: "<div\n  class=\"cps-expansion-panel\"\n  [class.expanded]=\"isExpanded\"\n  [ngStyle]=\"{\n    'background-color': backgroundColor,\n    'border-radius': borderRadius,\n    width: width,\n    border: bordered ? '1px solid ' + borderColor : ''\n  }\">\n  <div\n    class=\"cps-expansion-panel-header\"\n    [@panelHeader]=\"\n      isExpanded\n        ? {\n            value: 'visible',\n            params: {\n              borderStyle: bordered ? '1px solid ' + borderColor : ''\n            }\n          }\n        : 'hidden'\n    \"\n    [ngClass]=\"{ disabled: disabled }\"\n    [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n    (click)=\"toggleExpansion()\">\n    <span class=\"cps-expansion-panel-prefix-icon\" *ngIf=\"prefixIcon\">\n      <cps-icon\n        [icon]=\"prefixIcon\"\n        size=\"small\"\n        [color]=\"disabled ? 'text-mild' : 'text-dark'\">\n      </cps-icon>\n    </span>\n    <div class=\"cps-expansion-panel-title\">{{ headerTitle }}</div>\n    <span class=\"cps-expansion-panel-chevron\" *ngIf=\"showChevron && !disabled\">\n      <cps-icon icon=\"chevron-down\" size=\"small\" color=\"text-dark\"> </cps-icon>\n    </span>\n  </div>\n  <div class=\"cps-expansion-panel-content\" #panelContentElem>\n    <div class=\"cps-expansion-panel-content-inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-expansion-panel{overflow:hidden;font-family:Source Sans Pro,sans-serif;line-height:20px;color:var(--cps-color-text-dark)}:host .cps-expansion-panel-header{border-bottom-color:transparent;display:flex;align-items:center;padding:10px 16px 10px 24px;font-size:16px;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .cps-expansion-panel-header:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-expansion-panel-header:active{background-color:var(--cps-color-highlight-active)}:host .cps-expansion-panel-header.disabled{pointer-events:none;color:var(--cps-color-text-mild)}:host .cps-expansion-panel-prefix-icon{display:flex;align-items:center;margin-right:12px;margin-bottom:2px}:host .cps-expansion-panel-prefix-icon cps-icon ::ng-deep .cps-icon{width:18px;height:18px}:host .cps-expansion-panel-title{flex:1 0 auto;display:inline-flex;font-weight:600}:host .cps-expansion-panel-chevron{width:16px;display:flex;align-items:center;transition-duration:.2s;margin-left:6px}:host .cps-expansion-panel-content{overflow:auto;color:var(--cps-color-text-dark);font-size:16px}:host .cps-expansion-panel-content-inner{padding:16px 24px}:host .cps-expansion-panel.expanded .cps-expansion-panel-content{max-height:500px}:host .cps-expansion-panel.expanded .cps-expansion-panel-chevron{transform:rotate(180deg)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$5.AnimationBuilder }, { type: i0.Renderer2 }], propDecorators: { headerTitle: [{
                 type: Input
             }], backgroundColor: [{
                 type: Input
@@ -9729,26 +9770,26 @@ class CpsSidebarMenuComponent {
     toggleSidebar() {
         this.isExpanded = !this.isExpanded;
     }
-}
-CpsSidebarMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsSidebarMenuComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
-CpsSidebarMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsSidebarMenuComponent, isStandalone: true, selector: "cps-sidebar-menu", inputs: { items: "items", isExpanded: "isExpanded", exactRoutes: "exactRoutes", height: "height" }, viewQueries: [{ propertyName: "allMenus", predicate: ["popupMenu"], descendants: true }], ngImport: i0, template: "<div\n  class=\"cps-sidebar-menu\"\n  [style.height]=\"height\"\n  [ngClass]=\"{ 'cps-sidebar-menu-collapsed': !isExpanded }\">\n  <ng-container *ngFor=\"let item of items\">\n    <a\n      *ngIf=\"item.url\"\n      class=\"cps-sidebar-menu-item\"\n      [routerLink]=\"[item.url]\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: exactRoutes }\"\n      [ngClass]=\"{ disabled: item.disabled }\">\n      <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n      <span\n        class=\"cps-sidebar-menu-item-label\"\n        [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n        {{ item.title }}\n      </span>\n    </a>\n    <ng-container *ngIf=\"!item.url\">\n      <cps-menu\n        #popupMenu\n        [items]=\"item.items || []\"\n        [header]=\"item.title\"\n        showTransitionOptions=\"0s\"\n        hideTransitionOptions=\"0s\"\n        [withArrow]=\"false\">\n      </cps-menu>\n      <div\n        (click)=\"toggleMenu($event, popupMenu)\"\n        class=\"cps-sidebar-menu-item menu-trigger\"\n        [ngClass]=\"{\n          active: isActive(item),\n          'menu-open': popupMenu.isVisible(),\n          disabled: item.disabled\n        }\">\n        <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n        <span\n          class=\"cps-sidebar-menu-item-label\"\n          [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n          {{ item.title }}\n        </span>\n      </div>\n    </ng-container>\n  </ng-container>\n  <div class=\"expand-area\" (click)=\"toggleSidebar()\">\n    <cps-icon icon=\"menu-shrink\" size=\"fill\"> </cps-icon>\n  </div>\n</div>\n", styles: [":host .cps-sidebar-menu{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 0 60px #0000001a;width:80px;transition-duration:.2s;overflow:hidden;position:relative}:host .cps-sidebar-menu .expand-area{cursor:pointer;display:flex;justify-content:center;height:24px;position:absolute;bottom:5%;transition-duration:.2s}:host .cps-sidebar-menu .expand-area:hover{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:80px;text-decoration:none;color:var(--cps-color-text-darkest);border-bottom:1px solid var(--cps-color-line-mid);-webkit-user-select:none;user-select:none}:host .cps-sidebar-menu .cps-sidebar-menu-item .cps-sidebar-menu-item-label{font-weight:600;font-size:11px;line-height:13px;width:80px;color:var(--cps-color-text-darkest);text-align:center}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:active:not(.active){background:var(--cps-color-highlight-active)}:host .cps-sidebar-menu .cps-sidebar-menu-item.active{background:var(--cps-color-calm);color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.active .cps-sidebar-menu-item-label{color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active){background:var(--cps-color-highlight-active);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-trigger{cursor:pointer}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled{cursor:default;pointer-events:none;color:var(--cps-color-text-light)}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled .cps-sidebar-menu-item-label{color:var(--cps-color-text-light)}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed{width:40px}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed .expand-area{transform:rotate(180deg)}\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: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], animations: [
-        trigger('onExpand', [
-            state('collapsed', style({
-                marginTop: '0',
-                opacity: '0',
-                height: '0',
-                visibility: 'hidden'
-            })),
-            state('expanded', style({
-                marginTop: '6px',
-                opacity: '1'
-            })),
-            transition('expanded <=> collapsed', [
-                animate('0.2s cubic-bezier(0.4, 0, 0.2, 1)')
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsSidebarMenuComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsSidebarMenuComponent, isStandalone: true, selector: "cps-sidebar-menu", inputs: { items: "items", isExpanded: "isExpanded", exactRoutes: "exactRoutes", height: "height" }, viewQueries: [{ propertyName: "allMenus", predicate: ["popupMenu"], descendants: true }], ngImport: i0, template: "<div\n  class=\"cps-sidebar-menu\"\n  [style.height]=\"height\"\n  [ngClass]=\"{ 'cps-sidebar-menu-collapsed': !isExpanded }\">\n  <ng-container *ngFor=\"let item of items\">\n    <a\n      *ngIf=\"item.url\"\n      class=\"cps-sidebar-menu-item\"\n      [routerLink]=\"[item.url]\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: exactRoutes }\"\n      [ngClass]=\"{ disabled: item.disabled }\">\n      <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n      <span\n        class=\"cps-sidebar-menu-item-label\"\n        [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n        {{ item.title }}\n      </span>\n    </a>\n    <ng-container *ngIf=\"!item.url\">\n      <cps-menu\n        #popupMenu\n        [items]=\"item.items || []\"\n        [header]=\"item.title\"\n        showTransitionOptions=\"0s\"\n        hideTransitionOptions=\"0s\"\n        [withArrow]=\"false\">\n      </cps-menu>\n      <div\n        (click)=\"toggleMenu($event, popupMenu)\"\n        class=\"cps-sidebar-menu-item menu-trigger\"\n        [ngClass]=\"{\n          active: isActive(item),\n          'menu-open': popupMenu.isVisible(),\n          disabled: item.disabled\n        }\">\n        <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n        <span\n          class=\"cps-sidebar-menu-item-label\"\n          [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n          {{ item.title }}\n        </span>\n      </div>\n    </ng-container>\n  </ng-container>\n  <div class=\"expand-area\" (click)=\"toggleSidebar()\">\n    <cps-icon icon=\"menu-shrink\" size=\"fill\"> </cps-icon>\n  </div>\n</div>\n", styles: [":host .cps-sidebar-menu{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 0 60px #0000001a;width:80px;transition-duration:.2s;overflow:hidden;position:relative}:host .cps-sidebar-menu .expand-area{cursor:pointer;display:flex;justify-content:center;height:24px;position:absolute;bottom:5%;transition-duration:.2s}:host .cps-sidebar-menu .expand-area:hover{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:80px;text-decoration:none;color:var(--cps-color-text-darkest);border-bottom:1px solid var(--cps-color-line-mid);-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-sidebar-menu .cps-sidebar-menu-item .cps-sidebar-menu-item-label{font-weight:600;font-size:11px;line-height:13px;width:80px;color:var(--cps-color-text-darkest);text-align:center}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:active:not(.active){background:var(--cps-color-highlight-active)}:host .cps-sidebar-menu .cps-sidebar-menu-item.active{background:var(--cps-color-calm);color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.active .cps-sidebar-menu-item-label{color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active){background:var(--cps-color-highlight-active);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-trigger{cursor:pointer}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled{cursor:default;pointer-events:none;color:var(--cps-color-text-light)}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled .cps-sidebar-menu-item-label{color:var(--cps-color-text-light)}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed{width:40px}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed .expand-area{transform:rotate(180deg)}\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: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], animations: [
+            trigger('onExpand', [
+                state('collapsed', style({
+                    marginTop: '0',
+                    opacity: '0',
+                    height: '0',
+                    visibility: 'hidden'
+                })),
+                state('expanded', style({
+                    marginTop: '6px',
+                    opacity: '1'
+                })),
+                transition('expanded <=> collapsed', [
+                    animate('0.2s cubic-bezier(0.4, 0, 0.2, 1)')
+                ])
             ])
-        ])
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsSidebarMenuComponent, decorators: [{
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsSidebarMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cps-sidebar-menu', standalone: true, imports: [CommonModule, CpsMenuComponent, CpsIconComponent, RouterModule], animations: [
                         trigger('onExpand', [
@@ -9766,8 +9807,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                                 animate('0.2s cubic-bezier(0.4, 0, 0.2, 1)')
                             ])
                         ])
-                    ], template: "<div\n  class=\"cps-sidebar-menu\"\n  [style.height]=\"height\"\n  [ngClass]=\"{ 'cps-sidebar-menu-collapsed': !isExpanded }\">\n  <ng-container *ngFor=\"let item of items\">\n    <a\n      *ngIf=\"item.url\"\n      class=\"cps-sidebar-menu-item\"\n      [routerLink]=\"[item.url]\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: exactRoutes }\"\n      [ngClass]=\"{ disabled: item.disabled }\">\n      <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n      <span\n        class=\"cps-sidebar-menu-item-label\"\n        [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n        {{ item.title }}\n      </span>\n    </a>\n    <ng-container *ngIf=\"!item.url\">\n      <cps-menu\n        #popupMenu\n        [items]=\"item.items || []\"\n        [header]=\"item.title\"\n        showTransitionOptions=\"0s\"\n        hideTransitionOptions=\"0s\"\n        [withArrow]=\"false\">\n      </cps-menu>\n      <div\n        (click)=\"toggleMenu($event, popupMenu)\"\n        class=\"cps-sidebar-menu-item menu-trigger\"\n        [ngClass]=\"{\n          active: isActive(item),\n          'menu-open': popupMenu.isVisible(),\n          disabled: item.disabled\n        }\">\n        <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n        <span\n          class=\"cps-sidebar-menu-item-label\"\n          [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n          {{ item.title }}\n        </span>\n      </div>\n    </ng-container>\n  </ng-container>\n  <div class=\"expand-area\" (click)=\"toggleSidebar()\">\n    <cps-icon icon=\"menu-shrink\" size=\"fill\"> </cps-icon>\n  </div>\n</div>\n", styles: [":host .cps-sidebar-menu{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 0 60px #0000001a;width:80px;transition-duration:.2s;overflow:hidden;position:relative}:host .cps-sidebar-menu .expand-area{cursor:pointer;display:flex;justify-content:center;height:24px;position:absolute;bottom:5%;transition-duration:.2s}:host .cps-sidebar-menu .expand-area:hover{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:80px;text-decoration:none;color:var(--cps-color-text-darkest);border-bottom:1px solid var(--cps-color-line-mid);-webkit-user-select:none;user-select:none}:host .cps-sidebar-menu .cps-sidebar-menu-item .cps-sidebar-menu-item-label{font-weight:600;font-size:11px;line-height:13px;width:80px;color:var(--cps-color-text-darkest);text-align:center}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:active:not(.active){background:var(--cps-color-highlight-active)}:host .cps-sidebar-menu .cps-sidebar-menu-item.active{background:var(--cps-color-calm);color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.active .cps-sidebar-menu-item-label{color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active){background:var(--cps-color-highlight-active);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-trigger{cursor:pointer}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled{cursor:default;pointer-events:none;color:var(--cps-color-text-light)}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled .cps-sidebar-menu-item-label{color:var(--cps-color-text-light)}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed{width:40px}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed .expand-area{transform:rotate(180deg)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.Router }]; }, propDecorators: { items: [{
+                    ], template: "<div\n  class=\"cps-sidebar-menu\"\n  [style.height]=\"height\"\n  [ngClass]=\"{ 'cps-sidebar-menu-collapsed': !isExpanded }\">\n  <ng-container *ngFor=\"let item of items\">\n    <a\n      *ngIf=\"item.url\"\n      class=\"cps-sidebar-menu-item\"\n      [routerLink]=\"[item.url]\"\n      routerLinkActive=\"active\"\n      [routerLinkActiveOptions]=\"{ exact: exactRoutes }\"\n      [ngClass]=\"{ disabled: item.disabled }\">\n      <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n      <span\n        class=\"cps-sidebar-menu-item-label\"\n        [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n        {{ item.title }}\n      </span>\n    </a>\n    <ng-container *ngIf=\"!item.url\">\n      <cps-menu\n        #popupMenu\n        [items]=\"item.items || []\"\n        [header]=\"item.title\"\n        showTransitionOptions=\"0s\"\n        hideTransitionOptions=\"0s\"\n        [withArrow]=\"false\">\n      </cps-menu>\n      <div\n        (click)=\"toggleMenu($event, popupMenu)\"\n        class=\"cps-sidebar-menu-item menu-trigger\"\n        [ngClass]=\"{\n          active: isActive(item),\n          'menu-open': popupMenu.isVisible(),\n          disabled: item.disabled\n        }\">\n        <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n        <span\n          class=\"cps-sidebar-menu-item-label\"\n          [@onExpand]=\"isExpanded ? 'expanded' : 'collapsed'\">\n          {{ item.title }}\n        </span>\n      </div>\n    </ng-container>\n  </ng-container>\n  <div class=\"expand-area\" (click)=\"toggleSidebar()\">\n    <cps-icon icon=\"menu-shrink\" size=\"fill\"> </cps-icon>\n  </div>\n</div>\n", styles: [":host .cps-sidebar-menu{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 0 60px #0000001a;width:80px;transition-duration:.2s;overflow:hidden;position:relative}:host .cps-sidebar-menu .expand-area{cursor:pointer;display:flex;justify-content:center;height:24px;position:absolute;bottom:5%;transition-duration:.2s}:host .cps-sidebar-menu .expand-area:hover{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:80px;text-decoration:none;color:var(--cps-color-text-darkest);border-bottom:1px solid var(--cps-color-line-mid);-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-sidebar-menu .cps-sidebar-menu-item .cps-sidebar-menu-item-label{font-weight:600;font-size:11px;line-height:13px;width:80px;color:var(--cps-color-text-darkest);text-align:center}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:active:not(.active){background:var(--cps-color-highlight-active)}:host .cps-sidebar-menu .cps-sidebar-menu-item.active{background:var(--cps-color-calm);color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.active .cps-sidebar-menu-item-label{color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active){background:var(--cps-color-highlight-active);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-trigger{cursor:pointer}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled{cursor:default;pointer-events:none;color:var(--cps-color-text-light)}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled .cps-sidebar-menu-item-label{color:var(--cps-color-text-light)}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed{width:40px}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed .expand-area{transform:rotate(180deg)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.Router }], propDecorators: { items: [{
                 type: Input
             }], isExpanded: [{
                 type: Input
@@ -10004,17 +10045,17 @@ class CpsTextareaComponent {
     focus() {
         this._elementRef?.nativeElement?.querySelector('textarea')?.focus();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTextareaComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", 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", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred" }, ngImport: i0, template: "<div class=\"cps-textarea-container\" [ngStyle]=\"{ width: cvtWidth }\">\n  <div\n    class=\"cps-textarea-label\"\n    [ngClass]=\"{ 'cps-textarea-label-disabled': disabled }\"\n    *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-textarea-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\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      spellcheck=\"false\"\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\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-textarea-error\">\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:var(--cps-color-error)!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:#fff;padding:.375rem .75rem;line-height:1.5;min-height:38px;border:1px solid var(--cps-color-line-light);transition-property:border-color;transition-duration:.2s;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{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-textarea-container .cps-textarea-label .cps-textarea-label-info-circle{margin-left:8px}:host .cps-textarea-container .cps-textarea-label-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"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }] }); }
 }
-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", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred" }, ngImport: i0, template: "<div class=\"cps-textarea-container\" [ngStyle]=\"{ width: cvtWidth }\">\n  <div\n    class=\"cps-textarea-label\"\n    [ngClass]=\"{ 'cps-textarea-label-disabled': disabled }\"\n    *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-textarea-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\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      spellcheck=\"false\"\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\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-textarea-error\">\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:var(--cps-color-error)!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-line-light);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{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-textarea-container .cps-textarea-label .cps-textarea-label-info-circle{margin-left:8px}:host .cps-textarea-container .cps-textarea-label-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"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTextareaComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'cps-textarea', imports: [CommonModule, CpsIconComponent, CpsInfoCircleComponent], template: "<div class=\"cps-textarea-container\" [ngStyle]=\"{ width: cvtWidth }\">\n  <div\n    class=\"cps-textarea-label\"\n    [ngClass]=\"{ 'cps-textarea-label-disabled': disabled }\"\n    *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-textarea-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\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      spellcheck=\"false\"\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\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-textarea-error\">\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:var(--cps-color-error)!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-line-light);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{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-textarea-container .cps-textarea-label .cps-textarea-label-info-circle{margin-left:8px}:host .cps-textarea-container .cps-textarea-label-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: [{
+            args: [{ standalone: true, selector: 'cps-textarea', imports: [CommonModule, CpsIconComponent, CpsInfoCircleComponent], template: "<div class=\"cps-textarea-container\" [ngStyle]=\"{ width: cvtWidth }\">\n  <div\n    class=\"cps-textarea-label\"\n    [ngClass]=\"{ 'cps-textarea-label-disabled': disabled }\"\n    *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-textarea-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\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      spellcheck=\"false\"\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\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-textarea-error\">\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:var(--cps-color-error)!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:#fff;padding:.375rem .75rem;line-height:1.5;min-height:38px;border:1px solid var(--cps-color-line-light);transition-property:border-color;transition-duration:.2s;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{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-textarea-container .cps-textarea-label .cps-textarea-label-info-circle{margin-left:8px}:host .cps-textarea-container .cps-textarea-label-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: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: i0.ElementRef }]; }, propDecorators: { label: [{
+                }] }, { type: i0.ElementRef }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -10115,10 +10156,10 @@ class CpsTabComponent {
         this.badgeTooltip = '';
         this.active = false;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsTabComponent, isStandalone: true, selector: "cps-tab", inputs: { label: "label", icon: "icon", disabled: "disabled", tooltipText: "tooltipText", tooltipContentClass: "tooltipContentClass", tooltipMaxWidth: "tooltipMaxWidth", tooltipPersistent: "tooltipPersistent", badgeValue: "badgeValue", badgeTooltip: "badgeTooltip" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-CpsTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CpsTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTabComponent, isStandalone: true, selector: "cps-tab", inputs: { label: "label", icon: "icon", disabled: "disabled", tooltipText: "tooltipText", tooltipContentClass: "tooltipContentClass", tooltipMaxWidth: "tooltipMaxWidth", tooltipPersistent: "tooltipPersistent", badgeValue: "badgeValue", badgeTooltip: "badgeTooltip" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTabComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule], selector: 'cps-tab', template: "<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n" }]
         }], propDecorators: { label: [{
@@ -10338,34 +10379,36 @@ class CpsTabGroupComponent {
                 parseFloat(style.borderRightWidth);
         return width;
     }
-}
-CpsTabGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CpsTabGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTabGroupComponent, isStandalone: true, selector: "cps-tab-group", inputs: { selectedIndex: "selectedIndex", isSubTabs: "isSubTabs", alignment: "alignment", contentWrapClass: "contentWrapClass", headerClass: "headerClass", stretched: "stretched", animationType: "animationType", navButtonsBackground: "navButtonsBackground", tabsBackground: "tabsBackground" }, outputs: { beforeTabChanged: "beforeTabChanged", afterTabChanged: "afterTabChanged" }, queries: [{ propertyName: "tabs", predicate: CpsTabComponent }], viewQueries: [{ propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "backBtn", first: true, predicate: ["backBtn"], descendants: true }, { propertyName: "forwardBtn", first: true, predicate: ["forwardBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cps-tabs\"\n  [class]=\"headerClass\"\n  [ngClass]=\"{\n    'cps-tabs-subtabs': isSubTabs,\n    'cps-tabs-center-aligned': alignment === 'center',\n    'cps-tabs-right-aligned': alignment === 'right',\n    'cps-tabs-stretched': stretched\n  }\"\n  [ngStyle]=\"{ 'background-color': tabsBackground }\">\n  <div\n    class=\"nav-btn nav-btn-back\"\n    [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n    *ngIf=\"!backBtnVisible\"\n    #backBtn\n    (click)=\"navBackward()\">\n    <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n  </div>\n  <ul #tabsList class=\"cps-tabs-list\">\n    <ng-container *ngFor=\"let tab of tabs; let tabIndex = index\">\n      <li\n        *ngIf=\"tab.tooltipText\"\n        class=\"cps-tab\"\n        (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n        [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\"\n        [cpsTooltip]=\"tab.tooltipText\"\n        tooltipOpenDelay=\"1000\"\n        tooltipCloseDelay=\"0\"\n        tooltipPosition=\"bottom\"\n        [tooltipMaxWidth]=\"tab.tooltipMaxWidth\"\n        [tooltipPersistent]=\"tab.tooltipPersistent\"\n        [tooltipContentClass]=\"tab.tooltipContentClass\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            tabHeaderTemplate;\n            context: {\n              tab: tab\n            }\n          \"></ng-container>\n      </li>\n      <li\n        *ngIf=\"!tab.tooltipText\"\n        class=\"cps-tab\"\n        (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n        [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            tabHeaderTemplate;\n            context: {\n              tab: tab\n            }\n          \"></ng-container>\n      </li>\n    </ng-container>\n  </ul>\n  <div\n    class=\"nav-btn nav-btn-forward\"\n    [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n    *ngIf=\"!forwardBtnVisible\"\n    #forwardBtn\n    (click)=\"navForward()\">\n    <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n  </div>\n</div>\n<div\n  class=\"cps-tab-content-wrap\"\n  [class]=\"contentWrapClass\"\n  [ngClass]=\"{\n    'cps-tab-content-wrap-subtabs': isSubTabs\n  }\">\n  <ng-container *ngFor=\"let tab of tabs\">\n    <div class=\"cps-tab-content\" *ngIf=\"tab.active\">\n      <div\n        [@slideInOut]=\"animationState\"\n        *ngIf=\"animationType === 'slide'\"\n        class=\"cps-tab-content-inner\">\n        <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n      </div>\n      <div\n        [@fadeInOut]=\"animationState\"\n        *ngIf=\"animationType === 'fade'\"\n        class=\"cps-tab-content-inner\">\n        <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #tabHeaderTemplate let-tab=\"tab\">\n  <cps-icon *ngIf=\"tab.icon\" class=\"cps-tab-icon\" [icon]=\"tab.icon\"> </cps-icon>\n  <a class=\"cps-tab-link\">{{ tab.label }}</a>\n  <ng-container *ngIf=\"tab.badgeValue\">\n    <div\n      *ngIf=\"tab.badgeTooltip\"\n      class=\"cps-tab-badge\"\n      [cpsTooltip]=\"tab.badgeTooltip\">\n      <span>{{ tab.badgeValue }}</span>\n    </div>\n    <div *ngIf=\"!tab.badgeTooltip\" class=\"cps-tab-badge\">\n      <span>{{ tab.badgeValue }}</span>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: [":host{background-color:inherit;margin:0!important;display:flex;flex-direction:column;max-width:100%}:host .cps-tabs{display:flex;position:relative}:host .cps-tabs .nav-btn{display:flex;justify-content:center;align-items:center;width:32px;cursor:pointer;position:absolute;height:100%}:host .cps-tabs .nav-btn:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-tabs .nav-btn-back{left:0;box-shadow:2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-back cps-icon{transform:rotate(90deg)}:host .cps-tabs .nav-btn-forward{right:0;box-shadow:-2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-forward cps-icon{transform:rotate(270deg)}:host .cps-tabs .cps-tabs-list{display:flex;list-style:none;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;overscroll-behavior:contain auto;-ms-overflow-style:none;scrollbar-width:none}:host .cps-tabs .cps-tabs-list .cps-tab{display:inline-flex;align-items:center;justify-content:center;min-width:150px;padding:0 24px;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:500;font-size:15px;line-height:20px;color:var(--cps-color-text-dark);opacity:1;cursor:pointer;border-bottom:3px solid transparent;transition:border-bottom .2s}:host .cps-tabs .cps-tabs-list .cps-tab.active:not(.disabled){color:var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab.disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-link{text-decoration:none;padding:10px;color:inherit}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge{min-width:20px;padding:0 3px;height:20px;border-radius:50%;background-color:var(--cps-color-surprise);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}:host .cps-tabs .cps-tabs-list::-webkit-scrollbar{display:none}:host .cps-tabs.cps-tabs-center-aligned{justify-content:center}:host .cps-tabs.cps-tabs-right-aligned{justify-content:flex-end}:host .cps-tabs.cps-tabs-stretched ul{flex-grow:1}:host .cps-tabs.cps-tabs-stretched ul li{flex-grow:1}:host .cps-tabs:not(.cps-tabs-subtabs){border-bottom:1px solid rgba(0,0,0,.12)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active:not(.disabled){border-bottom:3px solid var(--cps-color-surprise)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active.disabled{border-bottom:3px solid var(--cps-color-line-dark)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:hover:not(:active,.active,.disabled){border-bottom:3px solid var(--cps-color-line-light)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:active:not(.disabled){border-bottom:3px solid var(--cps-color-line-mid)}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab{height:33px;background-color:#d7d7d759}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab.active{background-color:#fff}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:hover:not(.disabled){color:var(--cps-color-calm)}:host .cps-tab-content-wrap{display:flex;position:relative;min-height:100px;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark);flex:1;border-bottom:none;overflow:hidden}:host .cps-tab-content-wrap .cps-tab-content{display:block;position:relative;overflow-x:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;inset:0;outline:0}:host .cps-tab-content-wrap .cps-tab-content .cps-tab-content-inner{height:100%;overflow:auto}:host .cps-tab-content-wrap.cps-tab-content-wrap-subtabs{background-color:#fff}\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: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass"] }], animations: [
-        trigger('slideInOut', [
-            state('slideLeft', style({ transform: 'translateX(0)' })),
-            state('slideRight', style({ transform: 'translateX(0)' })),
-            transition('* => slideLeft', [
-                style({ transform: 'translateX(-100%)' }),
-                animate('200ms ease-in')
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsTabGroupComponent, isStandalone: true, selector: "cps-tab-group", inputs: { selectedIndex: "selectedIndex", isSubTabs: "isSubTabs", alignment: "alignment", contentWrapClass: "contentWrapClass", headerClass: "headerClass", stretched: "stretched", animationType: "animationType", navButtonsBackground: "navButtonsBackground", tabsBackground: "tabsBackground" }, outputs: { beforeTabChanged: "beforeTabChanged", afterTabChanged: "afterTabChanged" }, queries: [{ propertyName: "tabs", predicate: CpsTabComponent }], viewQueries: [{ propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "backBtn", first: true, predicate: ["backBtn"], descendants: true }, { propertyName: "forwardBtn", first: true, predicate: ["forwardBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cps-tabs\"\n  [class]=\"headerClass\"\n  [ngClass]=\"{\n    'cps-tabs-subtabs': isSubTabs,\n    'cps-tabs-center-aligned': alignment === 'center',\n    'cps-tabs-right-aligned': alignment === 'right',\n    'cps-tabs-stretched': stretched\n  }\"\n  [ngStyle]=\"{ 'background-color': tabsBackground }\">\n  <div\n    class=\"nav-btn nav-btn-back\"\n    [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n    *ngIf=\"!backBtnVisible\"\n    #backBtn\n    (click)=\"navBackward()\">\n    <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n  </div>\n  <ul #tabsList class=\"cps-tabs-list\">\n    <ng-container *ngFor=\"let tab of tabs; let tabIndex = index\">\n      <li\n        *ngIf=\"tab.tooltipText\"\n        class=\"cps-tab\"\n        (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n        [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\"\n        [cpsTooltip]=\"tab.tooltipText\"\n        tooltipOpenDelay=\"1000\"\n        tooltipCloseDelay=\"0\"\n        tooltipPosition=\"bottom\"\n        [tooltipMaxWidth]=\"tab.tooltipMaxWidth\"\n        [tooltipPersistent]=\"tab.tooltipPersistent\"\n        [tooltipContentClass]=\"tab.tooltipContentClass\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            tabHeaderTemplate;\n            context: {\n              tab: tab\n            }\n          \"></ng-container>\n      </li>\n      <li\n        *ngIf=\"!tab.tooltipText\"\n        class=\"cps-tab\"\n        (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n        [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            tabHeaderTemplate;\n            context: {\n              tab: tab\n            }\n          \"></ng-container>\n      </li>\n    </ng-container>\n  </ul>\n  <div\n    class=\"nav-btn nav-btn-forward\"\n    [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n    *ngIf=\"!forwardBtnVisible\"\n    #forwardBtn\n    (click)=\"navForward()\">\n    <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n  </div>\n</div>\n<div\n  class=\"cps-tab-content-wrap\"\n  [class]=\"contentWrapClass\"\n  [ngClass]=\"{\n    'cps-tab-content-wrap-subtabs': isSubTabs\n  }\">\n  <ng-container *ngFor=\"let tab of tabs\">\n    <div class=\"cps-tab-content\" *ngIf=\"tab.active\">\n      <div\n        [@slideInOut]=\"animationState\"\n        *ngIf=\"animationType === 'slide'\"\n        class=\"cps-tab-content-inner\">\n        <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n      </div>\n      <div\n        [@fadeInOut]=\"animationState\"\n        *ngIf=\"animationType === 'fade'\"\n        class=\"cps-tab-content-inner\">\n        <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #tabHeaderTemplate let-tab=\"tab\">\n  <cps-icon *ngIf=\"tab.icon\" class=\"cps-tab-icon\" [icon]=\"tab.icon\"> </cps-icon>\n  <a class=\"cps-tab-link\">{{ tab.label }}</a>\n  <ng-container *ngIf=\"tab.badgeValue\">\n    <div\n      *ngIf=\"tab.badgeTooltip\"\n      class=\"cps-tab-badge\"\n      [cpsTooltip]=\"tab.badgeTooltip\">\n      <span>{{ tab.badgeValue }}</span>\n    </div>\n    <div *ngIf=\"!tab.badgeTooltip\" class=\"cps-tab-badge\">\n      <span>{{ tab.badgeValue }}</span>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: [":host{background-color:inherit;margin:0!important;display:flex;flex-direction:column;max-width:100%}:host .cps-tabs{display:flex;position:relative}:host .cps-tabs .nav-btn{display:flex;justify-content:center;align-items:center;width:32px;cursor:pointer;position:absolute;height:100%}:host .cps-tabs .nav-btn:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-tabs .nav-btn-back{left:0;box-shadow:2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-back cps-icon{transform:rotate(90deg)}:host .cps-tabs .nav-btn-forward{right:0;box-shadow:-2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-forward cps-icon{transform:rotate(270deg)}:host .cps-tabs .cps-tabs-list{display:flex;list-style:none;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;overscroll-behavior:contain auto;-ms-overflow-style:none;scrollbar-width:none}:host .cps-tabs .cps-tabs-list .cps-tab{display:inline-flex;align-items:center;justify-content:center;min-width:150px;padding:0 24px;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:500;font-size:15px;line-height:20px;color:var(--cps-color-text-dark);opacity:1;cursor:pointer;border-bottom:3px solid transparent;transition:border-bottom .2s}:host .cps-tabs .cps-tabs-list .cps-tab.active:not(.disabled){color:var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab.disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-link{text-decoration:none;padding:10px;color:inherit}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge{min-width:20px;padding:0 3px;height:20px;border-radius:50%;background-color:var(--cps-color-surprise);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}:host .cps-tabs .cps-tabs-list::-webkit-scrollbar{display:none}:host .cps-tabs.cps-tabs-center-aligned{justify-content:center}:host .cps-tabs.cps-tabs-right-aligned{justify-content:flex-end}:host .cps-tabs.cps-tabs-stretched ul{flex-grow:1}:host .cps-tabs.cps-tabs-stretched ul li{flex-grow:1}:host .cps-tabs:not(.cps-tabs-subtabs){border-bottom:1px solid rgba(0,0,0,.12)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active:not(.disabled){border-bottom:3px solid var(--cps-color-surprise)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active.disabled{border-bottom:3px solid var(--cps-color-line-dark)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:hover:not(:active,.active,.disabled){border-bottom:3px solid var(--cps-color-line-light)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:active:not(.disabled){border-bottom:3px solid var(--cps-color-line-mid)}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab{height:33px;background-color:#d7d7d759}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab.active{background-color:#fff}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:hover:not(.disabled){color:var(--cps-color-calm)}:host .cps-tab-content-wrap{display:flex;position:relative;min-height:100px;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark);flex:1;border-bottom:none;overflow:hidden}:host .cps-tab-content-wrap .cps-tab-content{display:block;position:relative;overflow-x:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;inset:0;outline:0}:host .cps-tab-content-wrap .cps-tab-content .cps-tab-content-inner{height:100%;overflow:auto}:host .cps-tab-content-wrap.cps-tab-content-wrap-subtabs{background-color:#fff}\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: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass"] }], animations: [
+            trigger('slideInOut', [
+                state('slideLeft', style({ transform: 'translateX(0)' })),
+                state('slideRight', style({ transform: 'translateX(0)' })),
+                transition('* => slideLeft', [
+                    style({ transform: 'translateX(-100%)' }),
+                    animate('200ms ease-in')
+                ]),
+                transition('* => slideRight', [
+                    style({ transform: 'translateX(100%)' }),
+                    animate('200ms ease-in')
+                ]),
+                transition('void => *', animate(0))
             ]),
-            transition('* => slideRight', [
-                style({ transform: 'translateX(100%)' }),
-                animate('200ms ease-in')
+            trigger('fadeInOut', [
+                state('fadeIn', style({ opacity: 1 })),
+                state('fadeOut', style({ opacity: 0 })),
+                transition('fadeOut => fadeIn', [
+                    style({ opacity: 0 }),
+                    animate('100ms ease-in')
+                ]),
+                transition('fadeIn => fadeOut', [
+                    animate('0ms ease-out', style({ opacity: 0 }))
+                ]),
+                transition('void => *', animate(0))
             ])
-        ]),
-        trigger('fadeInOut', [
-            state('fadeIn', style({ opacity: 1 })),
-            state('fadeOut', style({ opacity: 0 })),
-            transition('fadeOut => fadeIn', [
-                style({ opacity: 0 }),
-                animate('100ms ease-in')
-            ]),
-            transition('fadeIn => fadeOut', [
-                animate('0ms ease-out', style({ opacity: 0 }))
-            ])
-        ])
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTabGroupComponent, decorators: [{
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTabGroupComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         CommonModule,
@@ -10383,7 +10426,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             transition('* => slideRight', [
                                 style({ transform: 'translateX(100%)' }),
                                 animate('200ms ease-in')
-                            ])
+                            ]),
+                            transition('void => *', animate(0))
                         ]),
                         trigger('fadeInOut', [
                             state('fadeIn', style({ opacity: 1 })),
@@ -10394,10 +10438,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             ]),
                             transition('fadeIn => fadeOut', [
                                 animate('0ms ease-out', style({ opacity: 0 }))
-                            ])
+                            ]),
+                            transition('void => *', animate(0))
                         ])
                     ], template: "<div\n  class=\"cps-tabs\"\n  [class]=\"headerClass\"\n  [ngClass]=\"{\n    'cps-tabs-subtabs': isSubTabs,\n    'cps-tabs-center-aligned': alignment === 'center',\n    'cps-tabs-right-aligned': alignment === 'right',\n    'cps-tabs-stretched': stretched\n  }\"\n  [ngStyle]=\"{ 'background-color': tabsBackground }\">\n  <div\n    class=\"nav-btn nav-btn-back\"\n    [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n    *ngIf=\"!backBtnVisible\"\n    #backBtn\n    (click)=\"navBackward()\">\n    <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n  </div>\n  <ul #tabsList class=\"cps-tabs-list\">\n    <ng-container *ngFor=\"let tab of tabs; let tabIndex = index\">\n      <li\n        *ngIf=\"tab.tooltipText\"\n        class=\"cps-tab\"\n        (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n        [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\"\n        [cpsTooltip]=\"tab.tooltipText\"\n        tooltipOpenDelay=\"1000\"\n        tooltipCloseDelay=\"0\"\n        tooltipPosition=\"bottom\"\n        [tooltipMaxWidth]=\"tab.tooltipMaxWidth\"\n        [tooltipPersistent]=\"tab.tooltipPersistent\"\n        [tooltipContentClass]=\"tab.tooltipContentClass\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            tabHeaderTemplate;\n            context: {\n              tab: tab\n            }\n          \"></ng-container>\n      </li>\n      <li\n        *ngIf=\"!tab.tooltipText\"\n        class=\"cps-tab\"\n        (click)=\"!tab.disabled ? onTabClick(tabIndex) : ''\"\n        [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            tabHeaderTemplate;\n            context: {\n              tab: tab\n            }\n          \"></ng-container>\n      </li>\n    </ng-container>\n  </ul>\n  <div\n    class=\"nav-btn nav-btn-forward\"\n    [ngStyle]=\"{ 'background-color': navButtonsBackground }\"\n    *ngIf=\"!forwardBtnVisible\"\n    #forwardBtn\n    (click)=\"navForward()\">\n    <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n  </div>\n</div>\n<div\n  class=\"cps-tab-content-wrap\"\n  [class]=\"contentWrapClass\"\n  [ngClass]=\"{\n    'cps-tab-content-wrap-subtabs': isSubTabs\n  }\">\n  <ng-container *ngFor=\"let tab of tabs\">\n    <div class=\"cps-tab-content\" *ngIf=\"tab.active\">\n      <div\n        [@slideInOut]=\"animationState\"\n        *ngIf=\"animationType === 'slide'\"\n        class=\"cps-tab-content-inner\">\n        <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n      </div>\n      <div\n        [@fadeInOut]=\"animationState\"\n        *ngIf=\"animationType === 'fade'\"\n        class=\"cps-tab-content-inner\">\n        <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #tabHeaderTemplate let-tab=\"tab\">\n  <cps-icon *ngIf=\"tab.icon\" class=\"cps-tab-icon\" [icon]=\"tab.icon\"> </cps-icon>\n  <a class=\"cps-tab-link\">{{ tab.label }}</a>\n  <ng-container *ngIf=\"tab.badgeValue\">\n    <div\n      *ngIf=\"tab.badgeTooltip\"\n      class=\"cps-tab-badge\"\n      [cpsTooltip]=\"tab.badgeTooltip\">\n      <span>{{ tab.badgeValue }}</span>\n    </div>\n    <div *ngIf=\"!tab.badgeTooltip\" class=\"cps-tab-badge\">\n      <span>{{ tab.badgeValue }}</span>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: [":host{background-color:inherit;margin:0!important;display:flex;flex-direction:column;max-width:100%}:host .cps-tabs{display:flex;position:relative}:host .cps-tabs .nav-btn{display:flex;justify-content:center;align-items:center;width:32px;cursor:pointer;position:absolute;height:100%}:host .cps-tabs .nav-btn:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-tabs .nav-btn-back{left:0;box-shadow:2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-back cps-icon{transform:rotate(90deg)}:host .cps-tabs .nav-btn-forward{right:0;box-shadow:-2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-forward cps-icon{transform:rotate(270deg)}:host .cps-tabs .cps-tabs-list{display:flex;list-style:none;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;overscroll-behavior:contain auto;-ms-overflow-style:none;scrollbar-width:none}:host .cps-tabs .cps-tabs-list .cps-tab{display:inline-flex;align-items:center;justify-content:center;min-width:150px;padding:0 24px;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:500;font-size:15px;line-height:20px;color:var(--cps-color-text-dark);opacity:1;cursor:pointer;border-bottom:3px solid transparent;transition:border-bottom .2s}:host .cps-tabs .cps-tabs-list .cps-tab.active:not(.disabled){color:var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab.disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-link{text-decoration:none;padding:10px;color:inherit}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-badge{min-width:20px;padding:0 3px;height:20px;border-radius:50%;background-color:var(--cps-color-surprise);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}:host .cps-tabs .cps-tabs-list::-webkit-scrollbar{display:none}:host .cps-tabs.cps-tabs-center-aligned{justify-content:center}:host .cps-tabs.cps-tabs-right-aligned{justify-content:flex-end}:host .cps-tabs.cps-tabs-stretched ul{flex-grow:1}:host .cps-tabs.cps-tabs-stretched ul li{flex-grow:1}:host .cps-tabs:not(.cps-tabs-subtabs){border-bottom:1px solid rgba(0,0,0,.12)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active:not(.disabled){border-bottom:3px solid var(--cps-color-surprise)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active.disabled{border-bottom:3px solid var(--cps-color-line-dark)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:hover:not(:active,.active,.disabled){border-bottom:3px solid var(--cps-color-line-light)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:active:not(.disabled){border-bottom:3px solid var(--cps-color-line-mid)}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab{height:33px;background-color:#d7d7d759}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab.active{background-color:#fff}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:hover:not(.disabled){color:var(--cps-color-calm)}:host .cps-tab-content-wrap{display:flex;position:relative;min-height:100px;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark);flex:1;border-bottom:none;overflow:hidden}:host .cps-tab-content-wrap .cps-tab-content{display:block;position:relative;overflow-x:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;inset:0;outline:0}:host .cps-tab-content-wrap .cps-tab-content .cps-tab-content-inner{height:100%;overflow:auto}:host .cps-tab-content-wrap.cps-tab-content-wrap-subtabs{background-color:#fff}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedIndex: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selectedIndex: [{
                 type: Input
             }], isSubTabs: [{
                 type: Input
@@ -10721,10 +10766,10 @@ class CpsTimepickerComponent {
     _getRange(startFrom, until) {
         return Array.from({ length: until + 1 - startFrom }, (_, k) => k + startFrom);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTimepickerComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsTimepickerComponent, isStandalone: true, selector: "cps-timepicker", inputs: { label: "label", disabled: "disabled", use24HourTime: "use24HourTime", withSeconds: "withSeconds", hint: "hint", hideDetails: "hideDetails", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", value: "value" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "hoursField", first: true, predicate: ["hoursField"], descendants: true }, { propertyName: "minutesField", first: true, predicate: ["minutesField"], descendants: true }, { propertyName: "secondsField", first: true, predicate: ["secondsField"], descendants: true }], ngImport: i0, template: "<div class=\"cps-timepicker\">\n  <div\n    class=\"cps-timepicker-label\"\n    [ngClass]=\"{ 'cps-timepicker-label-disabled': disabled }\"\n    *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-timepicker-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 class=\"cps-timepicker-body\">\n    <cps-autocomplete\n      #hoursField\n      (keypress)=\"numberOnly($event)\"\n      width=\"60\"\n      [options]=\"hoursOptions\"\n      [withOptionsAliases]=\"!use24HourTime\"\n      [useOptionsAliasesWhenNoMatch]=\"true\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.hours\"\n      (valueChanged)=\"updateHours($event)\"\n      [externalError]=\"hoursError\"\n      placeholder=\"HH\"></cps-autocomplete>\n    <span class=\"cps-timepicker-delimiter\">:</span>\n    <cps-autocomplete\n      #minutesField\n      (keypress)=\"numberOnly($event)\"\n      width=\"60\"\n      [options]=\"minutesOptions\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.minutes\"\n      (valueChanged)=\"updateMinutes($event)\"\n      [externalError]=\"minutesError\"\n      placeholder=\"MM\"></cps-autocomplete>\n    <span *ngIf=\"withSeconds\" class=\"cps-timepicker-delimiter\">:</span>\n    <cps-autocomplete\n      *ngIf=\"withSeconds\"\n      #secondsField\n      (keypress)=\"numberOnly($event)\"\n      width=\"60\"\n      [options]=\"secondsOptions\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.seconds\"\n      (valueChanged)=\"updateSeconds($event)\"\n      [externalError]=\"secondsError\"\n      placeholder=\"SS\"></cps-autocomplete>\n    <cps-button-toggle\n      *ngIf=\"!use24HourTime\"\n      class=\"cps-timepicker-am-pm-selector\"\n      [options]=\"dayPeriodOptions\"\n      [disabled]=\"disabled\"\n      [value]=\"value?.dayPeriod || 'AM'\"\n      (valueChanged)=\"updateDayPeriod($event)\">\n    </cps-button-toggle>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-timepicker-hint\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-timepicker-error\">\n    {{ error }}\n  </div>\n</div>\n", styles: [":host .cps-timepicker{display:flex;flex-direction:column}:host .cps-timepicker .cps-timepicker-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-timepicker .cps-timepicker-label-info-circle{margin-left:8px}:host .cps-timepicker .cps-timepicker-label-disabled{color:var(--cps-color-text-mild)}:host .cps-timepicker-body{display:flex;flex-direction:row}:host .cps-timepicker-body .cps-timepicker-am-pm-selector{margin-left:10px;margin-top:0}:host .cps-timepicker-body .cps-timepicker-delimiter{color:var(--cps-color-text-lightest);font-size:24px;margin:0 10px}:host .cps-timepicker .cps-timepicker-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-timepicker .cps-timepicker-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}\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: "ngmodule", type: FormsModule }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "value"], outputs: ["valueChanged", "blurred"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }] }); }
 }
-CpsTimepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTimepickerComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-CpsTimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTimepickerComponent, isStandalone: true, selector: "cps-timepicker", inputs: { label: "label", disabled: "disabled", use24HourTime: "use24HourTime", withSeconds: "withSeconds", hint: "hint", hideDetails: "hideDetails", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", value: "value" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "hoursField", first: true, predicate: ["hoursField"], descendants: true }, { propertyName: "minutesField", first: true, predicate: ["minutesField"], descendants: true }, { propertyName: "secondsField", first: true, predicate: ["secondsField"], descendants: true }], ngImport: i0, template: "<div class=\"cps-timepicker\">\n  <div\n    class=\"cps-timepicker-label\"\n    [ngClass]=\"{ 'cps-timepicker-label-disabled': disabled }\"\n    *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-timepicker-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 class=\"cps-timepicker-body\">\n    <cps-autocomplete\n      #hoursField\n      (keypress)=\"numberOnly($event)\"\n      width=\"60\"\n      [options]=\"hoursOptions\"\n      [withOptionsAliases]=\"!use24HourTime\"\n      [useOptionsAliasesWhenNoMatch]=\"true\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.hours\"\n      (valueChanged)=\"updateHours($event)\"\n      [externalError]=\"hoursError\"\n      placeholder=\"HH\"></cps-autocomplete>\n    <span class=\"cps-timepicker-delimiter\">:</span>\n    <cps-autocomplete\n      #minutesField\n      (keypress)=\"numberOnly($event)\"\n      width=\"60\"\n      [options]=\"minutesOptions\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.minutes\"\n      (valueChanged)=\"updateMinutes($event)\"\n      [externalError]=\"minutesError\"\n      placeholder=\"MM\"></cps-autocomplete>\n    <span *ngIf=\"withSeconds\" class=\"cps-timepicker-delimiter\">:</span>\n    <cps-autocomplete\n      *ngIf=\"withSeconds\"\n      #secondsField\n      (keypress)=\"numberOnly($event)\"\n      width=\"60\"\n      [options]=\"secondsOptions\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.seconds\"\n      (valueChanged)=\"updateSeconds($event)\"\n      [externalError]=\"secondsError\"\n      placeholder=\"SS\"></cps-autocomplete>\n    <cps-button-toggle\n      *ngIf=\"!use24HourTime\"\n      class=\"cps-timepicker-am-pm-selector\"\n      [options]=\"dayPeriodOptions\"\n      [disabled]=\"disabled\"\n      [value]=\"value?.dayPeriod || 'AM'\"\n      (valueChanged)=\"updateDayPeriod($event)\">\n    </cps-button-toggle>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-timepicker-hint\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-timepicker-error\">\n    {{ error }}\n  </div>\n</div>\n", styles: [":host .cps-timepicker{display:flex;flex-direction:column}:host .cps-timepicker .cps-timepicker-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-timepicker .cps-timepicker-label-info-circle{margin-left:8px}:host .cps-timepicker .cps-timepicker-label-disabled{color:var(--cps-color-text-mild)}:host .cps-timepicker-body{display:flex;flex-direction:row}:host .cps-timepicker-body .cps-timepicker-am-pm-selector{margin-left:10px;margin-top:0}:host .cps-timepicker-body .cps-timepicker-delimiter{color:var(--cps-color-text-lightest);font-size:24px;margin:0 10px}:host .cps-timepicker .cps-timepicker-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-timepicker .cps-timepicker-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}\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: "ngmodule", type: FormsModule }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "value"], outputs: ["valueChanged", "blurred"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTimepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsTimepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cps-timepicker', standalone: true, imports: [
                         CommonModule,
@@ -10733,11 +10778,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         CpsAutocompleteComponent,
                         CpsInfoCircleComponent
                     ], template: "<div class=\"cps-timepicker\">\n  <div\n    class=\"cps-timepicker-label\"\n    [ngClass]=\"{ 'cps-timepicker-label-disabled': disabled }\"\n    *ngIf=\"label\">\n    <label>{{ label }}</label>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-timepicker-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 class=\"cps-timepicker-body\">\n    <cps-autocomplete\n      #hoursField\n      (keypress)=\"numberOnly($event)\"\n      width=\"60\"\n      [options]=\"hoursOptions\"\n      [withOptionsAliases]=\"!use24HourTime\"\n      [useOptionsAliasesWhenNoMatch]=\"true\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.hours\"\n      (valueChanged)=\"updateHours($event)\"\n      [externalError]=\"hoursError\"\n      placeholder=\"HH\"></cps-autocomplete>\n    <span class=\"cps-timepicker-delimiter\">:</span>\n    <cps-autocomplete\n      #minutesField\n      (keypress)=\"numberOnly($event)\"\n      width=\"60\"\n      [options]=\"minutesOptions\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.minutes\"\n      (valueChanged)=\"updateMinutes($event)\"\n      [externalError]=\"minutesError\"\n      placeholder=\"MM\"></cps-autocomplete>\n    <span *ngIf=\"withSeconds\" class=\"cps-timepicker-delimiter\">:</span>\n    <cps-autocomplete\n      *ngIf=\"withSeconds\"\n      #secondsField\n      (keypress)=\"numberOnly($event)\"\n      width=\"60\"\n      [options]=\"secondsOptions\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.seconds\"\n      (valueChanged)=\"updateSeconds($event)\"\n      [externalError]=\"secondsError\"\n      placeholder=\"SS\"></cps-autocomplete>\n    <cps-button-toggle\n      *ngIf=\"!use24HourTime\"\n      class=\"cps-timepicker-am-pm-selector\"\n      [options]=\"dayPeriodOptions\"\n      [disabled]=\"disabled\"\n      [value]=\"value?.dayPeriod || 'AM'\"\n      (valueChanged)=\"updateDayPeriod($event)\">\n    </cps-button-toggle>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-timepicker-hint\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-timepicker-error\">\n    {{ error }}\n  </div>\n</div>\n", styles: [":host .cps-timepicker{display:flex;flex-direction:column}:host .cps-timepicker .cps-timepicker-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-timepicker .cps-timepicker-label-info-circle{margin-left:8px}:host .cps-timepicker .cps-timepicker-label-disabled{color:var(--cps-color-text-mild)}:host .cps-timepicker-body{display:flex;flex-direction:row}:host .cps-timepicker-body .cps-timepicker-am-pm-selector{margin-left:10px;margin-top:0}:host .cps-timepicker-body .cps-timepicker-delimiter{color:var(--cps-color-text-lightest);font-size:24px;margin:0 10px}:host .cps-timepicker .cps-timepicker-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-timepicker .cps-timepicker-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}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }]; }, propDecorators: { label: [{
+                }] }], propDecorators: { label: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -10882,10 +10927,10 @@ class CpsFileUploadComponent {
         }
         return false;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsFileUploadComponent, isStandalone: true, selector: "cps-file-upload", inputs: { extensions: "extensions", fileDesc: "fileDesc", width: "width", fileProcessingCallback: "fileProcessingCallback" }, outputs: { fileUploaded: "fileUploaded", fileUploadFailed: "fileUploadFailed", uploadedFileRemoved: "uploadedFileRemoved" }, ngImport: i0, template: "<div class=\"cps-file-upload\" [ngStyle]=\"{ width: width }\">\n  <div\n    class=\"cps-file-upload-dropzone\"\n    [ngClass]=\"{\n      'dragged-over': isDragoverFile,\n      'with-uploads': uploadedFile?.name\n    }\"\n    (dragend)=\"isDragoverFile = false\"\n    (dragenter)=\"isDragoverFile = true\"\n    (dragleave)=\"isDragoverFile = false\"\n    (dragover)=\"isDragoverFile = true\"\n    (mouseleave)=\"isDragoverFile = false\"\n    (drop)=\"tryUploadFile($event)\">\n    <input\n      (change)=\"tryUploadFile($event)\"\n      type=\"file\"\n      [accept]=\"extensionsString\"\n      title=\"\" />\n    <cps-icon icon=\"export\" size=\"large\" color=\"text-darkest\"></cps-icon>\n    <div class=\"cps-file-upload-dropzone-title\">\n      Drag&Drop or choose a file to upload\n    </div>\n    <span\n      class=\"cps-file-upload-dropzone-file-desc\"\n      *ngIf=\"fileDesc || extensionsStringAsterisks\"\n      >{{ fileDesc }}\n      {{\n        extensionsStringAsterisks ? '(' + extensionsStringAsterisks + ')' : ''\n      }}</span\n    >\n    <cps-progress-linear\n      *ngIf=\"isProcessingFile && uploadedFile\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"cps-file-upload-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"uploadedFile\" class=\"cps-file-upload-uploaded-files\">\n    <div class=\"cps-file-upload-uploaded-file\">\n      <div class=\"cps-file-upload-uploaded-file-title\">\n        <cps-icon\n          class=\"cps-file-upload-uploaded-file-status-icon\"\n          [icon]=\"isProcessingFile ? 'pending' : 'toast-success'\"\n          [color]=\"isProcessingFile ? 'warn' : 'success'\">\n        </cps-icon>\n        <div class=\"cps-file-upload-uploaded-file-name\">\n          {{ uploadedFile.name }}\n        </div>\n      </div>\n      <cps-icon\n        *ngIf=\"!isProcessingFile\"\n        class=\"cps-file-upload-uploaded-file-remove-icon\"\n        icon=\"remove\"\n        color=\"error\"\n        (click)=\"removeUploadedFile()\">\n      </cps-icon>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-file-upload .cps-file-upload-dropzone{font-family:Source Sans Pro,sans-serif;min-height:20px;padding:2rem;text-align:center;border:2px dashed var(--cps-color-calm);position:relative;border-radius:1rem}:host .cps-file-upload .cps-file-upload-dropzone:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:active{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.dragged-over{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.with-uploads{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:1px dashed var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone input{cursor:pointer;opacity:0;position:absolute;width:100%;height:100%;top:0;left:0}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-title{font-size:16px;margin:8px 0;color:var(--cps-color-calm);font-weight:600}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{font-size:18px;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-progress-bar{position:absolute;bottom:-2px;left:0}:host .cps-file-upload .cps-file-upload-uploaded-files{border-bottom:2px dashed var(--cps-color-calm);border-left:2px dashed var(--cps-color-calm);border-right:2px dashed var(--cps-color-calm);border-bottom-right-radius:16px;border-bottom-left-radius:16px;background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file{cursor:default;display:flex;align-items:center;justify-content:space-between;padding:8px 12px}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title{display:flex;align-items:center}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-darkest);font-size:20px;margin:0 8px}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon{cursor:pointer}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-error-darken1)!important}\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"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }] }); }
 }
-CpsFileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CpsFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsFileUploadComponent, isStandalone: true, selector: "cps-file-upload", inputs: { extensions: "extensions", fileDesc: "fileDesc", width: "width", fileProcessingCallback: "fileProcessingCallback" }, outputs: { fileUploaded: "fileUploaded", fileUploadFailed: "fileUploadFailed", uploadedFileRemoved: "uploadedFileRemoved" }, ngImport: i0, template: "<div class=\"cps-file-upload\" [ngStyle]=\"{ width: width }\">\n  <div\n    class=\"cps-file-upload-dropzone\"\n    [ngClass]=\"{\n      'dragged-over': isDragoverFile,\n      'with-uploads': uploadedFile?.name\n    }\"\n    (dragend)=\"isDragoverFile = false\"\n    (dragenter)=\"isDragoverFile = true\"\n    (dragleave)=\"isDragoverFile = false\"\n    (dragover)=\"isDragoverFile = true\"\n    (mouseleave)=\"isDragoverFile = false\"\n    (drop)=\"tryUploadFile($event)\">\n    <input\n      (change)=\"tryUploadFile($event)\"\n      type=\"file\"\n      [accept]=\"extensionsString\"\n      title=\"\" />\n    <cps-icon icon=\"export\" size=\"large\" color=\"text-darkest\"></cps-icon>\n    <div class=\"cps-file-upload-dropzone-title\">\n      Drag&Drop or choose a file to upload\n    </div>\n    <span\n      class=\"cps-file-upload-dropzone-file-desc\"\n      *ngIf=\"fileDesc || extensionsStringAsterisks\"\n      >{{ fileDesc }}\n      {{\n        extensionsStringAsterisks ? '(' + extensionsStringAsterisks + ')' : ''\n      }}</span\n    >\n    <cps-progress-linear\n      *ngIf=\"isProcessingFile && uploadedFile\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"cps-file-upload-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"uploadedFile\" class=\"cps-file-upload-uploaded-files\">\n    <div class=\"cps-file-upload-uploaded-file\">\n      <div class=\"cps-file-upload-uploaded-file-title\">\n        <cps-icon\n          class=\"cps-file-upload-uploaded-file-status-icon\"\n          [icon]=\"isProcessingFile ? 'pending' : 'toast-success'\"\n          [color]=\"isProcessingFile ? 'warn' : 'success'\">\n        </cps-icon>\n        <div class=\"cps-file-upload-uploaded-file-name\">\n          {{ uploadedFile.name }}\n        </div>\n      </div>\n      <cps-icon\n        *ngIf=\"!isProcessingFile\"\n        class=\"cps-file-upload-uploaded-file-remove-icon\"\n        icon=\"remove\"\n        color=\"error\"\n        (click)=\"removeUploadedFile()\">\n      </cps-icon>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-file-upload .cps-file-upload-dropzone{font-family:Source Sans Pro,sans-serif;min-height:20px;padding:2rem;text-align:center;border:2px dashed var(--cps-color-calm);position:relative;border-radius:1rem}:host .cps-file-upload .cps-file-upload-dropzone:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:active{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.dragged-over{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.with-uploads{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:1px dashed var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone input{cursor:pointer;opacity:0;position:absolute;width:100%;height:100%;top:0;left:0}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-title{font-size:16px;margin:8px 0;color:var(--cps-color-calm);font-weight:600}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{font-size:18px;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-progress-bar{position:absolute;bottom:-2px;left:0}:host .cps-file-upload .cps-file-upload-uploaded-files{border-bottom:2px dashed var(--cps-color-calm);border-left:2px dashed var(--cps-color-calm);border-right:2px dashed var(--cps-color-calm);border-bottom-right-radius:16px;border-bottom-left-radius:16px;background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file{cursor:default;display:flex;align-items:center;justify-content:space-between;padding:8px 12px}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title{display:flex;align-items:center}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-darkest);font-size:20px;margin:0 8px}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon{cursor:pointer}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-error-darken1)!important}\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"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsFileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsFileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cps-file-upload', standalone: true, imports: [CommonModule, CpsIconComponent, CpsProgressLinearComponent], template: "<div class=\"cps-file-upload\" [ngStyle]=\"{ width: width }\">\n  <div\n    class=\"cps-file-upload-dropzone\"\n    [ngClass]=\"{\n      'dragged-over': isDragoverFile,\n      'with-uploads': uploadedFile?.name\n    }\"\n    (dragend)=\"isDragoverFile = false\"\n    (dragenter)=\"isDragoverFile = true\"\n    (dragleave)=\"isDragoverFile = false\"\n    (dragover)=\"isDragoverFile = true\"\n    (mouseleave)=\"isDragoverFile = false\"\n    (drop)=\"tryUploadFile($event)\">\n    <input\n      (change)=\"tryUploadFile($event)\"\n      type=\"file\"\n      [accept]=\"extensionsString\"\n      title=\"\" />\n    <cps-icon icon=\"export\" size=\"large\" color=\"text-darkest\"></cps-icon>\n    <div class=\"cps-file-upload-dropzone-title\">\n      Drag&Drop or choose a file to upload\n    </div>\n    <span\n      class=\"cps-file-upload-dropzone-file-desc\"\n      *ngIf=\"fileDesc || extensionsStringAsterisks\"\n      >{{ fileDesc }}\n      {{\n        extensionsStringAsterisks ? '(' + extensionsStringAsterisks + ')' : ''\n      }}</span\n    >\n    <cps-progress-linear\n      *ngIf=\"isProcessingFile && uploadedFile\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"cps-file-upload-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"uploadedFile\" class=\"cps-file-upload-uploaded-files\">\n    <div class=\"cps-file-upload-uploaded-file\">\n      <div class=\"cps-file-upload-uploaded-file-title\">\n        <cps-icon\n          class=\"cps-file-upload-uploaded-file-status-icon\"\n          [icon]=\"isProcessingFile ? 'pending' : 'toast-success'\"\n          [color]=\"isProcessingFile ? 'warn' : 'success'\">\n        </cps-icon>\n        <div class=\"cps-file-upload-uploaded-file-name\">\n          {{ uploadedFile.name }}\n        </div>\n      </div>\n      <cps-icon\n        *ngIf=\"!isProcessingFile\"\n        class=\"cps-file-upload-uploaded-file-remove-icon\"\n        icon=\"remove\"\n        color=\"error\"\n        (click)=\"removeUploadedFile()\">\n      </cps-icon>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-file-upload .cps-file-upload-dropzone{font-family:Source Sans Pro,sans-serif;min-height:20px;padding:2rem;text-align:center;border:2px dashed var(--cps-color-calm);position:relative;border-radius:1rem}:host .cps-file-upload .cps-file-upload-dropzone:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:active{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.dragged-over{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.with-uploads{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:1px dashed var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone input{cursor:pointer;opacity:0;position:absolute;width:100%;height:100%;top:0;left:0}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-title{font-size:16px;margin:8px 0;color:var(--cps-color-calm);font-weight:600}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{font-size:18px;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-progress-bar{position:absolute;bottom:-2px;left:0}:host .cps-file-upload .cps-file-upload-uploaded-files{border-bottom:2px dashed var(--cps-color-calm);border-left:2px dashed var(--cps-color-calm);border-right:2px dashed var(--cps-color-calm);border-bottom-right-radius:16px;border-bottom-left-radius:16px;background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file{cursor:default;display:flex;align-items:center;justify-content:space-between;padding:8px 12px}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title{display:flex;align-items:center}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-darkest);font-size:20px;margin:0 8px}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon{cursor:pointer}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-error-darken1)!important}\n"] }]
         }], propDecorators: { extensions: [{
@@ -11039,16 +11084,16 @@ class CpsDialogContentDirective {
     constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsDialogContentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: CpsDialogContentDirective, isStandalone: true, selector: "[cpsDialogContent]", ngImport: i0 }); }
 }
-CpsDialogContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsDialogContentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-CpsDialogContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsDialogContentDirective, isStandalone: true, selector: "[cpsDialogContent]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsDialogContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsDialogContentDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
                     selector: '[cpsDialogContent]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
 const showAnimation = animation([
     style({ transform: '{{transform}}', opacity: 0 }),
@@ -11462,15 +11507,15 @@ class CpsDialogComponent {
         this.onContainerDestroy();
         this.componentRef?.destroy();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsDialogComponent, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: CpsDialogRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: CpsDialogConfig }, { token: i0.NgZone }, { token: i1$1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsDialogComponent, isStandalone: true, selector: "cps-dialog", viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: CpsDialogContentDirective, descendants: true }, { propertyName: "maskViewChild", first: true, predicate: ["mask"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }, { propertyName: "headerViewChild", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: "<div\n  #mask\n  [ngClass]=\"{\n    'cps-dialog-mask': true,\n    'cps-dialog-overlay': config.modal !== false,\n    'cps-dialog-overlay-enter':\n      config.modal !== false && !config.blurredBackground,\n    'cps-dialog-blurred-overlay cps-dialog-blurred-overlay-enter':\n      config.modal !== false && config.blurredBackground,\n    'cps-dialog-left': position === 'left',\n    'cps-dialog-right': position === 'right',\n    'cps-dialog-top': position === 'top',\n    'cps-dialog-bottom': position === 'bottom',\n    'cps-dialog-top-left': position === 'topleft' || position === 'top-left',\n    'cps-dialog-top-right': position === 'topright' || position === 'top-right',\n    'cps-dialog-bottom-left':\n      position === 'bottomleft' || position === 'bottom-left',\n    'cps-dialog-bottom-right':\n      position === 'bottomright' || position === 'bottom-right'\n  }\"\n  [class]=\"config.maskStyleClass || ''\">\n  <div\n    #container\n    [ngClass]=\"{\n      'cps-dialog': true,\n      'cps-dialog-resizable': resizable,\n      'cps-dialog-draggable': draggable && !maximized,\n      'cps-dialog-dragging': dragging,\n      'cps-dialog-maximized': maximized\n    }\"\n    [ngStyle]=\"config.style\"\n    [class]=\"config.styleClass || ''\"\n    [@animation]=\"{\n      value: 'visible',\n      params: {\n        transform: transformOptions,\n        transition:\n          config.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'\n      }\n    }\"\n    (@animation.start)=\"onAnimationStart($event)\"\n    (@animation.done)=\"onAnimationEnd($event)\"\n    role=\"dialog\"\n    *ngIf=\"visible\"\n    [style.width]=\"config.width\"\n    [style.height]=\"config.height\"\n    [style.minWidth]=\"config.minWidth\"\n    [style.minHeight]=\"config.minHeight\"\n    [style.maxWidth]=\"maximized ? '' : config.maxWidth\"\n    [style.maxHeight]=\"maximized ? '' : config.maxHeight\">\n    <div\n      *ngIf=\"resizable && !maximized\"\n      class=\"cps-dialog-resizable-handle\"\n      style=\"z-index: 90\"\n      (mousedown)=\"initResize($event)\"></div>\n    <div\n      #header\n      *ngIf=\"config.showHeader !== false\"\n      class=\"cps-dialog-header\"\n      [ngClass]=\"{\n        'cps-dialog-header-left-bordered':\n          config.showHeaderLeftBorder !== false,\n        'cps-dialog-header-bottom-bordered':\n          config.showHeaderBottomBorder !== false\n      }\"\n      (mousedown)=\"initDrag($event)\">\n      <div class=\"cps-dialog-header-left\">\n        <div class=\"cps-dialog-header-icon\">\n          <cps-icon\n            *ngIf=\"config.headerIcon\"\n            [icon]=\"config.headerIcon\"\n            [color]=\"config.headerIconColor || 'currentColor'\">\n          </cps-icon>\n        </div>\n        <span class=\"cps-dialog-header-title\">{{ config.headerTitle }}</span>\n        <div class=\"cps-dialog-header-info-circle\">\n          <cps-info-circle\n            *ngIf=\"config.headerInfoTooltip\"\n            size=\"small\"\n            [tooltipPosition]=\"config.headerInfoTooltipPosition || 'top'\"\n            [tooltipText]=\"config.headerInfoTooltip\">\n          </cps-info-circle>\n        </div>\n      </div>\n      <div class=\"cps-dialog-header-action-buttons\">\n        <cps-button\n          *ngIf=\"maximizable\"\n          class=\"cps-dialog-header-action-button\"\n          [icon]=\"maximized ? 'minimize' : 'maximize'\"\n          size=\"small\"\n          width=\"32\"\n          color=\"graphite\"\n          type=\"borderless\"\n          (clicked)=\"toggleMaximized()\">\n        </cps-button>\n        <cps-button\n          *ngIf=\"config.showCloseBtn !== false\"\n          class=\"cps-dialog-header-action-button\"\n          icon=\"close-x-2\"\n          size=\"small\"\n          width=\"32\"\n          color=\"graphite\"\n          type=\"borderless\"\n          (clicked)=\"hide()\">\n        </cps-button>\n      </div>\n    </div>\n    <div\n      #content\n      class=\"cps-dialog-content\"\n      [ngStyle]=\"config.contentStyle\"\n      [class]=\"config.contentStyleClass || ''\">\n      <ng-template cpsDialogContent></ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".cps-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cps-dialog-mask.cps-dialog-overlay{pointer-events:auto}.cps-dialog-overlay-enter{animation:cps-dialog-overlay-enter-animation .15s forwards}.cps-dialog-overlay-leave{animation:cps-dialog-overlay-leave-animation .15s forwards}.cps-dialog-blurred-overlay-enter{animation:cps-dialog-blurred-overlay-enter-animation .15s forwards}.cps-dialog-blurred-overlay-leave{animation:cps-dialog-blurred-overlay-leave-animation .15s forwards}.cps-dialog-overlay{background-color:#0003;transition-duration:.2s}.cps-dialog-blurred-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}@keyframes cps-dialog-overlay-enter-animation{0%{background-color:transparent}to{background-color:#0003}}@keyframes cps-dialog-overlay-leave-animation{0%{background-color:#0003}to{background-color:transparent}}@keyframes cps-dialog-blurred-overlay-enter-animation{0%{background-color:transparent;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{background-color:#0003;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}@keyframes cps-dialog-blurred-overlay-leave-animation{0%{background-color:#0003;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}to{background-color:transparent;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}.cps-dialog{box-sizing:border-box;display:flex;flex-direction:column;pointer-events:auto;transform:scale(1);position:relative;border-radius:4px;box-shadow:0 1px 3px #0000004d;border:0 none;font-family:Source Sans Pro,sans-serif;font-size:1rem;font-weight:400}.cps-dialog .cps-dialog-header{overflow:hidden;border-bottom:0 none;background:#fff;color:var(--cps-color-text-dark);padding:1rem;border-top-right-radius:4px;border-top-left-radius:4px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.cps-dialog .cps-dialog-header.cps-dialog-header-left-bordered{border-left:4px solid var(--cps-color-surprise)}.cps-dialog .cps-dialog-header.cps-dialog-header-bottom-bordered{border-bottom:1px solid var(--cps-color-line-mid)}.cps-dialog .cps-dialog-header .cps-dialog-header-left{display:flex;align-items:center}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-icon{margin-right:8px;display:flex}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-title{cursor:default;font-weight:700;font-size:1.25rem}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-info-circle{margin-left:8px;cursor:default;display:flex}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-info-circle cps-info-circle{margin-top:2px}.cps-dialog .cps-dialog-content{background:#fff;color:var(--cps-color-text-dark);padding:1rem}.cps-dialog .cps-dialog-content:last-of-type{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.cps-dialog-content{overflow-y:auto;flex-grow:1}.cps-dialog-dragging .cps-dialog-header{background-color:var(--cps-color-highlight-active)!important}.cps-dialog-draggable .cps-dialog-header{cursor:move}.cps-dialog-draggable .cps-dialog-header:hover{background-color:var(--cps-color-highlight-hover)}.cps-dialog-draggable .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-title{cursor:unset}.cps-dialog .cps-dialog-header-action-buttons{display:flex;align-items:center}.cps-dialog-top .cps-dialog,.cps-dialog-bottom .cps-dialog,.cps-dialog-left .cps-dialog,.cps-dialog-right .cps-dialog,.cps-dialog-top-left .cps-dialog,.cps-dialog-top-right .cps-dialog,.cps-dialog-bottom-left .cps-dialog,.cps-dialog-bottom-right .cps-dialog{margin:.75rem;transform:translateZ(0)}.cps-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.cps-dialog-maximized .cps-dialog-content{flex-grow:1;border-radius:0!important}.cps-dialog-maximized .cps-dialog-header{border-radius:0!important}.cps-dialog-left{justify-content:flex-start}.cps-dialog-right{justify-content:flex-end}.cps-dialog-top{align-items:flex-start}.cps-dialog-top-left{justify-content:flex-start;align-items:flex-start}.cps-dialog-top-right{justify-content:flex-end;align-items:flex-start}.cps-dialog-bottom{align-items:flex-end}.cps-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.cps-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.cps-dialog .cps-dialog-resizable-handle{position:absolute;display:block;cursor:nwse-resize;width:12px;height:12px;right:0;bottom:0;overflow:hidden}.cps-dialog .cps-dialog-resizable-handle:after{content:\"\";position:absolute;display:block;width:40px;height:0;box-shadow:0 0 0 1px var(--cps-color-calm),0 7px 0 1px var(--cps-color-calm),0 14px 0 1px var(--cps-color-calm);transform:translate(-50%,-50%) rotate(-45deg) scale(.5);top:50%;left:50%}.cps-unselectable-text{-webkit-user-select:none;user-select:none}.cps-overflow-hidden{overflow:hidden}\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: "ngmodule", type: SharedModule }, { kind: "directive", type: CpsDialogContentDirective, selector: "[cpsDialogContent]" }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }], animations: [
+            trigger('animation', [
+                transition('void => visible', [useAnimation(showAnimation)]),
+                transition('visible => void', [useAnimation(hideAnimation)])
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
-CpsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsDialogComponent, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: CpsDialogRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: CpsDialogConfig }, { token: i0.NgZone }, { token: i1$1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
-CpsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsDialogComponent, isStandalone: true, selector: "cps-dialog", viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: CpsDialogContentDirective, descendants: true }, { propertyName: "maskViewChild", first: true, predicate: ["mask"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }, { propertyName: "headerViewChild", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: "<div\n  #mask\n  [ngClass]=\"{\n    'cps-dialog-mask': true,\n    'cps-dialog-overlay': config.modal !== false,\n    'cps-dialog-overlay-enter':\n      config.modal !== false && !config.blurredBackground,\n    'cps-dialog-blurred-overlay cps-dialog-blurred-overlay-enter':\n      config.modal !== false && config.blurredBackground,\n    'cps-dialog-left': position === 'left',\n    'cps-dialog-right': position === 'right',\n    'cps-dialog-top': position === 'top',\n    'cps-dialog-bottom': position === 'bottom',\n    'cps-dialog-top-left': position === 'topleft' || position === 'top-left',\n    'cps-dialog-top-right': position === 'topright' || position === 'top-right',\n    'cps-dialog-bottom-left':\n      position === 'bottomleft' || position === 'bottom-left',\n    'cps-dialog-bottom-right':\n      position === 'bottomright' || position === 'bottom-right'\n  }\"\n  [class]=\"config.maskStyleClass || ''\">\n  <div\n    #container\n    [ngClass]=\"{\n      'cps-dialog': true,\n      'cps-dialog-resizable': resizable,\n      'cps-dialog-draggable': draggable && !maximized,\n      'cps-dialog-dragging': dragging,\n      'cps-dialog-maximized': maximized\n    }\"\n    [ngStyle]=\"config.style\"\n    [class]=\"config.styleClass || ''\"\n    [@animation]=\"{\n      value: 'visible',\n      params: {\n        transform: transformOptions,\n        transition:\n          config.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'\n      }\n    }\"\n    (@animation.start)=\"onAnimationStart($event)\"\n    (@animation.done)=\"onAnimationEnd($event)\"\n    role=\"dialog\"\n    *ngIf=\"visible\"\n    [style.width]=\"config.width\"\n    [style.height]=\"config.height\"\n    [style.minWidth]=\"config.minWidth\"\n    [style.minHeight]=\"config.minHeight\"\n    [style.maxWidth]=\"maximized ? '' : config.maxWidth\"\n    [style.maxHeight]=\"maximized ? '' : config.maxHeight\">\n    <div\n      *ngIf=\"resizable && !maximized\"\n      class=\"cps-dialog-resizable-handle\"\n      style=\"z-index: 90\"\n      (mousedown)=\"initResize($event)\"></div>\n    <div\n      #header\n      *ngIf=\"config.showHeader !== false\"\n      class=\"cps-dialog-header\"\n      [ngClass]=\"{\n        'cps-dialog-header-left-bordered':\n          config.showHeaderLeftBorder !== false,\n        'cps-dialog-header-bottom-bordered':\n          config.showHeaderBottomBorder !== false\n      }\"\n      (mousedown)=\"initDrag($event)\">\n      <div class=\"cps-dialog-header-left\">\n        <div class=\"cps-dialog-header-icon\">\n          <cps-icon\n            *ngIf=\"config.headerIcon\"\n            [icon]=\"config.headerIcon\"\n            [color]=\"config.headerIconColor || 'currentColor'\">\n          </cps-icon>\n        </div>\n        <span class=\"cps-dialog-header-title\">{{ config.headerTitle }}</span>\n        <div class=\"cps-dialog-header-info-circle\">\n          <cps-info-circle\n            *ngIf=\"config.headerInfoTooltip\"\n            size=\"small\"\n            [tooltipPosition]=\"config.headerInfoTooltipPosition || 'top'\"\n            [tooltipText]=\"config.headerInfoTooltip\">\n          </cps-info-circle>\n        </div>\n      </div>\n      <div class=\"cps-dialog-header-action-buttons\">\n        <cps-button\n          *ngIf=\"maximizable\"\n          class=\"cps-dialog-header-action-button\"\n          [icon]=\"maximized ? 'minimize' : 'maximize'\"\n          size=\"small\"\n          width=\"32\"\n          color=\"graphite\"\n          type=\"borderless\"\n          (clicked)=\"toggleMaximized()\">\n        </cps-button>\n        <cps-button\n          *ngIf=\"config.showCloseBtn !== false\"\n          class=\"cps-dialog-header-action-button\"\n          icon=\"close-x-2\"\n          size=\"small\"\n          width=\"32\"\n          color=\"graphite\"\n          type=\"borderless\"\n          (clicked)=\"hide()\">\n        </cps-button>\n      </div>\n    </div>\n    <div\n      #content\n      class=\"cps-dialog-content\"\n      [ngStyle]=\"config.contentStyle\"\n      [class]=\"config.contentStyleClass || ''\">\n      <ng-template cpsDialogContent></ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".cps-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cps-dialog-mask.cps-dialog-overlay{pointer-events:auto}.cps-dialog-overlay-enter{animation:cps-dialog-overlay-enter-animation .15s forwards}.cps-dialog-overlay-leave{animation:cps-dialog-overlay-leave-animation .15s forwards}.cps-dialog-blurred-overlay-enter{animation:cps-dialog-blurred-overlay-enter-animation .15s forwards}.cps-dialog-blurred-overlay-leave{animation:cps-dialog-blurred-overlay-leave-animation .15s forwards}.cps-dialog-overlay{background-color:#0003;transition-duration:.2s}.cps-dialog-blurred-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}@keyframes cps-dialog-overlay-enter-animation{0%{background-color:transparent}to{background-color:#0003}}@keyframes cps-dialog-overlay-leave-animation{0%{background-color:#0003}to{background-color:transparent}}@keyframes cps-dialog-blurred-overlay-enter-animation{0%{background-color:transparent;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{background-color:#0003;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}@keyframes cps-dialog-blurred-overlay-leave-animation{0%{background-color:#0003;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}to{background-color:transparent;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}.cps-dialog{box-sizing:border-box;display:flex;flex-direction:column;pointer-events:auto;transform:scale(1);position:relative;border-radius:4px;box-shadow:0 1px 3px #0000004d;border:0 none;font-family:Source Sans Pro,sans-serif;font-size:1rem;font-weight:400}.cps-dialog .cps-dialog-header{overflow:hidden;border-bottom:0 none;background:#ffffff;color:var(--cps-color-text-dark);padding:1rem;border-top-right-radius:4px;border-top-left-radius:4px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.cps-dialog .cps-dialog-header.cps-dialog-header-left-bordered{border-left:4px solid var(--cps-color-surprise)}.cps-dialog .cps-dialog-header.cps-dialog-header-bottom-bordered{border-bottom:1px solid var(--cps-color-line-mid)}.cps-dialog .cps-dialog-header .cps-dialog-header-left{display:flex;align-items:center}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-icon{margin-right:8px;display:flex}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-title{cursor:default;font-weight:700;font-size:1.25rem}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-info-circle{margin-left:8px;cursor:default;display:flex}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-info-circle cps-info-circle{margin-top:2px}.cps-dialog .cps-dialog-content{background:#ffffff;color:var(--cps-color-text-dark);padding:1rem}.cps-dialog .cps-dialog-content:last-of-type{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.cps-dialog-content{overflow-y:auto;flex-grow:1}.cps-dialog-dragging .cps-dialog-header{background-color:var(--cps-color-highlight-active)!important}.cps-dialog-draggable .cps-dialog-header{cursor:move}.cps-dialog-draggable .cps-dialog-header:hover{background-color:var(--cps-color-highlight-hover)}.cps-dialog-draggable .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-title{cursor:unset}.cps-dialog .cps-dialog-header-action-buttons{display:flex;align-items:center}.cps-dialog-top .cps-dialog,.cps-dialog-bottom .cps-dialog,.cps-dialog-left .cps-dialog,.cps-dialog-right .cps-dialog,.cps-dialog-top-left .cps-dialog,.cps-dialog-top-right .cps-dialog,.cps-dialog-bottom-left .cps-dialog,.cps-dialog-bottom-right .cps-dialog{margin:.75rem;transform:translateZ(0)}.cps-dialog-maximized{transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.cps-dialog-maximized .cps-dialog-content{flex-grow:1;border-radius:0!important}.cps-dialog-maximized .cps-dialog-header{border-radius:0!important}.cps-dialog-left{justify-content:flex-start}.cps-dialog-right{justify-content:flex-end}.cps-dialog-top{align-items:flex-start}.cps-dialog-top-left{justify-content:flex-start;align-items:flex-start}.cps-dialog-top-right{justify-content:flex-end;align-items:flex-start}.cps-dialog-bottom{align-items:flex-end}.cps-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.cps-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.cps-dialog .cps-dialog-resizable-handle{position:absolute;display:block;cursor:nwse-resize;width:12px;height:12px;right:0;bottom:0;overflow:hidden}.cps-dialog .cps-dialog-resizable-handle:after{content:\"\";position:absolute;display:block;width:40px;height:0;box-shadow:0 0 0 1px var(--cps-color-calm),0 7px 0 1px var(--cps-color-calm),0 14px 0 1px var(--cps-color-calm);transform:translate(-50%,-50%) rotate(-45deg) scale(.5);top:50%;left:50%}.cps-unselectable-text{-webkit-user-select:none;user-select:none}.cps-overflow-hidden{overflow:hidden}\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: "ngmodule", type: SharedModule }, { kind: "directive", type: CpsDialogContentDirective, selector: "[cpsDialogContent]" }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }], animations: [
-        trigger('animation', [
-            transition('void => visible', [useAnimation(showAnimation)]),
-            transition('visible => void', [useAnimation(hideAnimation)])
-        ])
-    ], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cps-dialog', standalone: true, imports: [
                         CommonModule,
@@ -11484,14 +11529,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             transition('void => visible', [useAnimation(showAnimation)]),
                             transition('visible => void', [useAnimation(hideAnimation)])
                         ])
-                    ], changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<div\n  #mask\n  [ngClass]=\"{\n    'cps-dialog-mask': true,\n    'cps-dialog-overlay': config.modal !== false,\n    'cps-dialog-overlay-enter':\n      config.modal !== false && !config.blurredBackground,\n    'cps-dialog-blurred-overlay cps-dialog-blurred-overlay-enter':\n      config.modal !== false && config.blurredBackground,\n    'cps-dialog-left': position === 'left',\n    'cps-dialog-right': position === 'right',\n    'cps-dialog-top': position === 'top',\n    'cps-dialog-bottom': position === 'bottom',\n    'cps-dialog-top-left': position === 'topleft' || position === 'top-left',\n    'cps-dialog-top-right': position === 'topright' || position === 'top-right',\n    'cps-dialog-bottom-left':\n      position === 'bottomleft' || position === 'bottom-left',\n    'cps-dialog-bottom-right':\n      position === 'bottomright' || position === 'bottom-right'\n  }\"\n  [class]=\"config.maskStyleClass || ''\">\n  <div\n    #container\n    [ngClass]=\"{\n      'cps-dialog': true,\n      'cps-dialog-resizable': resizable,\n      'cps-dialog-draggable': draggable && !maximized,\n      'cps-dialog-dragging': dragging,\n      'cps-dialog-maximized': maximized\n    }\"\n    [ngStyle]=\"config.style\"\n    [class]=\"config.styleClass || ''\"\n    [@animation]=\"{\n      value: 'visible',\n      params: {\n        transform: transformOptions,\n        transition:\n          config.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'\n      }\n    }\"\n    (@animation.start)=\"onAnimationStart($event)\"\n    (@animation.done)=\"onAnimationEnd($event)\"\n    role=\"dialog\"\n    *ngIf=\"visible\"\n    [style.width]=\"config.width\"\n    [style.height]=\"config.height\"\n    [style.minWidth]=\"config.minWidth\"\n    [style.minHeight]=\"config.minHeight\"\n    [style.maxWidth]=\"maximized ? '' : config.maxWidth\"\n    [style.maxHeight]=\"maximized ? '' : config.maxHeight\">\n    <div\n      *ngIf=\"resizable && !maximized\"\n      class=\"cps-dialog-resizable-handle\"\n      style=\"z-index: 90\"\n      (mousedown)=\"initResize($event)\"></div>\n    <div\n      #header\n      *ngIf=\"config.showHeader !== false\"\n      class=\"cps-dialog-header\"\n      [ngClass]=\"{\n        'cps-dialog-header-left-bordered':\n          config.showHeaderLeftBorder !== false,\n        'cps-dialog-header-bottom-bordered':\n          config.showHeaderBottomBorder !== false\n      }\"\n      (mousedown)=\"initDrag($event)\">\n      <div class=\"cps-dialog-header-left\">\n        <div class=\"cps-dialog-header-icon\">\n          <cps-icon\n            *ngIf=\"config.headerIcon\"\n            [icon]=\"config.headerIcon\"\n            [color]=\"config.headerIconColor || 'currentColor'\">\n          </cps-icon>\n        </div>\n        <span class=\"cps-dialog-header-title\">{{ config.headerTitle }}</span>\n        <div class=\"cps-dialog-header-info-circle\">\n          <cps-info-circle\n            *ngIf=\"config.headerInfoTooltip\"\n            size=\"small\"\n            [tooltipPosition]=\"config.headerInfoTooltipPosition || 'top'\"\n            [tooltipText]=\"config.headerInfoTooltip\">\n          </cps-info-circle>\n        </div>\n      </div>\n      <div class=\"cps-dialog-header-action-buttons\">\n        <cps-button\n          *ngIf=\"maximizable\"\n          class=\"cps-dialog-header-action-button\"\n          [icon]=\"maximized ? 'minimize' : 'maximize'\"\n          size=\"small\"\n          width=\"32\"\n          color=\"graphite\"\n          type=\"borderless\"\n          (clicked)=\"toggleMaximized()\">\n        </cps-button>\n        <cps-button\n          *ngIf=\"config.showCloseBtn !== false\"\n          class=\"cps-dialog-header-action-button\"\n          icon=\"close-x-2\"\n          size=\"small\"\n          width=\"32\"\n          color=\"graphite\"\n          type=\"borderless\"\n          (clicked)=\"hide()\">\n        </cps-button>\n      </div>\n    </div>\n    <div\n      #content\n      class=\"cps-dialog-content\"\n      [ngStyle]=\"config.contentStyle\"\n      [class]=\"config.contentStyleClass || ''\">\n      <ng-template cpsDialogContent></ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".cps-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cps-dialog-mask.cps-dialog-overlay{pointer-events:auto}.cps-dialog-overlay-enter{animation:cps-dialog-overlay-enter-animation .15s forwards}.cps-dialog-overlay-leave{animation:cps-dialog-overlay-leave-animation .15s forwards}.cps-dialog-blurred-overlay-enter{animation:cps-dialog-blurred-overlay-enter-animation .15s forwards}.cps-dialog-blurred-overlay-leave{animation:cps-dialog-blurred-overlay-leave-animation .15s forwards}.cps-dialog-overlay{background-color:#0003;transition-duration:.2s}.cps-dialog-blurred-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}@keyframes cps-dialog-overlay-enter-animation{0%{background-color:transparent}to{background-color:#0003}}@keyframes cps-dialog-overlay-leave-animation{0%{background-color:#0003}to{background-color:transparent}}@keyframes cps-dialog-blurred-overlay-enter-animation{0%{background-color:transparent;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{background-color:#0003;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}@keyframes cps-dialog-blurred-overlay-leave-animation{0%{background-color:#0003;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}to{background-color:transparent;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}.cps-dialog{box-sizing:border-box;display:flex;flex-direction:column;pointer-events:auto;transform:scale(1);position:relative;border-radius:4px;box-shadow:0 1px 3px #0000004d;border:0 none;font-family:Source Sans Pro,sans-serif;font-size:1rem;font-weight:400}.cps-dialog .cps-dialog-header{overflow:hidden;border-bottom:0 none;background:#ffffff;color:var(--cps-color-text-dark);padding:1rem;border-top-right-radius:4px;border-top-left-radius:4px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.cps-dialog .cps-dialog-header.cps-dialog-header-left-bordered{border-left:4px solid var(--cps-color-surprise)}.cps-dialog .cps-dialog-header.cps-dialog-header-bottom-bordered{border-bottom:1px solid var(--cps-color-line-mid)}.cps-dialog .cps-dialog-header .cps-dialog-header-left{display:flex;align-items:center}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-icon{margin-right:8px;display:flex}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-title{cursor:default;font-weight:700;font-size:1.25rem}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-info-circle{margin-left:8px;cursor:default;display:flex}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-info-circle cps-info-circle{margin-top:2px}.cps-dialog .cps-dialog-content{background:#ffffff;color:var(--cps-color-text-dark);padding:1rem}.cps-dialog .cps-dialog-content:last-of-type{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.cps-dialog-content{overflow-y:auto;flex-grow:1}.cps-dialog-dragging .cps-dialog-header{background-color:var(--cps-color-highlight-active)!important}.cps-dialog-draggable .cps-dialog-header{cursor:move}.cps-dialog-draggable .cps-dialog-header:hover{background-color:var(--cps-color-highlight-hover)}.cps-dialog-draggable .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-title{cursor:unset}.cps-dialog .cps-dialog-header-action-buttons{display:flex;align-items:center}.cps-dialog-top .cps-dialog,.cps-dialog-bottom .cps-dialog,.cps-dialog-left .cps-dialog,.cps-dialog-right .cps-dialog,.cps-dialog-top-left .cps-dialog,.cps-dialog-top-right .cps-dialog,.cps-dialog-bottom-left .cps-dialog,.cps-dialog-bottom-right .cps-dialog{margin:.75rem;transform:translateZ(0)}.cps-dialog-maximized{transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.cps-dialog-maximized .cps-dialog-content{flex-grow:1;border-radius:0!important}.cps-dialog-maximized .cps-dialog-header{border-radius:0!important}.cps-dialog-left{justify-content:flex-start}.cps-dialog-right{justify-content:flex-end}.cps-dialog-top{align-items:flex-start}.cps-dialog-top-left{justify-content:flex-start;align-items:flex-start}.cps-dialog-top-right{justify-content:flex-end;align-items:flex-start}.cps-dialog-bottom{align-items:flex-end}.cps-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.cps-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.cps-dialog .cps-dialog-resizable-handle{position:absolute;display:block;cursor:nwse-resize;width:12px;height:12px;right:0;bottom:0;overflow:hidden}.cps-dialog .cps-dialog-resizable-handle:after{content:\"\";position:absolute;display:block;width:40px;height:0;box-shadow:0 0 0 1px var(--cps-color-calm),0 7px 0 1px var(--cps-color-calm),0 14px 0 1px var(--cps-color-calm);transform:translate(-50%,-50%) rotate(-45deg) scale(.5);top:50%;left:50%}.cps-unselectable-text{-webkit-user-select:none;user-select:none}.cps-overflow-hidden{overflow:hidden}\n"] }]
-        }], ctorParameters: function () { return [{ type: Document, decorators: [{
+                    ], changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<div\n  #mask\n  [ngClass]=\"{\n    'cps-dialog-mask': true,\n    'cps-dialog-overlay': config.modal !== false,\n    'cps-dialog-overlay-enter':\n      config.modal !== false && !config.blurredBackground,\n    'cps-dialog-blurred-overlay cps-dialog-blurred-overlay-enter':\n      config.modal !== false && config.blurredBackground,\n    'cps-dialog-left': position === 'left',\n    'cps-dialog-right': position === 'right',\n    'cps-dialog-top': position === 'top',\n    'cps-dialog-bottom': position === 'bottom',\n    'cps-dialog-top-left': position === 'topleft' || position === 'top-left',\n    'cps-dialog-top-right': position === 'topright' || position === 'top-right',\n    'cps-dialog-bottom-left':\n      position === 'bottomleft' || position === 'bottom-left',\n    'cps-dialog-bottom-right':\n      position === 'bottomright' || position === 'bottom-right'\n  }\"\n  [class]=\"config.maskStyleClass || ''\">\n  <div\n    #container\n    [ngClass]=\"{\n      'cps-dialog': true,\n      'cps-dialog-resizable': resizable,\n      'cps-dialog-draggable': draggable && !maximized,\n      'cps-dialog-dragging': dragging,\n      'cps-dialog-maximized': maximized\n    }\"\n    [ngStyle]=\"config.style\"\n    [class]=\"config.styleClass || ''\"\n    [@animation]=\"{\n      value: 'visible',\n      params: {\n        transform: transformOptions,\n        transition:\n          config.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'\n      }\n    }\"\n    (@animation.start)=\"onAnimationStart($event)\"\n    (@animation.done)=\"onAnimationEnd($event)\"\n    role=\"dialog\"\n    *ngIf=\"visible\"\n    [style.width]=\"config.width\"\n    [style.height]=\"config.height\"\n    [style.minWidth]=\"config.minWidth\"\n    [style.minHeight]=\"config.minHeight\"\n    [style.maxWidth]=\"maximized ? '' : config.maxWidth\"\n    [style.maxHeight]=\"maximized ? '' : config.maxHeight\">\n    <div\n      *ngIf=\"resizable && !maximized\"\n      class=\"cps-dialog-resizable-handle\"\n      style=\"z-index: 90\"\n      (mousedown)=\"initResize($event)\"></div>\n    <div\n      #header\n      *ngIf=\"config.showHeader !== false\"\n      class=\"cps-dialog-header\"\n      [ngClass]=\"{\n        'cps-dialog-header-left-bordered':\n          config.showHeaderLeftBorder !== false,\n        'cps-dialog-header-bottom-bordered':\n          config.showHeaderBottomBorder !== false\n      }\"\n      (mousedown)=\"initDrag($event)\">\n      <div class=\"cps-dialog-header-left\">\n        <div class=\"cps-dialog-header-icon\">\n          <cps-icon\n            *ngIf=\"config.headerIcon\"\n            [icon]=\"config.headerIcon\"\n            [color]=\"config.headerIconColor || 'currentColor'\">\n          </cps-icon>\n        </div>\n        <span class=\"cps-dialog-header-title\">{{ config.headerTitle }}</span>\n        <div class=\"cps-dialog-header-info-circle\">\n          <cps-info-circle\n            *ngIf=\"config.headerInfoTooltip\"\n            size=\"small\"\n            [tooltipPosition]=\"config.headerInfoTooltipPosition || 'top'\"\n            [tooltipText]=\"config.headerInfoTooltip\">\n          </cps-info-circle>\n        </div>\n      </div>\n      <div class=\"cps-dialog-header-action-buttons\">\n        <cps-button\n          *ngIf=\"maximizable\"\n          class=\"cps-dialog-header-action-button\"\n          [icon]=\"maximized ? 'minimize' : 'maximize'\"\n          size=\"small\"\n          width=\"32\"\n          color=\"graphite\"\n          type=\"borderless\"\n          (clicked)=\"toggleMaximized()\">\n        </cps-button>\n        <cps-button\n          *ngIf=\"config.showCloseBtn !== false\"\n          class=\"cps-dialog-header-action-button\"\n          icon=\"close-x-2\"\n          size=\"small\"\n          width=\"32\"\n          color=\"graphite\"\n          type=\"borderless\"\n          (clicked)=\"hide()\">\n        </cps-button>\n      </div>\n    </div>\n    <div\n      #content\n      class=\"cps-dialog-content\"\n      [ngStyle]=\"config.contentStyle\"\n      [class]=\"config.contentStyleClass || ''\">\n      <ng-template cpsDialogContent></ng-template>\n    </div>\n  </div>\n</div>\n", styles: [".cps-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cps-dialog-mask.cps-dialog-overlay{pointer-events:auto}.cps-dialog-overlay-enter{animation:cps-dialog-overlay-enter-animation .15s forwards}.cps-dialog-overlay-leave{animation:cps-dialog-overlay-leave-animation .15s forwards}.cps-dialog-blurred-overlay-enter{animation:cps-dialog-blurred-overlay-enter-animation .15s forwards}.cps-dialog-blurred-overlay-leave{animation:cps-dialog-blurred-overlay-leave-animation .15s forwards}.cps-dialog-overlay{background-color:#0003;transition-duration:.2s}.cps-dialog-blurred-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}@keyframes cps-dialog-overlay-enter-animation{0%{background-color:transparent}to{background-color:#0003}}@keyframes cps-dialog-overlay-leave-animation{0%{background-color:#0003}to{background-color:transparent}}@keyframes cps-dialog-blurred-overlay-enter-animation{0%{background-color:transparent;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{background-color:#0003;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}@keyframes cps-dialog-blurred-overlay-leave-animation{0%{background-color:#0003;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}to{background-color:transparent;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}.cps-dialog{box-sizing:border-box;display:flex;flex-direction:column;pointer-events:auto;transform:scale(1);position:relative;border-radius:4px;box-shadow:0 1px 3px #0000004d;border:0 none;font-family:Source Sans Pro,sans-serif;font-size:1rem;font-weight:400}.cps-dialog .cps-dialog-header{overflow:hidden;border-bottom:0 none;background:#fff;color:var(--cps-color-text-dark);padding:1rem;border-top-right-radius:4px;border-top-left-radius:4px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.cps-dialog .cps-dialog-header.cps-dialog-header-left-bordered{border-left:4px solid var(--cps-color-surprise)}.cps-dialog .cps-dialog-header.cps-dialog-header-bottom-bordered{border-bottom:1px solid var(--cps-color-line-mid)}.cps-dialog .cps-dialog-header .cps-dialog-header-left{display:flex;align-items:center}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-icon{margin-right:8px;display:flex}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-title{cursor:default;font-weight:700;font-size:1.25rem}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-info-circle{margin-left:8px;cursor:default;display:flex}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-info-circle cps-info-circle{margin-top:2px}.cps-dialog .cps-dialog-content{background:#fff;color:var(--cps-color-text-dark);padding:1rem}.cps-dialog .cps-dialog-content:last-of-type{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.cps-dialog-content{overflow-y:auto;flex-grow:1}.cps-dialog-dragging .cps-dialog-header{background-color:var(--cps-color-highlight-active)!important}.cps-dialog-draggable .cps-dialog-header{cursor:move}.cps-dialog-draggable .cps-dialog-header:hover{background-color:var(--cps-color-highlight-hover)}.cps-dialog-draggable .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-title{cursor:unset}.cps-dialog .cps-dialog-header-action-buttons{display:flex;align-items:center}.cps-dialog-top .cps-dialog,.cps-dialog-bottom .cps-dialog,.cps-dialog-left .cps-dialog,.cps-dialog-right .cps-dialog,.cps-dialog-top-left .cps-dialog,.cps-dialog-top-right .cps-dialog,.cps-dialog-bottom-left .cps-dialog,.cps-dialog-bottom-right .cps-dialog{margin:.75rem;transform:translateZ(0)}.cps-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.cps-dialog-maximized .cps-dialog-content{flex-grow:1;border-radius:0!important}.cps-dialog-maximized .cps-dialog-header{border-radius:0!important}.cps-dialog-left{justify-content:flex-start}.cps-dialog-right{justify-content:flex-end}.cps-dialog-top{align-items:flex-start}.cps-dialog-top-left{justify-content:flex-start;align-items:flex-start}.cps-dialog-top-right{justify-content:flex-end;align-items:flex-start}.cps-dialog-bottom{align-items:flex-end}.cps-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.cps-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.cps-dialog .cps-dialog-resizable-handle{position:absolute;display:block;cursor:nwse-resize;width:12px;height:12px;right:0;bottom:0;overflow:hidden}.cps-dialog .cps-dialog-resizable-handle:after{content:\"\";position:absolute;display:block;width:40px;height:0;box-shadow:0 0 0 1px var(--cps-color-calm),0 7px 0 1px var(--cps-color-calm),0 14px 0 1px var(--cps-color-calm);transform:translate(-50%,-50%) rotate(-45deg) scale(.5);top:50%;left:50%}.cps-unselectable-text{-webkit-user-select:none;user-select:none}.cps-overflow-hidden{overflow:hidden}\n"] }]
+        }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: CpsDialogRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: CpsDialogConfig }, { type: i0.NgZone }, { type: i1$1.PrimeNGConfig }]; }, propDecorators: { insertionPoint: [{
+                }] }, { type: CpsDialogRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: CpsDialogConfig }, { type: i0.NgZone }, { type: i1$1.PrimeNGConfig }], propDecorators: { insertionPoint: [{
                 type: ViewChild,
                 args: [CpsDialogContentDirective]
             }], maskViewChild: [{
@@ -11516,13 +11561,13 @@ class CpsConfirmationComponent {
     close(confirm) {
         this._dialogRef?.close(confirm);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsConfirmationComponent, deps: [{ token: CpsDialogRef }, { token: CpsDialogConfig }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsConfirmationComponent, isStandalone: true, selector: "cps-confirmation", ngImport: i0, template: "<div class=\"cps-confirmation\">\n  <span class=\"cps-confirmation-subtitle\">{{ subtitle }}</span>\n  <div class=\"cps-confirmation-buttons\">\n    <cps-button\n      type=\"outlined\"\n      label=\"No\"\n      (clicked)=\"close(false)\"\n      color=\"prepared\">\n    </cps-button>\n    <cps-button\n      data-cy=\"btn-yes\"\n      label=\"Yes\"\n      (clicked)=\"close(true)\"\n      color=\"prepared\">\n    </cps-button>\n  </div>\n</div>\n", styles: [":host .cps-confirmation{display:flex;flex-direction:column;align-items:center;padding:8px}:host .cps-confirmation-subtitle{font-size:16px;font-weight:400;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark)}:host .cps-confirmation-buttons{width:100%;display:flex;justify-content:space-around;padding-top:28px}\n"], dependencies: [{ kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }] }); }
 }
-CpsConfirmationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsConfirmationComponent, deps: [{ token: CpsDialogRef }, { token: CpsDialogConfig }], target: i0.ɵɵFactoryTarget.Component });
-CpsConfirmationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsConfirmationComponent, isStandalone: true, selector: "cps-confirmation", ngImport: i0, template: "<div class=\"cps-confirmation\">\n  <span class=\"cps-confirmation-subtitle\">{{ subtitle }}</span>\n  <div class=\"cps-confirmation-buttons\">\n    <cps-button\n      type=\"outlined\"\n      label=\"No\"\n      (clicked)=\"close(false)\"\n      color=\"prepared\">\n    </cps-button>\n    <cps-button\n      data-cy=\"btn-yes\"\n      label=\"Yes\"\n      (clicked)=\"close(true)\"\n      color=\"prepared\">\n    </cps-button>\n  </div>\n</div>\n", styles: [":host .cps-confirmation{display:flex;flex-direction:column;align-items:center;padding:8px}:host .cps-confirmation-subtitle{font-size:16px;font-weight:400;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark)}:host .cps-confirmation-buttons{width:100%;display:flex;justify-content:space-around;padding-top:28px}\n"], dependencies: [{ kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsConfirmationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsConfirmationComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CpsButtonComponent, CpsIconComponent], selector: 'cps-confirmation', template: "<div class=\"cps-confirmation\">\n  <span class=\"cps-confirmation-subtitle\">{{ subtitle }}</span>\n  <div class=\"cps-confirmation-buttons\">\n    <cps-button\n      type=\"outlined\"\n      label=\"No\"\n      (clicked)=\"close(false)\"\n      color=\"prepared\">\n    </cps-button>\n    <cps-button\n      data-cy=\"btn-yes\"\n      label=\"Yes\"\n      (clicked)=\"close(true)\"\n      color=\"prepared\">\n    </cps-button>\n  </div>\n</div>\n", styles: [":host .cps-confirmation{display:flex;flex-direction:column;align-items:center;padding:8px}:host .cps-confirmation-subtitle{font-size:16px;font-weight:400;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark)}:host .cps-confirmation-buttons{width:100%;display:flex;justify-content:space-around;padding-top:28px}\n"] }]
-        }], ctorParameters: function () { return [{ type: CpsDialogRef }, { type: CpsDialogConfig }]; } });
+        }], ctorParameters: () => [{ type: CpsDialogRef }, { type: CpsDialogConfig }] });
 /**
  * Service for showing CpsDialog.
@@ -11536,6 +11581,13 @@ class CpsDialogService {
         this.document = document;
         this.dialogComponentRefMap = new Map();
     }
+    /**
+     * Opens a dialog with a dynamically loaded component.
+     * @param {*} componentType - Dynamic component for content template.
+     * @param {CpsDialogConfig} config - CpsDialogConfig object.
+     * @returns {CpsDialogRef} CpsDialogRef instance.
+     * @group Method
+     */
     open(componentType, config) {
         const dialogRef = this.appendDialogComponentToBody(config);
         const instance = this.dialogComponentRefMap.get(dialogRef)?.instance;
@@ -11543,6 +11595,12 @@ class CpsDialogService {
             instance.childComponentType = componentType;
         return dialogRef;
     }
+    /**
+     * Opens a confirmation dialog.
+     * @param {CpsDialogConfig} config - CpsDialogConfig object.
+     * @returns {CpsDialogRef} CpsDialogRef instance.
+     * @group Method
+     */
     openConfirmationDialog(config) {
         if (!config.headerTitle)
             config.headerTitle = 'Confirm the action';
@@ -11592,15 +11650,15 @@ class CpsDialogService {
             this.dialogComponentRefMap.delete(dialogRef);
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsDialogService, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsDialogService }); }
 }
-CpsDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsDialogService, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-CpsDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsDialogService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsDialogService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: Document, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }]; } });
+                }] }] });
 /* eslint-disable no-unused-vars */
 /**
@@ -11685,28 +11743,28 @@ class CpsToastComponent {
             this.timeout = null;
         }
     }
-}
-CpsToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsToastComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-CpsToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsToastComponent, isStandalone: true, selector: "cps-toast", inputs: { config: "config", data: "data" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div\n  (mouseenter)=\"clearTimeout()\"\n  (mouseleave)=\"initiateTimeout()\"\n  [class]=\"data.type\"\n  [@toastState]=\"{\n    value: 'visible'\n  }\"\n  [ngStyle]=\"{ 'max-width': maxWidth }\"\n  class=\"cps-toast-content\">\n  <div class=\"cps-toast-icon\" [ngClass]=\"{ filled: filled }\">\n    <cps-icon\n      [icon]=\"'toast-' + data.type\"\n      [color]=\"filled ? '#fff' : color\"\n      size=\"normal\"></cps-icon>\n  </div>\n  <div class=\"cps-toast-message\">\n    <p class=\"cps-toast-message-header\">{{ data.message || '' }}</p>\n    <p class=\"cps-toast-message-details\" *ngIf=\"data.details\">\n      {{ data.details }}\n    </p>\n  </div>\n  <div class=\"cps-toast-buttons\">\n    <cps-button\n      (clicked)=\"close()\"\n      [color]=\"color\"\n      icon=\"close-x\"\n      class=\"cps-toast-close-button\"\n      width=\"40\"\n      type=\"borderless\"></cps-button>\n  </div>\n</div>\n", styles: [":host .cps-toast-content{color:var(--cps-color-text-darkest);border-radius:4px;box-shadow:0 1px 3px #0000004d;display:flex;overflow:hidden}:host .cps-toast-content.success{background-color:var(--cps-color-success-bg);border:2px solid var(--cps-color-success)}:host .cps-toast-content.success .cps-toast-icon.filled{background-color:var(--cps-color-success)}:host .cps-toast-content.error{background-color:var(--cps-color-error-bg);border:2px solid var(--cps-color-error)}:host .cps-toast-content.error .cps-toast-icon.filled{background-color:var(--cps-color-error)}:host .cps-toast-content.warning{background-color:var(--cps-color-warn-bg);border:2px solid var(--cps-color-warn)}:host .cps-toast-content.warning .cps-toast-icon.filled{background-color:var(--cps-color-warn)}:host .cps-toast-content.info{background-color:var(--cps-color-info-bg);border:2px solid var(--cps-color-info)}:host .cps-toast-content.info .cps-toast-icon.filled{background-color:var(--cps-color-info)}:host .cps-toast-icon{display:flex;align-items:center;padding:20px}:host .cps-toast-message{display:flex;flex-direction:column;justify-content:center;padding:0 16px;font-weight:600;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-toast-message .cps-toast-message-details{margin-top:0;font-size:14px}:host .cps-toast-buttons{display:flex;justify-content:center;align-items:center}:host .cps-toast-buttons .cps-toast-close-button{margin:0 8px}\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: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }], animations: [
-        trigger('toastState', [
-            state('visible', style({
-                transform: 'translateY(0)',
-                opacity: 1
-            })),
-            transition('void => *', [
-                style({ transform: 'translateY(100%)', opacity: 0 }),
-                animate('200ms ease-out')
-            ]),
-            transition('* => void', [
-                animate('200ms ease-in', style({
-                    height: 0,
-                    opacity: 0,
-                    transform: 'translateY(-100%)'
-                }))
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsToastComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsToastComponent, isStandalone: true, selector: "cps-toast", inputs: { config: "config", data: "data" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div\n  (mouseenter)=\"clearTimeout()\"\n  (mouseleave)=\"initiateTimeout()\"\n  [class]=\"data.type\"\n  [@toastState]=\"{\n    value: 'visible'\n  }\"\n  [ngStyle]=\"{ 'max-width': maxWidth }\"\n  class=\"cps-toast-content\">\n  <div class=\"cps-toast-icon\" [ngClass]=\"{ filled: filled }\">\n    <cps-icon\n      [icon]=\"'toast-' + data.type\"\n      [color]=\"filled ? '#fff' : color\"\n      size=\"normal\"></cps-icon>\n  </div>\n  <div class=\"cps-toast-message\">\n    <p class=\"cps-toast-message-header\">{{ data.message || '' }}</p>\n    <p class=\"cps-toast-message-details\" *ngIf=\"data.details\">\n      {{ data.details }}\n    </p>\n  </div>\n  <div class=\"cps-toast-buttons\">\n    <cps-button\n      (clicked)=\"close()\"\n      [color]=\"color\"\n      icon=\"close-x\"\n      class=\"cps-toast-close-button\"\n      width=\"40\"\n      type=\"borderless\"></cps-button>\n  </div>\n</div>\n", styles: [":host .cps-toast-content{color:var(--cps-color-text-darkest);border-radius:4px;box-shadow:0 1px 3px #0000004d;display:flex;overflow:hidden}:host .cps-toast-content.success{background-color:var(--cps-color-success-bg);border:2px solid var(--cps-color-success)}:host .cps-toast-content.success .cps-toast-icon.filled{background-color:var(--cps-color-success)}:host .cps-toast-content.error{background-color:var(--cps-color-error-bg);border:2px solid var(--cps-color-error)}:host .cps-toast-content.error .cps-toast-icon.filled{background-color:var(--cps-color-error)}:host .cps-toast-content.warning{background-color:var(--cps-color-warn-bg);border:2px solid var(--cps-color-warn)}:host .cps-toast-content.warning .cps-toast-icon.filled{background-color:var(--cps-color-warn)}:host .cps-toast-content.info{background-color:var(--cps-color-info-bg);border:2px solid var(--cps-color-info)}:host .cps-toast-content.info .cps-toast-icon.filled{background-color:var(--cps-color-info)}:host .cps-toast-icon{display:flex;align-items:center;padding:20px}:host .cps-toast-message{display:flex;flex-direction:column;justify-content:center;padding:0 16px;font-weight:600;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-toast-message .cps-toast-message-details{margin-top:0;font-size:14px}:host .cps-toast-buttons{display:flex;justify-content:center;align-items:center}:host .cps-toast-buttons .cps-toast-close-button{margin:0 8px}\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: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }], animations: [
+            trigger('toastState', [
+                state('visible', style({
+                    transform: 'translateY(0)',
+                    opacity: 1
+                })),
+                transition('void => *', [
+                    style({ transform: 'translateY(100%)', opacity: 0 }),
+                    animate('200ms ease-out')
+                ]),
+                transition('* => void', [
+                    animate('200ms ease-in', style({
+                        height: 0,
+                        opacity: 0,
+                        transform: 'translateY(-100%)'
+                    }))
+                ])
             ])
-        ])
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsToastComponent, decorators: [{
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsToastComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule, CpsButtonComponent, CpsIconComponent], selector: 'cps-toast', animations: [
                         trigger('toastState', [
@@ -11727,7 +11785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             ])
                         ])
                     ], template: "<div\n  (mouseenter)=\"clearTimeout()\"\n  (mouseleave)=\"initiateTimeout()\"\n  [class]=\"data.type\"\n  [@toastState]=\"{\n    value: 'visible'\n  }\"\n  [ngStyle]=\"{ 'max-width': maxWidth }\"\n  class=\"cps-toast-content\">\n  <div class=\"cps-toast-icon\" [ngClass]=\"{ filled: filled }\">\n    <cps-icon\n      [icon]=\"'toast-' + data.type\"\n      [color]=\"filled ? '#fff' : color\"\n      size=\"normal\"></cps-icon>\n  </div>\n  <div class=\"cps-toast-message\">\n    <p class=\"cps-toast-message-header\">{{ data.message || '' }}</p>\n    <p class=\"cps-toast-message-details\" *ngIf=\"data.details\">\n      {{ data.details }}\n    </p>\n  </div>\n  <div class=\"cps-toast-buttons\">\n    <cps-button\n      (clicked)=\"close()\"\n      [color]=\"color\"\n      icon=\"close-x\"\n      class=\"cps-toast-close-button\"\n      width=\"40\"\n      type=\"borderless\"></cps-button>\n  </div>\n</div>\n", styles: [":host .cps-toast-content{color:var(--cps-color-text-darkest);border-radius:4px;box-shadow:0 1px 3px #0000004d;display:flex;overflow:hidden}:host .cps-toast-content.success{background-color:var(--cps-color-success-bg);border:2px solid var(--cps-color-success)}:host .cps-toast-content.success .cps-toast-icon.filled{background-color:var(--cps-color-success)}:host .cps-toast-content.error{background-color:var(--cps-color-error-bg);border:2px solid var(--cps-color-error)}:host .cps-toast-content.error .cps-toast-icon.filled{background-color:var(--cps-color-error)}:host .cps-toast-content.warning{background-color:var(--cps-color-warn-bg);border:2px solid var(--cps-color-warn)}:host .cps-toast-content.warning .cps-toast-icon.filled{background-color:var(--cps-color-warn)}:host .cps-toast-content.info{background-color:var(--cps-color-info-bg);border:2px solid var(--cps-color-info)}:host .cps-toast-content.info .cps-toast-icon.filled{background-color:var(--cps-color-info)}:host .cps-toast-icon{display:flex;align-items:center;padding:20px}:host .cps-toast-message{display:flex;flex-direction:column;justify-content:center;padding:0 16px;font-weight:600;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-toast-message .cps-toast-message-details{margin-top:0;font-size:14px}:host .cps-toast-buttons{display:flex;justify-content:center;align-items:center}:host .cps-toast-buttons .cps-toast-close-button{margin:0 8px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { config: [{
+        }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { config: [{
                 type: Input
             }], data: [{
                 type: Input
@@ -11781,14 +11839,14 @@ class CpsNotificationContainerComponent {
             ZIndexUtils.clear(this.container.nativeElement);
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsNotificationContainerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1$1.PrimeNGConfig }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: CpsNotificationContainerComponent, isStandalone: true, selector: "cps-notification-container", inputs: { position: "position", maxAmount: "maxAmount" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div\n  [ngClass]=\"{\n    'cps-notification-container-mask': true,\n    'cps-notification-container-left':\n      position === CpsNotificationPosition.LEFT,\n    'cps-notification-container-right':\n      position === CpsNotificationPosition.RIGHT,\n    'cps-notification-container-top': position === CpsNotificationPosition.TOP,\n    'cps-notification-container-bottom':\n      position === CpsNotificationPosition.BOTTOM,\n    'cps-notification-container-top-left':\n      position === CpsNotificationPosition.TOPLEFT,\n    'cps-notification-container-top-right':\n      position === CpsNotificationPosition.TOPRIGHT,\n    'cps-notification-container-bottom-left':\n      position === CpsNotificationPosition.BOTTOMLEFT,\n    'cps-notification-container-bottom-right':\n      position === CpsNotificationPosition.BOTTOMRIGHT\n  }\">\n  <div #container class=\"cps-notification-container\" role=\"notification\">\n    <div\n      #content\n      class=\"cps-notification-container-content\"\n      [ngStyle]=\"{\n        'align-items': [\n          CpsNotificationPosition.RIGHT,\n          CpsNotificationPosition.TOPRIGHT,\n          CpsNotificationPosition.BOTTOMRIGHT\n        ].includes(position)\n          ? 'flex-end'\n          : 'flex-start'\n      }\">\n      <cps-toast\n        *ngFor=\"let notification of notifications; let i = index\"\n        [data]=\"notification.data\"\n        [config]=\"notification.config\"\n        @notificationAnimation\n        (closed)=\"onCloseNotification(i)\">\n      </cps-toast>\n    </div>\n  </div>\n</div>\n", styles: [".cps-notification-container-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cps-notification-container{box-sizing:border-box;display:flex;flex-direction:column;pointer-events:auto;transform:scale(1);position:relative;border-radius:4px;border:0 none;font-family:Source Sans Pro,sans-serif;font-size:1rem;font-weight:400}.cps-notification-container .cps-notification-container-content{background:transparent;flex-grow:1;gap:12px;display:flex;flex-direction:column-reverse}.cps-notification-container-top .cps-notification-container,.cps-notification-container-bottom .cps-notification-container,.cps-notification-container-left .cps-notification-container,.cps-notification-container-right .cps-notification-container,.cps-notification-container-top-left .cps-notification-container,.cps-notification-container-top-right .cps-notification-container,.cps-notification-container-bottom-left .cps-notification-container,.cps-notification-container-bottom-right .cps-notification-container{margin:.75rem;transform:translateZ(0)}.cps-notification-container-left{justify-content:flex-start}.cps-notification-container-right{justify-content:flex-end}.cps-notification-container-top{align-items:flex-start}.cps-notification-container-top-left{justify-content:flex-start;align-items:flex-start}.cps-notification-container-top-right{justify-content:flex-end;align-items:flex-start}.cps-notification-container-bottom{align-items:flex-end}.cps-notification-container-bottom-left{justify-content:flex-start;align-items:flex-end}.cps-notification-container-bottom-right{justify-content:flex-end;align-items:flex-end}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: CpsToastComponent, selector: "cps-toast", inputs: ["config", "data"], outputs: ["closed"] }], animations: [
+            trigger('notificationAnimation', [
+                transition(':enter, :leave', [query('@*', animateChild())])
+            ])
+        ], encapsulation: i0.ViewEncapsulation.None }); }
 }
-CpsNotificationContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsNotificationContainerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1$1.PrimeNGConfig }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CpsNotificationContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsNotificationContainerComponent, isStandalone: true, selector: "cps-notification-container", inputs: { position: "position", maxAmount: "maxAmount" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div\n  [ngClass]=\"{\n    'cps-notification-container-mask': true,\n    'cps-notification-container-left':\n      position === CpsNotificationPosition.LEFT,\n    'cps-notification-container-right':\n      position === CpsNotificationPosition.RIGHT,\n    'cps-notification-container-top': position === CpsNotificationPosition.TOP,\n    'cps-notification-container-bottom':\n      position === CpsNotificationPosition.BOTTOM,\n    'cps-notification-container-top-left':\n      position === CpsNotificationPosition.TOPLEFT,\n    'cps-notification-container-top-right':\n      position === CpsNotificationPosition.TOPRIGHT,\n    'cps-notification-container-bottom-left':\n      position === CpsNotificationPosition.BOTTOMLEFT,\n    'cps-notification-container-bottom-right':\n      position === CpsNotificationPosition.BOTTOMRIGHT\n  }\">\n  <div #container class=\"cps-notification-container\" role=\"notification\">\n    <div\n      #content\n      class=\"cps-notification-container-content\"\n      [ngStyle]=\"{\n        'align-items': [\n          CpsNotificationPosition.RIGHT,\n          CpsNotificationPosition.TOPRIGHT,\n          CpsNotificationPosition.BOTTOMRIGHT\n        ].includes(position)\n          ? 'flex-end'\n          : 'flex-start'\n      }\">\n      <cps-toast\n        *ngFor=\"let notification of notifications; let i = index\"\n        [data]=\"notification.data\"\n        [config]=\"notification.config\"\n        @notificationAnimation\n        (closed)=\"onCloseNotification(i)\">\n      </cps-toast>\n    </div>\n  </div>\n</div>\n", styles: [".cps-notification-container-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cps-notification-container{box-sizing:border-box;display:flex;flex-direction:column;pointer-events:auto;transform:scale(1);position:relative;border-radius:4px;border:0 none;font-family:Source Sans Pro,sans-serif;font-size:1rem;font-weight:400}.cps-notification-container .cps-notification-container-content{background:transparent;flex-grow:1;gap:12px;display:flex;flex-direction:column-reverse}.cps-notification-container-top .cps-notification-container,.cps-notification-container-bottom .cps-notification-container,.cps-notification-container-left .cps-notification-container,.cps-notification-container-right .cps-notification-container,.cps-notification-container-top-left .cps-notification-container,.cps-notification-container-top-right .cps-notification-container,.cps-notification-container-bottom-left .cps-notification-container,.cps-notification-container-bottom-right .cps-notification-container{margin:.75rem;transform:translateZ(0)}.cps-notification-container-left{justify-content:flex-start}.cps-notification-container-right{justify-content:flex-end}.cps-notification-container-top{align-items:flex-start}.cps-notification-container-top-left{justify-content:flex-start;align-items:flex-start}.cps-notification-container-top-right{justify-content:flex-end;align-items:flex-start}.cps-notification-container-bottom{align-items:flex-end}.cps-notification-container-bottom-left{justify-content:flex-start;align-items:flex-end}.cps-notification-container-bottom-right{justify-content:flex-end;align-items:flex-end}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: CpsToastComponent, selector: "cps-toast", inputs: ["config", "data"], outputs: ["closed"] }], animations: [
-        trigger('notificationAnimation', [
-            transition(':enter, :leave', [query('@*', animateChild())])
-        ])
-    ], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsNotificationContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsNotificationContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cps-notification-container', standalone: true, imports: [
                         CommonModule,
@@ -11802,7 +11860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             transition(':enter, :leave', [query('@*', animateChild())])
                         ])
                     ], template: "<div\n  [ngClass]=\"{\n    'cps-notification-container-mask': true,\n    'cps-notification-container-left':\n      position === CpsNotificationPosition.LEFT,\n    'cps-notification-container-right':\n      position === CpsNotificationPosition.RIGHT,\n    'cps-notification-container-top': position === CpsNotificationPosition.TOP,\n    'cps-notification-container-bottom':\n      position === CpsNotificationPosition.BOTTOM,\n    'cps-notification-container-top-left':\n      position === CpsNotificationPosition.TOPLEFT,\n    'cps-notification-container-top-right':\n      position === CpsNotificationPosition.TOPRIGHT,\n    'cps-notification-container-bottom-left':\n      position === CpsNotificationPosition.BOTTOMLEFT,\n    'cps-notification-container-bottom-right':\n      position === CpsNotificationPosition.BOTTOMRIGHT\n  }\">\n  <div #container class=\"cps-notification-container\" role=\"notification\">\n    <div\n      #content\n      class=\"cps-notification-container-content\"\n      [ngStyle]=\"{\n        'align-items': [\n          CpsNotificationPosition.RIGHT,\n          CpsNotificationPosition.TOPRIGHT,\n          CpsNotificationPosition.BOTTOMRIGHT\n        ].includes(position)\n          ? 'flex-end'\n          : 'flex-start'\n      }\">\n      <cps-toast\n        *ngFor=\"let notification of notifications; let i = index\"\n        [data]=\"notification.data\"\n        [config]=\"notification.config\"\n        @notificationAnimation\n        (closed)=\"onCloseNotification(i)\">\n      </cps-toast>\n    </div>\n  </div>\n</div>\n", styles: [".cps-notification-container-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cps-notification-container{box-sizing:border-box;display:flex;flex-direction:column;pointer-events:auto;transform:scale(1);position:relative;border-radius:4px;border:0 none;font-family:Source Sans Pro,sans-serif;font-size:1rem;font-weight:400}.cps-notification-container .cps-notification-container-content{background:transparent;flex-grow:1;gap:12px;display:flex;flex-direction:column-reverse}.cps-notification-container-top .cps-notification-container,.cps-notification-container-bottom .cps-notification-container,.cps-notification-container-left .cps-notification-container,.cps-notification-container-right .cps-notification-container,.cps-notification-container-top-left .cps-notification-container,.cps-notification-container-top-right .cps-notification-container,.cps-notification-container-bottom-left .cps-notification-container,.cps-notification-container-bottom-right .cps-notification-container{margin:.75rem;transform:translateZ(0)}.cps-notification-container-left{justify-content:flex-start}.cps-notification-container-right{justify-content:flex-end}.cps-notification-container-top{align-items:flex-start}.cps-notification-container-top-left{justify-content:flex-start;align-items:flex-start}.cps-notification-container-top-right{justify-content:flex-end;align-items:flex-start}.cps-notification-container-bottom{align-items:flex-end}.cps-notification-container-bottom-left{justify-content:flex-start;align-items:flex-end}.cps-notification-container-bottom-right{justify-content:flex-end;align-items:flex-end}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1$1.PrimeNGConfig }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { position: [{
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1$1.PrimeNGConfig }, { type: i0.ChangeDetectorRef }], propDecorators: { position: [{
                 type: Input
             }], maxAmount: [{
                 type: Input
@@ -11824,18 +11882,50 @@ class CpsNotificationService {
         this.document = document;
         this._containersMap = new Map();
     }
+    /**
+     * Shows a notification with type 'info'.
+     * @param {string} message - Notification message.
+     * @param {string} details - Notification details.
+     * @param {CpsNotificationConfig} config - CpsNotificationConfig object.
+     * @group Method
+     */
     info(message, details, config) {
         this._createNotification(CpsNotificationType.INFO, message, details, config);
     }
+    /**
+     * Shows a notification with type 'warning'.
+     * @param {string} message - Notification message.
+     * @param {string} details - Notification details.
+     * @param {CpsNotificationConfig} config - CpsNotificationConfig object.
+     * @group Method
+     */
     warning(message, details, config) {
         this._createNotification(CpsNotificationType.WARNING, message, details, config);
     }
+    /**
+     * Shows a notification with type 'success'.
+     * @param {string} message - Notification message.
+     * @param {string} details - Notification details.
+     * @param {CpsNotificationConfig} config - CpsNotificationConfig object.
+     * @group Method
+     */
     success(message, details, config) {
         this._createNotification(CpsNotificationType.SUCCESS, message, details, config);
     }
+    /**
+     * Shows a notification with type 'error'.
+     * @param {string} message - Notification message.
+     * @param {string} details - Notification details.
+     * @param {CpsNotificationConfig} config - CpsNotificationConfig object.
+     * @group Method
+     */
     error(message, details, config) {
         this._createNotification(CpsNotificationType.ERROR, message, details, config);
     }
+    /**
+     * Clears all notifications.
+     * @group Method
+     */
     clear() {
         this._containersMap.forEach((container) => {
             this._appRef.detachView(container.hostView);
@@ -11890,16 +11980,16 @@ class CpsNotificationService {
             this._containersMap.delete(position);
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsNotificationService, deps: [{ token: i0.ApplicationRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsNotificationService, providedIn: 'root' }); }
 }
-CpsNotificationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsNotificationService, deps: [{ token: i0.ApplicationRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-CpsNotificationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsNotificationService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsNotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CpsNotificationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i0.ApplicationRef }, { type: Document, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }]; } });
+                }] }] });
 /*
  * Public API Surface of cps-ui-kit