cps-ui-kit 17.27.0 → 17.29.0

package/fesm2022/cps-ui-kit.mjs

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
-import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
+import { DOCUMENT, CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, Input, Directive, HostListener, EventEmitter, Self, Optional, Output, ViewChild, Pipe, PLATFORM_ID, ChangeDetectionStrategy, ViewEncapsulation, Inject, HostBinding, InjectionToken, Host, ContentChild, ViewChildren, RendererStyleFlags2, TemplateRef, ContentChildren, input, computed, createComponent, createEnvironmentInjector, Injectable, SkipSelf } from '@angular/core';
+import { Component, Inject, Input, Directive, HostListener, EventEmitter, Self, Optional, Output, ViewChild, Pipe, PLATFORM_ID, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, InjectionToken, Host, ViewChildren, ContentChild, RendererStyleFlags2, TemplateRef, ContentChildren, input, computed, createComponent, createEnvironmentInjector, Injectable, SkipSelf } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule, Validators, ReactiveFormsModule } from '@angular/forms';
 import { isEqual, cloneDeep } from 'lodash-es';
@@ -19,7 +19,7 @@ import * as i3$1 from 'primeng/tree';
 import { TreeModule } from 'primeng/tree';
 import { Subject, takeUntil, debounceTime, distinctUntilChanged, fromEvent, Subscription, take, catchError, of } from 'rxjs';
 import * as i1$3 from 'primeng/table';
-import { SortableColumn, TableService, Table, TableModule, TableHeaderCheckbox, TableCheckbox } from 'primeng/table';
+import { SortableColumn, Table, TableService, TableModule, TableHeaderCheckbox, TableCheckbox } from 'primeng/table';
 import * as i2$1 from 'primeng/treetable';
 import { TTSortableColumn, TTHeaderCheckbox, TTCheckbox, TreeTableToggler, TreeTableService, TreeTable, TreeTableModule } from 'primeng/treetable';
 import * as i2$2 from 'primeng/calendar';
@@ -55,17 +55,17 @@ const parseSize = (size) => {
     return { value, unit };
 };
 
