cps-ui-kit 21.24.0 → 21.25.0

package/fesm2022/cps-ui-kit.mjs

@@ -3371,6 +3371,11 @@ class CpsButtonComponent {
          * @group Props
          */
         this.type = 'solid';
+        /**
+         * Native HTML button type attribute, it can be 'button', 'submit' or 'reset'.
+         * @group Props
+         */
+        this.nativeType = 'button';
         /**
          * Label or text on the button.
          * @group Props
@@ -3434,7 +3439,7 @@ class CpsButtonComponent {
     ngOnInit() {
         logMissingAriaLabelError('CpsButtonComponent', this.label, this.ariaLabel);
     }
-    ngOnChanges() {
+    ngOnChanges(changes) {
         this.buttonColor = getCSSColor(this.color, this.document);
         this.borderRadius = convertSize(this.borderRadius);
         this.textColor =
@@ -3446,6 +3451,11 @@ class CpsButtonComponent {
         }
         this.setClasses();
         logMissingAriaLabelError('CpsButtonComponent', this.label, this.ariaLabel);
+        if (changes.nativeType &&
+            !['button', 'submit', 'reset'].includes(this.nativeType)) {
+            console.warn(`Invalid nativeType value: ${this.nativeType}. Expected 'button', 'submit', or 'reset'. Defaulting to 'button'.`);
+            this.nativeType = 'button';
+        }
     }
     setClasses() {
         this.classesList = ['cps-button'];
@@ -3529,11 +3539,11 @@ class CpsButtonComponent {
         this.enterActive = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsButtonComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsButtonComponent, isStandalone: true, selector: "cps-button", inputs: { color: "color", contentColor: "contentColor", borderRadius: "borderRadius", type: "type", label: "label", ariaLabel: "ariaLabel", 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\"\n    (click)=\"onClick($event)\"\n    [attr.aria-busy]=\"loading ? true : null\"\n    [attr.aria-label]=\"ariaLabel || label || null\"\n    [class.loading]=\"loading\"\n    [class.cps-button--key-active]=\"enterActive\"\n    (keydown.enter)=\"onEnterKeydown()\"\n    (keyup.enter)=\"onEnterKeyup()\"\n    (blur)=\"onBlur()\"\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\" aria-hidden=\"true\">\n      @if (loading) {\n        <cps-progress-circular\n          color=\"currentColor\"\n          [diameter]=\"cvtIconSize\"\n          strokeWidth=\"2\">\n        </cps-progress-circular>\n      }\n    </div>\n    <div\n      class=\"cps-button__content\"\n      [style.visibility]=\"loading ? 'hidden' : null\"\n      [attr.aria-hidden]=\"loading ? true : null\">\n      @if (icon) {\n        <cps-icon\n          class=\"cps-button__icon\"\n          [icon]=\"icon\"\n          [color]=\"\n            disabled\n              ? type === 'solid'\n                ? 'text-mild'\n                : 'text-light'\n              : textColor\n          \"\n          aria-hidden=\"true\"\n          [size]=\"cvtIconSize\">\n        </cps-icon>\n      }\n      @if (label) {\n        <span\n          class=\"cps-button__text\"\n          [ngStyle]=\"{ 'font-size': cvtFontSize || null }\">\n          {{ label }}\n        </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;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;position:relative;border:none;cursor:pointer;outline:none;padding:0 1rem;font-weight:500}:host .cps-button:focus-visible:not(.loading){background-image:linear-gradient(#ffffff1a 0 0);box-shadow:0 .125rem .25rem #0c0c0d33}:host .cps-button:focus-visible{outline:none;position:relative}:host .cps-button:focus-visible:before,:host .cps-button:focus-visible:after{content:\"\";position:absolute;border-radius:inherit}:host .cps-button:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-button:focus-visible:after{inset:-.3125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-button:focus-visible.suppress-focus-visible:before,:host .cps-button:focus-visible.suppress-focus-visible:after{display:none}:host .cps-button:hover:not(:active):not(:disabled){background-image:linear-gradient(#ffffff1a 0 0);box-shadow:0 .125rem .25rem #0c0c0d33}:host .cps-button:active:not(:disabled):not(.loading),:host .cps-button--key-active:not(:disabled):not(.loading){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,:host .cps-button.loading{cursor:default;pointer-events:none}:host .cps-button--solid{border:0}:host .cps-button--solid:disabled{background-color:var(--cps-color-bg-disabled-selected)!important;color:var(--cps-color-text-mild)!important}:host .cps-button--outlined{border:.125rem solid;box-sizing:border-box}:host .cps-button--outlined:disabled{border-color:var(--cps-color-text-light)!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 .0625rem .25rem #0c0c0d1a}:host .cps-button--large{min-height:3rem}:host .cps-button--large .cps-button__icon{width:1.25rem;height:1.25rem}:host .cps-button--large .cps-button__text{font-size:1.25rem}:host .cps-button--large .cps-button__spinner ::ng-deep .cps-progress-circular{width:1.375rem}:host .cps-button--large.loading{min-width:3.5rem}:host .cps-button--normal{min-height:2.5rem}:host .cps-button--normal .cps-button__icon{width:1rem;height:1rem}:host .cps-button--normal .cps-button__text{font-size:1rem}:host .cps-button--normal .cps-button__spinner ::ng-deep .cps-progress-circular{width:1.125rem}:host .cps-button--normal.loading{min-width:3rem}:host .cps-button--small{min-height:2rem}:host .cps-button--small .cps-button__icon{width:.875rem;height:.875rem}:host .cps-button--small .cps-button__text{font-size:.875rem}:host .cps-button--small .cps-button__spinner ::ng-deep .cps-progress-circular{width:.875rem}:host .cps-button--small.loading{min-width:2.5rem}:host .cps-button--xsmall{min-height:1.5rem}:host .cps-button--xsmall .cps-button__icon{width:.75rem;height:.75rem}:host .cps-button--xsmall .cps-button__text{font-size:.75rem}:host .cps-button--xsmall .cps-button__spinner ::ng-deep .cps-progress-circular{width:.625rem}:host .cps-button--xsmall.loading{min-width:2rem}:host .cps-button.cps-button--icon-before .cps-button__icon{margin-right:.5rem}:host .cps-button.cps-button--icon-after .cps-button__icon{margin-left:.5rem;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.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsButtonComponent, isStandalone: true, selector: "cps-button", inputs: { color: "color", contentColor: "contentColor", borderRadius: "borderRadius", type: "type", nativeType: "nativeType", label: "label", ariaLabel: "ariaLabel", 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    [attr.type]=\"nativeType\"\n    [ngClass]=\"classesList\"\n    [disabled]=\"disabled\"\n    (click)=\"onClick($event)\"\n    [attr.aria-busy]=\"loading ? true : null\"\n    [attr.aria-label]=\"ariaLabel || label || null\"\n    [class.loading]=\"loading\"\n    [class.cps-button--key-active]=\"enterActive\"\n    (keydown.enter)=\"onEnterKeydown()\"\n    (keyup.enter)=\"onEnterKeyup()\"\n    (blur)=\"onBlur()\"\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\" aria-hidden=\"true\">\n      @if (loading) {\n        <cps-progress-circular\n          color=\"currentColor\"\n          [diameter]=\"cvtIconSize\"\n          strokeWidth=\"2\">\n        </cps-progress-circular>\n      }\n    </div>\n    <div\n      class=\"cps-button__content\"\n      [style.visibility]=\"loading ? 'hidden' : null\"\n      [attr.aria-hidden]=\"loading ? true : null\">\n      @if (icon) {\n        <cps-icon\n          class=\"cps-button__icon\"\n          [icon]=\"icon\"\n          [color]=\"\n            disabled\n              ? type === 'solid'\n                ? 'text-mild'\n                : 'text-light'\n              : textColor\n          \"\n          aria-hidden=\"true\"\n          [size]=\"cvtIconSize\">\n        </cps-icon>\n      }\n      @if (label) {\n        <span\n          class=\"cps-button__text\"\n          [ngStyle]=\"{ 'font-size': cvtFontSize || null }\">\n          {{ label }}\n        </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;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;position:relative;border:none;cursor:pointer;outline:none;padding:0 1rem;font-weight:500}:host .cps-button:focus-visible:not(.loading){background-image:linear-gradient(#ffffff1a 0 0);box-shadow:0 .125rem .25rem #0c0c0d33}:host .cps-button:focus-visible{outline:none;position:relative}:host .cps-button:focus-visible:before,:host .cps-button:focus-visible:after{content:\"\";position:absolute;border-radius:inherit}:host .cps-button:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-button:focus-visible:after{inset:-.3125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-button:focus-visible.suppress-focus-visible:before,:host .cps-button:focus-visible.suppress-focus-visible:after{display:none}:host .cps-button:hover:not(:active):not(:disabled){background-image:linear-gradient(#ffffff1a 0 0);box-shadow:0 .125rem .25rem #0c0c0d33}:host .cps-button:active:not(:disabled):not(.loading),:host .cps-button--key-active:not(:disabled):not(.loading){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,:host .cps-button.loading{cursor:default;pointer-events:none}:host .cps-button--solid{border:0}:host .cps-button--solid:disabled{background-color:var(--cps-color-bg-disabled-selected)!important;color:var(--cps-color-text-mild)!important}:host .cps-button--outlined{border:.125rem solid;box-sizing:border-box}:host .cps-button--outlined:disabled{border-color:var(--cps-color-text-light)!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 .0625rem .25rem #0c0c0d1a}:host .cps-button--large{min-height:3rem}:host .cps-button--large .cps-button__icon{width:1.25rem;height:1.25rem}:host .cps-button--large .cps-button__text{font-size:1.25rem}:host .cps-button--large .cps-button__spinner ::ng-deep .cps-progress-circular{width:1.375rem}:host .cps-button--large.loading{min-width:3.5rem}:host .cps-button--normal{min-height:2.5rem}:host .cps-button--normal .cps-button__icon{width:1rem;height:1rem}:host .cps-button--normal .cps-button__text{font-size:1rem}:host .cps-button--normal .cps-button__spinner ::ng-deep .cps-progress-circular{width:1.125rem}:host .cps-button--normal.loading{min-width:3rem}:host .cps-button--small{min-height:2rem}:host .cps-button--small .cps-button__icon{width:.875rem;height:.875rem}:host .cps-button--small .cps-button__text{font-size:.875rem}:host .cps-button--small .cps-button__spinner ::ng-deep .cps-progress-circular{width:.875rem}:host .cps-button--small.loading{min-width:2.5rem}:host .cps-button--xsmall{min-height:1.5rem}:host .cps-button--xsmall .cps-button__icon{width:.75rem;height:.75rem}:host .cps-button--xsmall .cps-button__text{font-size:.75rem}:host .cps-button--xsmall .cps-button__spinner ::ng-deep .cps-progress-circular{width:.625rem}:host .cps-button--xsmall.loading{min-width:2rem}:host .cps-button.cps-button--icon-before .cps-button__icon{margin-right:.5rem}:host .cps-button.cps-button--icon-after .cps-button__icon{margin-left:.5rem;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.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: "21.2.13", ngImport: i0, type: CpsButtonComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule, CpsIconComponent, CpsProgressCircularComponent], selector: 'cps-button', template: "<div>\n  <button\n    type=\"button\"\n    [ngClass]=\"classesList\"\n    [disabled]=\"disabled\"\n    (click)=\"onClick($event)\"\n    [attr.aria-busy]=\"loading ? true : null\"\n    [attr.aria-label]=\"ariaLabel || label || null\"\n    [class.loading]=\"loading\"\n    [class.cps-button--key-active]=\"enterActive\"\n    (keydown.enter)=\"onEnterKeydown()\"\n    (keyup.enter)=\"onEnterKeyup()\"\n    (blur)=\"onBlur()\"\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\" aria-hidden=\"true\">\n      @if (loading) {\n        <cps-progress-circular\n          color=\"currentColor\"\n          [diameter]=\"cvtIconSize\"\n          strokeWidth=\"2\">\n        </cps-progress-circular>\n      }\n    </div>\n    <div\n      class=\"cps-button__content\"\n      [style.visibility]=\"loading ? 'hidden' : null\"\n      [attr.aria-hidden]=\"loading ? true : null\">\n      @if (icon) {\n        <cps-icon\n          class=\"cps-button__icon\"\n          [icon]=\"icon\"\n          [color]=\"\n            disabled\n              ? type === 'solid'\n                ? 'text-mild'\n                : 'text-light'\n              : textColor\n          \"\n          aria-hidden=\"true\"\n          [size]=\"cvtIconSize\">\n        </cps-icon>\n      }\n      @if (label) {\n        <span\n          class=\"cps-button__text\"\n          [ngStyle]=\"{ 'font-size': cvtFontSize || null }\">\n          {{ label }}\n        </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;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;position:relative;border:none;cursor:pointer;outline:none;padding:0 1rem;font-weight:500}:host .cps-button:focus-visible:not(.loading){background-image:linear-gradient(#ffffff1a 0 0);box-shadow:0 .125rem .25rem #0c0c0d33}:host .cps-button:focus-visible{outline:none;position:relative}:host .cps-button:focus-visible:before,:host .cps-button:focus-visible:after{content:\"\";position:absolute;border-radius:inherit}:host .cps-button:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-button:focus-visible:after{inset:-.3125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-button:focus-visible.suppress-focus-visible:before,:host .cps-button:focus-visible.suppress-focus-visible:after{display:none}:host .cps-button:hover:not(:active):not(:disabled){background-image:linear-gradient(#ffffff1a 0 0);box-shadow:0 .125rem .25rem #0c0c0d33}:host .cps-button:active:not(:disabled):not(.loading),:host .cps-button--key-active:not(:disabled):not(.loading){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,:host .cps-button.loading{cursor:default;pointer-events:none}:host .cps-button--solid{border:0}:host .cps-button--solid:disabled{background-color:var(--cps-color-bg-disabled-selected)!important;color:var(--cps-color-text-mild)!important}:host .cps-button--outlined{border:.125rem solid;box-sizing:border-box}:host .cps-button--outlined:disabled{border-color:var(--cps-color-text-light)!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 .0625rem .25rem #0c0c0d1a}:host .cps-button--large{min-height:3rem}:host .cps-button--large .cps-button__icon{width:1.25rem;height:1.25rem}:host .cps-button--large .cps-button__text{font-size:1.25rem}:host .cps-button--large .cps-button__spinner ::ng-deep .cps-progress-circular{width:1.375rem}:host .cps-button--large.loading{min-width:3.5rem}:host .cps-button--normal{min-height:2.5rem}:host .cps-button--normal .cps-button__icon{width:1rem;height:1rem}:host .cps-button--normal .cps-button__text{font-size:1rem}:host .cps-button--normal .cps-button__spinner ::ng-deep .cps-progress-circular{width:1.125rem}:host .cps-button--normal.loading{min-width:3rem}:host .cps-button--small{min-height:2rem}:host .cps-button--small .cps-button__icon{width:.875rem;height:.875rem}:host .cps-button--small .cps-button__text{font-size:.875rem}:host .cps-button--small .cps-button__spinner ::ng-deep .cps-progress-circular{width:.875rem}:host .cps-button--small.loading{min-width:2.5rem}:host .cps-button--xsmall{min-height:1.5rem}:host .cps-button--xsmall .cps-button__icon{width:.75rem;height:.75rem}:host .cps-button--xsmall .cps-button__text{font-size:.75rem}:host .cps-button--xsmall .cps-button__spinner ::ng-deep .cps-progress-circular{width:.625rem}:host .cps-button--xsmall.loading{min-width:2rem}:host .cps-button.cps-button--icon-before .cps-button__icon{margin-right:.5rem}:host .cps-button.cps-button--icon-after .cps-button__icon{margin-left:.5rem;order:1}:host .cps-button .cps-button__text{line-height:1}:host .cps-button .cps-button__spinner{position:absolute;display:flex}\n"] }]
+            args: [{ imports: [CommonModule, CpsIconComponent, CpsProgressCircularComponent], selector: 'cps-button', template: "<div>\n  <button\n    [attr.type]=\"nativeType\"\n    [ngClass]=\"classesList\"\n    [disabled]=\"disabled\"\n    (click)=\"onClick($event)\"\n    [attr.aria-busy]=\"loading ? true : null\"\n    [attr.aria-label]=\"ariaLabel || label || null\"\n    [class.loading]=\"loading\"\n    [class.cps-button--key-active]=\"enterActive\"\n    (keydown.enter)=\"onEnterKeydown()\"\n    (keyup.enter)=\"onEnterKeyup()\"\n    (blur)=\"onBlur()\"\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\" aria-hidden=\"true\">\n      @if (loading) {\n        <cps-progress-circular\n          color=\"currentColor\"\n          [diameter]=\"cvtIconSize\"\n          strokeWidth=\"2\">\n        </cps-progress-circular>\n      }\n    </div>\n    <div\n      class=\"cps-button__content\"\n      [style.visibility]=\"loading ? 'hidden' : null\"\n      [attr.aria-hidden]=\"loading ? true : null\">\n      @if (icon) {\n        <cps-icon\n          class=\"cps-button__icon\"\n          [icon]=\"icon\"\n          [color]=\"\n            disabled\n              ? type === 'solid'\n                ? 'text-mild'\n                : 'text-light'\n              : textColor\n          \"\n          aria-hidden=\"true\"\n          [size]=\"cvtIconSize\">\n        </cps-icon>\n      }\n      @if (label) {\n        <span\n          class=\"cps-button__text\"\n          [ngStyle]=\"{ 'font-size': cvtFontSize || null }\">\n          {{ label }}\n        </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;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;position:relative;border:none;cursor:pointer;outline:none;padding:0 1rem;font-weight:500}:host .cps-button:focus-visible:not(.loading){background-image:linear-gradient(#ffffff1a 0 0);box-shadow:0 .125rem .25rem #0c0c0d33}:host .cps-button:focus-visible{outline:none;position:relative}:host .cps-button:focus-visible:before,:host .cps-button:focus-visible:after{content:\"\";position:absolute;border-radius:inherit}:host .cps-button:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-button:focus-visible:after{inset:-.3125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-button:focus-visible.suppress-focus-visible:before,:host .cps-button:focus-visible.suppress-focus-visible:after{display:none}:host .cps-button:hover:not(:active):not(:disabled){background-image:linear-gradient(#ffffff1a 0 0);box-shadow:0 .125rem .25rem #0c0c0d33}:host .cps-button:active:not(:disabled):not(.loading),:host .cps-button--key-active:not(:disabled):not(.loading){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,:host .cps-button.loading{cursor:default;pointer-events:none}:host .cps-button--solid{border:0}:host .cps-button--solid:disabled{background-color:var(--cps-color-bg-disabled-selected)!important;color:var(--cps-color-text-mild)!important}:host .cps-button--outlined{border:.125rem solid;box-sizing:border-box}:host .cps-button--outlined:disabled{border-color:var(--cps-color-text-light)!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 .0625rem .25rem #0c0c0d1a}:host .cps-button--large{min-height:3rem}:host .cps-button--large .cps-button__icon{width:1.25rem;height:1.25rem}:host .cps-button--large .cps-button__text{font-size:1.25rem}:host .cps-button--large .cps-button__spinner ::ng-deep .cps-progress-circular{width:1.375rem}:host .cps-button--large.loading{min-width:3.5rem}:host .cps-button--normal{min-height:2.5rem}:host .cps-button--normal .cps-button__icon{width:1rem;height:1rem}:host .cps-button--normal .cps-button__text{font-size:1rem}:host .cps-button--normal .cps-button__spinner ::ng-deep .cps-progress-circular{width:1.125rem}:host .cps-button--normal.loading{min-width:3rem}:host .cps-button--small{min-height:2rem}:host .cps-button--small .cps-button__icon{width:.875rem;height:.875rem}:host .cps-button--small .cps-button__text{font-size:.875rem}:host .cps-button--small .cps-button__spinner ::ng-deep .cps-progress-circular{width:.875rem}:host .cps-button--small.loading{min-width:2.5rem}:host .cps-button--xsmall{min-height:1.5rem}:host .cps-button--xsmall .cps-button__icon{width:.75rem;height:.75rem}:host .cps-button--xsmall .cps-button__text{font-size:.75rem}:host .cps-button--xsmall .cps-button__spinner ::ng-deep .cps-progress-circular{width:.625rem}:host .cps-button--xsmall.loading{min-width:2rem}:host .cps-button.cps-button--icon-before .cps-button__icon{margin-right:.5rem}:host .cps-button.cps-button--icon-after .cps-button__icon{margin-left:.5rem;order:1}:host .cps-button .cps-button__text{line-height:1}:host .cps-button .cps-button__spinner{position:absolute;display:flex}\n"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -3545,6 +3555,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 type: Input
             }], type: [{
                 type: Input
+            }], nativeType: [{
+                type: Input
             }], label: [{
                 type: Input
             }], ariaLabel: [{
@@ -10266,7 +10278,7 @@ class TableColumnFilterComponent {
         this._updateSortIconColor('');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TableColumnFilterComponent, deps: [{ token: i0.ElementRef }, { token: i1$5.Table, optional: true }, { token: i2$2.TreeTable, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TableColumnFilterComponent, isStandalone: true, selector: "table-column-filter", inputs: { field: "field", type: "type", persistent: "persistent", showClearButton: "showClearButton", showApplyButton: "showApplyButton", showCloseButton: "showCloseButton", showMatchModes: "showMatchModes", matchModes: "matchModes", showOperator: "showOperator", maxConstraints: "maxConstraints", headerTitle: "headerTitle", hideOnClear: "hideOnClear", categoryOptions: "categoryOptions", asButtonToggle: "asButtonToggle", singleSelection: "singleSelection", placeholder: "placeholder" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseOver()", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "columnFilterMenu", first: true, predicate: ["columnFilterMenu"], descendants: true }, { propertyName: "constraintCompList", predicate: ["constraintComponent"], descendants: true }], ngImport: i0, template: "<div class=\"cps-table-col-filter\">\n  <cps-menu\n    #columnFilterMenu\n    [withArrow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    [persistent]=\"persistent || (showApplyButton && isCategoryDropdownOpened)\"\n    (menuShown)=\"onMenuShown()\"\n    (menuHidden)=\"onMenuHidden()\"\n    (beforeMenuHidden)=\"onBeforeMenuHidden()\">\n    <div class=\"cps-table-col-filter-menu-content\">\n      @if (showCloseButton || headerTitle) {\n        <div class=\"cps-table-col-filter-menu-content-header\">\n          <span class=\"cps-table-col-filter-menu-content-header-title\">\n            {{ headerTitle }}\n          </span>\n          @if (showCloseButton) {\n            <cps-icon icon=\"close-x\" (click)=\"onCloseClick()\"></cps-icon>\n          }\n        </div>\n      }\n      @if (isShowOperator) {\n        <div class=\"cps-table-col-filter-menu-content-operator\">\n          <cps-select\n            ariaLabel=\"Select operator\"\n            [hideDetails]=\"true\"\n            [disabled]=\"!fieldConstraints || fieldConstraints.length < 2\"\n            [returnObject]=\"false\"\n            [options]=\"operatorOptions\"\n            [ngModel]=\"operator\"\n            (valueChanged)=\"onOperatorChange($event)\"></cps-select>\n        </div>\n      }\n      <div class=\"cps-table-col-filter-menu-content-constraints\">\n        @for (\n          fieldConstraint of fieldConstraints;\n          track fieldConstraint;\n          let i = $index\n        ) {\n          <div class=\"cps-table-col-filter-menu-content-constraint\">\n            @if (showMatchModes && currentMatchModes) {\n              <cps-select\n                ariaLabel=\"Select match mode\"\n                class=\"cps-table-col-filter-match-mode-select\"\n                [hideDetails]=\"true\"\n                [returnObject]=\"false\"\n                [options]=\"currentMatchModes\"\n                [ngModel]=\"fieldConstraint.matchMode\"\n                (valueChanged)=\"\n                  onMenuMatchModeChange($event, fieldConstraint)\n                \"></cps-select>\n            }\n            <table-column-filter-constraint\n              #constraintComponent\n              [type]=\"type\"\n              [field]=\"field\"\n              [asButtonToggle]=\"asButtonToggle\"\n              [singleSelection]=\"singleSelection\"\n              [categoryOptions]=\"categoryOptions\"\n              [filterConstraint]=\"fieldConstraint\"\n              [hasApplyButton]=\"showApplyButton\"\n              [placeholder]=\"placeholder\">\n            </table-column-filter-constraint>\n            @if (showRemoveIcon) {\n              <div class=\"cps-table-col-filter-remove-rule-btn\">\n                <cps-button\n                  type=\"borderless\"\n                  width=\"100%\"\n                  size=\"small\"\n                  color=\"prepared\"\n                  icon=\"delete\"\n                  (clicked)=\"removeConstraint(fieldConstraint)\"\n                  label=\"Remove condition\">\n                </cps-button>\n              </div>\n            }\n          </div>\n        }\n      </div>\n      @if (isShowAddConstraint) {\n        <div class=\"cps-table-col-filter-add-rule-btn\">\n          <cps-button\n            label=\"Add condition\"\n            type=\"borderless\"\n            width=\"100%\"\n            size=\"small\"\n            color=\"surprise\"\n            icon=\"add\"\n            (clicked)=\"addConstraint()\">\n          </cps-button>\n        </div>\n      }\n      <div class=\"cps-table-col-filter-buttonbar\">\n        @if (showClearButton) {\n          <cps-button\n            (clicked)=\"clearFilter()\"\n            type=\"borderless\"\n            color=\"prepared\"\n            size=\"small\"\n            label=\"Clear\"></cps-button>\n        }\n        @if (showApplyButton) {\n          <cps-button\n            (clicked)=\"applyFilter()\"\n            color=\"prepared\"\n            size=\"small\"\n            label=\"Apply\"></cps-button>\n        }\n      </div>\n    </div>\n  </cps-menu>\n  <cps-icon\n    [icon]=\"isFilterApplied ? 'filter-funnel-filled' : 'filter-funnel'\"\n    size=\"13\"\n    (click)=\"columnFilterMenu.toggle($event)\"\n    class=\"cps-table-col-filter-menu-button\"\n    [ngClass]=\"{\n      'cps-table-col-filter-menu-button-active': isFilterApplied\n    }\"\n    >>\n  </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:8px;padding-right:4px}:host .cps-table-col-filter .cps-table-col-filter-menu-button:not(.cps-table-col-filter-menu-button-active):hover{color:var(--cps-color-text-dark)}:host .cps-table-col-filter .cps-table-col-filter-menu-button-active{color:var(--cps-color-calm-lighten1)}.cps-table-col-filter-menu-content{padding-bottom:12px;min-width:200px;max-height:500px;overflow:auto}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header{min-height:32px;padding:8px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light);display:flex;justify-content:space-between;align-items:center}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header-title{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-darkest);max-width:390px;cursor:default}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon{margin-left:8px;cursor:pointer}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon:hover{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-operator{padding:12px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint{border-bottom:1px solid var(--cps-color-line-mid);padding:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint .cps-table-col-filter-match-mode-select{margin-bottom:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint:last-child{border-bottom:none}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-remove-rule-btn{padding-top:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-add-rule-btn{padding:8px 12px}.cps-table-col-filter-menu-content .cps-table-col-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "ariaLabel", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked", "containerMouseLeave"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: TableColumnFilterConstraintComponent, selector: "table-column-filter-constraint", inputs: ["type", "field", "filterConstraint", "categoryOptions", "asButtonToggle", "singleSelection", "placeholder", "hasApplyButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TableColumnFilterComponent, isStandalone: true, selector: "table-column-filter", inputs: { field: "field", type: "type", persistent: "persistent", showClearButton: "showClearButton", showApplyButton: "showApplyButton", showCloseButton: "showCloseButton", showMatchModes: "showMatchModes", matchModes: "matchModes", showOperator: "showOperator", maxConstraints: "maxConstraints", headerTitle: "headerTitle", hideOnClear: "hideOnClear", categoryOptions: "categoryOptions", asButtonToggle: "asButtonToggle", singleSelection: "singleSelection", placeholder: "placeholder" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseOver()", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "columnFilterMenu", first: true, predicate: ["columnFilterMenu"], descendants: true }, { propertyName: "constraintCompList", predicate: ["constraintComponent"], descendants: true }], ngImport: i0, template: "<div class=\"cps-table-col-filter\">\n  <cps-menu\n    #columnFilterMenu\n    [withArrow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    [persistent]=\"persistent || (showApplyButton && isCategoryDropdownOpened)\"\n    (menuShown)=\"onMenuShown()\"\n    (menuHidden)=\"onMenuHidden()\"\n    (beforeMenuHidden)=\"onBeforeMenuHidden()\">\n    <div class=\"cps-table-col-filter-menu-content\">\n      @if (showCloseButton || headerTitle) {\n        <div class=\"cps-table-col-filter-menu-content-header\">\n          <span class=\"cps-table-col-filter-menu-content-header-title\">\n            {{ headerTitle }}\n          </span>\n          @if (showCloseButton) {\n            <cps-icon icon=\"close-x\" (click)=\"onCloseClick()\"></cps-icon>\n          }\n        </div>\n      }\n      @if (isShowOperator) {\n        <div class=\"cps-table-col-filter-menu-content-operator\">\n          <cps-select\n            ariaLabel=\"Select operator\"\n            [hideDetails]=\"true\"\n            [disabled]=\"!fieldConstraints || fieldConstraints.length < 2\"\n            [returnObject]=\"false\"\n            [options]=\"operatorOptions\"\n            [ngModel]=\"operator\"\n            (valueChanged)=\"onOperatorChange($event)\"></cps-select>\n        </div>\n      }\n      <div class=\"cps-table-col-filter-menu-content-constraints\">\n        @for (\n          fieldConstraint of fieldConstraints;\n          track fieldConstraint;\n          let i = $index\n        ) {\n          <div class=\"cps-table-col-filter-menu-content-constraint\">\n            @if (showMatchModes && currentMatchModes) {\n              <cps-select\n                ariaLabel=\"Select match mode\"\n                class=\"cps-table-col-filter-match-mode-select\"\n                [hideDetails]=\"true\"\n                [returnObject]=\"false\"\n                [options]=\"currentMatchModes\"\n                [ngModel]=\"fieldConstraint.matchMode\"\n                (valueChanged)=\"\n                  onMenuMatchModeChange($event, fieldConstraint)\n                \"></cps-select>\n            }\n            <table-column-filter-constraint\n              #constraintComponent\n              [type]=\"type\"\n              [field]=\"field\"\n              [asButtonToggle]=\"asButtonToggle\"\n              [singleSelection]=\"singleSelection\"\n              [categoryOptions]=\"categoryOptions\"\n              [filterConstraint]=\"fieldConstraint\"\n              [hasApplyButton]=\"showApplyButton\"\n              [placeholder]=\"placeholder\">\n            </table-column-filter-constraint>\n            @if (showRemoveIcon) {\n              <div class=\"cps-table-col-filter-remove-rule-btn\">\n                <cps-button\n                  type=\"borderless\"\n                  width=\"100%\"\n                  size=\"small\"\n                  color=\"prepared\"\n                  icon=\"delete\"\n                  (clicked)=\"removeConstraint(fieldConstraint)\"\n                  label=\"Remove condition\">\n                </cps-button>\n              </div>\n            }\n          </div>\n        }\n      </div>\n      @if (isShowAddConstraint) {\n        <div class=\"cps-table-col-filter-add-rule-btn\">\n          <cps-button\n            label=\"Add condition\"\n            type=\"borderless\"\n            width=\"100%\"\n            size=\"small\"\n            color=\"surprise\"\n            icon=\"add\"\n            (clicked)=\"addConstraint()\">\n          </cps-button>\n        </div>\n      }\n      <div class=\"cps-table-col-filter-buttonbar\">\n        @if (showClearButton) {\n          <cps-button\n            (clicked)=\"clearFilter()\"\n            type=\"borderless\"\n            color=\"prepared\"\n            size=\"small\"\n            label=\"Clear\"></cps-button>\n        }\n        @if (showApplyButton) {\n          <cps-button\n            (clicked)=\"applyFilter()\"\n            color=\"prepared\"\n            size=\"small\"\n            label=\"Apply\"></cps-button>\n        }\n      </div>\n    </div>\n  </cps-menu>\n  <cps-icon\n    [icon]=\"isFilterApplied ? 'filter-funnel-filled' : 'filter-funnel'\"\n    size=\"13\"\n    (click)=\"columnFilterMenu.toggle($event)\"\n    class=\"cps-table-col-filter-menu-button\"\n    [ngClass]=\"{\n      'cps-table-col-filter-menu-button-active': isFilterApplied\n    }\"\n    >>\n  </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:8px;padding-right:4px}:host .cps-table-col-filter .cps-table-col-filter-menu-button:not(.cps-table-col-filter-menu-button-active):hover{color:var(--cps-color-text-dark)}:host .cps-table-col-filter .cps-table-col-filter-menu-button-active{color:var(--cps-color-calm-lighten1)}.cps-table-col-filter-menu-content{padding-bottom:12px;min-width:200px;max-height:500px;overflow:auto}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header{min-height:32px;padding:8px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light);display:flex;justify-content:space-between;align-items:center}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header-title{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-darkest);max-width:390px;cursor:default}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon{margin-left:8px;cursor:pointer}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon:hover{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-operator{padding:12px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint{border-bottom:1px solid var(--cps-color-line-mid);padding:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint .cps-table-col-filter-match-mode-select{margin-bottom:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint:last-child{border-bottom:none}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-remove-rule-btn{padding-top:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-add-rule-btn{padding:8px 12px}.cps-table-col-filter-menu-content .cps-table-col-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "nativeType", "label", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "ariaLabel", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked", "containerMouseLeave"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: TableColumnFilterConstraintComponent, selector: "table-column-filter-constraint", inputs: ["type", "field", "filterConstraint", "categoryOptions", "asButtonToggle", "singleSelection", "placeholder", "hasApplyButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TableColumnFilterComponent, decorators: [{
             type: Component,
@@ -11303,7 +11315,7 @@ class CpsTableComponent {
                 // 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  [resizableColumns]=\"resizableColumns\"\n  [columnResizeMode]=\"columnResizeMode\"\n  [stripedRows]=\"striped\"\n  [showGridlines]=\"bordered\"\n  [size]=\"size === 'normal' ? undefined : size\"\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  @if (hasToolbar) {\n    <ng-template pTemplate=\"caption\">\n      @if (toolbarTemplate) {\n        <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n      }\n      @if (!toolbarTemplate) {\n        <div class=\"cps-table-tbar-left\">\n          @if (toolbarIcon) {\n            <div class=\"cps-table-tbar-icon\">\n              <cps-icon\n                [icon]=\"toolbarIcon\"\n                [color]=\"toolbarIconColor\"></cps-icon>\n            </div>\n          }\n          <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n          @if (showGlobalFilter) {\n            <div class=\"cps-table-tbar-global-filter\">\n              <cps-input\n                #globalFilterComp\n                ariaLabel=\"Global filter\"\n                prefixIcon=\"search\"\n                [placeholder]=\"globalFilterPlaceholder\"\n                (valueChanged)=\"onFilterGlobal($event)\"\n                [clearable]=\"true\"\n                [disabled]=\"loading\"\n                [appearance]=\"\n                  toolbarSize === 'small' ? 'underlined' : 'outlined'\n                \"\n                [hideDetails]=\"true\">\n              </cps-input>\n            </div>\n          }\n        </div>\n        <div class=\"cps-table-tbar-right\">\n          @if (showRemoveBtnOnSelect && selectedRows.length > 0) {\n            <div 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          }\n          @if (showAdditionalBtnOnSelect && selectedRows.length > 0) {\n            <div 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          }\n          @if (showActionBtn) {\n            <div 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          }\n          @if (showColumnsToggleBtn && columns.length > 0) {\n            <div\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\n                    ? 'text-lightest'\n                    : '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]=\"\n                      selectedColumns.length === columns.length\n                    \"\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                  @for (col of columns; track col) {\n                    <div\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\n                          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                  }\n                </div>\n              </cps-menu>\n            </div>\n          }\n          @if (showExportBtn) {\n            <div\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          }\n          @if (showDataReloadBtn) {\n            <div\n              class=\"cps-table-tbar-reload-btn\"\n              [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n              <cps-icon\n                icon=\"refresh\"\n                size=\"18\"\n                [color]=\"\n                  dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\n                \"\n                (click)=\"onReloadData()\">\n              </cps-icon>\n            </div>\n          }\n        </div>\n      }\n    </ng-template>\n  }\n\n  @if (nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <ng-container\n        *ngTemplateOutlet=\"\n          nestedHeaderTemplate;\n          context: {\n            $implicit: columns\n          }\n        \"></ng-container>\n    </ng-template>\n  }\n\n  @if (!nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr>\n        @if (rowExpansionTemplate) {\n          <th\n            style=\"width: 3rem\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n        @if (reorderableRows) {\n          <th\n            style=\"width: 3rem\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n        @if (selectable) {\n          <th\n            style=\"width: 4rem\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\">\n            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n          </th>\n        }\n        @if (headerTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              headerTemplate;\n              context: {\n                $implicit: columns\n              }\n            \"></ng-container>\n        }\n        @if (!headerTemplate && columns.length > 0) {\n          @if (sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTColSortable]=\"col[colFieldName]\"\n                  [cpsTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTableDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTColSortable]=\"col[colFieldName]\"\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n          @if (!sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTableDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n        }\n        @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n          <th\n            style=\"width: 2rem\"\n            class=\"cps-table-row-menu-cell\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n      </tr>\n    </ng-template>\n  }\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      @if (rowExpansionTemplate) {\n        <td 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      }\n      @if (reorderableRows) {\n        <td class=\"cps-table-row-drag-handle-cell\">\n          <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle\n            >\u2630</span\n          >\n        </td>\n      }\n      @if (selectable) {\n        <td>\n          <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n        </td>\n      }\n      @if (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      }\n      @if (!bodyTemplate) {\n        @if (columns.length > 0) {\n          @if (renderDataAsHTML) {\n            @for (col of columns; track col) {\n              <td [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n            }\n          } @else {\n            @for (col of columns; track col) {\n              <td>\n                {{\n                  col[colDateFormatName]\n                    ? (rowData[col[colFieldName]]\n                      | date: col[colDateFormatName])\n                    : rowData[col[colFieldName]]\n                }}\n              </td>\n            }\n          }\n        }\n      }\n      @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n        <td 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            [customItems]=\"rowMenuItems\">\n          </table-row-menu>\n        </td>\n      }\n    </tr>\n  </ng-template>\n  @if (rowExpansionTemplate; as item) {\n    <ng-template pTemplate=\"rowexpansion\" 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  }\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        ariaLabel=\"Set rows per page\"\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-column-resizer-helper{background:var(--cps-color-calm);width:1px}: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!important;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-datatable-sortable-column:not(.p-paginator-page-selected):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-datatable-sortable-column:not(.p-paginator-page-selected):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 .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-checked .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{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-reorderable-row-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderable-row-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{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-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .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-content-start .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .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-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):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-paginator-page-selected{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-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):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-paginator-page:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-paginator-page{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-mask.p-overlay-mask{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-mask.p-overlay-mask{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-mask.p-overlay-mask{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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$5.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i1$5.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$5.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$5.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$5.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: TableUnsortDirective, selector: "[tWithUnsort]", exportAs: ["tWithUnsort"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "ariaLabel", "hint", "placeholder", "disabled", "readonly", "autocomplete", "spellcheck", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixIconAriaLabel", "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", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "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", "ariaLabel", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked", "containerMouseLeave"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", inputs: ["showRowRemoveButton", "customItems", "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: "directive", type: CpsTableColumnResizableDirective, selector: "[cpsTColResizable]", inputs: ["cpsTColResizableDisabled"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: CpsTableDetectFilterTypePipe, name: "cpsTableDetectFilterType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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  [resizableColumns]=\"resizableColumns\"\n  [columnResizeMode]=\"columnResizeMode\"\n  [stripedRows]=\"striped\"\n  [showGridlines]=\"bordered\"\n  [size]=\"size === 'normal' ? undefined : size\"\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  @if (hasToolbar) {\n    <ng-template pTemplate=\"caption\">\n      @if (toolbarTemplate) {\n        <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n      }\n      @if (!toolbarTemplate) {\n        <div class=\"cps-table-tbar-left\">\n          @if (toolbarIcon) {\n            <div class=\"cps-table-tbar-icon\">\n              <cps-icon\n                [icon]=\"toolbarIcon\"\n                [color]=\"toolbarIconColor\"></cps-icon>\n            </div>\n          }\n          <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n          @if (showGlobalFilter) {\n            <div class=\"cps-table-tbar-global-filter\">\n              <cps-input\n                #globalFilterComp\n                ariaLabel=\"Global filter\"\n                prefixIcon=\"search\"\n                [placeholder]=\"globalFilterPlaceholder\"\n                (valueChanged)=\"onFilterGlobal($event)\"\n                [clearable]=\"true\"\n                [disabled]=\"loading\"\n                [appearance]=\"\n                  toolbarSize === 'small' ? 'underlined' : 'outlined'\n                \"\n                [hideDetails]=\"true\">\n              </cps-input>\n            </div>\n          }\n        </div>\n        <div class=\"cps-table-tbar-right\">\n          @if (showRemoveBtnOnSelect && selectedRows.length > 0) {\n            <div 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          }\n          @if (showAdditionalBtnOnSelect && selectedRows.length > 0) {\n            <div 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          }\n          @if (showActionBtn) {\n            <div 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          }\n          @if (showColumnsToggleBtn && columns.length > 0) {\n            <div\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\n                    ? 'text-lightest'\n                    : '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]=\"\n                      selectedColumns.length === columns.length\n                    \"\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                  @for (col of columns; track col) {\n                    <div\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\n                          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                  }\n                </div>\n              </cps-menu>\n            </div>\n          }\n          @if (showExportBtn) {\n            <div\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          }\n          @if (showDataReloadBtn) {\n            <div\n              class=\"cps-table-tbar-reload-btn\"\n              [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n              <cps-icon\n                icon=\"refresh\"\n                size=\"18\"\n                [color]=\"\n                  dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\n                \"\n                (click)=\"onReloadData()\">\n              </cps-icon>\n            </div>\n          }\n        </div>\n      }\n    </ng-template>\n  }\n\n  @if (nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <ng-container\n        *ngTemplateOutlet=\"\n          nestedHeaderTemplate;\n          context: {\n            $implicit: columns\n          }\n        \"></ng-container>\n    </ng-template>\n  }\n\n  @if (!nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr>\n        @if (rowExpansionTemplate) {\n          <th\n            style=\"width: 3rem\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n        @if (reorderableRows) {\n          <th\n            style=\"width: 3rem\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n        @if (selectable) {\n          <th\n            style=\"width: 4rem\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\">\n            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n          </th>\n        }\n        @if (headerTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              headerTemplate;\n              context: {\n                $implicit: columns\n              }\n            \"></ng-container>\n        }\n        @if (!headerTemplate && columns.length > 0) {\n          @if (sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTColSortable]=\"col[colFieldName]\"\n                  [cpsTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTableDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTColSortable]=\"col[colFieldName]\"\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n          @if (!sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTableDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n        }\n        @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n          <th\n            style=\"width: 2rem\"\n            class=\"cps-table-row-menu-cell\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n      </tr>\n    </ng-template>\n  }\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      @if (rowExpansionTemplate) {\n        <td 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      }\n      @if (reorderableRows) {\n        <td class=\"cps-table-row-drag-handle-cell\">\n          <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle\n            >\u2630</span\n          >\n        </td>\n      }\n      @if (selectable) {\n        <td>\n          <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n        </td>\n      }\n      @if (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      }\n      @if (!bodyTemplate) {\n        @if (columns.length > 0) {\n          @if (renderDataAsHTML) {\n            @for (col of columns; track col) {\n              <td [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n            }\n          } @else {\n            @for (col of columns; track col) {\n              <td>\n                {{\n                  col[colDateFormatName]\n                    ? (rowData[col[colFieldName]]\n                      | date: col[colDateFormatName])\n                    : rowData[col[colFieldName]]\n                }}\n              </td>\n            }\n          }\n        }\n      }\n      @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n        <td 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            [customItems]=\"rowMenuItems\">\n          </table-row-menu>\n        </td>\n      }\n    </tr>\n  </ng-template>\n  @if (rowExpansionTemplate; as item) {\n    <ng-template pTemplate=\"rowexpansion\" 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  }\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        ariaLabel=\"Set rows per page\"\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-column-resizer-helper{background:var(--cps-color-calm);width:1px}: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!important;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-datatable-sortable-column:not(.p-paginator-page-selected):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-datatable-sortable-column:not(.p-paginator-page-selected):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 .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-checked .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{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-reorderable-row-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderable-row-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{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-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .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-content-start .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .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-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):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-paginator-page-selected{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-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):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-paginator-page:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-paginator-page{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-mask.p-overlay-mask{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-mask.p-overlay-mask{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-mask.p-overlay-mask{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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$5.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i1$5.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$5.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$5.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$5.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: TableUnsortDirective, selector: "[tWithUnsort]", exportAs: ["tWithUnsort"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "ariaLabel", "hint", "placeholder", "disabled", "readonly", "autocomplete", "spellcheck", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixIconAriaLabel", "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", "nativeType", "label", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "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", "ariaLabel", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked", "containerMouseLeave"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", inputs: ["showRowRemoveButton", "customItems", "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: "directive", type: CpsTableColumnResizableDirective, selector: "[cpsTColResizable]", inputs: ["cpsTColResizableDisabled"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: CpsTableDetectFilterTypePipe, name: "cpsTableDetectFilterType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsTableComponent, decorators: [{
             type: Component,
@@ -14912,7 +14924,7 @@ class CpsTreeTableComponent {
                 // eslint-disable-next-line no-use-before-define
                 deps: [CpsTreeTableComponent]
             }
-        ], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }, { propertyName: "colgroupTemplate", first: true, predicate: ["colgroup"], descendants: true }], viewQueries: [{ propertyName: "primengTreeTable", first: true, predicate: ["primengTreeTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-treeTable\n  #primengTreeTable\n  ttWithUnsort\n  [ngClass]=\"{\n    'cps-treetable-loading': loading,\n    'cps-treetable-flex': defScrollHeight === 'flex',\n    'cps-treetable-nonvirtual': !virtualScroll,\n    'cps-treetable-autolayout-calced': autoLayout && scrollable\n  }\"\n  [value]=\"data\"\n  [autoLayout]=\"autoLayout && !scrollable\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{\n    numToleratedItems: numToleratedItems,\n    autoSize: false\n  }\"\n  [columns]=\"selectedColumns\"\n  [loading]=\"loading\"\n  [rowHover]=\"rowHover\"\n  [lazy]=\"lazy\"\n  [(selection)]=\"selectedRows\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  compareSelectionBy=\"deepEquals\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  [resizableColumns]=\"resizableColumns\"\n  [columnResizeMode]=\"columnResizeMode\"\n  [showGridlines]=\"bordered\"\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  @if (colgroupTemplate) {\n    <ng-template pTemplate=\"colgroup\">\n      <ng-container *ngTemplateOutlet=\"colgroupTemplate\"></ng-container>\n    </ng-template>\n  }\n  @if (hasToolbar) {\n    <ng-template pTemplate=\"caption\">\n      @if (toolbarTemplate) {\n        <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n      }\n      @if (!toolbarTemplate) {\n        <div class=\"cps-treetable-tbar-left\">\n          @if (toolbarIcon) {\n            <div class=\"cps-treetable-tbar-icon\">\n              <cps-icon\n                [icon]=\"toolbarIcon\"\n                [color]=\"toolbarIconColor\"></cps-icon>\n            </div>\n          }\n          <div class=\"cps-treetable-tbar-title\">{{ toolbarTitle }}</div>\n          @if (showGlobalFilter) {\n            <div class=\"cps-treetable-tbar-global-filter\">\n              <cps-input\n                #globalFilterComp\n                ariaLabel=\"Global filter\"\n                prefixIcon=\"search\"\n                [placeholder]=\"globalFilterPlaceholder\"\n                (valueChanged)=\"onFilterGlobal($event)\"\n                [clearable]=\"true\"\n                [disabled]=\"loading\"\n                [appearance]=\"\n                  toolbarSize === 'small' ? 'underlined' : 'outlined'\n                \"\n                [hideDetails]=\"true\">\n              </cps-input>\n            </div>\n          }\n        </div>\n        <div class=\"cps-treetable-tbar-right\">\n          @if (showRemoveBtnOnSelect && selectedRows.length > 0) {\n            <div 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          }\n          @if (showAdditionalBtnOnSelect && selectedRows.length > 0) {\n            <div 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          }\n          @if (showActionBtn) {\n            <div 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          }\n          @if (showExportBtn) {\n            <div\n              class=\"cps-treetable-tbar-export-btn ml-2\"\n              [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n              <cps-button\n                label=\"Export\"\n                [disabled]=\"exportBtnDisabled\"\n                color=\"prepared\"\n                type=\"solid\"\n                icon=\"export\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onExportData()\">\n              </cps-button>\n            </div>\n          }\n          @if (showColumnsToggleBtn && columns.length > 0) {\n            <div\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\n                    ? 'text-lightest'\n                    : '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]=\"\n                      selectedColumns.length === columns.length\n                    \"\n                    (click)=\"toggleAllColumns()\">\n                    <span class=\"cps-treetable-coltoggle-menu-item-left\">\n                      <span class=\"cps-treetable-coltoggle-menu-item-check\">\n                      </span>\n                      <span class=\"cps-treetable-coltoggle-menu-item-label\"\n                        >Show all columns</span\n                      >\n                    </span>\n                  </div>\n                  @for (col of columns; track col) {\n                    <div\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\n                          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                  }\n                </div>\n              </cps-menu>\n            </div>\n          }\n          @if (showDataReloadBtn) {\n            <div\n              class=\"cps-treetable-tbar-reload-btn\"\n              [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n              <cps-icon\n                icon=\"refresh\"\n                size=\"18\"\n                [color]=\"\n                  dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\n                \"\n                (click)=\"onReloadData()\">\n              </cps-icon>\n            </div>\n          }\n        </div>\n      }\n    </ng-template>\n  }\n\n  @if (nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <ng-container\n        *ngTemplateOutlet=\"\n          nestedHeaderTemplate;\n          context: { $implicit: columns }\n        \"></ng-container>\n    </ng-template>\n  }\n\n  @if (!nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr>\n        <!-- <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th> -->\n        @if (selectable) {\n          <th\n            cpsTTHdrSelectable\n            cpsTTColResizable\n            [cpsTTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n        @if (headerTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              headerTemplate;\n              context: { $implicit: columns }\n            \"></ng-container>\n        }\n        @if (!headerTemplate && columns.length > 0) {\n          @if (sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTTColSortable]=\"col[colFieldName]\"\n                  [cpsTTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTTDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTTColSortable]=\"col[colFieldName]\"\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n          @if (!sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTTDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n        }\n        @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n          <th\n            class=\"cps-treetable-row-menu-cell\"\n            cpsTTColResizable\n            [cpsTTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n      </tr>\n    </ng-template>\n  }\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      @if (selectable) {\n        <td [cpsTTRowSelectable]=\"rowNode\"></td>\n      }\n      @if (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      }\n      @if (!bodyTemplate) {\n        @if (columns.length > 0) {\n          @if (renderDataAsHTML) {\n            @for (col of columns; track col; let i = $index) {\n              @if (i === 0) {\n                <td\n                  [cpsTTRowToggler]=\"rowNode\"\n                  [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n              }\n              @if (i > 0) {\n                <td [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n              }\n            }\n          } @else {\n            @for (col of columns; track col; let i = $index) {\n              @if (i === 0) {\n                <td [cpsTTRowToggler]=\"rowNode\">\n                  {{\n                    col[colDateFormatName]\n                      ? (rowData[col[colFieldName]]\n                        | date: col[colDateFormatName])\n                      : rowData[col[colFieldName]]\n                  }}\n                </td>\n              }\n              @if (i > 0) {\n                <td>\n                  {{\n                    col[colDateFormatName]\n                      ? (rowData[col[colFieldName]]\n                        | date: col[colDateFormatName])\n                      : rowData[col[colFieldName]]\n                  }}\n                </td>\n              }\n            }\n          }\n        }\n      }\n      @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n        <td 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            [customItems]=\"rowMenuItems\">\n          </table-row-menu>\n        </td>\n      }\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        ariaLabel=\"Set rows per page\"\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    <cps-icon icon=\"menu-shrink\" size=\"normal\"></cps-icon>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorpreviouspagelinkicon\">\n    <cps-icon icon=\"angle-left\"></cps-icon>\n  </ng-template>\n  <ng-template pTemplate=\"paginatornextpagelinkicon\">\n    <cps-icon icon=\"angle-right\"></cps-icon>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorlastpagelinkicon\">\n    <cps-icon icon=\"menu-expand\" size=\"normal\"></cps-icon>\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:auto;height:auto;color:var(--cps-color-text-dark);border:0 none;background:transparent;border-radius:50%;margin-right:.5rem;padding:0}: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-paginator-page:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-paginator-page{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-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .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-content-start .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .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-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):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-paginator-page-selected{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-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):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,:host ::ng-deep span.p-paginator-first-icon,:host ::ng-deep span.p-paginator-prev-icon,:host ::ng-deep span.p-paginator-last-icon,:host ::ng-deep span.p-paginator-next-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!important;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:var(--cps-color-calm);width:1px}:host ::ng-deep .p-treetable .p-treetable-mask.p-overlay-mask{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-mask.p-overlay-mask{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-treetable.cps-tbar-normal .p-treetable-mask.p-overlay-mask{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,:host ::ng-deep .p-treetable.p-treetable-gridlines .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-checked .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-checkbox .p-checkbox-box minusicon .p-checkbox-icon{color:var(--cps-color-calm);width:12px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td p-treetablecheckbox .p-checkbox{margin-right:0}::ng-deep .p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}.cps-treetable-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected{font-weight:600}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-label,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-check,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-check{opacity:1}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-treetable-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TreeTableModule }, { kind: "component", type: i2$2.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$2.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "ariaLabel", "hint", "placeholder", "disabled", "readonly", "autocomplete", "spellcheck", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixIconAriaLabel", "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", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "ariaLabel", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked", "containerMouseLeave"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "directive", type: CpsTreeTableColumnSortableDirective, selector: "[cpsTTColSortable]", inputs: ["cpsTTColSortable"] }, { kind: "directive", type: CpsTreeTableColumnFilterDirective, selector: "[cpsTTColFilter]", inputs: ["cpsTTColFilter", "filterType", "filterPersistent", "filterShowClearButton", "filterShowApplyButton", "filterShowCloseButton", "filterShowMatchModes", "filterMatchModes", "filterShowOperator", "filterHeaderTitle", "filterHideOnClear", "filterCategoryOptions", "filterAsButtonToggle", "filterSingleSelection", "filterPlaceholder"], exportAs: ["cpsTTColFilter"] }, { kind: "directive", type: CpsTreeTableHeaderSelectableDirective, selector: "[cpsTTHdrSelectable]" }, { kind: "directive", type: CpsTreeTableRowSelectableDirective, selector: "[cpsTTRowSelectable]", inputs: ["cpsTTRowSelectable"] }, { kind: "directive", type: CpsTreetableRowTogglerDirective, selector: "[cpsTTRowToggler]", inputs: ["cpsTTRowToggler"] }, { kind: "directive", type: CpsTreeTableColumnResizableDirective, selector: "[cpsTTColResizable]", inputs: ["cpsTTColResizableDisabled"] }, { kind: "directive", type: TreeTableUnsortDirective, selector: "[ttWithUnsort]" }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", inputs: ["showRowRemoveButton", "customItems", "showRowEditButton"], outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: CpsTreeTableDetectFilterTypePipe, name: "cpsTTDetectFilterType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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: "colgroupTemplate", first: true, predicate: ["colgroup"], descendants: true }], viewQueries: [{ propertyName: "primengTreeTable", first: true, predicate: ["primengTreeTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-treeTable\n  #primengTreeTable\n  ttWithUnsort\n  [ngClass]=\"{\n    'cps-treetable-loading': loading,\n    'cps-treetable-flex': defScrollHeight === 'flex',\n    'cps-treetable-nonvirtual': !virtualScroll,\n    'cps-treetable-autolayout-calced': autoLayout && scrollable\n  }\"\n  [value]=\"data\"\n  [autoLayout]=\"autoLayout && !scrollable\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{\n    numToleratedItems: numToleratedItems,\n    autoSize: false\n  }\"\n  [columns]=\"selectedColumns\"\n  [loading]=\"loading\"\n  [rowHover]=\"rowHover\"\n  [lazy]=\"lazy\"\n  [(selection)]=\"selectedRows\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  compareSelectionBy=\"deepEquals\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  [resizableColumns]=\"resizableColumns\"\n  [columnResizeMode]=\"columnResizeMode\"\n  [showGridlines]=\"bordered\"\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  @if (colgroupTemplate) {\n    <ng-template pTemplate=\"colgroup\">\n      <ng-container *ngTemplateOutlet=\"colgroupTemplate\"></ng-container>\n    </ng-template>\n  }\n  @if (hasToolbar) {\n    <ng-template pTemplate=\"caption\">\n      @if (toolbarTemplate) {\n        <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n      }\n      @if (!toolbarTemplate) {\n        <div class=\"cps-treetable-tbar-left\">\n          @if (toolbarIcon) {\n            <div class=\"cps-treetable-tbar-icon\">\n              <cps-icon\n                [icon]=\"toolbarIcon\"\n                [color]=\"toolbarIconColor\"></cps-icon>\n            </div>\n          }\n          <div class=\"cps-treetable-tbar-title\">{{ toolbarTitle }}</div>\n          @if (showGlobalFilter) {\n            <div class=\"cps-treetable-tbar-global-filter\">\n              <cps-input\n                #globalFilterComp\n                ariaLabel=\"Global filter\"\n                prefixIcon=\"search\"\n                [placeholder]=\"globalFilterPlaceholder\"\n                (valueChanged)=\"onFilterGlobal($event)\"\n                [clearable]=\"true\"\n                [disabled]=\"loading\"\n                [appearance]=\"\n                  toolbarSize === 'small' ? 'underlined' : 'outlined'\n                \"\n                [hideDetails]=\"true\">\n              </cps-input>\n            </div>\n          }\n        </div>\n        <div class=\"cps-treetable-tbar-right\">\n          @if (showRemoveBtnOnSelect && selectedRows.length > 0) {\n            <div 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          }\n          @if (showAdditionalBtnOnSelect && selectedRows.length > 0) {\n            <div 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          }\n          @if (showActionBtn) {\n            <div 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          }\n          @if (showExportBtn) {\n            <div\n              class=\"cps-treetable-tbar-export-btn ml-2\"\n              [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n              <cps-button\n                label=\"Export\"\n                [disabled]=\"exportBtnDisabled\"\n                color=\"prepared\"\n                type=\"solid\"\n                icon=\"export\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onExportData()\">\n              </cps-button>\n            </div>\n          }\n          @if (showColumnsToggleBtn && columns.length > 0) {\n            <div\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\n                    ? 'text-lightest'\n                    : '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]=\"\n                      selectedColumns.length === columns.length\n                    \"\n                    (click)=\"toggleAllColumns()\">\n                    <span class=\"cps-treetable-coltoggle-menu-item-left\">\n                      <span class=\"cps-treetable-coltoggle-menu-item-check\">\n                      </span>\n                      <span class=\"cps-treetable-coltoggle-menu-item-label\"\n                        >Show all columns</span\n                      >\n                    </span>\n                  </div>\n                  @for (col of columns; track col) {\n                    <div\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\n                          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                  }\n                </div>\n              </cps-menu>\n            </div>\n          }\n          @if (showDataReloadBtn) {\n            <div\n              class=\"cps-treetable-tbar-reload-btn\"\n              [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n              <cps-icon\n                icon=\"refresh\"\n                size=\"18\"\n                [color]=\"\n                  dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\n                \"\n                (click)=\"onReloadData()\">\n              </cps-icon>\n            </div>\n          }\n        </div>\n      }\n    </ng-template>\n  }\n\n  @if (nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <ng-container\n        *ngTemplateOutlet=\"\n          nestedHeaderTemplate;\n          context: { $implicit: columns }\n        \"></ng-container>\n    </ng-template>\n  }\n\n  @if (!nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr>\n        <!-- <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th> -->\n        @if (selectable) {\n          <th\n            cpsTTHdrSelectable\n            cpsTTColResizable\n            [cpsTTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n        @if (headerTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              headerTemplate;\n              context: { $implicit: columns }\n            \"></ng-container>\n        }\n        @if (!headerTemplate && columns.length > 0) {\n          @if (sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTTColSortable]=\"col[colFieldName]\"\n                  [cpsTTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTTDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTTColSortable]=\"col[colFieldName]\"\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n          @if (!sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTTDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n        }\n        @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n          <th\n            class=\"cps-treetable-row-menu-cell\"\n            cpsTTColResizable\n            [cpsTTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n      </tr>\n    </ng-template>\n  }\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      @if (selectable) {\n        <td [cpsTTRowSelectable]=\"rowNode\"></td>\n      }\n      @if (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      }\n      @if (!bodyTemplate) {\n        @if (columns.length > 0) {\n          @if (renderDataAsHTML) {\n            @for (col of columns; track col; let i = $index) {\n              @if (i === 0) {\n                <td\n                  [cpsTTRowToggler]=\"rowNode\"\n                  [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n              }\n              @if (i > 0) {\n                <td [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n              }\n            }\n          } @else {\n            @for (col of columns; track col; let i = $index) {\n              @if (i === 0) {\n                <td [cpsTTRowToggler]=\"rowNode\">\n                  {{\n                    col[colDateFormatName]\n                      ? (rowData[col[colFieldName]]\n                        | date: col[colDateFormatName])\n                      : rowData[col[colFieldName]]\n                  }}\n                </td>\n              }\n              @if (i > 0) {\n                <td>\n                  {{\n                    col[colDateFormatName]\n                      ? (rowData[col[colFieldName]]\n                        | date: col[colDateFormatName])\n                      : rowData[col[colFieldName]]\n                  }}\n                </td>\n              }\n            }\n          }\n        }\n      }\n      @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n        <td 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            [customItems]=\"rowMenuItems\">\n          </table-row-menu>\n        </td>\n      }\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        ariaLabel=\"Set rows per page\"\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    <cps-icon icon=\"menu-shrink\" size=\"normal\"></cps-icon>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorpreviouspagelinkicon\">\n    <cps-icon icon=\"angle-left\"></cps-icon>\n  </ng-template>\n  <ng-template pTemplate=\"paginatornextpagelinkicon\">\n    <cps-icon icon=\"angle-right\"></cps-icon>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorlastpagelinkicon\">\n    <cps-icon icon=\"menu-expand\" size=\"normal\"></cps-icon>\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:auto;height:auto;color:var(--cps-color-text-dark);border:0 none;background:transparent;border-radius:50%;margin-right:.5rem;padding:0}: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-paginator-page:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-paginator-page{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-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .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-content-start .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .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-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):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-paginator-page-selected{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-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):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,:host ::ng-deep span.p-paginator-first-icon,:host ::ng-deep span.p-paginator-prev-icon,:host ::ng-deep span.p-paginator-last-icon,:host ::ng-deep span.p-paginator-next-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!important;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:var(--cps-color-calm);width:1px}:host ::ng-deep .p-treetable .p-treetable-mask.p-overlay-mask{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-mask.p-overlay-mask{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-treetable.cps-tbar-normal .p-treetable-mask.p-overlay-mask{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,:host ::ng-deep .p-treetable.p-treetable-gridlines .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-checked .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-checkbox .p-checkbox-box minusicon .p-checkbox-icon{color:var(--cps-color-calm);width:12px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td p-treetablecheckbox .p-checkbox{margin-right:0}::ng-deep .p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}.cps-treetable-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected{font-weight:600}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-label,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-check,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-check{opacity:1}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-treetable-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TreeTableModule }, { kind: "component", type: i2$2.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$2.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "ariaLabel", "hint", "placeholder", "disabled", "readonly", "autocomplete", "spellcheck", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixIconAriaLabel", "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", "nativeType", "label", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "ariaLabel", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked", "containerMouseLeave"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "directive", type: CpsTreeTableColumnSortableDirective, selector: "[cpsTTColSortable]", inputs: ["cpsTTColSortable"] }, { kind: "directive", type: CpsTreeTableColumnFilterDirective, selector: "[cpsTTColFilter]", inputs: ["cpsTTColFilter", "filterType", "filterPersistent", "filterShowClearButton", "filterShowApplyButton", "filterShowCloseButton", "filterShowMatchModes", "filterMatchModes", "filterShowOperator", "filterHeaderTitle", "filterHideOnClear", "filterCategoryOptions", "filterAsButtonToggle", "filterSingleSelection", "filterPlaceholder"], exportAs: ["cpsTTColFilter"] }, { kind: "directive", type: CpsTreeTableHeaderSelectableDirective, selector: "[cpsTTHdrSelectable]" }, { kind: "directive", type: CpsTreeTableRowSelectableDirective, selector: "[cpsTTRowSelectable]", inputs: ["cpsTTRowSelectable"] }, { kind: "directive", type: CpsTreetableRowTogglerDirective, selector: "[cpsTTRowToggler]", inputs: ["cpsTTRowToggler"] }, { kind: "directive", type: CpsTreeTableColumnResizableDirective, selector: "[cpsTTColResizable]", inputs: ["cpsTTColResizableDisabled"] }, { kind: "directive", type: TreeTableUnsortDirective, selector: "[ttWithUnsort]" }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", inputs: ["showRowRemoveButton", "customItems", "showRowEditButton"], outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: CpsTreeTableDetectFilterTypePipe, name: "cpsTTDetectFilterType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsTreeTableComponent, decorators: [{
             type: Component,
@@ -15946,7 +15958,7 @@ class CpsDialogComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsDialogComponent, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: CpsDialogRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: CpsDialogConfig }, { token: i0.NgZone }, { token: i1.PrimeNG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsDialogComponent, isStandalone: true, selector: "cps-dialog", viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: CpsDialogContentDirective, descendants: true }, { propertyName: "maskViewChild", first: true, predicate: ["mask"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }, { propertyName: "headerViewChild", first: true, predicate: ["header"], descendants: true }, { propertyName: "dragHandleViewChild", first: true, predicate: ["dragHandle"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  #mask\n  [ngClass]=\"{\n    'cps-dialog-mask': true,\n    'cps-dialog-overlay': config.modal !== false,\n    'cps-dialog-overlay-enter':\n      config.modal !== false && !config.blurredBackground,\n    'cps-dialog-blurred-overlay cps-dialog-blurred-overlay-enter':\n      config.modal !== false && config.blurredBackground,\n    'cps-dialog-left': position === 'left',\n    'cps-dialog-right': position === 'right',\n    'cps-dialog-top': position === 'top',\n    'cps-dialog-bottom': position === 'bottom',\n    'cps-dialog-top-left': position === 'topleft' || position === 'top-left',\n    'cps-dialog-top-right': position === 'topright' || position === 'top-right',\n    'cps-dialog-bottom-left':\n      position === 'bottomleft' || position === 'bottom-left',\n    'cps-dialog-bottom-right':\n      position === 'bottomright' || position === 'bottom-right'\n  }\"\n  [class]=\"config.maskStyleClass || ''\">\n  @if (visible) {\n    <div\n      #container\n      [ngClass]=\"{\n        'cps-dialog': true,\n        'cps-dialog-resizable': resizable,\n        'cps-dialog-draggable': draggable && !maximized,\n        'cps-dialog-dragging': dragging,\n        'cps-dialog-maximized': maximized\n      }\"\n      [ngStyle]=\"config.style\"\n      [class]=\"config.styleClass || ''\"\n      [@animation]=\"{\n        value: 'visible',\n        params: {\n          transform: transformOptions,\n          transition:\n            config.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'\n        }\n      }\"\n      (@animation.start)=\"onAnimationStart($event)\"\n      (@animation.done)=\"onAnimationEnd($event)\"\n      role=\"dialog\"\n      [attr.aria-modal]=\"config.modal !== false ? 'true' : null\"\n      tabindex=\"-1\"\n      [attr.aria-labelledby]=\"config.ariaLabelledBy || null\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-describedby]=\"config.ariaDescribedBy || null\"\n      [style.width]=\"cvtWidth\"\n      [style.height]=\"cvtHeight\"\n      [style.minWidth]=\"cvtMinWidth\"\n      [style.minHeight]=\"cvtMinHeight\"\n      [style.maxWidth]=\"cvtMaxWidth\"\n      [style.maxHeight]=\"cvtMaxHeight\">\n      @if (config.showHeader !== false) {\n        <div\n          #header\n          class=\"cps-dialog-header\"\n          [ngClass]=\"{\n            'cps-dialog-header-left-bordered':\n              config.showHeaderLeftBorder !== false,\n            'cps-dialog-header-bottom-bordered':\n              config.showHeaderBottomBorder !== false\n          }\"\n          (mousedown)=\"initDrag($event)\">\n          @if (draggable && !maximized) {\n            <cps-icon\n              #dragHandle\n              class=\"cps-dialog-drag-handle\"\n              icon=\"dots\"\n              role=\"button\"\n              tabindex=\"0\"\n              aria-label=\"Move dialog\"\n              aria-description=\"Use arrow keys to move\"\n              (keydown)=\"onHeaderKeydown($event)\"\n              (keyup)=\"onHeaderKeyup($event)\">\n            </cps-icon>\n          }\n          <div class=\"cps-dialog-header-left\">\n            <div class=\"cps-dialog-header-icon\">\n              @if (config.headerIcon) {\n                <cps-icon\n                  [icon]=\"config.headerIcon\"\n                  [color]=\"config.headerIconColor || 'currentColor'\">\n                </cps-icon>\n              }\n            </div>\n            <span class=\"cps-dialog-header-title\">{{\n              config.headerTitle\n            }}</span>\n            <div class=\"cps-dialog-header-info-circle\">\n              @if (config.headerInfoTooltip) {\n                <cps-info-circle\n                  size=\"small\"\n                  [tooltipPosition]=\"config.headerInfoTooltipPosition || 'top'\"\n                  [tooltipText]=\"config.headerInfoTooltip\">\n                </cps-info-circle>\n              }\n            </div>\n          </div>\n          <div class=\"cps-dialog-header-action-buttons\">\n            @if (maximizable) {\n              <cps-button\n                class=\"cps-dialog-header-action-button\"\n                [icon]=\"maximized ? 'minimize' : 'maximize'\"\n                [ariaLabel]=\"maximized ? 'Minimize dialog' : 'Maximize dialog'\"\n                size=\"small\"\n                width=\"2rem\"\n                color=\"graphite\"\n                type=\"borderless\"\n                (clicked)=\"toggleMaximized()\">\n              </cps-button>\n            }\n            @if (config.showCloseBtn !== false) {\n              <cps-button\n                class=\"cps-dialog-header-action-button\"\n                icon=\"close-x-2\"\n                ariaLabel=\"Close dialog\"\n                size=\"small\"\n                width=\"2rem\"\n                color=\"graphite\"\n                type=\"borderless\"\n                [disabled]=\"isCloseDisabled()\"\n                (clicked)=\"hide()\">\n              </cps-button>\n            }\n          </div>\n        </div>\n      }\n      <div\n        #content\n        class=\"cps-dialog-content\"\n        [ngStyle]=\"config.contentStyle\"\n        [class]=\"config.contentStyleClass || ''\">\n        <ng-template cpsDialogContent></ng-template>\n      </div>\n      @if (resizable && !maximized) {\n        <div\n          class=\"cps-dialog-resizable-handle\"\n          style=\"z-index: 90\"\n          tabindex=\"0\"\n          role=\"button\"\n          aria-label=\"Resize dialog\"\n          aria-description=\"Use arrow keys to resize\"\n          (mousedown)=\"initResize($event)\"\n          (keydown)=\"onResizeHandleKeydown($event)\"\n          (keyup)=\"onResizeHandleKeyup($event)\">\n          <span\n            class=\"cps-dialog-resizable-handle-grip\"\n            aria-hidden=\"true\"></span>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".cps-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cps-dialog-mask.cps-dialog-overlay{pointer-events:auto}.cps-dialog-overlay-enter{animation:cps-dialog-overlay-enter-animation .15s forwards}.cps-dialog-overlay-leave{animation:cps-dialog-overlay-leave-animation .15s forwards}.cps-dialog-blurred-overlay-enter{animation:cps-dialog-blurred-overlay-enter-animation .15s forwards}.cps-dialog-blurred-overlay-leave{animation:cps-dialog-blurred-overlay-leave-animation .15s forwards}.cps-dialog-overlay{background-color:#0003;transition-duration:.2s}.cps-dialog-blurred-overlay{-webkit-backdrop-filter:blur(.375rem);backdrop-filter:blur(.375rem)}@keyframes cps-dialog-overlay-enter-animation{0%{background-color:transparent}to{background-color:#0003}}@keyframes cps-dialog-overlay-leave-animation{0%{background-color:#0003}to{background-color:transparent}}@keyframes cps-dialog-blurred-overlay-enter-animation{0%{background-color:transparent;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}to{background-color:#0003;-webkit-backdrop-filter:blur(.375rem);backdrop-filter:blur(.375rem)}}@keyframes cps-dialog-blurred-overlay-leave-animation{0%{background-color:#0003;-webkit-backdrop-filter:blur(.375rem);backdrop-filter:blur(.375rem)}to{background-color:transparent;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}.cps-dialog{box-sizing:border-box;display:flex;flex-direction:column;pointer-events:auto;transform:scale(1);position:relative;border-radius:.25rem;box-shadow:0 .0625rem .1875rem #0000004d;border:0 none;font-family:Source Sans Pro,sans-serif;font-size:1rem;font-weight:400}.cps-dialog:focus-visible{outline:none;position:relative}.cps-dialog:focus-visible:before,.cps-dialog:focus-visible:after{content:\"\";position:absolute;border-radius:inherit}.cps-dialog:focus-visible:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}.cps-dialog:focus-visible:after{inset:-.125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-dialog:focus-visible.suppress-focus-visible:before,.cps-dialog:focus-visible.suppress-focus-visible:after{display:none}.cps-dialog .cps-dialog-header{overflow:hidden;border-bottom:0 none;background:#fff;color:var(--cps-color-text-dark);padding:1rem;border-top-right-radius:.25rem;border-top-left-radius:.25rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.cps-dialog .cps-dialog-header.cps-dialog-header-left-bordered{border-left:.25rem solid var(--cps-color-surprise)}.cps-dialog .cps-dialog-header.cps-dialog-header-bottom-bordered{border-bottom:.0625rem solid var(--cps-color-line-mid)}.cps-dialog .cps-dialog-header .cps-dialog-header-left{display:flex;align-items:center}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-icon{margin-right:.5rem;display:flex}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-title{cursor:default;font-weight:700;font-size:1.25rem}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-info-circle{margin-left:.5rem;cursor:default;display:flex}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-info-circle cps-info-circle{margin-top:.125rem}.cps-dialog .cps-dialog-content{background:#fff;color:var(--cps-color-text-dark);padding:1rem}.cps-dialog .cps-dialog-content:last-of-type,.cps-dialog-resizable .cps-dialog-content{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.cps-dialog-content{overflow-y:auto;flex-grow:1}.cps-dialog-dragging .cps-dialog-header{background-color:var(--cps-color-highlight-active)!important}.cps-dialog-draggable .cps-dialog-header{cursor:move;overflow:visible}.cps-dialog-draggable .cps-dialog-header:hover{background-color:var(--cps-color-highlight-hover)}.cps-dialog-draggable .cps-dialog-header.cps-dialog-header-moving{background-color:var(--cps-color-highlight-active)}.cps-dialog-draggable .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-title{cursor:unset}.cps-dialog-draggable .cps-dialog-drag-handle:focus-visible{outline:none;position:relative}.cps-dialog-draggable .cps-dialog-drag-handle:focus-visible:before,.cps-dialog-draggable .cps-dialog-drag-handle:focus-visible:after{content:\"\";position:absolute;border-radius:.25rem}.cps-dialog-draggable .cps-dialog-drag-handle:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}.cps-dialog-draggable .cps-dialog-drag-handle:focus-visible:after{inset:-.375rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-dialog-draggable .cps-dialog-drag-handle:focus-visible.suppress-focus-visible:before,.cps-dialog-draggable .cps-dialog-drag-handle:focus-visible.suppress-focus-visible:after{display:none}.cps-dialog .cps-dialog-header-action-buttons{display:flex;align-items:center}.cps-dialog-top .cps-dialog,.cps-dialog-bottom .cps-dialog,.cps-dialog-left .cps-dialog,.cps-dialog-right .cps-dialog,.cps-dialog-top-left .cps-dialog,.cps-dialog-top-right .cps-dialog,.cps-dialog-bottom-left .cps-dialog,.cps-dialog-bottom-right .cps-dialog{margin:.75rem;transform:translateZ(0)}.cps-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.cps-dialog-maximized .cps-dialog-content{flex-grow:1;border-radius:0!important}.cps-dialog-maximized .cps-dialog-header{border-radius:0!important}.cps-dialog-left{justify-content:flex-start}.cps-dialog-right{justify-content:flex-end}.cps-dialog-top{align-items:flex-start}.cps-dialog-top-left{justify-content:flex-start;align-items:flex-start}.cps-dialog-top-right{justify-content:flex-end;align-items:flex-start}.cps-dialog-bottom{align-items:flex-end}.cps-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.cps-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.cps-dialog .cps-dialog-resizable-handle{position:absolute;display:block;cursor:nwse-resize;width:1.5rem;height:1.5rem;right:0;bottom:0;overflow:visible}.cps-dialog .cps-dialog-resizable-handle:focus-visible{background-color:var(--cps-color-highlight-hover)}.cps-dialog .cps-dialog-resizable-handle.cps-dialog-resizable-handle-resizing,.cps-dialog .cps-dialog-resizable-handle.cps-dialog-resizable-handle-resizing:focus-visible{background-color:var(--cps-color-highlight-active)}.cps-dialog .cps-dialog-resizable-handle{outline:none;position:relative}.cps-dialog .cps-dialog-resizable-handle:before,.cps-dialog .cps-dialog-resizable-handle:after{content:\"\";position:absolute;border-radius:0}.cps-dialog .cps-dialog-resizable-handle:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-dialog .cps-dialog-resizable-handle:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-dialog .cps-dialog-resizable-handle.suppress-focus-visible:before,.cps-dialog .cps-dialog-resizable-handle.suppress-focus-visible:after{display:none}.cps-dialog .cps-dialog-resizable-handle{position:absolute}.cps-dialog .cps-dialog-resizable-handle:not(:focus-visible):before,.cps-dialog .cps-dialog-resizable-handle:not(:focus-visible):after{display:none}.cps-dialog .cps-dialog-resizable-handle .cps-dialog-resizable-handle-grip{position:absolute;inset:0;overflow:hidden;display:block}.cps-dialog .cps-dialog-resizable-handle .cps-dialog-resizable-handle-grip:after{content:\"\";position:absolute;display:block;width:3.125rem;height:0;box-shadow:0 0 0 .0625rem var(--cps-color-calm),0 .4375rem 0 .0625rem var(--cps-color-calm),0 .875rem 0 .0625rem var(--cps-color-calm),0 1.3125rem 0 .0625rem var(--cps-color-calm);transform:translate(-50%,-50%) rotate(-45deg) scale(.5);top:65%;left:65%}.cps-unselectable-text{-webkit-user-select:none;user-select:none}.cps-overflow-hidden{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: CpsDialogContentDirective, selector: "[cpsDialogContent]" }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsDialogComponent, isStandalone: true, selector: "cps-dialog", viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: CpsDialogContentDirective, descendants: true }, { propertyName: "maskViewChild", first: true, predicate: ["mask"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }, { propertyName: "headerViewChild", first: true, predicate: ["header"], descendants: true }, { propertyName: "dragHandleViewChild", first: true, predicate: ["dragHandle"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  #mask\n  [ngClass]=\"{\n    'cps-dialog-mask': true,\n    'cps-dialog-overlay': config.modal !== false,\n    'cps-dialog-overlay-enter':\n      config.modal !== false && !config.blurredBackground,\n    'cps-dialog-blurred-overlay cps-dialog-blurred-overlay-enter':\n      config.modal !== false && config.blurredBackground,\n    'cps-dialog-left': position === 'left',\n    'cps-dialog-right': position === 'right',\n    'cps-dialog-top': position === 'top',\n    'cps-dialog-bottom': position === 'bottom',\n    'cps-dialog-top-left': position === 'topleft' || position === 'top-left',\n    'cps-dialog-top-right': position === 'topright' || position === 'top-right',\n    'cps-dialog-bottom-left':\n      position === 'bottomleft' || position === 'bottom-left',\n    'cps-dialog-bottom-right':\n      position === 'bottomright' || position === 'bottom-right'\n  }\"\n  [class]=\"config.maskStyleClass || ''\">\n  @if (visible) {\n    <div\n      #container\n      [ngClass]=\"{\n        'cps-dialog': true,\n        'cps-dialog-resizable': resizable,\n        'cps-dialog-draggable': draggable && !maximized,\n        'cps-dialog-dragging': dragging,\n        'cps-dialog-maximized': maximized\n      }\"\n      [ngStyle]=\"config.style\"\n      [class]=\"config.styleClass || ''\"\n      [@animation]=\"{\n        value: 'visible',\n        params: {\n          transform: transformOptions,\n          transition:\n            config.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'\n        }\n      }\"\n      (@animation.start)=\"onAnimationStart($event)\"\n      (@animation.done)=\"onAnimationEnd($event)\"\n      role=\"dialog\"\n      [attr.aria-modal]=\"config.modal !== false ? 'true' : null\"\n      tabindex=\"-1\"\n      [attr.aria-labelledby]=\"config.ariaLabelledBy || null\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-describedby]=\"config.ariaDescribedBy || null\"\n      [style.width]=\"cvtWidth\"\n      [style.height]=\"cvtHeight\"\n      [style.minWidth]=\"cvtMinWidth\"\n      [style.minHeight]=\"cvtMinHeight\"\n      [style.maxWidth]=\"cvtMaxWidth\"\n      [style.maxHeight]=\"cvtMaxHeight\">\n      @if (config.showHeader !== false) {\n        <div\n          #header\n          class=\"cps-dialog-header\"\n          [ngClass]=\"{\n            'cps-dialog-header-left-bordered':\n              config.showHeaderLeftBorder !== false,\n            'cps-dialog-header-bottom-bordered':\n              config.showHeaderBottomBorder !== false\n          }\"\n          (mousedown)=\"initDrag($event)\">\n          @if (draggable && !maximized) {\n            <cps-icon\n              #dragHandle\n              class=\"cps-dialog-drag-handle\"\n              icon=\"dots\"\n              role=\"button\"\n              tabindex=\"0\"\n              aria-label=\"Move dialog\"\n              aria-description=\"Use arrow keys to move\"\n              (keydown)=\"onHeaderKeydown($event)\"\n              (keyup)=\"onHeaderKeyup($event)\">\n            </cps-icon>\n          }\n          <div class=\"cps-dialog-header-left\">\n            <div class=\"cps-dialog-header-icon\">\n              @if (config.headerIcon) {\n                <cps-icon\n                  [icon]=\"config.headerIcon\"\n                  [color]=\"config.headerIconColor || 'currentColor'\">\n                </cps-icon>\n              }\n            </div>\n            <span class=\"cps-dialog-header-title\">{{\n              config.headerTitle\n            }}</span>\n            <div class=\"cps-dialog-header-info-circle\">\n              @if (config.headerInfoTooltip) {\n                <cps-info-circle\n                  size=\"small\"\n                  [tooltipPosition]=\"config.headerInfoTooltipPosition || 'top'\"\n                  [tooltipText]=\"config.headerInfoTooltip\">\n                </cps-info-circle>\n              }\n            </div>\n          </div>\n          <div class=\"cps-dialog-header-action-buttons\">\n            @if (maximizable) {\n              <cps-button\n                class=\"cps-dialog-header-action-button\"\n                [icon]=\"maximized ? 'minimize' : 'maximize'\"\n                [ariaLabel]=\"maximized ? 'Minimize dialog' : 'Maximize dialog'\"\n                size=\"small\"\n                width=\"2rem\"\n                color=\"graphite\"\n                type=\"borderless\"\n                (clicked)=\"toggleMaximized()\">\n              </cps-button>\n            }\n            @if (config.showCloseBtn !== false) {\n              <cps-button\n                class=\"cps-dialog-header-action-button\"\n                icon=\"close-x-2\"\n                ariaLabel=\"Close dialog\"\n                size=\"small\"\n                width=\"2rem\"\n                color=\"graphite\"\n                type=\"borderless\"\n                [disabled]=\"isCloseDisabled()\"\n                (clicked)=\"hide()\">\n              </cps-button>\n            }\n          </div>\n        </div>\n      }\n      <div\n        #content\n        class=\"cps-dialog-content\"\n        [ngStyle]=\"config.contentStyle\"\n        [class]=\"config.contentStyleClass || ''\">\n        <ng-template cpsDialogContent></ng-template>\n      </div>\n      @if (resizable && !maximized) {\n        <div\n          class=\"cps-dialog-resizable-handle\"\n          style=\"z-index: 90\"\n          tabindex=\"0\"\n          role=\"button\"\n          aria-label=\"Resize dialog\"\n          aria-description=\"Use arrow keys to resize\"\n          (mousedown)=\"initResize($event)\"\n          (keydown)=\"onResizeHandleKeydown($event)\"\n          (keyup)=\"onResizeHandleKeyup($event)\">\n          <span\n            class=\"cps-dialog-resizable-handle-grip\"\n            aria-hidden=\"true\"></span>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".cps-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cps-dialog-mask.cps-dialog-overlay{pointer-events:auto}.cps-dialog-overlay-enter{animation:cps-dialog-overlay-enter-animation .15s forwards}.cps-dialog-overlay-leave{animation:cps-dialog-overlay-leave-animation .15s forwards}.cps-dialog-blurred-overlay-enter{animation:cps-dialog-blurred-overlay-enter-animation .15s forwards}.cps-dialog-blurred-overlay-leave{animation:cps-dialog-blurred-overlay-leave-animation .15s forwards}.cps-dialog-overlay{background-color:#0003;transition-duration:.2s}.cps-dialog-blurred-overlay{-webkit-backdrop-filter:blur(.375rem);backdrop-filter:blur(.375rem)}@keyframes cps-dialog-overlay-enter-animation{0%{background-color:transparent}to{background-color:#0003}}@keyframes cps-dialog-overlay-leave-animation{0%{background-color:#0003}to{background-color:transparent}}@keyframes cps-dialog-blurred-overlay-enter-animation{0%{background-color:transparent;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}to{background-color:#0003;-webkit-backdrop-filter:blur(.375rem);backdrop-filter:blur(.375rem)}}@keyframes cps-dialog-blurred-overlay-leave-animation{0%{background-color:#0003;-webkit-backdrop-filter:blur(.375rem);backdrop-filter:blur(.375rem)}to{background-color:transparent;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}.cps-dialog{box-sizing:border-box;display:flex;flex-direction:column;pointer-events:auto;transform:scale(1);position:relative;border-radius:.25rem;box-shadow:0 .0625rem .1875rem #0000004d;border:0 none;font-family:Source Sans Pro,sans-serif;font-size:1rem;font-weight:400}.cps-dialog:focus-visible{outline:none;position:relative}.cps-dialog:focus-visible:before,.cps-dialog:focus-visible:after{content:\"\";position:absolute;border-radius:inherit}.cps-dialog:focus-visible:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}.cps-dialog:focus-visible:after{inset:-.125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-dialog:focus-visible.suppress-focus-visible:before,.cps-dialog:focus-visible.suppress-focus-visible:after{display:none}.cps-dialog .cps-dialog-header{overflow:hidden;border-bottom:0 none;background:#fff;color:var(--cps-color-text-dark);padding:1rem;border-top-right-radius:.25rem;border-top-left-radius:.25rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.cps-dialog .cps-dialog-header.cps-dialog-header-left-bordered{border-left:.25rem solid var(--cps-color-surprise)}.cps-dialog .cps-dialog-header.cps-dialog-header-bottom-bordered{border-bottom:.0625rem solid var(--cps-color-line-mid)}.cps-dialog .cps-dialog-header .cps-dialog-header-left{display:flex;align-items:center}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-icon{margin-right:.5rem;display:flex}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-title{cursor:default;font-weight:700;font-size:1.25rem}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-info-circle{margin-left:.5rem;cursor:default;display:flex}.cps-dialog .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-info-circle cps-info-circle{margin-top:.125rem}.cps-dialog .cps-dialog-content{background:#fff;color:var(--cps-color-text-dark);padding:1rem}.cps-dialog .cps-dialog-content:last-of-type,.cps-dialog-resizable .cps-dialog-content{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.cps-dialog-content{overflow-y:auto;flex-grow:1}.cps-dialog-dragging .cps-dialog-header{background-color:var(--cps-color-highlight-active)!important}.cps-dialog-draggable .cps-dialog-header{cursor:move;overflow:visible}.cps-dialog-draggable .cps-dialog-header:hover{background-color:var(--cps-color-highlight-hover)}.cps-dialog-draggable .cps-dialog-header.cps-dialog-header-moving{background-color:var(--cps-color-highlight-active)}.cps-dialog-draggable .cps-dialog-header .cps-dialog-header-left .cps-dialog-header-title{cursor:unset}.cps-dialog-draggable .cps-dialog-drag-handle:focus-visible{outline:none;position:relative}.cps-dialog-draggable .cps-dialog-drag-handle:focus-visible:before,.cps-dialog-draggable .cps-dialog-drag-handle:focus-visible:after{content:\"\";position:absolute;border-radius:.25rem}.cps-dialog-draggable .cps-dialog-drag-handle:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}.cps-dialog-draggable .cps-dialog-drag-handle:focus-visible:after{inset:-.375rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-dialog-draggable .cps-dialog-drag-handle:focus-visible.suppress-focus-visible:before,.cps-dialog-draggable .cps-dialog-drag-handle:focus-visible.suppress-focus-visible:after{display:none}.cps-dialog .cps-dialog-header-action-buttons{display:flex;align-items:center}.cps-dialog-top .cps-dialog,.cps-dialog-bottom .cps-dialog,.cps-dialog-left .cps-dialog,.cps-dialog-right .cps-dialog,.cps-dialog-top-left .cps-dialog,.cps-dialog-top-right .cps-dialog,.cps-dialog-bottom-left .cps-dialog,.cps-dialog-bottom-right .cps-dialog{margin:.75rem;transform:translateZ(0)}.cps-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.cps-dialog-maximized .cps-dialog-content{flex-grow:1;border-radius:0!important}.cps-dialog-maximized .cps-dialog-header{border-radius:0!important}.cps-dialog-left{justify-content:flex-start}.cps-dialog-right{justify-content:flex-end}.cps-dialog-top{align-items:flex-start}.cps-dialog-top-left{justify-content:flex-start;align-items:flex-start}.cps-dialog-top-right{justify-content:flex-end;align-items:flex-start}.cps-dialog-bottom{align-items:flex-end}.cps-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.cps-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.cps-dialog .cps-dialog-resizable-handle{position:absolute;display:block;cursor:nwse-resize;width:1.5rem;height:1.5rem;right:0;bottom:0;overflow:visible}.cps-dialog .cps-dialog-resizable-handle:focus-visible{background-color:var(--cps-color-highlight-hover)}.cps-dialog .cps-dialog-resizable-handle.cps-dialog-resizable-handle-resizing,.cps-dialog .cps-dialog-resizable-handle.cps-dialog-resizable-handle-resizing:focus-visible{background-color:var(--cps-color-highlight-active)}.cps-dialog .cps-dialog-resizable-handle{outline:none;position:relative}.cps-dialog .cps-dialog-resizable-handle:before,.cps-dialog .cps-dialog-resizable-handle:after{content:\"\";position:absolute;border-radius:0}.cps-dialog .cps-dialog-resizable-handle:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-dialog .cps-dialog-resizable-handle:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-dialog .cps-dialog-resizable-handle.suppress-focus-visible:before,.cps-dialog .cps-dialog-resizable-handle.suppress-focus-visible:after{display:none}.cps-dialog .cps-dialog-resizable-handle{position:absolute}.cps-dialog .cps-dialog-resizable-handle:not(:focus-visible):before,.cps-dialog .cps-dialog-resizable-handle:not(:focus-visible):after{display:none}.cps-dialog .cps-dialog-resizable-handle .cps-dialog-resizable-handle-grip{position:absolute;inset:0;overflow:hidden;display:block}.cps-dialog .cps-dialog-resizable-handle .cps-dialog-resizable-handle-grip:after{content:\"\";position:absolute;display:block;width:3.125rem;height:0;box-shadow:0 0 0 .0625rem var(--cps-color-calm),0 .4375rem 0 .0625rem var(--cps-color-calm),0 .875rem 0 .0625rem var(--cps-color-calm),0 1.3125rem 0 .0625rem var(--cps-color-calm);transform:translate(-50%,-50%) rotate(-45deg) scale(.5);top:65%;left:65%}.cps-unselectable-text{-webkit-user-select:none;user-select:none}.cps-overflow-hidden{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: CpsDialogContentDirective, selector: "[cpsDialogContent]" }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "nativeType", "label", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }], animations: [
             trigger('animation', [
                 transition('void => visible', [useAnimation(showAnimation)]),
                 transition('visible => void', [useAnimation(hideAnimation)])
@@ -16003,7 +16015,7 @@ class CpsConfirmationComponent {
         this._dialogRef?.close(confirm);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsConfirmationComponent, deps: [{ token: CpsDialogRef }, { token: CpsDialogConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: CpsConfirmationComponent, isStandalone: true, selector: "cps-confirmation", ngImport: i0, template: "<div class=\"cps-confirmation\">\n  <span class=\"cps-confirmation-subtitle\" [innerHTML]=\"subtitle\"></span>\n  <div class=\"cps-confirmation-buttons\">\n    <cps-button\n      type=\"outlined\"\n      label=\"No\"\n      (clicked)=\"close(false)\"\n      color=\"calm\">\n    </cps-button>\n    <cps-button\n      data-testid=\"btn-yes\"\n      label=\"Yes\"\n      (clicked)=\"close(true)\"\n      color=\"calm\">\n    </cps-button>\n  </div>\n</div>\n", styles: [":host .cps-confirmation{display:flex;flex-direction:column;align-items:center;padding:.5rem}:host .cps-confirmation-subtitle{font-size:1rem;font-weight:400;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark)}:host .cps-confirmation-buttons{width:100%;display:flex;justify-content:space-around;padding-top:1.75rem}\n"], dependencies: [{ kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: CpsConfirmationComponent, isStandalone: true, selector: "cps-confirmation", ngImport: i0, template: "<div class=\"cps-confirmation\">\n  <span class=\"cps-confirmation-subtitle\" [innerHTML]=\"subtitle\"></span>\n  <div class=\"cps-confirmation-buttons\">\n    <cps-button\n      type=\"outlined\"\n      label=\"No\"\n      (clicked)=\"close(false)\"\n      color=\"calm\">\n    </cps-button>\n    <cps-button\n      data-testid=\"btn-yes\"\n      label=\"Yes\"\n      (clicked)=\"close(true)\"\n      color=\"calm\">\n    </cps-button>\n  </div>\n</div>\n", styles: [":host .cps-confirmation{display:flex;flex-direction:column;align-items:center;padding:.5rem}:host .cps-confirmation-subtitle{font-size:1rem;font-weight:400;font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-dark)}:host .cps-confirmation-buttons{width:100%;display:flex;justify-content:space-around;padding-top:1.75rem}\n"], dependencies: [{ kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "nativeType", "label", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsConfirmationComponent, decorators: [{
             type: Component,
@@ -16235,7 +16247,7 @@ class CpsToastComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsToastComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsToastComponent, isStandalone: true, selector: "cps-toast", inputs: { config: "config", data: "data" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div\n  (mouseenter)=\"clearTimeout()\"\n  (mouseleave)=\"initiateTimeout()\"\n  [class]=\"data.type\"\n  [@toastState]=\"{\n    value: 'visible'\n  }\"\n  [ngStyle]=\"{ 'max-width': maxWidth }\"\n  class=\"cps-toast-content\">\n  <div class=\"cps-toast-icon\" [ngClass]=\"{ filled: filled }\">\n    <cps-icon\n      [icon]=\"'toast-' + data.type\"\n      [color]=\"filled ? '#fff' : color\"\n      size=\"normal\"></cps-icon>\n  </div>\n  <div class=\"cps-toast-message\">\n    <p class=\"cps-toast-message-header\">{{ data.message || '' }}</p>\n    @if (data.details) {\n      <p class=\"cps-toast-message-details\">\n        {{ data.details }}\n      </p>\n    }\n  </div>\n  <div class=\"cps-toast-buttons\">\n    <cps-button\n      (clicked)=\"close()\"\n      [color]=\"color\"\n      ariaLabel=\"Close notification\"\n      icon=\"close-x\"\n      class=\"cps-toast-close-button\"\n      width=\"40\"\n      type=\"borderless\"></cps-button>\n  </div>\n</div>\n", styles: [":host .cps-toast-content{color:var(--cps-color-text-darkest);border-radius:4px;box-shadow:0 1px 3px #0000004d;display:flex;overflow:hidden}:host .cps-toast-content.success{background-color:var(--cps-color-success-bg);border:2px solid var(--cps-color-success)}:host .cps-toast-content.success .cps-toast-icon.filled{background-color:var(--cps-color-success)}:host .cps-toast-content.error{background-color:var(--cps-color-error-bg);border:2px solid var(--cps-color-error)}:host .cps-toast-content.error .cps-toast-icon.filled{background-color:var(--cps-color-error)}:host .cps-toast-content.warning{background-color:var(--cps-color-warn-bg);border:2px solid var(--cps-color-warn)}:host .cps-toast-content.warning .cps-toast-icon.filled{background-color:var(--cps-color-warn)}:host .cps-toast-content.info{background-color:var(--cps-color-info-bg);border:2px solid var(--cps-color-info)}:host .cps-toast-content.info .cps-toast-icon.filled{background-color:var(--cps-color-info)}:host .cps-toast-icon{display:flex;align-items:center;padding:20px}:host .cps-toast-message{display:flex;flex-direction:column;justify-content:center;padding:0 16px;font-weight:600;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-toast-message .cps-toast-message-details{white-space:pre-line;margin-top:0;font-size:14px}:host .cps-toast-buttons{display:flex;justify-content:center;align-items:center}:host .cps-toast-buttons .cps-toast-close-button{margin:0 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsToastComponent, isStandalone: true, selector: "cps-toast", inputs: { config: "config", data: "data" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div\n  (mouseenter)=\"clearTimeout()\"\n  (mouseleave)=\"initiateTimeout()\"\n  [class]=\"data.type\"\n  [@toastState]=\"{\n    value: 'visible'\n  }\"\n  [ngStyle]=\"{ 'max-width': maxWidth }\"\n  class=\"cps-toast-content\">\n  <div class=\"cps-toast-icon\" [ngClass]=\"{ filled: filled }\">\n    <cps-icon\n      [icon]=\"'toast-' + data.type\"\n      [color]=\"filled ? '#fff' : color\"\n      size=\"normal\"></cps-icon>\n  </div>\n  <div class=\"cps-toast-message\">\n    <p class=\"cps-toast-message-header\">{{ data.message || '' }}</p>\n    @if (data.details) {\n      <p class=\"cps-toast-message-details\">\n        {{ data.details }}\n      </p>\n    }\n  </div>\n  <div class=\"cps-toast-buttons\">\n    <cps-button\n      (clicked)=\"close()\"\n      [color]=\"color\"\n      ariaLabel=\"Close notification\"\n      icon=\"close-x\"\n      class=\"cps-toast-close-button\"\n      width=\"40\"\n      type=\"borderless\"></cps-button>\n  </div>\n</div>\n", styles: [":host .cps-toast-content{color:var(--cps-color-text-darkest);border-radius:4px;box-shadow:0 1px 3px #0000004d;display:flex;overflow:hidden}:host .cps-toast-content.success{background-color:var(--cps-color-success-bg);border:2px solid var(--cps-color-success)}:host .cps-toast-content.success .cps-toast-icon.filled{background-color:var(--cps-color-success)}:host .cps-toast-content.error{background-color:var(--cps-color-error-bg);border:2px solid var(--cps-color-error)}:host .cps-toast-content.error .cps-toast-icon.filled{background-color:var(--cps-color-error)}:host .cps-toast-content.warning{background-color:var(--cps-color-warn-bg);border:2px solid var(--cps-color-warn)}:host .cps-toast-content.warning .cps-toast-icon.filled{background-color:var(--cps-color-warn)}:host .cps-toast-content.info{background-color:var(--cps-color-info-bg);border:2px solid var(--cps-color-info)}:host .cps-toast-content.info .cps-toast-icon.filled{background-color:var(--cps-color-info)}:host .cps-toast-icon{display:flex;align-items:center;padding:20px}:host .cps-toast-message{display:flex;flex-direction:column;justify-content:center;padding:0 16px;font-weight:600;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-toast-message .cps-toast-message-details{white-space:pre-line;margin-top:0;font-size:14px}:host .cps-toast-buttons{display:flex;justify-content:center;align-items:center}:host .cps-toast-buttons .cps-toast-close-button{margin:0 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "nativeType", "label", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }], animations: [
             trigger('toastState', [
                 state('visible', style({
                     transform: 'translateY(0)',