-const isSameDomain = (styleSheet) => {
+const isSameDomain = (styleSheet, _window) => {
     if (!styleSheet.href) {
         return true;
     }
-    return styleSheet.href.indexOf(window.location.origin) === 0;
+    return styleSheet.href.indexOf(_window.location.origin) === 0;
 };
 const isStyleRule = (rule) => rule.type === 1;
-const isValidCSSColor = (val) => {
+const isValidCSSColor = (val, _document) => {
     if (val === 'currentColor')
         return true;
-    const element = document.createElement('div');
+    const element = _document.createElement('div');
     element.style.backgroundColor = val;
     return element && element.style.backgroundColor !== '';
 };
@@ -89,7 +89,9 @@ const isDark = (color) => {
     // Using the HSP value, determine whether the color is light or dark
     return hsp <= 127.5;
 };
-const getCpsColors = () => [...document.styleSheets].filter(isSameDomain).reduce((finalArr, sheet) => finalArr.concat([...sheet.cssRules].filter(isStyleRule).reduce((propValArr, rule) => {
+const getCpsColors = (_document) => [..._document.styleSheets]
+    .filter((sheet) => isSameDomain(sheet, _document.defaultView))
+    .reduce((finalArr, sheet) => finalArr.concat([...sheet.cssRules].filter(isStyleRule).reduce((propValArr, rule) => {
     const props = [...rule.style]
         .map((propName) => [
         propName.trim(),
@@ -98,10 +100,10 @@ const getCpsColors = () => [...document.styleSheets].filter(isSameDomain).reduce
         .filter(([propName]) => propName.indexOf('--cps-color') === 0);
     return [...propValArr, ...props];
 }, [])), []);
-const getCSSColor = (val) => {
+const getCSSColor = (val, _document) => {
     if (!val)
         return '';
-    return isValidCSSColor(val) ? val : `var(--cps-color-${val})`;
+    return isValidCSSColor(val, _document) ? val : `var(--cps-color-${val})`;
 };
 const getTextColor = (backgroundColor) => {
     if (isDark(backgroundColor)) {
@@ -236,7 +238,9 @@ const iconNames = [
  * @group Components
  */
 class CpsIconComponent {
-    constructor() {
+    // eslint-disable-next-line no-useless-constructor
+    constructor(document) {
+        this.document = document;
         /**
          * Name of the icon.
          * @group Props
@@ -258,7 +262,7 @@ class CpsIconComponent {
         this.classesList = ['cps-icon'];
     }
     ngOnChanges() {
-        this.iconColor = getCSSColor(this.color);
+        this.iconColor = getCSSColor(this.color, this.document);
         this.setClasses();
     }
     setClasses() {
@@ -288,13 +292,16 @@ class CpsIconComponent {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsIconComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", 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: "17.3.0", 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: [{
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { icon: [{
                 type: Input
             }], size: [{
                 type: Input
@@ -307,7 +314,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
  * @group Components
  */
 class CpsProgressLinearComponent {
-    constructor() {
+    // eslint-disable-next-line no-useless-constructor
+    constructor(document) {
+        this.document = document;
         /**
          * Width of the progress bar, of type number denoting pixels or string.
          * @group Props
@@ -343,16 +352,19 @@ class CpsProgressLinearComponent {
         this.width = convertSize(this.width);
         this.height = convertSize(this.height);
         this.radius = convertSize(this.radius);
-        this.color = getCSSColor(this.color);
-        this.bgColor = getCSSColor(this.bgColor);
+        this.color = getCSSColor(this.color, this.document);
+        this.bgColor = getCSSColor(this.bgColor, this.document);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsProgressLinearComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsProgressLinearComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", 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: "17.3.0", 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: [{
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { width: [{
                 type: Input
             }], height: [{
                 type: Input
@@ -371,9 +383,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
  * @group Components
  */
 class CpsTooltipDirective {
-    // eslint-disable-next-line no-useless-constructor
-    constructor(_elementRef) {
+    constructor(_elementRef, document) {
         this._elementRef = _elementRef;
+        this.document = document;
         /**
          * Delay to show the tooltip in milliseconds, it can be of type string or number.
          * @group Props
@@ -419,18 +431,18 @@ class CpsTooltipDirective {
                 return;
             if (this.tooltipDisabled)
                 return;
-            this._popup = document.createElement('div');
+            this._popup = this.document.createElement('div');
             this._constructElement(this._popup);
             if (this.tooltipPersistent)
                 this._popup.addEventListener('click', this._destroyTooltip);
-            window.addEventListener('scroll', this._destroyTooltip, true);
+            this.window.addEventListener('scroll', this._destroyTooltip, true);
         };
         this._destroyTooltip = (event = undefined) => {
             const removeFromDOM = () => {
                 this._popup?.remove();
                 this._popup = undefined;
             };
-            window.removeEventListener('scroll', this._destroyTooltip, true);
+            this.window.removeEventListener('scroll', this._destroyTooltip, true);
             if (!this._popup)
                 return;
             this._popup.removeEventListener('click', this._destroyTooltip);
@@ -448,18 +460,19 @@ class CpsTooltipDirective {
                 }, 200);
             }
         };
+        this.window = this.document.defaultView;
     }
     ngOnDestroy() {
         this._destroyTooltip();
     }
     _constructElement(popup) {
-        const popupContent = document.createElement('div');
+        const popupContent = this.document.createElement('div');
         popupContent.innerHTML = this.tooltip || 'Add your text to this tooltip';
         popupContent.classList.add(this.tooltipContentClass);
         popup.appendChild(popupContent);
         popup.classList.add('cps-tooltip');
         popup.style.maxWidth = convertSize(this.tooltipMaxWidth);
-        document.body.appendChild(popup);
+        this.document.body.appendChild(popup);
         requestAnimationFrame(function () {
             popup.style.opacity = '1';
         });
@@ -472,12 +485,12 @@ class CpsTooltipDirective {
         popup.style.top = coords.top.toString() + 'px';
     }
     _getCoords() {
-        function isInsideScreen(coords) {
+        const isInsideScreen = (coords) => {
             return (coords.top >= 0 &&
                 coords.left >= 0 &&
-                coords.left + popupRect.width <= window.innerWidth &&
-                coords.top + popupRect.height <= window.innerHeight);
-        }
+                coords.left + popupRect.width <= this.window.innerWidth &&
+                coords.top + popupRect.height <= this.window.innerHeight);
+        };
         let positions = ['top', 'bottom', 'left', 'right'];
         positions = positions.filter((item) => item !== this.tooltipPosition);
         positions.unshift(this.tooltipPosition);
@@ -497,30 +510,30 @@ class CpsTooltipDirective {
             case 'bottom':
                 return {
                     left: targetElRect.left +
-                        window.scrollX +
+                        this.window.scrollX +
                         (targetEl.offsetWidth - popupRect.width) / 2,
-                    top: targetElRect.bottom + window.scrollY + 8
+                    top: targetElRect.bottom + this.window.scrollY + 8
                 };
             case 'left':
                 return {
-                    left: targetElRect.left - window.scrollX - popupRect.width - 8,
+                    left: targetElRect.left - this.window.scrollX - popupRect.width - 8,
                     top: targetElRect.top +
-                        window.scrollY +
+                        this.window.scrollY +
                         (targetEl.offsetHeight - popupRect.height) / 2
                 };
             case 'right':
                 return {
-                    left: targetElRect.right + window.scrollX + 8,
+                    left: targetElRect.right + this.window.scrollX + 8,
                     top: targetElRect.top +
-                        window.scrollY +
+                        this.window.scrollY +
                         (targetEl.offsetHeight - popupRect.height) / 2
                 };
             default:
                 return {
                     left: targetElRect.left +
-                        window.scrollX +
+                        this.window.scrollX +
                         (targetEl.offsetWidth - popupRect.width) / 2,
-                    top: targetElRect.top + window.scrollY - popupRect.height - 8
+                    top: targetElRect.top + this.window.scrollY - popupRect.height - 8
                 };
         }
     }
@@ -569,7 +582,7 @@ class CpsTooltipDirective {
         if (this._popup)
             this._destroyTooltip(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTooltipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTooltipDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", 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: "17.3.0", ngImport: i0, type: CpsTooltipDirective, decorators: [{
@@ -578,7 +591,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                     selector: '[cpsTooltip]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { tooltip: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { tooltip: [{
                 type: Input,
                 args: ['cpsTooltip']
             }], tooltipOpenDelay: [{
@@ -974,7 +990,7 @@ class CpsInputComponent {
         this.elementRef?.nativeElement?.querySelector('input')?.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", 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.3.0", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", 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      autocomplete=\"off\"\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsInputComponent, decorators: [{
             type: Component,
@@ -983,7 +999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         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:#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"] }]
+                    ], 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      autocomplete=\"off\"\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
                 }, {
@@ -1203,7 +1219,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
  * @group Components
  */
 class CpsProgressCircularComponent {
-    constructor() {
+    // eslint-disable-next-line no-useless-constructor
+    constructor(document) {
+        this.document = document;
         /**
          * Diameter of the progress bar, of type number denoting pixels or string.
          * @group Props
@@ -1223,15 +1241,18 @@ class CpsProgressCircularComponent {
     ngOnInit() {
         this.diameter = convertSize(this.diameter);
         this.strokeWidth = convertSize(this.strokeWidth);
-        this.color = getCSSColor(this.color);
+        this.color = getCSSColor(this.color, this.document);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsProgressCircularComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsProgressCircularComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", 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: "17.3.0", 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: [{
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { diameter: [{
                 type: Input
             }], strokeWidth: [{
                 type: Input
@@ -1346,6 +1367,7 @@ class CpsMenuComponent {
         this.selfClick = false;
         this.position = 'default';
         this.itemsClasses = [];
+        this.window = this.document.defaultView;
         this.resizeObserver = new ResizeObserver((entries) => {
             if (this.target) {
                 entries.forEach((entry) => {
@@ -1463,11 +1485,10 @@ class CpsMenuComponent {
         if (isPlatformBrowser(this.platformId)) {
             if (!this.documentClickListener && this.dismissable) {
                 this.zone.runOutsideAngular(() => {
-                    const documentEvent = DomHandler.isIOS() ? 'touchstart' : 'mousedown';
                     const documentTarget = this.el
                         ? this.el.nativeElement.ownerDocument
                         : this.document;
-                    this.documentClickListener = this.renderer.listen(documentTarget, documentEvent, (event) => {
+                    this.documentClickListener = this.renderer.listen(documentTarget, 'mousedown', (event) => {
                         if (!this.persistent &&
                             !this.container?.contains(event.target) &&
                             this.target !== event.target &&
@@ -1528,17 +1549,17 @@ class CpsMenuComponent {
                 case 'br':
                     return {
                         top: Math.max(targetOffset.top + target.offsetHeight - element.offsetHeight, 0),
-                        left: Math.min(targetOffset.left + target.offsetWidth, window.innerWidth - element.offsetWidth)
+                        left: Math.min(targetOffset.left + target.offsetWidth, this.window.innerWidth - element.offsetWidth)
                     };
                 case 'tl':
                     return {
-                        top: Math.min(targetOffset.top, window.innerHeight - element.offsetHeight),
+                        top: Math.min(targetOffset.top, this.window.innerHeight - element.offsetHeight),
                         left: Math.max(0, targetOffset.left - element.offsetWidth)
                     };
                 case 'tr':
                     return {
-                        top: Math.min(targetOffset.top, window.innerHeight - element.offsetHeight),
-                        left: Math.min(targetOffset.left + target.offsetWidth, window.innerWidth - element.offsetWidth)
+                        top: Math.min(targetOffset.top, this.window.innerHeight - element.offsetHeight),
+                        left: Math.min(targetOffset.left + target.offsetWidth, this.window.innerWidth - element.offsetWidth)
                     };
                 case 'default':
                 default:
@@ -1719,7 +1740,7 @@ class CpsMenuComponent {
         this._destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", 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.3.0", 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: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", 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()\">\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)',
@@ -1763,7 +1784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", 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:#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"] }]
+                    ], 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()\">\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]
@@ -3163,8 +3184,9 @@ class CpsAutocompleteComponent {
     get options() {
         return this._options;
     }
-    constructor(_control, cdRef, _labelByValue) {
+    constructor(_control, document, cdRef, _labelByValue) {
         this._control = _control;
+        this.document = document;
         this.cdRef = cdRef;
         this._labelByValue = _labelByValue;
         /**
@@ -3606,7 +3628,7 @@ class CpsAutocompleteComponent {
     }
     isActive() {
         return (this.isOpened ||
-            document.activeElement === this.autocompleteInput?.nativeElement);
+            this.document.activeElement === this.autocompleteInput?.nativeElement);
     }
     onBeforeOptionsHidden(reason) {
         if ([CpsMenuHideReason.SCROLL, CpsMenuHideReason.RESIZE].includes(reason)) {
@@ -3914,7 +3936,7 @@ class CpsAutocompleteComponent {
             this.focusInput();
         }, 0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsAutocompleteComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: LabelByValuePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsAutocompleteComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: LabelByValuePipe }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", 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", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", loadingMessage: "loadingMessage", showLoadingMessage: "showLoadingMessage", emptyMessage: "emptyMessage", showEmptyMessage: "showEmptyMessage", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", externalError: "externalError", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", emptyOptionIndex: "emptyOptionIndex", inputChangeDebounceTime: "inputChangeDebounceTime", _value: ["value", "_value"], options: "options" }, outputs: { valueChanged: "valueChanged", inputChanged: "inputChanged", focused: "focused", 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 }, { propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true }], usesOnChanges: 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: isActive()\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]=\"isActive()\"\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 autocompleteInputTemplate\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                autocompleteInputTemplate;\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                autocompleteInputTemplate;\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                autocompleteInputTemplate;\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($event)\"\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=\"loading && showLoadingMessage\"\n          class=\"cps-autocomplete-options-loading\">\n          {{ loadingMessage }}\n        </div>\n        <div\n          *ngIf=\"\n            showEmptyMessage &&\n            filteredOptions.length < 1 &&\n            !loading &&\n            inputTextDebounced\n          \"\n          class=\"cps-autocomplete-options-empty\">\n          {{ emptyMessage }}\n        </div>\n        <ng-container *ngIf=\"!virtualScroll && !loading\">\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 && !loading\">\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  #autocompleteInputTemplate\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    #autocompleteInput\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    (focus)=\"onFocus()\"\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,.cps-autocomplete-options .cps-autocomplete-options-loading{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: "17.3.0", ngImport: i0, type: CpsAutocompleteComponent, decorators: [{
@@ -3935,6 +3957,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                     type: Self
                 }, {
                     type: Optional
+                }] }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
                 }] }, { type: i0.ChangeDetectorRef }, { type: LabelByValuePipe }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -4053,9 +4078,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
  * @group Components
  */
 class CpsTreeAutocompleteComponent extends CpsBaseTreeDropdownComponent {
-    constructor(control, cdRef) {
+    constructor(control, document, cdRef) {
         super(control, cdRef);
         this.control = control;
+        this.document = document;
         this.cdRef = cdRef;
         /**
          * Message if array of items is empty.
@@ -4152,7 +4178,7 @@ class CpsTreeAutocompleteComponent extends CpsBaseTreeDropdownComponent {
     }
     isActive() {
         return (this.isOpened ||
-            document.activeElement === this.treeAutocompleteInput?.nativeElement);
+            this.document.activeElement === this.treeAutocompleteInput?.nativeElement);
     }
     remove(option) {
         super.remove(option);
@@ -4273,7 +4299,7 @@ class CpsTreeAutocompleteComponent extends CpsBaseTreeDropdownComponent {
             this.focusInput();
         }, 0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTreeAutocompleteComponent, deps: [{ token: i1.NgControl, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTreeAutocompleteComponent, deps: [{ token: i1.NgControl, optional: true }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsTreeAutocompleteComponent, isStandalone: true, selector: "cps-tree-autocomplete", inputs: { emptyMessage: "emptyMessage", appearance: "appearance", placeholder: "placeholder" }, viewQueries: [{ propertyName: "treeAutocompleteInput", first: true, predicate: ["treeAutocompleteInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-treeautocomplete\"\n  tabindex=\"1\"\n  [ngClass]=\"{ disabled: disabled, error: error, active: isActive() }\"\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]=\"isActive()\"\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 treeAutocompleteInputTemplate\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                treeAutocompleteInputTemplate;\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                treeAutocompleteInputTemplate;\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                treeAutocompleteInputTemplate;\n                context: {\n                  inputClass: 'multi-chip-input'\n                }\n              \"></ng-container>\n          </div>\n        </div>\n        <span class=\"cps-treeautocomplete-box-icons\">\n          <span\n            *ngIf=\"clearable && !disabled\"\n            [style.visibility]=\"\n              persistentClear ||\n              (!persistentClear &&\n                ((multiple && treeSelection?.length) ||\n                  (!multiple && treeSelection)))\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-treeautocomplete-box-clear-icon\">\n            <cps-icon\n              icon=\"delete\"\n              size=\"small\"\n              (click)=\"clear($event)\"></cps-icon>\n          </span>\n          <span\n            *ngIf=\"showChevron\"\n            class=\"cps-treeautocomplete-box-chevron\"\n            (mousedown)=\"onChevronClick($event)\">\n            <cps-icon\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-treeautocomplete-options-menu\">\n      <div\n        class=\"cps-treeautocomplete-options\"\n        [ngStyle]=\"{\n          width: boxWidth + 'px'\n        }\">\n        <p-tree\n          #treeList\n          [emptyMessage]=\"emptyMessage\"\n          [virtualScroll]=\"virtualScroll\"\n          [virtualScrollItemSize]=\"virtualScrollItemSize\"\n          [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n          [scrollHeight]=\"virtualListHeight + 'px'\"\n          (onNodeSelect)=\"onSelectNode()\"\n          (onNodeExpand)=\"onNodeExpand($event)\"\n          (onNodeCollapse)=\"onNodeCollapse($event)\"\n          (onFilter)=\"onFilterOptions()\"\n          [value]=\"innerOptions\"\n          [(selection)]=\"treeSelection\"\n          (selectionChange)=\"treeSelectionChanged($event)\"\n          [metaKeySelection]=\"multiple ? false : true\"\n          [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n          <ng-template let-node pTemplate=\"directory\">\n            <span class=\"cps-treeautocomplete-directory-elem\">{{\n              node.label\n            }}</span>\n          </ng-template>\n          <ng-template let-node pTemplate=\"default\">\n            <span class=\"cps-treeautocomplete-option\">\n              <span class=\"cps-treeautocomplete-option-left\">\n                <span\n                  *ngIf=\"multiple\"\n                  class=\"cps-treeautocomplete-option-check\">\n                </span>\n                <span\n                  class=\"cps-treeautocomplete-option-label\"\n                  [class.virtual-row]=\"virtualScroll\"\n                  >{{ node.label }}</span\n                >\n              </span>\n              <span\n                class=\"cps-treeautocomplete-option-info\"\n                [class.virtual-row]=\"virtualScroll\"\n                >{{ node.info }}</span\n              >\n            </span>\n          </ng-template>\n        </p-tree>\n      </div>\n    </cps-menu>\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"cps-treeautocomplete-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeautocomplete-hint\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-treeautocomplete-error\">\n    {{ error }}\n  </div>\n</div>\n\n<ng-template\n  #treeAutocompleteInputTemplate\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    #treeAutocompleteInput\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    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeautocomplete .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:#fff!important}:host .cps-treeautocomplete .cps-treeautocomplete-container.borderless .cps-treeautocomplete-box,:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-label .cps-treeautocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-box-input{min-height:36px;padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:3px;padding-bottom:3px;min-height:36px;justify-content:center;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-item-input{min-height:28px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-treeautocomplete .cps-treeautocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete .cps-treeautocomplete-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete.disabled{pointer-events:none}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box{background:#f7f7f7}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .text-group,:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-label{color:var(--cps-color-text-mild)}:host .cps-treeautocomplete.error .cps-treeautocomplete-box{border-color:var(--cps-color-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-treeautocomplete-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option .virtual-row{white-space:nowrap}.cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode{padding:unset;outline:0 none;min-width:fit-content}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeautocomplete-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content:not(.p-highlight){background-color:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeautocomplete-option-check{opacity:1}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected-dark)}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content .p-tree-toggler{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeautocomplete-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeautocomplete-options ::ng-deep .p-tree-empty-message{padding:11px;font-size:16px;cursor:default}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-directory-elem{font-weight:700;font-size:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i3$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "virtualNodeHeight"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTreeAutocompleteComponent, decorators: [{
@@ -4290,6 +4316,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                     ], selector: 'cps-tree-autocomplete', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-treeautocomplete\"\n  tabindex=\"1\"\n  [ngClass]=\"{ disabled: disabled, error: error, active: isActive() }\"\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]=\"isActive()\"\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 treeAutocompleteInputTemplate\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                treeAutocompleteInputTemplate;\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                treeAutocompleteInputTemplate;\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                treeAutocompleteInputTemplate;\n                context: {\n                  inputClass: 'multi-chip-input'\n                }\n              \"></ng-container>\n          </div>\n        </div>\n        <span class=\"cps-treeautocomplete-box-icons\">\n          <span\n            *ngIf=\"clearable && !disabled\"\n            [style.visibility]=\"\n              persistentClear ||\n              (!persistentClear &&\n                ((multiple && treeSelection?.length) ||\n                  (!multiple && treeSelection)))\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-treeautocomplete-box-clear-icon\">\n            <cps-icon\n              icon=\"delete\"\n              size=\"small\"\n              (click)=\"clear($event)\"></cps-icon>\n          </span>\n          <span\n            *ngIf=\"showChevron\"\n            class=\"cps-treeautocomplete-box-chevron\"\n            (mousedown)=\"onChevronClick($event)\">\n            <cps-icon\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-treeautocomplete-options-menu\">\n      <div\n        class=\"cps-treeautocomplete-options\"\n        [ngStyle]=\"{\n          width: boxWidth + 'px'\n        }\">\n        <p-tree\n          #treeList\n          [emptyMessage]=\"emptyMessage\"\n          [virtualScroll]=\"virtualScroll\"\n          [virtualScrollItemSize]=\"virtualScrollItemSize\"\n          [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n          [scrollHeight]=\"virtualListHeight + 'px'\"\n          (onNodeSelect)=\"onSelectNode()\"\n          (onNodeExpand)=\"onNodeExpand($event)\"\n          (onNodeCollapse)=\"onNodeCollapse($event)\"\n          (onFilter)=\"onFilterOptions()\"\n          [value]=\"innerOptions\"\n          [(selection)]=\"treeSelection\"\n          (selectionChange)=\"treeSelectionChanged($event)\"\n          [metaKeySelection]=\"multiple ? false : true\"\n          [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n          <ng-template let-node pTemplate=\"directory\">\n            <span class=\"cps-treeautocomplete-directory-elem\">{{\n              node.label\n            }}</span>\n          </ng-template>\n          <ng-template let-node pTemplate=\"default\">\n            <span class=\"cps-treeautocomplete-option\">\n              <span class=\"cps-treeautocomplete-option-left\">\n                <span\n                  *ngIf=\"multiple\"\n                  class=\"cps-treeautocomplete-option-check\">\n                </span>\n                <span\n                  class=\"cps-treeautocomplete-option-label\"\n                  [class.virtual-row]=\"virtualScroll\"\n                  >{{ node.label }}</span\n                >\n              </span>\n              <span\n                class=\"cps-treeautocomplete-option-info\"\n                [class.virtual-row]=\"virtualScroll\"\n                >{{ node.info }}</span\n              >\n            </span>\n          </ng-template>\n        </p-tree>\n      </div>\n    </cps-menu>\n    <cps-progress-linear\n      *ngIf=\"loading\"\n      height=\"3\"\n      radius=\"4\"\n      opacity=\"0.3\"\n      class=\"cps-treeautocomplete-progress-bar\"\n      bgColor=\"transparent\">\n    </cps-progress-linear>\n  </div>\n  <div *ngIf=\"!error && !hideDetails\" class=\"cps-treeautocomplete-hint\">\n    {{ hint }}\n  </div>\n  <div *ngIf=\"error && !hideDetails\" class=\"cps-treeautocomplete-error\">\n    {{ error }}\n  </div>\n</div>\n\n<ng-template\n  #treeAutocompleteInputTemplate\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    #treeAutocompleteInput\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    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeautocomplete .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:#fff!important}:host .cps-treeautocomplete .cps-treeautocomplete-container.borderless .cps-treeautocomplete-box,:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-box{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-label .cps-treeautocomplete-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:38px;width:100%;cursor:text;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:36px;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-box-input{min-height:36px;padding:0;background-color:transparent;width:0;min-width:30px;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:Source Sans Pro,sans-serif}:host .cps-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-lightest);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:3px;padding-bottom:3px;min-height:36px;justify-content:center;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-chip-input{min-height:30px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-item-input{min-height:28px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-color-calm);margin-left:8px}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:8px;transition-duration:.2s;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-treeautocomplete .cps-treeautocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete .cps-treeautocomplete-error{color:var(--cps-color-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete.disabled{pointer-events:none}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box{background:#f7f7f7}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .text-group,:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-label{color:var(--cps-color-text-mild)}:host .cps-treeautocomplete.error .cps-treeautocomplete-box{border-color:var(--cps-color-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-treeautocomplete-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:8px;display:flex;align-items:center;justify-content:space-between}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:8px}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:6px;color:var(--cps-color-text-light)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option .virtual-row{white-space:nowrap}.cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}.cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree-container{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode{padding:unset;outline:0 none;min-width:fit-content}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-content{display:flex;align-items:center}.cps-treeautocomplete-options ::ng-deep .p-treenode-content .p-treenode-label{width:100%}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content:not(.p-highlight){background-color:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .cps-treeautocomplete-option-check{opacity:1}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content.p-highlight{background:var(--cps-color-highlight-selected-dark)}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeautocomplete-options ::ng-deep .p-tree-toggler :hover{color:var(--cps-color-calm)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-container .p-treenode:focus>.p-treenode-content .p-tree-toggler{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-treenode-content:hover .p-tree-toggler{color:var(--cps-color-calm)!important}.cps-treeautocomplete-options ::ng-deep .p-tree .p-treenode-children{padding:0 0 0 1rem}.cps-treeautocomplete-options ::ng-deep .p-treenode-children{margin:0;padding:0;list-style-type:none}.cps-treeautocomplete-options ::ng-deep .p-tree-empty-message{padding:11px;font-size:16px;cursor:default}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-directory-elem{font-weight:700;font-size:16px}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Optional
+                }] }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
                 }] }, { type: i0.ChangeDetectorRef }], propDecorators: { emptyMessage: [{
                 type: Input
             }], appearance: [{
@@ -4306,7 +4335,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
  * @group Components
  */
 class CpsButtonComponent {
-    constructor() {
+    // eslint-disable-next-line no-useless-constructor
+    constructor(document) {
+        this.document = document;
         /**
          * Color of the button.
          * @group Props
@@ -4382,10 +4413,12 @@ class CpsButtonComponent {
         this.classesList = [];
     }
     ngOnChanges() {
-        this.buttonColor = getCSSColor(this.color);
+        this.buttonColor = getCSSColor(this.color, this.document);
         this.borderRadius = convertSize(this.borderRadius);
         this.textColor =
-            this.type === 'solid' ? getCSSColor(this.contentColor) : this.buttonColor;
+            this.type === 'solid'
+                ? getCSSColor(this.contentColor, this.document)
+                : this.buttonColor;
         this.setClasses();
     }
     setClasses() {
@@ -4454,13 +4487,16 @@ class CpsButtonComponent {
     onClick(event) {
         this.clicked.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsButtonComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsButtonComponent, isStandalone: true, selector: "cps-button", inputs: { color: "color", contentColor: "contentColor", borderRadius: "borderRadius", 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" } }, usesOnChanges: true, 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      backgroundColor: type === 'solid' ? buttonColor : 'transparent',\n      color: textColor,\n      height: cvtHeight || 'none',\n      borderRadius: borderRadius\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: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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", 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      backgroundColor: type === 'solid' ? buttonColor : 'transparent',\n      color: textColor,\n      height: cvtHeight || 'none',\n      borderRadius: borderRadius\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: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: [{
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { color: [{
                 type: Input
             }], contentColor: [{
                 type: Input
@@ -4508,8 +4544,9 @@ class CpsCheckboxComponent {
     get value() {
         return this._value;
     }
-    constructor(_control, _elementRef) {
+    constructor(_control, document, _elementRef) {
         this._control = _control;
+        this.document = document;
         this._elementRef = _elementRef;
         /**
          * Label of the checkbox.
@@ -4572,7 +4609,7 @@ class CpsCheckboxComponent {
         }
     }
     ngOnInit() {
-        this.iconColor = getCSSColor(this.iconColor);
+        this.iconColor = getCSSColor(this.iconColor, this.document);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -4599,7 +4636,7 @@ class CpsCheckboxComponent {
     focus() {
         this._elementRef?.nativeElement?.querySelector('input')?.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsCheckboxComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsCheckboxComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsCheckboxComponent, decorators: [{
@@ -4609,6 +4646,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                     type: Self
                 }, {
                     type: Optional
+                }] }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
                 }] }, { type: i0.ElementRef }], propDecorators: { label: [{
                 type: Input
             }], disabled: [{
@@ -4962,7 +5002,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
  * @group Components
  */
 class CpsLoaderComponent {
-    constructor() {
+    // eslint-disable-next-line no-useless-constructor
+    constructor(document) {
+        this.document = document;
         /**
          * Option for loader component to take up the whole screen.
          * @group Props
@@ -4987,15 +5029,18 @@ class CpsLoaderComponent {
     }
     ngOnInit() {
         this.backgroundColor = `rgba(0, 0, 0, ${this.opacity})`;
-        this.labelColor = getCSSColor(this.labelColor);
+        this.labelColor = getCSSColor(this.labelColor, this.document);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsLoaderComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", 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;-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: [{
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { fullScreen: [{
                 type: Input
             }], opacity: [{
                 type: Input
@@ -5411,1076 +5456,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                     type: Optional
                 }] }] });
 
-// import jsPDF from 'jspdf';
-// import 'jspdf-autotable';
-function tableFactory(tableComponent) {
-    return tableComponent.primengTable;
-}
+/* eslint-disable no-unused-vars */
 /**
- * CpsTableComponent displays data in tabular format.
+ * CpsColumnFilterMatchMode is used to define how the filter value should be matched.
+ * @group Enums
+ */
+var CpsColumnFilterMatchMode;
+(function (CpsColumnFilterMatchMode) {
+    CpsColumnFilterMatchMode["STARTS_WITH"] = "startsWith";
+    CpsColumnFilterMatchMode["CONTAINS"] = "contains";
+    CpsColumnFilterMatchMode["NOT_CONTAINS"] = "notContains";
+    CpsColumnFilterMatchMode["ENDS_WITH"] = "endsWith";
+    CpsColumnFilterMatchMode["EQUALS"] = "equals";
+    CpsColumnFilterMatchMode["NOT_EQUALS"] = "notEquals";
+    CpsColumnFilterMatchMode["IN"] = "in";
+    CpsColumnFilterMatchMode["LESS_THAN"] = "lt";
+    CpsColumnFilterMatchMode["LESS_THAN_OR_EQUAL_TO"] = "lte";
+    CpsColumnFilterMatchMode["GREATER_THAN"] = "gt";
+    CpsColumnFilterMatchMode["GREATER_THAN_OR_EQUAL_TO"] = "gte";
+    CpsColumnFilterMatchMode["BETWEEN"] = "between";
+    CpsColumnFilterMatchMode["IS"] = "is";
+    CpsColumnFilterMatchMode["IS_NOT"] = "isNot";
+    CpsColumnFilterMatchMode["BEFORE"] = "before";
+    CpsColumnFilterMatchMode["AFTER"] = "after";
+    CpsColumnFilterMatchMode["DATE_IS"] = "dateIs";
+    CpsColumnFilterMatchMode["DATE_IS_NOT"] = "dateIsNot";
+    CpsColumnFilterMatchMode["DATE_BEFORE"] = "dateBefore";
+    CpsColumnFilterMatchMode["DATE_AFTER"] = "dateAfter";
+})(CpsColumnFilterMatchMode || (CpsColumnFilterMatchMode = {}));
+
+/**
+ * CpsDatepickerComponent is an input component to provide date input.
  * @group Components
  */
-class CpsTableComponent {
+class CpsDatepickerComponent {
     /**
-     * An array of objects to display.
-     * @default []
+     * Value of the datepicker.
+     * @default null
      * @group Props
      */
-    set data(value) {
-        this._data = [...value];
+    set value(value) {
+        this._value = value;
+        this.stringDate = this._dateToString(value);
+        this.onChange(value);
     }
-    get data() {
-        return this._data;
+    get value() {
+        return this._value;
     }
-    // eslint-disable-next-line no-useless-constructor
-    constructor(cdRef) {
-        this.cdRef = cdRef;
-        /**
-         * An array of objects to represent dynamic columns.
-         * @group Props
-         */
-        this.columns = [];
-        /**
-         * A key used to retrieve the header from columns.
-         * @group Props
-         */
-        this.colHeaderName = 'header';
-        /**
-         * A key used to retrieve the field from columns.
-         * @group Props
-         */
-        this.colFieldName = 'field';
-        /**
-         * Determines whether the table should have alternating stripes.
-         * @group Props
-         */
-        this.striped = true;
-        /**
-         * Determines whether the table should have borders.
-         * @group Props
-         */
-        this.bordered = true;
-        /**
-         * Size of table cells, it can be "small", "normal" or "large".
-         * @group Props
-         */
-        this.size = 'normal';
-        /**
-         * Determines whether the table should have row selection.
-         * @group Props
-         */
-        this.selectable = false;
-        /**
-         * Determines whether the table should have rows highlighting on hover.
-         * @group Props
-         */
-        this.rowHover = true;
-        /**
-         * Field, that uniquely identifies a record in data (needed for expandable rows).
-         * @group Props
-         */
-        this.dataKey = '';
-        /**
-         * Determines whether the table should show row menus.
-         * @group Props
-         */
-        this.showRowMenu = false;
-        /**
-         * Determines whether the 'Remove' button should be displayed in the row menu.
-         * Note: This setting only takes effect if 'showRowMenu' is true.
-         * @group Props
-         */
-        this.showRowRemoveButton = true;
-        /**
-         * Determines whether the 'Edit' button should be displayed in the row menu.
-         * Note: This setting only takes effect if 'showRowMenu' is true.
-         * @group Props
-         */
-        this.showRowEditButton = true;
-        /**
-         * Determines whether the table should have re-orderable rows.
-         * @group Props
-         */
-        this.reorderableRows = false;
-        /**
-         * When enabled, a loader component is displayed.
-         * @group Props
-         */
-        this.loading = false;
-        /**
-         * Inline style of the table.
-         * @group Props
-         */
-        this.tableStyle = undefined;
-        /**
-         * Style class of the table.
-         * @group Props
-         */
-        this.tableStyleClass = '';
+    constructor(_control) {
+        this._control = _control;
         /**
-         * Makes all columns sortable if columns prop is provided.
+         * Label of the datepicker element.
          * @group Props
          */
-        this.sortable = false;
+        this.label = '';
         /**
-         * Determines whether sorting works on single column or on multiple columns.
+         * Determines whether datepicker is disabled.
          * @group Props
          */
-        this.sortMode = 'single';
+        this.disabled = false;
         /**
-         * Determines whether to use the default sorting or a custom one using sortFunction.
+         * Width of the datepicker of type number denoting pixels or string.
          * @group Props
          */
-        this.customSort = false;
+        this.width = '100%';
         /**
-         * Determines whether the table has a toolbar.
+         * Placeholder text.
          * @group Props
          */
-        this.hasToolbar = true;
+        this.placeholder = 'MM/DD/YYYY';
         /**
-         * Toolbar size, it can be "small" or "normal".
+         * Bottom hint text for the input field.
          * @group Props
          */
-        this.toolbarSize = 'normal';
+        this.hint = '';
         /**
-         * Toolbar title.
+         * When enabled, a clear icon is displayed to clear the value.
          * @group Props
          */
-        this.toolbarTitle = '';
+        this.clearable = false;
         /**
-         * Toolbar icon name.
+         * Hides hint and validation errors.
          * @group Props
          */
-        this.toolbarIcon = '';
+        this.hideDetails = false;
         /**
-         * Toolbar icon color.
+         * Determines whether the component should have persistent clear icon.
          * @group Props
          */
-        this.toolbarIconColor = '';
+        this.persistentClear = false;
         /**
-         * Makes table scrollable.
+         * Determines whether to show button to be able to select today's date.
          * @group Props
          */
-        this.scrollable = true;
+        this.showTodayButton = true;
         /**
-         * Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size.
+         * Determines whether the datepicker dropdown should open on input focus.
          * @group Props
          */
-        this.scrollHeight = '';
+        this.openOnInputFocus = false;
         /**
-         * Determines whether only the elements within scrollable area should be added into the DOM. Works only if scrollable prop is true.
+         * When it is not an empty string, an info icon is displayed to show text for more info.
          * @group Props
          */
-        this.virtualScroll = false;
+        this.infoTooltip = '';
         /**
-         * Determines how many additional elements to add to the DOM outside of the view.
+         * InfoTooltip class for styling.
          * @group Props
          */
-        this.numToleratedItems = 10;
+        this.infoTooltipClass = 'cps-tooltip-content';
         /**
-         * Determines whether the table should have paginator.
+         * Size of infoTooltip, of type number denoting pixels or string.
          * @group Props
          */
-        this.paginator = false;
+        this.infoTooltipMaxWidth = '100%';
         /**
-         * Determines whether to show paginator even if there is only one page.
+         * Determines whether the infoTooltip is persistent.
          * @group Props
          */
-        this.alwaysShowPaginator = true;
+        this.infoTooltipPersistent = false;
         /**
-         * Array of integer values to display inside rows per page dropdown of paginator.
+         * Position of infoTooltip, it can be "top", "bottom", "left" or "right".
          * @group Props
          */
-        this.rowsPerPageOptions = [];
+        this.infoTooltipPosition = 'top';
         /**
-         * Index of the first row to be displayed.
+         * Styling appearance of datepicker input, it can be 'outlined', 'underlined' or 'borderless.
          * @group Props
          */
-        this.first = 0;
+        this.appearance = 'outlined';
         /**
-         * Number of rows to display per page.
-         * @group Props
-         */
-        this.rows = 0;
-        /**
-         * Determines whether to reset page on rows change.
-         * @group Props
-         */
-        this.resetPageOnRowsChange = false;
-        /**
-         * Determines whether to reset page on table data sorting.
-         * @group Props
-         */
-        this.resetPageOnSort = true;
-        /**
-         * Number of total records.
-         * @group Props
-         */
-        this.totalRecords = 0;
-        /**
-         * Text to display when there is no data.
-         * @group Props
-         */
-        this.emptyMessage = 'No data';
-        /**
-         * Height of table's body when there is no data, of type number denoting pixels or string.
-         * @group Props
-         */
-        this.emptyBodyHeight = '';
-        /**
-         * Defines if data is loaded and interacted with in lazy manner.
-         * @group Props
-         */
-        this.lazy = false;
-        /**
-         * Determines whether to call lazy loading on initialization.
-         * @group Props
-         */
-        this.lazyLoadOnInit = true;
-        /**
-         * Determines whether to show global filter in the toolbar.
-         * @group Props
-         */
-        this.showGlobalFilter = false;
-        /**
-         * Global filter placeholder.
-         * @group Props
-         */
-        this.globalFilterPlaceholder = 'Search';
-        /**
-         * An array of fields to use in global filtering.
-         * @group Props
-         */
-        this.globalFilterFields = [];
-        /**
-         * Determines whether to clear global filter on data loading.
-         * @group Props
-         */
-        this.clearGlobalFilterOnLoading = false;
-        /**
-         * Determines whether to show remove button in the toolbar when rows are selected.
-         * @group Props
-         */
-        this.showRemoveBtnOnSelect = true;
-        /**
-         * Determines whether removeBtnOnSelect is disabled.
-         * @group Props
-         */
-        this.removeBtnOnSelectDisabled = false;
-        /**
-         * Determines whether to show additional button in the toolbar when rows are selected.
-         * @group Props
-         */
-        this.showAdditionalBtnOnSelect = false;
-        /**
-         * AdditionalBtnOnSelect title.
-         * @group Props
-         */
-        this.additionalBtnOnSelectTitle = 'Select action';
-        /**
-         * AdditionalBtnOnSelect icon.
-         * @group Props
-         */
-        this.additionalBtnOnSelectIcon = '';
-        /**
-         * Determines whether additionalBtnOnSelect is disabled.
-         * @group Props
-         */
-        this.additionalBtnOnSelectDisabled = false;
-        /**
-         * Determines whether to show action button in the toolbar.
-         * @group Props
-         */
-        this.showActionBtn = false;
-        /**
-         * Action button title.
-         * @group Props
-         */
-        this.actionBtnTitle = 'Action';
-        /**
-         * Action button icon.
-         * @group Props
-         */
-        this.actionBtnIcon = '';
-        /**
-         * Determines whether actionBtn is disabled.
-         * @group Props
-         */
-        this.actionBtnDisabled = false;
-        /**
-         * Determines whether to show export button in the toolbar.
-         * @group Props
-         */
-        this.showExportBtn = false;
-        /**
-         * Determines whether exportBtn is disabled.
-         * @group Props
-         */
-        this.exportBtnDisabled = false;
-        /**
-         * Name of the exported file.
-         * @group Props
-         */
-        this.exportFilename = 'download';
-        /**
-         * Character to use as the csv separator.
-         * @group Props
-         */
-        this.csvSeparator = ',';
-        /**
-         * Determines whether to show data reload button in the toolbar.
-         * @group Props
-         */
-        this.showDataReloadBtn = false;
-        /**
-         * Determines whether dataReloadBtn is disabled.
-         * @group Props
-         */
-        this.dataReloadBtnDisabled = false;
-        /**
-         * Determines whether the table should show columnsToggle menu, where you can choose which columns to be displayed. If external body template is provided, use columnsSelected event emitter.
-         * @group Props
-         */
-        this.showColumnsToggleBtn = false;
-        /**
-         * Determines whether columnsToggle button is disabled.
-         * @group Props
-         */
-        this.columnsToggleBtnDisabled = false;
-        /**
-         * Array of initial columns to show in the table. If not provided, all columns are initially visible.
-         * @group Props
-         */
-        this.initialColumns = [];
-        /**
-         * Callback to invoke on selection changed. Returns selected rows.
-         * @param {any[]} any[] - selected rows.
-         * @group Emits
-         */
-        this.rowsSelected = new EventEmitter();
-        /**
-         * Callback to invoke on selection changed. Returns selected rows indexes.
-         * @param {number[]} number[] - selected rows indexes.
-         * @group Emits
-         */
-        this.selectedRowIndexes = new EventEmitter();
-        /**
-         * Callback to invoke when action button is clicked.
-         * @param {void} void - action button clicked.
-         * @group Emits
-         */
-        this.actionBtnClicked = new EventEmitter();
-        /**
-         * Callback to invoke when edit-row button is clicked.
-         * @param {{row: any, index: number}} {row: any, index: number} - edit-row button clicked.
-         * @group Emits
-         */
-        this.editRowBtnClicked = new EventEmitter();
-        /**
-         * Callback to invoke on rows removal. Returns rows.
-         * @param {any[]} any[] - array of rows to remove.
-         * @group Emits
-         */
-        this.rowsToRemove = new EventEmitter();
-        /**
-         * Callback to invoke on rows removal. Returns rows indexes.
-         * @param {number[]} number[] - array of indexes of rows to remove.
-         * @group Emits
-         */
-        this.rowIndexesToRemove = new EventEmitter();
-        /**
-         * Callback to invoke on page changed.
-         * @param {any} any - page changed.
-         * @group Emits
-         */
-        this.pageChanged = new EventEmitter();
-        /**
-         * Callback to invoke when data is sorted.
-         * @param {any} any - sort meta.
-         * @group Emits
-         */
-        this.sorted = new EventEmitter();
-        /**
-         * Callback to invoke when data is filtered.
-         * @param {any} any - custom filtering event.
-         * @group Emits
-         */
-        this.filtered = new EventEmitter();
-        /**
-         * Callback to invoke when rows are reordered.
-         * @param {any} any - rows reordered.
-         * @group Emits
-         */
-        this.rowsReordered = new EventEmitter();
-        /**
-         * Callback to invoke on columns selection.
-         * @param {object} object - selected column.
-         * @group Emits
-         */
-        this.columnsSelected = new EventEmitter();
-        /**
-         * Callback to invoke when paging, sorting or filtering happens in lazy mode.
-         * @param {any} any - custom lazy loading event.
-         * @group Emits
-         */
-        this.lazyLoaded = new EventEmitter();
-        /**
-         * Callback to invoke when data-reload button is clicked.
-         * @param {any} any - button clicked.
-         * @group Emits
-         */
-        this.dataReloadBtnClicked = new EventEmitter();
-        /**
-         * Callback to invoke when additional button on select is clicked.
-         * @param {any[]} any[] - selected data.
-         * @group Emits
-         */
-        this.additionalBtnOnSelectClicked = new EventEmitter();
-        /**
-         * A function to implement custom sorting. customSort must be true.
-         * @param {any} any - sort meta.
-         * @group Emits
-         */
-        this.customSortFunction = new EventEmitter();
-        this._data = [];
-        this.selectedRows = [];
-        this.virtualScrollItemSize = 0;
-        this.rowOptions = [];
-        this.selectedColumns = [];
-        this.exportMenuItems = [
-            {
-                title: 'CSV',
-                icon: 'csv',
-                action: () => {
-                    this.exportTable('csv');
-                }
-            },
-            {
-                title: 'XLSX',
-                icon: 'xls',
-                action: () => {
-                    this.exportTable('xlsx');
-                }
-            }
-            // {
-            //   title: 'PDF',
-            //   icon: 'pdf',
-            //   action: () => {
-            //     this.exportTable('pdf');
-            //   }
-            // }
-        ];
-    }
-    ngOnInit() {
-        this.emptyBodyHeight = convertSize(this.emptyBodyHeight);
-        if (!this.scrollable)
-            this.virtualScroll = false;
-        if (this.showAdditionalBtnOnSelect)
-            this.showRemoveBtnOnSelect = false;
-        if (this.paginator) {
-            if (this.rowsPerPageOptions.length < 1)
-                this.rowsPerPageOptions = [5, 10, 25, 50];
-            if (!this.rows)
-                this.rows = this.rowsPerPageOptions[0];
-            else {
-                if (!this.rowsPerPageOptions.includes(this.rows)) {
-                    throw new Error('rowsPerPageOptions must include rows');
-                }
-            }
-            this.rowOptions = this.rowsPerPageOptions.map((v) => ({
-                label: '' + v,
-                value: v
-            }));
-        }
-        if (this.showGlobalFilter &&
-            this.globalFilterFields?.length < 1 &&
-            this.data?.length > 0) {
-            this.globalFilterFields = Object.keys(this.data[0]);
-        }
-        this.selectedColumns =
-            this.initialColumns.length > 0 ? this.initialColumns : this.columns;
-    }
-    get styleClass() {
-        const classesList = [];
-        switch (this.size) {
-            case 'small':
-                classesList.push('p-datatable-sm');
-                break;
-            case 'large':
-                classesList.push('p-datatable-lg');
-                break;
-        }
-        if (this.hasToolbar) {
-            switch (this.toolbarSize) {
-                case 'small':
-                    classesList.push('cps-tbar-small');
-                    break;
-                case 'normal':
-                    classesList.push('cps-tbar-normal');
-                    break;
-            }
-        }
-        if (this.striped) {
-            classesList.push('p-datatable-striped');
-        }
-        if (this.bordered) {
-            classesList.push('p-datatable-gridlines');
-        }
-        return classesList.join(' ');
-    }
-    ngAfterViewChecked() {
-        if (!this.virtualScroll || this.virtualScrollItemSize)
-            return;
-        this.virtualScrollItemSize =
-            this.primengTable?.el?.nativeElement
-                ?.querySelector('.p-datatable-tbody')
-                ?.querySelector('tr')?.clientHeight || 0;
-        this.cdRef.detectChanges();
-    }
-    ngOnChanges(changes) {
-        if (this.loading) {
-            this.clearSelection();
-            if (this.clearGlobalFilterOnLoading)
-                this.clearGlobalFilter();
-        }
-        if (changes?.data) {
-            this.resetSortingState();
-            this.selectedRows = this.selectedRows.filter((sr) => this.data.includes(sr));
-        }
-    }
-    resetSortingState() {
-        this.tUnsortDirective?.resetDefaultSortOrder();
-    }
-    clearSelection() {
-        this.selectedRows = [];
-    }
-    clearGlobalFilter() {
-        this.globalFilterComp?.clear();
-    }
-    onSelectionChanged(selection) {
-        this.rowsSelected.emit(selection);
-        const indexes = this._getIndexes(selection);
-        this.selectedRowIndexes.emit(indexes);
-    }
-    onSortFunction(event) {
-        this.customSortFunction.emit(event);
-    }
-    onFilterGlobal(value) {
-        this.primengTable.filterGlobal(value, 'contains');
-    }
-    removeSelected() {
-        this.rowsToRemove.emit(this.selectedRows);
-        const indexes = this._getIndexes(this.selectedRows);
-        this.rowIndexesToRemove.emit(indexes);
-    }
-    onClickAdditionalBtnOnSelect() {
-        this.additionalBtnOnSelectClicked.emit(this.selectedRows);
-    }
-    onClickActionBtn() {
-        this.actionBtnClicked.emit();
-    }
-    onRowsPerPageChanged() {
-        if (this.resetPageOnRowsChange) {
-            this.primengTable.first = 0;
-        }
-        this.changePage(this.getPage());
-    }
-    getPageCount() {
-        return Math.ceil(this.primengTable.totalRecords / this.rows);
-    }
-    getPage() {
-        return this.primengTable.first
-            ? Math.floor(this.primengTable.first / this.rows)
-            : 0;
-    }
-    changePage(p) {
-        const pc = Math.ceil(this.getPageCount());
-        if (p >= 0 && p < pc) {
-            this.first = this.rows * p;
-            this.primengTable.onPageChange({ first: this.first, rows: this.rows });
-        }
-    }
-    onPageChange(event) {
-        this.first = event.first;
-        this.rows = event.rows;
-        const state = {
-            page: this.getPage(),
-            first: this.first,
-            rows: this.rows,
-            pageCount: Math.ceil(this.getPageCount())
-        };
-        this.pageChanged.emit(state);
-    }
-    toggleAllColumns() {
-        this.selectedColumns =
-            this.selectedColumns.length < this.columns.length ? this.columns : [];
-        this.columnsSelected.emit(this.selectedColumns);
-    }
-    isColumnSelected(col) {
-        return this.selectedColumns.some((item) => isEqual(item, col));
-    }
-    onSelectColumn(col) {
-        let res = [];
-        if (this.isColumnSelected(col)) {
-            res = this.selectedColumns.filter((v) => !isEqual(v, col));
-        }
-        else {
-            this.columns.forEach((o) => {
-                if (this.selectedColumns.some((v) => isEqual(v, o)) ||
-                    isEqual(col, o)) {
-                    res.push(o);
-                }
-            });
-        }
-        this.selectedColumns = res;
-        this.columnsSelected.emit(this.selectedColumns);
-    }
-    onEditRowClicked(row) {
-        const [index] = this._getIndexes([row]);
-        this.editRowBtnClicked.emit({ row, index });
-    }
-    onRemoveRowClicked(item) {
-        this.rowsToRemove.emit([item]);
-        const indexes = this._getIndexes([item]);
-        this.rowIndexesToRemove.emit(indexes);
-    }
-    onSort(event) {
-        this.sorted.emit(event);
-    }
-    onFilter(event) {
-        this.filtered.emit(event);
-    }
-    onRowReorder(event) {
-        this.rowsReordered.emit(event);
-    }
-    onLazyLoaded(event) {
-        this.lazyLoaded.emit(event);
-    }
-    onReloadData() {
-        if (this.dataReloadBtnDisabled)
-            return;
-        this.dataReloadBtnClicked.emit();
-    }
-    onExportData(event) {
-        if (this.exportBtnDisabled)
-            return;
-        this.exportMenu?.toggle(event);
-    }
-    onColumnsToggle(event) {
-        if (this.columnsToggleBtnDisabled)
-            return;
-        this.colToggleMenu?.toggle(event);
-    }
-    _getIndexes(rows) {
-        let indexes = rows.map((row) => this.primengTable.value.indexOf(row));
-        const indexesMap = this.tUnsortDirective?.sortIndices;
-        if (indexesMap && indexesMap.length > 0) {
-            indexes = indexes.map((i) => indexesMap.indexOf(i));
-        }
-        return indexes;
-    }
-    exportTable(format) {
-        if (this.columns.length < 1)
-            throw new Error('Columns must be defined!');
-        if (this.selectedColumns.length < 1)
-            throw new Error('Nothing to export!');
-        switch (format) {
-            case 'csv':
-                this.primengTable.exportCSV();
-                break;
-            case 'xlsx':
-                this.exportXLSX();
-                break;
-            // case 'pdf':
-            //   this.exportPDF();
-            //   break;
-        }
-    }
-    exportXLSX() {
-        import('xlsx').then((xlsx) => {
-            const sheetData = [
-                this.selectedColumns.map((c) => c[this.colHeaderName]),
-                ...this.primengTable.value.map((item) => this.selectedColumns.map((c) => item[c[this.colFieldName]]))
-            ];
-            const worksheet = xlsx.utils.json_to_sheet(sheetData, {
-                skipHeader: true
-            });
-            const workbook = {
-                Sheets: { [this.exportFilename]: worksheet },
-                SheetNames: [this.exportFilename]
-            };
-            const xlsxBuffer = xlsx.write(workbook, {
-                bookType: 'xlsx',
-                type: 'array'
-            });
-            const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
-            const blob = new Blob([xlsxBuffer], {
-                type: EXCEL_TYPE
-            });
-            const downloadLink = document.createElement('a');
-            downloadLink.href = URL.createObjectURL(blob);
-            downloadLink.download = `${this.exportFilename}.xlsx`;
-            downloadLink.click();
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", 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", additionalBtnOnSelectIcon: "additionalBtnOnSelectIcon", additionalBtnOnSelectDisabled: "additionalBtnOnSelectDisabled", showActionBtn: "showActionBtn", actionBtnTitle: "actionBtnTitle", actionBtnIcon: "actionBtnIcon", 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            [icon]=\"additionalBtnOnSelectIcon\"\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            [icon]=\"actionBtnIcon\"\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 .cps-table-row-expanded-content td{border-left:4px solid var(--cps-color-surprise)!important}: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", "borderRadius", "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", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { 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: "17.3.0", ngImport: i0, type: CpsTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cps-table', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        FormsModule,
-                        CommonModule,
-                        TableModule,
-                        TableUnsortDirective,
-                        CpsInputComponent,
-                        CpsButtonComponent,
-                        CpsSelectComponent,
-                        CpsIconComponent,
-                        CpsMenuComponent,
-                        CpsLoaderComponent,
-                        TableRowMenuComponent,
-                        CpsTableColumnSortableDirective
-                    ], providers: [
-                        TableService,
-                        {
-                            provide: Table,
-                            useFactory: tableFactory,
-                            // 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            [icon]=\"additionalBtnOnSelectIcon\"\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            [icon]=\"actionBtnIcon\"\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 .cps-table-row-expanded-content td{border-left:4px solid var(--cps-color-surprise)!important}: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
-            }], colFieldName: [{
-                type: Input
-            }], striped: [{
-                type: Input
-            }], bordered: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], selectable: [{
-                type: Input
-            }], rowHover: [{
-                type: Input
-            }], dataKey: [{
-                type: Input
-            }], showRowMenu: [{
-                type: Input
-            }], showRowRemoveButton: [{
-                type: Input
-            }], showRowEditButton: [{
-                type: Input
-            }], reorderableRows: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], tableStyle: [{
-                type: Input
-            }], tableStyleClass: [{
-                type: Input
-            }], sortable: [{
-                type: Input
-            }], sortMode: [{
-                type: Input
-            }], customSort: [{
-                type: Input
-            }], hasToolbar: [{
-                type: Input
-            }], toolbarSize: [{
-                type: Input
-            }], toolbarTitle: [{
-                type: Input
-            }], toolbarIcon: [{
-                type: Input
-            }], toolbarIconColor: [{
-                type: Input
-            }], scrollable: [{
-                type: Input
-            }], scrollHeight: [{
-                type: Input
-            }], virtualScroll: [{
-                type: Input
-            }], numToleratedItems: [{
-                type: Input
-            }], paginator: [{
-                type: Input
-            }], alwaysShowPaginator: [{
-                type: Input
-            }], rowsPerPageOptions: [{
-                type: Input
-            }], first: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], resetPageOnRowsChange: [{
-                type: Input
-            }], resetPageOnSort: [{
-                type: Input
-            }], totalRecords: [{
-                type: Input
-            }], emptyMessage: [{
-                type: Input
-            }], emptyBodyHeight: [{
-                type: Input
-            }], lazy: [{
-                type: Input
-            }], lazyLoadOnInit: [{
-                type: Input
-            }], showGlobalFilter: [{
-                type: Input
-            }], globalFilterPlaceholder: [{
-                type: Input
-            }], globalFilterFields: [{
-                type: Input
-            }], clearGlobalFilterOnLoading: [{
-                type: Input
-            }], showRemoveBtnOnSelect: [{
-                type: Input
-            }], removeBtnOnSelectDisabled: [{
-                type: Input
-            }], showAdditionalBtnOnSelect: [{
-                type: Input
-            }], additionalBtnOnSelectTitle: [{
-                type: Input
-            }], additionalBtnOnSelectIcon: [{
-                type: Input
-            }], additionalBtnOnSelectDisabled: [{
-                type: Input
-            }], showActionBtn: [{
-                type: Input
-            }], actionBtnTitle: [{
-                type: Input
-            }], actionBtnIcon: [{
-                type: Input
-            }], actionBtnDisabled: [{
-                type: Input
-            }], showExportBtn: [{
-                type: Input
-            }], exportBtnDisabled: [{
-                type: Input
-            }], exportFilename: [{
-                type: Input
-            }], csvSeparator: [{
-                type: Input
-            }], showDataReloadBtn: [{
-                type: Input
-            }], dataReloadBtnDisabled: [{
-                type: Input
-            }], showColumnsToggleBtn: [{
-                type: Input
-            }], columnsToggleBtnDisabled: [{
-                type: Input
-            }], initialColumns: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], rowsSelected: [{
-                type: Output
-            }], selectedRowIndexes: [{
-                type: Output
-            }], actionBtnClicked: [{
-                type: Output
-            }], editRowBtnClicked: [{
-                type: Output
-            }], rowsToRemove: [{
-                type: Output
-            }], rowIndexesToRemove: [{
-                type: Output
-            }], pageChanged: [{
-                type: Output
-            }], sorted: [{
-                type: Output
-            }], filtered: [{
-                type: Output
-            }], rowsReordered: [{
-                type: Output
-            }], columnsSelected: [{
-                type: Output
-            }], lazyLoaded: [{
-                type: Output
-            }], dataReloadBtnClicked: [{
-                type: Output
-            }], additionalBtnOnSelectClicked: [{
-                type: Output
-            }], customSortFunction: [{
-                type: Output
-            }], toolbarTemplate: [{
-                type: ContentChild,
-                args: ['toolbar', { static: false }]
-            }], headerTemplate: [{
-                type: ContentChild,
-                args: ['header', { static: false }]
-            }], nestedHeaderTemplate: [{
-                type: ContentChild,
-                args: ['nestedHeader', { static: false }]
-            }], bodyTemplate: [{
-                type: ContentChild,
-                args: ['body', { static: false }]
-            }], rowExpansionTemplate: [{
-                type: ContentChild,
-                args: ['rowexpansion', { static: false }]
-            }], primengTable: [{
-                type: ViewChild,
-                args: ['primengTable', { static: true }]
-            }], globalFilterComp: [{
-                type: ViewChild,
-                args: ['globalFilterComp']
-            }], exportMenu: [{
-                type: ViewChild,
-                args: ['exportMenu']
-            }], colToggleMenu: [{
-                type: ViewChild,
-                args: ['colToggleMenu']
-            }], tUnsortDirective: [{
-                type: ViewChild,
-                args: ['tUnsortDirective']
-            }] } });
-
-/* eslint-disable no-unused-vars */
-/**
- * CpsColumnFilterMatchMode is used to define how the filter value should be matched.
- * @group Enums
- */
-var CpsColumnFilterMatchMode;
-(function (CpsColumnFilterMatchMode) {
-    CpsColumnFilterMatchMode["STARTS_WITH"] = "startsWith";
-    CpsColumnFilterMatchMode["CONTAINS"] = "contains";
-    CpsColumnFilterMatchMode["NOT_CONTAINS"] = "notContains";
-    CpsColumnFilterMatchMode["ENDS_WITH"] = "endsWith";
-    CpsColumnFilterMatchMode["EQUALS"] = "equals";
-    CpsColumnFilterMatchMode["NOT_EQUALS"] = "notEquals";
-    CpsColumnFilterMatchMode["IN"] = "in";
-    CpsColumnFilterMatchMode["LESS_THAN"] = "lt";
-    CpsColumnFilterMatchMode["LESS_THAN_OR_EQUAL_TO"] = "lte";
-    CpsColumnFilterMatchMode["GREATER_THAN"] = "gt";
-    CpsColumnFilterMatchMode["GREATER_THAN_OR_EQUAL_TO"] = "gte";
-    CpsColumnFilterMatchMode["BETWEEN"] = "between";
-    CpsColumnFilterMatchMode["IS"] = "is";
-    CpsColumnFilterMatchMode["IS_NOT"] = "isNot";
-    CpsColumnFilterMatchMode["BEFORE"] = "before";
-    CpsColumnFilterMatchMode["AFTER"] = "after";
-    CpsColumnFilterMatchMode["DATE_IS"] = "dateIs";
-    CpsColumnFilterMatchMode["DATE_IS_NOT"] = "dateIsNot";
-    CpsColumnFilterMatchMode["DATE_BEFORE"] = "dateBefore";
-    CpsColumnFilterMatchMode["DATE_AFTER"] = "dateAfter";
-})(CpsColumnFilterMatchMode || (CpsColumnFilterMatchMode = {}));
-
-/**
- * CpsDatepickerComponent is an input component to provide date input.
- * @group Components
- */
-class CpsDatepickerComponent {
-    /**
-     * Value of the datepicker.
-     * @default null
-     * @group Props
-     */
-    set value(value) {
-        this._value = value;
-        this.stringDate = this._dateToString(value);
-        this.onChange(value);
-    }
-    get value() {
-        return this._value;
-    }
-    constructor(_control) {
-        this._control = _control;
-        /**
-         * Label of the datepicker element.
-         * @group Props
-         */
-        this.label = '';
-        /**
-         * Determines whether datepicker is disabled.
-         * @group Props
-         */
-        this.disabled = false;
-        /**
-         * Width of the datepicker of type number denoting pixels or string.
-         * @group Props
-         */
-        this.width = '100%';
-        /**
-         * Placeholder text.
-         * @group Props
-         */
-        this.placeholder = 'MM/DD/YYYY';
-        /**
-         * Bottom hint text for the input field.
-         * @group Props
-         */
-        this.hint = '';
-        /**
-         * When enabled, a clear icon is displayed to clear the value.
-         * @group Props
-         */
-        this.clearable = false;
-        /**
-         * Hides hint and validation errors.
-         * @group Props
-         */
-        this.hideDetails = false;
-        /**
-         * Determines whether the component should have persistent clear icon.
-         * @group Props
-         */
-        this.persistentClear = false;
-        /**
-         * Determines whether to show button to be able to select today's date.
-         * @group Props
-         */
-        this.showTodayButton = true;
-        /**
-         * Determines whether the datepicker dropdown should open on input focus.
-         * @group Props
-         */
-        this.openOnInputFocus = false;
-        /**
-         * When it is not an empty string, an info icon is displayed to show text for more info.
-         * @group Props
-         */
-        this.infoTooltip = '';
-        /**
-         * InfoTooltip class for styling.
-         * @group Props
-         */
-        this.infoTooltipClass = 'cps-tooltip-content';
-        /**
-         * Size of infoTooltip, of type number denoting pixels or string.
-         * @group Props
-         */
-        this.infoTooltipMaxWidth = '100%';
-        /**
-         * Determines whether the infoTooltip is persistent.
-         * @group Props
-         */
-        this.infoTooltipPersistent = false;
-        /**
-         * Position of infoTooltip, it can be "top", "bottom", "left" or "right".
-         * @group Props
-         */
-        this.infoTooltipPosition = 'top';
-        /**
-         * Styling appearance of datepicker input, it can be 'outlined', 'underlined' or 'borderless.
-         * @group Props
-         */
-        this.appearance = 'outlined';
-        /**
-         * Callback to invoke on value change.
-         * @param {Date | null} value - value change.
-         * @group Emits
+         * Callback to invoke on value change.
+         * @param {Date | null} value - value change.
+         * @group Emits
          */
         this.valueChanged = new EventEmitter();
         this.stringDate = '';
@@ -6760,8 +5868,9 @@ class CpsButtonToggleComponent {
     get value() {
         return this._value;
     }
-    constructor(_control, renderer) {
+    constructor(_control, document, renderer) {
         this._control = _control;
+        this.document = document;
         this.renderer = renderer;
         /**
          * Label of the toggle buttons.
@@ -6905,7 +6014,7 @@ class CpsButtonToggleComponent {
         this.renderer.setStyle(hiddenSpan, 'font-size', '16px');
         this.renderer.setStyle(hiddenSpan, 'letter-spacing', '0.05em');
         this.renderer.setStyle(hiddenSpan, 'font-family', '"Source Sans Pro", sans-serif');
-        this.renderer.appendChild(document.body, hiddenSpan);
+        this.renderer.appendChild(this.document.body, hiddenSpan);
         this.largestButtonWidth = 0;
         this.options.forEach((opt) => {
             const text = this.renderer.createText(opt.label || '');
@@ -6922,11 +6031,11 @@ class CpsButtonToggleComponent {
             }
             this.renderer.removeChild(hiddenSpan, text);
         });
-        this.renderer.removeChild(document.body, hiddenSpan);
+        this.renderer.removeChild(this.document.body, hiddenSpan);
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     setDisabledState(disabled) { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsButtonToggleComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsButtonToggleComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsButtonToggleComponent, decorators: [{
@@ -6942,6 +6051,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                     type: Self
                 }, {
                     type: Optional
+                }] }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
                 }] }, { type: i0.Renderer2 }], propDecorators: { label: [{
                 type: Input
             }], options: [{
@@ -7500,181 +6612,1187 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             }] } });
 
 /**
- * CpsTableColumnFilterDirective is a filtering directive used to filter single or multiple columns in table.
- * @group Directives
+ * CpsTableColumnFilterDirective is a filtering directive used to filter single or multiple columns in table.
+ * @group Directives
+ */
+class CpsTableColumnFilterDirective {
+    constructor(elementRef, viewContainerRef) {
+        this.elementRef = elementRef;
+        this.viewContainerRef = viewContainerRef;
+        /**
+         * Type of a filter in table, it can be of type "number", "boolean", "text", "date" or "category".
+         * @group Props
+         */
+        this.filterType = 'text';
+        /**
+         * Determines whether the filter menu should be persistent.
+         * @group Props
+         */
+        this.filterPersistent = false;
+        /**
+         * Determines whether the filter should have clear button.
+         * @group Props
+         */
+        this.filterShowClearButton = true;
+        /**
+         * Determines whether the filter should have apply button.
+         * @group Props
+         */
+        this.filterShowApplyButton = true;
+        /**
+         * Determines whether the filter should have close button.
+         * @group Props
+         */
+        this.filterShowCloseButton = false;
+        /**
+         * Determines whether the filter should have match modes.
+         * @group Props
+         */
+        this.filterShowMatchModes = true;
+        /**
+         * Match modes for filter.
+         * @group Props
+         */
+        this.filterMatchModes = [];
+        /**
+         * Determines whether the filter should have operator.
+         * @group Props
+         */
+        this.filterShowOperator = true;
+        /**
+         * Maximum number of constraints.
+         * @group Props
+         */
+        this.filterMaxConstraints = 2;
+        /**
+         * Title of the filter.
+         * @group Props
+         */
+        this.filterHeaderTitle = '';
+        /**
+         * Determines whether the filter should hide on clear.
+         * @group Props
+         */
+        this.filterHideOnClear = false;
+        /**
+         * Options for category filter.
+         * @group Props
+         */
+        this.filterCategoryOptions = [];
+        /**
+         * Determines whether to show category filter as button toggles.
+         * @group Props
+         */
+        this.filterAsButtonToggle = false;
+        /**
+         * Single selection for category filter.
+         * @group Props
+         */
+        this.filterSingleSelection = false;
+        /**
+         * Placeholder for filter constraints.
+         * @group Props
+         */
+        this.filterPlaceholder = '';
+        this.filterCompRef = this.viewContainerRef.createComponent(TableColumnFilterComponent);
+    }
+    ngOnInit() {
+        this.elementRef.nativeElement.firstChild.after(this.filterCompRef.location.nativeElement);
+    }
+    ngOnChanges() {
+        this.filterCompRef.setInput('field', this.field);
+        this.filterCompRef.setInput('type', this.filterType);
+        this.filterCompRef.setInput('persistent', this.filterPersistent);
+        this.filterCompRef.setInput('showClearButton', this.filterShowClearButton);
+        this.filterCompRef.setInput('showApplyButton', this.filterShowApplyButton);
+        this.filterCompRef.setInput('showCloseButton', this.filterShowCloseButton);
+        this.filterCompRef.setInput('showMatchModes', this.filterShowMatchModes);
+        this.filterCompRef.setInput('matchModes', this.filterMatchModes);
+        this.filterCompRef.setInput('showOperator', this.filterShowOperator);
+        this.filterCompRef.setInput('maxConstraints', this.filterMaxConstraints);
+        this.filterCompRef.setInput('headerTitle', this.filterHeaderTitle);
+        this.filterCompRef.setInput('hideOnClear', this.filterHideOnClear);
+        this.filterCompRef.setInput('categoryOptions', this.filterCategoryOptions);
+        this.filterCompRef.setInput('asButtonToggle', this.filterAsButtonToggle);
+        this.filterCompRef.setInput('singleSelection', this.filterSingleSelection);
+        this.filterCompRef.setInput('placeholder', this.filterPlaceholder || this._getDefaultPlaceholder());
+    }
+    _getDefaultPlaceholder() {
+        switch (this.filterType) {
+            case 'text':
+                return 'Please enter';
+            case 'number':
+                return 'Enter value';
+            case 'date':
+                return 'Select date';
+            case 'category':
+                return 'Please select';
+            default:
+                return '';
+        }
+    }
+    hideFilter() {
+        this.filterCompRef?.instance?.hide();
+    }
+    clearFilter() {
+        this.filterCompRef?.instance?.clearFilter();
+    }
+    clearFilterValues() {
+        this.filterCompRef?.instance?.clearFilterValues();
+    }
+    ngOnDestroy() {
+        this.filterCompRef.destroy();
+        this.viewContainerRef.clear();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", 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.3.0", 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: "17.3.0", ngImport: i0, type: CpsTableColumnFilterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[cpsTColFilter]',
+                    exportAs: 'cpsTColFilter'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { field: [{
+                type: Input,
+                args: ['cpsTColFilter']
+            }], filterType: [{
+                type: Input
+            }], filterPersistent: [{
+                type: Input
+            }], filterShowClearButton: [{
+                type: Input
+            }], filterShowApplyButton: [{
+                type: Input
+            }], filterShowCloseButton: [{
+                type: Input
+            }], filterShowMatchModes: [{
+                type: Input
+            }], filterMatchModes: [{
+                type: Input
+            }], filterShowOperator: [{
+                type: Input
+            }], filterMaxConstraints: [{
+                type: Input
+            }], filterHeaderTitle: [{
+                type: Input
+            }], filterHideOnClear: [{
+                type: Input
+            }], filterCategoryOptions: [{
+                type: Input
+            }], filterAsButtonToggle: [{
+                type: Input
+            }], filterSingleSelection: [{
+                type: Input
+            }], filterPlaceholder: [{
+                type: Input
+            }] } });
+
+class CpsDetectFilterTypePipe {
+    transform(data, column) {
+        if (data.every((item) => typeof item[column] === 'boolean')) {
+            return 'boolean';
+        }
+        else if (data.every((item) => typeof item[column] === 'number')) {
+            return 'number';
+        }
+        else if (data.every((item) => item[column] instanceof Date)) {
+            return 'date';
+        }
+        else if (data.reduce((acc, item) => acc.add(item[column]), new Set()).size < 6) {
+            return 'category';
+        }
+        return 'text';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsDetectFilterTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: CpsDetectFilterTypePipe, isStandalone: true, name: "cpsDetectFilterType" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsDetectFilterTypePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'cpsDetectFilterType',
+                    standalone: true
+                }]
+        }] });
+
+// import jsPDF from 'jspdf';
+// import 'jspdf-autotable';
+function tableFactory(tableComponent) {
+    return tableComponent.primengTable;
+}
+/**
+ * CpsTableComponent displays data in tabular format.
+ * @group Components
  */
-class CpsTableColumnFilterDirective {
-    constructor(elementRef, viewContainerRef) {
-        this.elementRef = elementRef;
-        this.viewContainerRef = viewContainerRef;
+class CpsTableComponent {
+    /**
+     * An array of objects to display.
+     * @default []
+     * @group Props
+     */
+    set data(value) {
+        this._data = [...value];
+    }
+    get data() {
+        return this._data;
+    }
+    // eslint-disable-next-line no-useless-constructor
+    constructor(cdRef, document) {
+        this.cdRef = cdRef;
+        this.document = document;
+        /**
+         * An array of objects to represent dynamic columns.
+         * @group Props
+         */
+        this.columns = [];
+        /**
+         * A key used to retrieve the header from columns.
+         * @group Props
+         */
+        this.colHeaderName = 'header';
+        /**
+         * A key used to retrieve the field from columns.
+         * @group Props
+         */
+        this.colFieldName = 'field';
+        /**
+         * A key used to retrieve the filter type from columns.
+         * @group Props
+         */
+        this.colFilterTypeName = 'filterType';
+        /**
+         * A key used to retrieve the date format from columns.
+         * @group Props
+         */
+        this.colDateFormatName = 'dateFormat';
+        /**
+         * Determines whether the table should have alternating stripes.
+         * @group Props
+         */
+        this.striped = true;
+        /**
+         * Determines whether the table should have borders.
+         * @group Props
+         */
+        this.bordered = true;
+        /**
+         * Size of table cells, it can be "small", "normal" or "large".
+         * @group Props
+         */
+        this.size = 'normal';
+        /**
+         * Determines whether the table should have row selection.
+         * @group Props
+         */
+        this.selectable = false;
+        /**
+         * Determines whether the table should have rows highlighting on hover.
+         * @group Props
+         */
+        this.rowHover = true;
+        /**
+         * Field, that uniquely identifies a record in data (needed for expandable rows).
+         * @group Props
+         */
+        this.dataKey = '';
+        /**
+         * Determines whether the table should show row menus.
+         * @group Props
+         */
+        this.showRowMenu = false;
+        /**
+         * Determines whether the 'Remove' button should be displayed in the row menu.
+         * Note: This setting only takes effect if 'showRowMenu' is true.
+         * @group Props
+         */
+        this.showRowRemoveButton = true;
+        /**
+         * Determines whether the 'Edit' button should be displayed in the row menu.
+         * Note: This setting only takes effect if 'showRowMenu' is true.
+         * @group Props
+         */
+        this.showRowEditButton = true;
+        /**
+         * Determines whether the table should have re-orderable rows.
+         * @group Props
+         */
+        this.reorderableRows = false;
+        /**
+         * When enabled, a loader component is displayed.
+         * @group Props
+         */
+        this.loading = false;
+        /**
+         * Inline style of the table.
+         * @group Props
+         */
+        this.tableStyle = undefined;
+        /**
+         * Style class of the table.
+         * @group Props
+         */
+        this.tableStyleClass = '';
+        /**
+         * Makes all columns sortable if columns prop is provided.
+         * @group Props
+         */
+        this.sortable = false;
+        /**
+         * Enable filtering on all columns.
+         * @group Props
+         */
+        this.filterableByColumns = false;
+        /**
+         * If true, automatically detects filter type based on values, otherwise sets 'text' filter type for all columns.
+         * Note: This setting only takes effect if 'filterableByColumns' is true.
+         * @group Props
+         */
+        this.autoColumnFilterType = true;
+        /**
+         * Determines whether sorting works on single column or on multiple columns.
+         * @group Props
+         */
+        this.sortMode = 'single';
+        /**
+         * Determines whether to use the default sorting or a custom one using sortFunction.
+         * @group Props
+         */
+        this.customSort = false;
+        /**
+         * Determines whether the table has a toolbar.
+         * @group Props
+         */
+        this.hasToolbar = true;
+        /**
+         * Toolbar size, it can be "small" or "normal".
+         * @group Props
+         */
+        this.toolbarSize = 'normal';
+        /**
+         * Toolbar title.
+         * @group Props
+         */
+        this.toolbarTitle = '';
+        /**
+         * Toolbar icon name.
+         * @group Props
+         */
+        this.toolbarIcon = '';
+        /**
+         * Toolbar icon color.
+         * @group Props
+         */
+        this.toolbarIconColor = '';
+        /**
+         * Makes table scrollable.
+         * @group Props
+         */
+        this.scrollable = true;
+        /**
+         * Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size.
+         * @group Props
+         */
+        this.scrollHeight = '';
+        /**
+         * Determines whether only the elements within scrollable area should be added into the DOM. Works only if scrollable prop is true.
+         * @group Props
+         */
+        this.virtualScroll = false;
+        /**
+         * Determines how many additional elements to add to the DOM outside of the view.
+         * @group Props
+         */
+        this.numToleratedItems = 10;
+        /**
+         * Determines whether the table should have paginator.
+         * @group Props
+         */
+        this.paginator = false;
+        /**
+         * Determines whether to show paginator even if there is only one page.
+         * @group Props
+         */
+        this.alwaysShowPaginator = true;
+        /**
+         * Array of integer values to display inside rows per page dropdown of paginator.
+         * @group Props
+         */
+        this.rowsPerPageOptions = [];
+        /**
+         * Index of the first row to be displayed.
+         * @group Props
+         */
+        this.first = 0;
+        /**
+         * Number of rows to display per page.
+         * @group Props
+         */
+        this.rows = 0;
+        /**
+         * Determines whether to reset page on rows change.
+         * @group Props
+         */
+        this.resetPageOnRowsChange = false;
+        /**
+         * Determines whether to reset page on table data sorting.
+         * @group Props
+         */
+        this.resetPageOnSort = true;
+        /**
+         * Number of total records.
+         * @group Props
+         */
+        this.totalRecords = 0;
+        /**
+         * Text to display when there is no data.
+         * @group Props
+         */
+        this.emptyMessage = 'No data';
+        /**
+         * Height of table's body when there is no data, of type number denoting pixels or string.
+         * @group Props
+         */
+        this.emptyBodyHeight = '';
+        /**
+         * Defines if data is loaded and interacted with in lazy manner.
+         * @group Props
+         */
+        this.lazy = false;
+        /**
+         * Determines whether to call lazy loading on initialization.
+         * @group Props
+         */
+        this.lazyLoadOnInit = true;
+        /**
+         * Determines whether to show global filter in the toolbar.
+         * @group Props
+         */
+        this.showGlobalFilter = false;
         /**
-         * Type of a filter in table, it can be of type "number", "boolean", "text", "date" or "category".
+         * Global filter placeholder.
          * @group Props
          */
-        this.filterType = 'text';
+        this.globalFilterPlaceholder = 'Search';
         /**
-         * Determines whether the filter menu should be persistent.
+         * An array of fields to use in global filtering.
          * @group Props
          */
-        this.filterPersistent = false;
+        this.globalFilterFields = [];
         /**
-         * Determines whether the filter should have clear button.
+         * Determines whether to clear global filter on data loading.
          * @group Props
          */
-        this.filterShowClearButton = true;
+        this.clearGlobalFilterOnLoading = false;
         /**
-         * Determines whether the filter should have apply button.
+         * Determines whether to show remove button in the toolbar when rows are selected.
          * @group Props
          */
-        this.filterShowApplyButton = true;
+        this.showRemoveBtnOnSelect = true;
         /**
-         * Determines whether the filter should have close button.
+         * Determines whether removeBtnOnSelect is disabled.
          * @group Props
          */
-        this.filterShowCloseButton = false;
+        this.removeBtnOnSelectDisabled = false;
         /**
-         * Determines whether the filter should have match modes.
+         * Determines whether to show additional button in the toolbar when rows are selected.
          * @group Props
          */
-        this.filterShowMatchModes = true;
+        this.showAdditionalBtnOnSelect = false;
         /**
-         * Match modes for filter.
+         * AdditionalBtnOnSelect title.
          * @group Props
          */
-        this.filterMatchModes = [];
+        this.additionalBtnOnSelectTitle = 'Select action';
         /**
-         * Determines whether the filter should have operator.
+         * AdditionalBtnOnSelect icon.
          * @group Props
          */
-        this.filterShowOperator = true;
+        this.additionalBtnOnSelectIcon = '';
         /**
-         * Maximum number of constraints.
+         * Determines whether additionalBtnOnSelect is disabled.
          * @group Props
          */
-        this.filterMaxConstraints = 2;
+        this.additionalBtnOnSelectDisabled = false;
         /**
-         * Title of the filter.
+         * Determines whether to show action button in the toolbar.
          * @group Props
          */
-        this.filterHeaderTitle = '';
+        this.showActionBtn = false;
         /**
-         * Determines whether the filter should hide on clear.
+         * Action button title.
          * @group Props
          */
-        this.filterHideOnClear = false;
+        this.actionBtnTitle = 'Action';
         /**
-         * Options for category filter.
+         * Action button icon.
          * @group Props
          */
-        this.filterCategoryOptions = [];
+        this.actionBtnIcon = '';
         /**
-         * Determines whether to show category filter as button toggles.
+         * Determines whether actionBtn is disabled.
          * @group Props
          */
-        this.filterAsButtonToggle = false;
+        this.actionBtnDisabled = false;
         /**
-         * Single selection for category filter.
+         * Determines whether to show export button in the toolbar.
          * @group Props
          */
-        this.filterSingleSelection = false;
+        this.showExportBtn = false;
         /**
-         * Placeholder for filter constraints.
+         * Determines whether exportBtn is disabled.
          * @group Props
          */
-        this.filterPlaceholder = '';
-        this.filterCompRef = this.viewContainerRef.createComponent(TableColumnFilterComponent);
+        this.exportBtnDisabled = false;
+        /**
+         * Name of the exported file.
+         * @group Props
+         */
+        this.exportFilename = 'download';
+        /**
+         * Character to use as the csv separator.
+         * @group Props
+         */
+        this.csvSeparator = ',';
+        /**
+         * Determines whether to show data reload button in the toolbar.
+         * @group Props
+         */
+        this.showDataReloadBtn = false;
+        /**
+         * Determines whether dataReloadBtn is disabled.
+         * @group Props
+         */
+        this.dataReloadBtnDisabled = false;
+        /**
+         * Determines whether the table should show columnsToggle menu, where you can choose which columns to be displayed. If external body template is provided, use columnsSelected event emitter.
+         * @group Props
+         */
+        this.showColumnsToggleBtn = false;
+        /**
+         * Determines whether columnsToggle button is disabled.
+         * @group Props
+         */
+        this.columnsToggleBtnDisabled = false;
+        /**
+         * Array of initial columns to show in the table. If not provided, all columns are initially visible.
+         * @group Props
+         */
+        this.initialColumns = [];
+        /**
+         * If set to true, row data are rendered using innerHTML.
+         * @group Props
+         */
+        this.renderDataAsHTML = false;
+        /**
+         * Callback to invoke on selection changed. Returns selected rows.
+         * @param {any[]} any[] - selected rows.
+         * @group Emits
+         */
+        this.rowsSelected = new EventEmitter();
+        /**
+         * Callback to invoke on selection changed. Returns selected rows indexes.
+         * @param {number[]} number[] - selected rows indexes.
+         * @group Emits
+         */
+        this.selectedRowIndexes = new EventEmitter();
+        /**
+         * Callback to invoke when action button is clicked.
+         * @param {void} void - action button clicked.
+         * @group Emits
+         */
+        this.actionBtnClicked = new EventEmitter();
+        /**
+         * Callback to invoke when edit-row button is clicked.
+         * @param {{row: any, index: number}} {row: any, index: number} - edit-row button clicked.
+         * @group Emits
+         */
+        this.editRowBtnClicked = new EventEmitter();
+        /**
+         * Callback to invoke on rows removal. Returns rows.
+         * @param {any[]} any[] - array of rows to remove.
+         * @group Emits
+         */
+        this.rowsToRemove = new EventEmitter();
+        /**
+         * Callback to invoke on rows removal. Returns rows indexes.
+         * @param {number[]} number[] - array of indexes of rows to remove.
+         * @group Emits
+         */
+        this.rowIndexesToRemove = new EventEmitter();
+        /**
+         * Callback to invoke on page changed.
+         * @param {any} any - page changed.
+         * @group Emits
+         */
+        this.pageChanged = new EventEmitter();
+        /**
+         * Callback to invoke when data is sorted.
+         * @param {any} any - sort meta.
+         * @group Emits
+         */
+        this.sorted = new EventEmitter();
+        /**
+         * Callback to invoke when data is filtered.
+         * @param {any} any - custom filtering event.
+         * @group Emits
+         */
+        this.filtered = new EventEmitter();
+        /**
+         * Callback to invoke when rows are reordered.
+         * @param {any} any - rows reordered.
+         * @group Emits
+         */
+        this.rowsReordered = new EventEmitter();
+        /**
+         * Callback to invoke on columns selection.
+         * @param {object} object - selected column.
+         * @group Emits
+         */
+        this.columnsSelected = new EventEmitter();
+        /**
+         * Callback to invoke when paging, sorting or filtering happens in lazy mode.
+         * @param {any} any - custom lazy loading event.
+         * @group Emits
+         */
+        this.lazyLoaded = new EventEmitter();
+        /**
+         * Callback to invoke when data-reload button is clicked.
+         * @param {any} any - button clicked.
+         * @group Emits
+         */
+        this.dataReloadBtnClicked = new EventEmitter();
+        /**
+         * Callback to invoke when additional button on select is clicked.
+         * @param {any[]} any[] - selected data.
+         * @group Emits
+         */
+        this.additionalBtnOnSelectClicked = new EventEmitter();
+        /**
+         * A function to implement custom sorting. customSort must be true.
+         * @param {any} any - sort meta.
+         * @group Emits
+         */
+        this.customSortFunction = new EventEmitter();
+        this._data = [];
+        this.selectedRows = [];
+        this.virtualScrollItemSize = 0;
+        this.rowOptions = [];
+        this.selectedColumns = [];
+        this.exportMenuItems = [
+            {
+                title: 'CSV',
+                icon: 'csv',
+                action: () => {
+                    this.exportTable('csv');
+                }
+            },
+            {
+                title: 'XLSX',
+                icon: 'xls',
+                action: () => {
+                    this.exportTable('xlsx');
+                }
+            }
+            // {
+            //   title: 'PDF',
+            //   icon: 'pdf',
+            //   action: () => {
+            //     this.exportTable('pdf');
+            //   }
+            // }
+        ];
+    }
+    ngOnInit() {
+        this.emptyBodyHeight = convertSize(this.emptyBodyHeight);
+        if (!this.scrollable)
+            this.virtualScroll = false;
+        if (this.showAdditionalBtnOnSelect)
+            this.showRemoveBtnOnSelect = false;
+        if (this.paginator) {
+            if (this.rowsPerPageOptions.length < 1)
+                this.rowsPerPageOptions = [5, 10, 25, 50];
+            if (!this.rows)
+                this.rows = this.rowsPerPageOptions[0];
+            else {
+                if (!this.rowsPerPageOptions.includes(this.rows)) {
+                    throw new Error('rowsPerPageOptions must include rows');
+                }
+            }
+            this.rowOptions = this.rowsPerPageOptions.map((v) => ({
+                label: '' + v,
+                value: v
+            }));
+        }
+        if (this.showGlobalFilter &&
+            this.globalFilterFields?.length < 1 &&
+            this.data?.length > 0) {
+            this.globalFilterFields = Object.keys(this.data[0]);
+        }
+        this.selectedColumns =
+            this.initialColumns.length > 0 ? this.initialColumns : this.columns;
+    }
+    get styleClass() {
+        const classesList = [];
+        switch (this.size) {
+            case 'small':
+                classesList.push('p-datatable-sm');
+                break;
+            case 'large':
+                classesList.push('p-datatable-lg');
+                break;
+        }
+        if (this.hasToolbar) {
+            switch (this.toolbarSize) {
+                case 'small':
+                    classesList.push('cps-tbar-small');
+                    break;
+                case 'normal':
+                    classesList.push('cps-tbar-normal');
+                    break;
+            }
+        }
+        if (this.striped) {
+            classesList.push('p-datatable-striped');
+        }
+        if (this.bordered) {
+            classesList.push('p-datatable-gridlines');
+        }
+        return classesList.join(' ');
     }
-    ngOnInit() {
-        this.elementRef.nativeElement.firstChild.after(this.filterCompRef.location.nativeElement);
+    ngAfterViewChecked() {
+        if (!this.virtualScroll || this.virtualScrollItemSize)
+            return;
+        this.virtualScrollItemSize =
+            this.primengTable?.el?.nativeElement
+                ?.querySelector('.p-datatable-tbody')
+                ?.querySelector('tr')?.clientHeight || 0;
+        this.cdRef.detectChanges();
     }
-    ngOnChanges() {
-        this.filterCompRef.setInput('field', this.field);
-        this.filterCompRef.setInput('type', this.filterType);
-        this.filterCompRef.setInput('persistent', this.filterPersistent);
-        this.filterCompRef.setInput('showClearButton', this.filterShowClearButton);
-        this.filterCompRef.setInput('showApplyButton', this.filterShowApplyButton);
-        this.filterCompRef.setInput('showCloseButton', this.filterShowCloseButton);
-        this.filterCompRef.setInput('showMatchModes', this.filterShowMatchModes);
-        this.filterCompRef.setInput('matchModes', this.filterMatchModes);
-        this.filterCompRef.setInput('showOperator', this.filterShowOperator);
-        this.filterCompRef.setInput('maxConstraints', this.filterMaxConstraints);
-        this.filterCompRef.setInput('headerTitle', this.filterHeaderTitle);
-        this.filterCompRef.setInput('hideOnClear', this.filterHideOnClear);
-        this.filterCompRef.setInput('categoryOptions', this.filterCategoryOptions);
-        this.filterCompRef.setInput('asButtonToggle', this.filterAsButtonToggle);
-        this.filterCompRef.setInput('singleSelection', this.filterSingleSelection);
-        this.filterCompRef.setInput('placeholder', this.filterPlaceholder || this._getDefaultPlaceholder());
+    ngOnChanges(changes) {
+        if (this.loading) {
+            this.clearSelection();
+            if (this.clearGlobalFilterOnLoading)
+                this.clearGlobalFilter();
+        }
+        if (changes?.data) {
+            this.resetSortingState();
+            this.selectedRows = this.selectedRows.filter((sr) => this.data.includes(sr));
+        }
     }
-    _getDefaultPlaceholder() {
-        switch (this.filterType) {
-            case 'text':
-                return 'Please enter';
-            case 'number':
-                return 'Enter value';
-            case 'date':
-                return 'Select date';
-            case 'category':
-                return 'Please select';
-            default:
-                return '';
+    resetSortingState() {
+        this.tUnsortDirective?.resetDefaultSortOrder();
+    }
+    clearSelection() {
+        this.selectedRows = [];
+    }
+    clearGlobalFilter() {
+        this.globalFilterComp?.clear();
+    }
+    onSelectionChanged(selection) {
+        this.rowsSelected.emit(selection);
+        const indexes = this._getIndexes(selection);
+        this.selectedRowIndexes.emit(indexes);
+    }
+    onSortFunction(event) {
+        this.customSortFunction.emit(event);
+    }
+    onFilterGlobal(value) {
+        this.primengTable.filterGlobal(value, 'contains');
+    }
+    removeSelected() {
+        this.rowsToRemove.emit(this.selectedRows);
+        const indexes = this._getIndexes(this.selectedRows);
+        this.rowIndexesToRemove.emit(indexes);
+    }
+    onClickAdditionalBtnOnSelect() {
+        this.additionalBtnOnSelectClicked.emit(this.selectedRows);
+    }
+    onClickActionBtn() {
+        this.actionBtnClicked.emit();
+    }
+    onRowsPerPageChanged() {
+        if (this.resetPageOnRowsChange) {
+            this.primengTable.first = 0;
         }
+        this.changePage(this.getPage());
     }
-    hideFilter() {
-        this.filterCompRef?.instance?.hide();
+    getPageCount() {
+        return Math.ceil(this.primengTable.totalRecords / this.rows);
     }
-    clearFilter() {
-        this.filterCompRef?.instance?.clearFilter();
+    getPage() {
+        return this.primengTable.first
+            ? Math.floor(this.primengTable.first / this.rows)
+            : 0;
     }
-    clearFilterValues() {
-        this.filterCompRef?.instance?.clearFilterValues();
+    changePage(p) {
+        const pc = Math.ceil(this.getPageCount());
+        if (p >= 0 && p < pc) {
+            this.first = this.rows * p;
+            this.primengTable.onPageChange({ first: this.first, rows: this.rows });
+        }
     }
-    ngOnDestroy() {
-        this.filterCompRef.destroy();
-        this.viewContainerRef.clear();
+    onPageChange(event) {
+        this.first = event.first;
+        this.rows = event.rows;
+        const state = {
+            page: this.getPage(),
+            first: this.first,
+            rows: this.rows,
+            pageCount: Math.ceil(this.getPageCount())
+        };
+        this.pageChanged.emit(state);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", 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.3.0", 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: "17.3.0", ngImport: i0, type: CpsTableColumnFilterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: '[cpsTColFilter]',
-                    exportAs: 'cpsTColFilter'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { field: [{
-                type: Input,
-                args: ['cpsTColFilter']
-            }], filterType: [{
+    toggleAllColumns() {
+        this.selectedColumns =
+            this.selectedColumns.length < this.columns.length ? this.columns : [];
+        this.columnsSelected.emit(this.selectedColumns);
+    }
+    isColumnSelected(col) {
+        return this.selectedColumns.some((item) => isEqual(item, col));
+    }
+    onSelectColumn(col) {
+        let res = [];
+        if (this.isColumnSelected(col)) {
+            res = this.selectedColumns.filter((v) => !isEqual(v, col));
+        }
+        else {
+            this.columns.forEach((o) => {
+                if (this.selectedColumns.some((v) => isEqual(v, o)) ||
+                    isEqual(col, o)) {
+                    res.push(o);
+                }
+            });
+        }
+        this.selectedColumns = res;
+        this.columnsSelected.emit(this.selectedColumns);
+    }
+    onEditRowClicked(row) {
+        const [index] = this._getIndexes([row]);
+        this.editRowBtnClicked.emit({ row, index });
+    }
+    onRemoveRowClicked(item) {
+        this.rowsToRemove.emit([item]);
+        const indexes = this._getIndexes([item]);
+        this.rowIndexesToRemove.emit(indexes);
+    }
+    onSort(event) {
+        this.sorted.emit(event);
+    }
+    onFilter(event) {
+        this.filtered.emit(event);
+    }
+    onRowReorder(event) {
+        this.rowsReordered.emit(event);
+    }
+    onLazyLoaded(event) {
+        this.lazyLoaded.emit(event);
+    }
+    onReloadData() {
+        if (this.dataReloadBtnDisabled)
+            return;
+        this.dataReloadBtnClicked.emit();
+    }
+    onExportData(event) {
+        if (this.exportBtnDisabled)
+            return;
+        this.exportMenu?.toggle(event);
+    }
+    onColumnsToggle(event) {
+        if (this.columnsToggleBtnDisabled)
+            return;
+        this.colToggleMenu?.toggle(event);
+    }
+    _getIndexes(rows) {
+        let indexes = rows.map((row) => this.primengTable.value.indexOf(row));
+        const indexesMap = this.tUnsortDirective?.sortIndices;
+        if (indexesMap && indexesMap.length > 0) {
+            indexes = indexes.map((i) => indexesMap.indexOf(i));
+        }
+        return indexes;
+    }
+    exportTable(format) {
+        if (this.columns.length < 1)
+            throw new Error('Columns must be defined!');
+        if (this.selectedColumns.length < 1)
+            throw new Error('Nothing to export!');
+        switch (format) {
+            case 'csv':
+                this.primengTable.exportCSV();
+                break;
+            case 'xlsx':
+                this.exportXLSX();
+                break;
+            // case 'pdf':
+            //   this.exportPDF();
+            //   break;
+        }
+    }
+    exportXLSX() {
+        import('xlsx').then((xlsx) => {
+            const sheetData = [
+                this.selectedColumns.map((c) => c[this.colHeaderName]),
+                ...this.primengTable.value.map((item) => this.selectedColumns.map((c) => item[c[this.colFieldName]]))
+            ];
+            const worksheet = xlsx.utils.json_to_sheet(sheetData, {
+                skipHeader: true
+            });
+            const workbook = {
+                Sheets: { [this.exportFilename]: worksheet },
+                SheetNames: [this.exportFilename]
+            };
+            const xlsxBuffer = xlsx.write(workbook, {
+                bookType: 'xlsx',
+                type: 'array'
+            });
+            const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+            const blob = new Blob([xlsxBuffer], {
+                type: EXCEL_TYPE
+            });
+            const downloadLink = this.document.createElement('a');
+            downloadLink.href = URL.createObjectURL(blob);
+            downloadLink.download = `${this.exportFilename}.xlsx`;
+            downloadLink.click();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: CpsTableComponent, isStandalone: true, selector: "cps-table", inputs: { columns: "columns", colHeaderName: "colHeaderName", colFieldName: "colFieldName", colFilterTypeName: "colFilterTypeName", colDateFormatName: "colDateFormatName", 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", filterableByColumns: "filterableByColumns", autoColumnFilterType: "autoColumnFilterType", 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", additionalBtnOnSelectIcon: "additionalBtnOnSelectIcon", additionalBtnOnSelectDisabled: "additionalBtnOnSelectDisabled", showActionBtn: "showActionBtn", actionBtnTitle: "actionBtnTitle", actionBtnIcon: "actionBtnIcon", actionBtnDisabled: "actionBtnDisabled", showExportBtn: "showExportBtn", exportBtnDisabled: "exportBtnDisabled", exportFilename: "exportFilename", csvSeparator: "csvSeparator", showDataReloadBtn: "showDataReloadBtn", dataReloadBtnDisabled: "dataReloadBtnDisabled", showColumnsToggleBtn: "showColumnsToggleBtn", columnsToggleBtnDisabled: "columnsToggleBtnDisabled", initialColumns: "initialColumns", renderDataAsHTML: "renderDataAsHTML", 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            [icon]=\"additionalBtnOnSelectIcon\"\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            [icon]=\"actionBtnIcon\"\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          @if (filterableByColumns) {\n            <th\n              *ngFor=\"let col of columns\"\n              [cpsTColSortable]=\"col[colFieldName]\"\n              [cpsTColFilter]=\"col[colFieldName]\"\n              [filterType]=\"\n                col[colFilterTypeName] ??\n                (autoColumnFilterType\n                  ? (data | cpsDetectFilterType: col[colFieldName])\n                  : 'text')\n              \">\n              {{ col[colHeaderName] }}\n            </th>\n          } @else {\n            <th\n              *ngFor=\"let col of columns\"\n              [cpsTColSortable]=\"col[colFieldName]\">\n              {{ col[colHeaderName] }}\n            </th>\n          }\n        </ng-container>\n        <ng-container *ngIf=\"!sortable\">\n          @if (filterableByColumns) {\n            <th\n              *ngFor=\"let col of columns\"\n              [cpsTColFilter]=\"col[colFieldName]\"\n              [filterType]=\"\n                col[colFilterTypeName] ??\n                (autoColumnFilterType\n                  ? (data | cpsDetectFilterType: col[colFieldName])\n                  : 'text')\n              \">\n              {{ col[colHeaderName] }}\n            </th>\n          } @else {\n            <th *ngFor=\"let col of columns\">\n              {{ col[colHeaderName] }}\n            </th>\n          }\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          @if (renderDataAsHTML) {\n            <td\n              *ngFor=\"let col of columns\"\n              [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n          } @else {\n            <td *ngFor=\"let col of columns\">\n              {{\n                col[colDateFormatName]\n                  ? (rowData[col[colFieldName]] | date: col[colDateFormatName])\n                  : rowData[col[colFieldName]]\n              }}\n            </td>\n          }\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 .cps-table-row-expanded-content td{border-left:4px solid var(--cps-color-surprise)!important}: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: "pipe", type: i2.DatePipe, name: "date" }, { 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", "borderRadius", "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", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { 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"] }, { kind: "directive", type: CpsTableColumnFilterDirective, selector: "[cpsTColFilter]", inputs: ["cpsTColFilter", "filterType", "filterPersistent", "filterShowClearButton", "filterShowApplyButton", "filterShowCloseButton", "filterShowMatchModes", "filterMatchModes", "filterShowOperator", "filterMaxConstraints", "filterHeaderTitle", "filterHideOnClear", "filterCategoryOptions", "filterAsButtonToggle", "filterSingleSelection", "filterPlaceholder"], exportAs: ["cpsTColFilter"] }, { kind: "pipe", type: CpsDetectFilterTypePipe, name: "cpsDetectFilterType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cps-table', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormsModule,
+                        CommonModule,
+                        TableModule,
+                        TableUnsortDirective,
+                        CpsInputComponent,
+                        CpsButtonComponent,
+                        CpsSelectComponent,
+                        CpsIconComponent,
+                        CpsMenuComponent,
+                        CpsLoaderComponent,
+                        TableRowMenuComponent,
+                        CpsTableColumnSortableDirective,
+                        CpsTableColumnFilterDirective,
+                        CpsDetectFilterTypePipe
+                    ], providers: [
+                        TableService,
+                        {
+                            provide: Table,
+                            useFactory: tableFactory,
+                            // 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            [icon]=\"additionalBtnOnSelectIcon\"\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            [icon]=\"actionBtnIcon\"\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          @if (filterableByColumns) {\n            <th\n              *ngFor=\"let col of columns\"\n              [cpsTColSortable]=\"col[colFieldName]\"\n              [cpsTColFilter]=\"col[colFieldName]\"\n              [filterType]=\"\n                col[colFilterTypeName] ??\n                (autoColumnFilterType\n                  ? (data | cpsDetectFilterType: col[colFieldName])\n                  : 'text')\n              \">\n              {{ col[colHeaderName] }}\n            </th>\n          } @else {\n            <th\n              *ngFor=\"let col of columns\"\n              [cpsTColSortable]=\"col[colFieldName]\">\n              {{ col[colHeaderName] }}\n            </th>\n          }\n        </ng-container>\n        <ng-container *ngIf=\"!sortable\">\n          @if (filterableByColumns) {\n            <th\n              *ngFor=\"let col of columns\"\n              [cpsTColFilter]=\"col[colFieldName]\"\n              [filterType]=\"\n                col[colFilterTypeName] ??\n                (autoColumnFilterType\n                  ? (data | cpsDetectFilterType: col[colFieldName])\n                  : 'text')\n              \">\n              {{ col[colHeaderName] }}\n            </th>\n          } @else {\n            <th *ngFor=\"let col of columns\">\n              {{ col[colHeaderName] }}\n            </th>\n          }\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          @if (renderDataAsHTML) {\n            <td\n              *ngFor=\"let col of columns\"\n              [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n          } @else {\n            <td *ngFor=\"let col of columns\">\n              {{\n                col[colDateFormatName]\n                  ? (rowData[col[colFieldName]] | date: col[colDateFormatName])\n                  : rowData[col[colFieldName]]\n              }}\n            </td>\n          }\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 .cps-table-row-expanded-content td{border-left:4px solid var(--cps-color-surprise)!important}: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 }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { columns: [{
                 type: Input
-            }], filterPersistent: [{
+            }], colHeaderName: [{
                 type: Input
-            }], filterShowClearButton: [{
+            }], colFieldName: [{
                 type: Input
-            }], filterShowApplyButton: [{
+            }], colFilterTypeName: [{
                 type: Input
-            }], filterShowCloseButton: [{
+            }], colDateFormatName: [{
                 type: Input
-            }], filterShowMatchModes: [{
+            }], striped: [{
                 type: Input
-            }], filterMatchModes: [{
+            }], bordered: [{
                 type: Input
-            }], filterShowOperator: [{
+            }], size: [{
                 type: Input
-            }], filterMaxConstraints: [{
+            }], selectable: [{
                 type: Input
-            }], filterHeaderTitle: [{
+            }], rowHover: [{
                 type: Input
-            }], filterHideOnClear: [{
+            }], dataKey: [{
                 type: Input
-            }], filterCategoryOptions: [{
+            }], showRowMenu: [{
                 type: Input
-            }], filterAsButtonToggle: [{
+            }], showRowRemoveButton: [{
                 type: Input
-            }], filterSingleSelection: [{
+            }], showRowEditButton: [{
                 type: Input
-            }], filterPlaceholder: [{
+            }], reorderableRows: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], tableStyle: [{
+                type: Input
+            }], tableStyleClass: [{
+                type: Input
+            }], sortable: [{
+                type: Input
+            }], filterableByColumns: [{
+                type: Input
+            }], autoColumnFilterType: [{
+                type: Input
+            }], sortMode: [{
+                type: Input
+            }], customSort: [{
+                type: Input
+            }], hasToolbar: [{
+                type: Input
+            }], toolbarSize: [{
+                type: Input
+            }], toolbarTitle: [{
+                type: Input
+            }], toolbarIcon: [{
+                type: Input
+            }], toolbarIconColor: [{
+                type: Input
+            }], scrollable: [{
+                type: Input
+            }], scrollHeight: [{
+                type: Input
+            }], virtualScroll: [{
+                type: Input
+            }], numToleratedItems: [{
+                type: Input
+            }], paginator: [{
+                type: Input
+            }], alwaysShowPaginator: [{
+                type: Input
+            }], rowsPerPageOptions: [{
+                type: Input
+            }], first: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], resetPageOnRowsChange: [{
+                type: Input
+            }], resetPageOnSort: [{
+                type: Input
+            }], totalRecords: [{
+                type: Input
+            }], emptyMessage: [{
+                type: Input
+            }], emptyBodyHeight: [{
+                type: Input
+            }], lazy: [{
+                type: Input
+            }], lazyLoadOnInit: [{
+                type: Input
+            }], showGlobalFilter: [{
+                type: Input
+            }], globalFilterPlaceholder: [{
+                type: Input
+            }], globalFilterFields: [{
+                type: Input
+            }], clearGlobalFilterOnLoading: [{
+                type: Input
+            }], showRemoveBtnOnSelect: [{
+                type: Input
+            }], removeBtnOnSelectDisabled: [{
                 type: Input
+            }], showAdditionalBtnOnSelect: [{
+                type: Input
+            }], additionalBtnOnSelectTitle: [{
+                type: Input
+            }], additionalBtnOnSelectIcon: [{
+                type: Input
+            }], additionalBtnOnSelectDisabled: [{
+                type: Input
+            }], showActionBtn: [{
+                type: Input
+            }], actionBtnTitle: [{
+                type: Input
+            }], actionBtnIcon: [{
+                type: Input
+            }], actionBtnDisabled: [{
+                type: Input
+            }], showExportBtn: [{
+                type: Input
+            }], exportBtnDisabled: [{
+                type: Input
+            }], exportFilename: [{
+                type: Input
+            }], csvSeparator: [{
+                type: Input
+            }], showDataReloadBtn: [{
+                type: Input
+            }], dataReloadBtnDisabled: [{
+                type: Input
+            }], showColumnsToggleBtn: [{
+                type: Input
+            }], columnsToggleBtnDisabled: [{
+                type: Input
+            }], initialColumns: [{
+                type: Input
+            }], renderDataAsHTML: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], rowsSelected: [{
+                type: Output
+            }], selectedRowIndexes: [{
+                type: Output
+            }], actionBtnClicked: [{
+                type: Output
+            }], editRowBtnClicked: [{
+                type: Output
+            }], rowsToRemove: [{
+                type: Output
+            }], rowIndexesToRemove: [{
+                type: Output
+            }], pageChanged: [{
+                type: Output
+            }], sorted: [{
+                type: Output
+            }], filtered: [{
+                type: Output
+            }], rowsReordered: [{
+                type: Output
+            }], columnsSelected: [{
+                type: Output
+            }], lazyLoaded: [{
+                type: Output
+            }], dataReloadBtnClicked: [{
+                type: Output
+            }], additionalBtnOnSelectClicked: [{
+                type: Output
+            }], customSortFunction: [{
+                type: Output
+            }], toolbarTemplate: [{
+                type: ContentChild,
+                args: ['toolbar', { static: false }]
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: ['header', { static: false }]
+            }], nestedHeaderTemplate: [{
+                type: ContentChild,
+                args: ['nestedHeader', { static: false }]
+            }], bodyTemplate: [{
+                type: ContentChild,
+                args: ['body', { static: false }]
+            }], rowExpansionTemplate: [{
+                type: ContentChild,
+                args: ['rowexpansion', { static: false }]
+            }], primengTable: [{
+                type: ViewChild,
+                args: ['primengTable', { static: true }]
+            }], globalFilterComp: [{
+                type: ViewChild,
+                args: ['globalFilterComp']
+            }], exportMenu: [{
+                type: ViewChild,
+                args: ['exportMenu']
+            }], colToggleMenu: [{
+                type: ViewChild,
+                args: ['colToggleMenu']
+            }], tUnsortDirective: [{
+                type: ViewChild,
+                args: ['tUnsortDirective']
             }] } });
 
 /**
@@ -8180,8 +8298,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
  * @group Directives
  */
 class CpsTreetableRowTogglerDirective {
-    constructor(elementRef, viewContainerRef) {
+    constructor(elementRef, document, viewContainerRef) {
         this.elementRef = elementRef;
+        this.document = document;
         this.viewContainerRef = viewContainerRef;
         this.togglerCompRef =
             this.viewContainerRef.createComponent(TreeTableToggler);
@@ -8189,7 +8308,7 @@ class CpsTreetableRowTogglerDirective {
     ngOnInit() {
         this.elementRef.nativeElement.classList.add('cps-treetable-row-toggler-cell');
         this.togglerCompRef.setInput('rowNode', this.rowNode);
-        const spanElement = document.createElement('span');
+        const spanElement = this.document.createElement('span');
         spanElement.style.display = 'flex';
         while (this.elementRef.nativeElement.firstChild) {
             spanElement.appendChild(this.elementRef.nativeElement.firstChild);
@@ -8201,7 +8320,7 @@ class CpsTreetableRowTogglerDirective {
         this.togglerCompRef.destroy();
         this.viewContainerRef.clear();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTreetableRowTogglerDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTreetableRowTogglerDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: CpsTreetableRowTogglerDirective, isStandalone: true, selector: "[cpsTTRowToggler]", inputs: { rowNode: ["cpsTTRowToggler", "rowNode"] }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTreetableRowTogglerDirective, decorators: [{
@@ -8210,7 +8329,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                     standalone: true,
                     selector: '[cpsTTRowToggler]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { rowNode: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.ViewContainerRef }], propDecorators: { rowNode: [{
                 type: Input,
                 args: ['cpsTTRowToggler']
             }] } });
@@ -8242,8 +8364,9 @@ class CpsTreeTableComponent {
         return this._data;
     }
     // eslint-disable-next-line no-useless-constructor
-    constructor(cdRef, renderer, ngZone) {
+    constructor(cdRef, document, renderer, ngZone) {
         this.cdRef = cdRef;
+        this.document = document;
         this.renderer = renderer;
         this.ngZone = ngZone;
         /**
@@ -8660,6 +8783,7 @@ class CpsTreeTableComponent {
         this._scrollbarVisible = true;
         this._needRecalcAutoLayout = true;
         this._data = [];
+        this.window = this.document.defaultView;
         this._resizeObserver = new ResizeObserver((entries) => {
             entries.forEach((entry) => {
                 const body = entry.target;
@@ -8684,7 +8808,7 @@ class CpsTreeTableComponent {
             this.showRemoveBtnOnSelect = false;
         this.defScrollHeight = this.scrollHeight;
         if (this.virtualScroll) {
-            window.addEventListener('resize', this._onWindowResize.bind(this));
+            this.window.addEventListener('resize', this._onWindowResize.bind(this));
             if (this.defScrollHeight && this.defScrollHeight !== 'flex') {
                 this._defScrollHeightPx = parseInt(this.scrollHeight, 10);
             }
@@ -8799,7 +8923,7 @@ class CpsTreeTableComponent {
         if (this.virtualScroll) {
             if (this.autoLayout)
                 this._scrollSubscription?.unsubscribe();
-            window.removeEventListener('resize', this._onWindowResize.bind(this));
+            this.window.removeEventListener('resize', this._onWindowResize.bind(this));
         }
     }
     _calcAutoLayoutHeaderWidths(forced = false) {
@@ -8843,12 +8967,12 @@ class CpsTreeTableComponent {
             if (!bodyRows?.length)
                 return;
             const tdWidths = [];
-            const fragment = document.createDocumentFragment();
-            const hiddenDiv = document.createElement('div');
+            const fragment = this.document.createDocumentFragment();
+            const hiddenDiv = this.document.createElement('div');
             hiddenDiv.style.visibility = 'hidden';
             hiddenDiv.style.position = 'absolute';
             hiddenDiv.style.whiteSpace = 'nowrap';
-            document.body.appendChild(hiddenDiv);
+            this.document.body.appendChild(hiddenDiv);
             bodyRows.forEach((tr) => {
                 const tds = tr?.querySelectorAll('td');
                 tds?.forEach((td, idx) => {
@@ -8870,7 +8994,7 @@ class CpsTreeTableComponent {
                     tdWidths[idx] = Math.max(tdWidths[idx], tdWidth);
                 });
             });
-            document.body.removeChild(hiddenDiv);
+            this.document.body.removeChild(hiddenDiv);
             if (thWidths.length !== tdWidths.length)
                 return;
             const maxWidths = thWidths.map((v, idx) => Math.max(v, tdWidths[idx]));
@@ -9174,7 +9298,7 @@ class CpsTreeTableComponent {
             selection = [selection];
         this.rowsSelected.emit(selection);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTreeTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTreeTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", 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", additionalBtnOnSelectIcon: "additionalBtnOnSelectIcon", additionalBtnOnSelectDisabled: "additionalBtnOnSelectDisabled", showActionBtn: "showActionBtn", actionBtnTitle: "actionBtnTitle", actionBtnIcon: "actionBtnIcon", 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,
             {
@@ -9216,7 +9340,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                             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            [icon]=\"additionalBtnOnSelectIcon\"\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            [icon]=\"actionBtnIcon\"\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: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { columns: [{
                 type: Input
             }], colHeaderName: [{
                 type: Input
@@ -9583,8 +9710,9 @@ class CpsTagComponent {
     get value() {
         return this._value;
     }
-    constructor(_control) {
+    constructor(_control, document) {
         this._control = _control;
+        this.document = document;
         /**
          * Label of the tag.
          * @group Props
@@ -9622,7 +9750,7 @@ class CpsTagComponent {
         }
     }
     ngOnChanges() {
-        this.color = getCSSColor(this.color);
+        this.color = getCSSColor(this.color, this.document);
         this.setClasses();
     }
     setClasses() {
@@ -9653,7 +9781,7 @@ class CpsTagComponent {
         this.onChange(value);
         this.valueChanged.emit(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTagComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTagComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsTagComponent, isStandalone: true, selector: "cps-tag", inputs: { 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]=\"{ borderColor: color }\"\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--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: "17.3.0", ngImport: i0, type: CpsTagComponent, decorators: [{
@@ -9663,6 +9791,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                     type: Self
                 }, {
                     type: Optional
+                }] }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
                 }] }], propDecorators: { label: [{
                 type: Input
             }], color: [{
@@ -9682,7 +9813,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
  * @group Components
  */
 class CpsPaginatorComponent {
-    constructor() {
+    // eslint-disable-next-line no-useless-constructor
+    constructor(document) {
+        this.document = document;
         /**
          * Zero-relative number of the first row to be displayed.
          * @group Props
@@ -9727,7 +9860,7 @@ class CpsPaginatorComponent {
         this.rowOptions = [];
     }
     ngOnInit() {
-        this.backgroundColor = getCSSColor(this.backgroundColor);
+        this.backgroundColor = getCSSColor(this.backgroundColor, this.document);
         if (this.rowsPerPageOptions.length < 1)
             this.rowsPerPageOptions = [5, 10, 25, 50];
         if (!this.rows)
@@ -9755,13 +9888,16 @@ class CpsPaginatorComponent {
         this.paginator.rows = rows;
         this.paginator.changePage(this.paginator.getPage());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsPaginatorComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", 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", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", 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: [{
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { first: [{
                 type: Input
             }], rows: [{
                 type: Input
@@ -9816,8 +9952,9 @@ const transitionType = '0.2s cubic-bezier(0.4, 0, 0.2, 1)';
  * @group Components
  */
 class CpsExpansionPanelComponent {
-    constructor(_animationBuilder, _renderer) {
+    constructor(_animationBuilder, document, _renderer) {
         this._animationBuilder = _animationBuilder;
+        this.document = document;
         this._renderer = _renderer;
         /**
          * Title of the expansionPanel element.
@@ -9899,8 +10036,8 @@ class CpsExpansionPanelComponent {
         ]);
     }
     ngOnInit() {
-        this.borderColor = getCSSColor(this.borderColor);
-        this.backgroundColor = getCSSColor(this.backgroundColor);
+        this.borderColor = getCSSColor(this.borderColor, this.document);
+        this.backgroundColor = getCSSColor(this.backgroundColor, this.document);
         this.borderRadius = convertSize(this.borderRadius);
         this.width = convertSize(this.width);
     }
@@ -9953,7 +10090,7 @@ class CpsExpansionPanelComponent {
             this._renderer.setStyle(el, 'visibility', 'hidden');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsExpansionPanelComponent, deps: [{ token: i1$5.AnimationBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsExpansionPanelComponent, deps: [{ token: i1$5.AnimationBuilder }, { token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", 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({
@@ -9981,7 +10118,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                             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;-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: [{
+        }], ctorParameters: () => [{ type: i1$5.AnimationBuilder }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.Renderer2 }], propDecorators: { headerTitle: [{
                 type: Input
             }], backgroundColor: [{
                 type: Input
@@ -10492,8 +10632,9 @@ class CpsTabGroupComponent {
         return this._currentTabIndex;
     }
     // eslint-disable-next-line no-useless-constructor
-    constructor(cdRef) {
+    constructor(cdRef, document) {
         this.cdRef = cdRef;
+        this.document = document;
         /**
          * Determines whether to apply an alternative 'subtabs' styling.
          * @group Props
@@ -10555,8 +10696,8 @@ class CpsTabGroupComponent {
         this._previousTabIndex = 0;
     }
     ngOnInit() {
-        this.tabsBackground = getCSSColor(this.tabsBackground);
-        this.navButtonsBackground = getCSSColor(this.navButtonsBackground);
+        this.tabsBackground = getCSSColor(this.tabsBackground, this.document);
+        this.navButtonsBackground = getCSSColor(this.navButtonsBackground, this.document);
         this.windowResize$ = fromEvent(window, 'resize')
             .pipe(debounceTime(50), distinctUntilChanged())
             .subscribe(() => this.onResize());
@@ -10669,7 +10810,7 @@ class CpsTabGroupComponent {
                 parseFloat(style.borderRightWidth);
         return width;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", 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,.active){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)' })),
@@ -10732,7 +10873,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                             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,.active){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: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selectedIndex: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { selectedIndex: [{
                 type: Input
             }], isSubTabs: [{
                 type: Input
@@ -12650,7 +12794,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
  * @group Components
  */
 class CpsDividerComponent {
-    constructor() {
+    // eslint-disable-next-line no-useless-constructor
+    constructor(document) {
+        this.document = document;
         /**
          * Determines whether the divider is vertically aligned.
          * @group Props
@@ -12680,10 +12826,10 @@ class CpsDividerComponent {
     }
     _constructBorder(isVertical) {
         return isVertical
-            ? `${convertSize(this.thickness())} ${this.type()} ${getCSSColor(this.color())}`
+            ? `${convertSize(this.thickness())} ${this.type()} ${getCSSColor(this.color(), this.document)}`
             : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsDividerComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.0", type: CpsDividerComponent, isStandalone: true, selector: "cps-divider", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.border-top": "_borderTop()", "style.border-right": "_borderRight()" }, classAttribute: "cps-divider" }, ngImport: i0, template: '', isInline: true, styles: [".cps-divider{display:block;margin:0}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsDividerComponent, decorators: [{
@@ -12693,7 +12839,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         '[style.border-top]': '_borderTop()',
                         '[style.border-right]': '_borderRight()'
                     }, standalone: true, template: '', encapsulation: ViewEncapsulation.None, styles: [".cps-divider{display:block;margin:0}\n"] }]
-        }] });
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
 
 class CpsDialogRef {
     constructor() {
@@ -13795,5 +13944,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CPS_RADIO_GROUP, CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsColumnFilterMatchMode, CpsDatepickerComponent, CpsDialogConfig, CpsDialogRef, CpsDialogService, CpsDividerComponent, CpsExpansionPanelComponent, CpsFileUploadComponent, CpsIconComponent, CpsInfoCircleComponent, CpsInputComponent, CpsLoaderComponent, CpsMenuComponent, CpsMenuHideReason, CpsNotificationAppearance, CpsNotificationPosition, CpsNotificationService, CpsPaginatePipe, CpsPaginatorComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsRadioGroupComponent, CpsSchedulerComponent, CpsSelectComponent, CpsSidebarMenuComponent, CpsSwitchComponent, CpsTabComponent, CpsTabGroupComponent, CpsTableColumnFilterDirective, CpsTableColumnSortableDirective, CpsTableComponent, CpsTableHeaderSelectableDirective, CpsTableRowSelectableDirective, CpsTagComponent, CpsTextareaComponent, CpsTimepickerComponent, CpsTooltipDirective, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, CpsTreeTableColumnFilterDirective, CpsTreeTableColumnSortableDirective, CpsTreeTableComponent, CpsTreeTableHeaderSelectableDirective, CpsTreeTableRowSelectableDirective, CpsTreetableRowTogglerDirective, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory, treeTableFactory };
+export { CPS_RADIO_GROUP, CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsColumnFilterMatchMode, CpsDatepickerComponent, CpsDetectFilterTypePipe, CpsDialogConfig, CpsDialogRef, CpsDialogService, CpsDividerComponent, CpsExpansionPanelComponent, CpsFileUploadComponent, CpsIconComponent, CpsInfoCircleComponent, CpsInputComponent, CpsLoaderComponent, CpsMenuComponent, CpsMenuHideReason, CpsNotificationAppearance, CpsNotificationPosition, CpsNotificationService, CpsPaginatePipe, CpsPaginatorComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsRadioGroupComponent, CpsSchedulerComponent, CpsSelectComponent, CpsSidebarMenuComponent, CpsSwitchComponent, CpsTabComponent, CpsTabGroupComponent, CpsTableColumnFilterDirective, CpsTableColumnSortableDirective, CpsTableComponent, CpsTableHeaderSelectableDirective, CpsTableRowSelectableDirective, CpsTagComponent, CpsTextareaComponent, CpsTimepickerComponent, CpsTooltipDirective, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, CpsTreeTableColumnFilterDirective, CpsTreeTableColumnSortableDirective, CpsTreeTableComponent, CpsTreeTableHeaderSelectableDirective, CpsTreeTableRowSelectableDirective, CpsTreetableRowTogglerDirective, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory, treeTableFactory };
 //# sourceMappingURL=cps-ui-kit.mjs.map