cps-ui-kit 21.24.0 → 21.26.0

package/fesm2022/cps-ui-kit.mjs

@@ -19,7 +19,7 @@ import * as i1 from 'primeng/config';
 import * as i4$1 from 'primeng/scroller';
 import { ScrollerModule } from 'primeng/scroller';
 import * as i2$1 from 'primeng/datepicker';
-import { DatePickerModule } from 'primeng/datepicker';
+import { DatePickerModule, DatePicker } from 'primeng/datepicker';
 import * as i1$4 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
 import * as i1$5 from 'primeng/table';
@@ -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: [{
@@ -3587,10 +3599,9 @@ class CpsCheckboxComponent {
     get value() {
         return this._value;
     }
-    constructor(_control, document, _elementRef) {
+    constructor(_control, document) {
         this._control = _control;
         this.document = document;
-        this._elementRef = _elementRef;
         /**
          * Label of the checkbox.
          * @group Props
@@ -3686,14 +3697,14 @@ class CpsCheckboxComponent {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     setDisabledState(_disabled) { }
     focus() {
-        this._elementRef?.nativeElement?.querySelector('input')?.focus();
+        this.checkboxInput?.nativeElement?.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsCheckboxComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsCheckboxComponent, isStandalone: true, selector: "cps-checkbox", inputs: { label: "label", ariaLabel: "ariaLabel", disabled: "disabled", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", icon: "icon", iconColor: "iconColor", value: "value" }, outputs: { valueChanged: "valueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-checkbox-container\">\n  <label class=\"cps-checkbox\" [class.cps-checkbox-disabled]=\"disabled\">\n    <input\n      type=\"checkbox\"\n      class=\"cps-checkbox-input\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      (change)=\"updateValueEvent($event)\"\n      [attr.aria-label]=\"ariaLabel || label || null\" />\n    <span class=\"cps-checkbox-indicator\" aria-hidden=\"true\"></span>\n    @if (icon) {\n      <cps-icon\n        class=\"cps-checkbox-icon\"\n        [icon]=\"icon\"\n        size=\"small\"\n        [color]=\"disabled ? 'text-mild' : iconColor\"\n        aria-hidden=\"true\">\n      </cps-icon>\n    }\n    @if (label) {\n      <span class=\"cps-checkbox-label\">\n        {{ label }}\n      </span>\n    }\n  </label>\n  @if (infoTooltip) {\n    <cps-info-circle\n      class=\"cps-checkbox-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  }\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .cps-checkbox-container{line-height:normal;display:flex;align-items:center}:host .cps-checkbox-container .cps-checkbox{display:flex;align-items:center;font-size:1rem;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400;color:var(--cps-color-text-dark);cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-checkbox-container .cps-checkbox-disabled{cursor:default;color:var(--cps-color-text-mild)}:host .cps-checkbox-container .cps-checkbox-input{position:absolute;opacity:0;width:1.125rem;height:1.125rem;margin:0}:host .cps-checkbox-container .cps-checkbox-indicator{position:relative;display:inline-block;width:1.125rem;height:1.125rem;border:.125rem solid var(--cps-color-text-medium);border-radius:.125rem}:host .cps-checkbox-container .cps-checkbox-label,:host .cps-checkbox-container .cps-checkbox-icon{margin-left:.625rem}:host .cps-checkbox-container .cps-checkbox-input:checked~.cps-checkbox-indicator{color:#fff;background:var(--cps-color-calm) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgdmlld0JveD0iMCAwIDEyIDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TCAuMDU3IDUuNjRsLjgyOS0xLjIyN0w0LjQ3IDcuMjY4IDEwLjkyMS4wODZsLjkyMyAxLjEwMy02Ljg2MyA3LjY0Yy0uMTM0LS4wMDMtLjQwNi4xNDgtLjQwNi4xNDh6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+) 50% 40% no-repeat;background-size:.75rem auto;border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-input:disabled~.cps-checkbox-indicator{border-color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox-input:checked:disabled~.cps-checkbox-indicator{background:var(--cps-color-text-light) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgdmlld0JveD0iMCAwIDEyIDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TCAuMDU3IDUuNjRsLjgyOS0xLjIyN0w0LjQ3IDcuMjY4IDEwLjkyMS4wODZsLjkyMyAxLjEwMy02Ljg2MyA3LjY0Yy0uMTM0LS4wMDMtLjQwNi4xNDgtLjQwNi4xNDh6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+) 50% 40% no-repeat;background-size:.75rem auto}:host .cps-checkbox-container .cps-checkbox:not(.cps-checkbox-disabled):hover .cps-checkbox-indicator{border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator{border-color:var(--cps-color-calm);outline:none;position:relative}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:before,:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:before{inset:-.325rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:after{inset:-.45rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator.suppress-focus-visible:before,:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator.suppress-focus-visible:after{display:none}:host .cps-checkbox-container .cps-checkbox-info-circle{margin-left:.5rem}:host .cps-checkbox-container .cps-checkbox-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsCheckboxComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsCheckboxComponent, isStandalone: true, selector: "cps-checkbox", inputs: { label: "label", ariaLabel: "ariaLabel", disabled: "disabled", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", icon: "icon", iconColor: "iconColor", value: "value" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "checkboxInput", first: true, predicate: ["checkboxInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-checkbox-container\">\n  <label class=\"cps-checkbox\" [class.cps-checkbox-disabled]=\"disabled\">\n    <input\n      #checkboxInput\n      type=\"checkbox\"\n      class=\"cps-checkbox-input\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      (change)=\"updateValueEvent($event)\"\n      [attr.aria-label]=\"ariaLabel || label || null\" />\n    <span class=\"cps-checkbox-indicator\" aria-hidden=\"true\"></span>\n    @if (icon) {\n      <cps-icon\n        class=\"cps-checkbox-icon\"\n        [icon]=\"icon\"\n        size=\"small\"\n        [color]=\"disabled ? 'text-mild' : iconColor\"\n        aria-hidden=\"true\">\n      </cps-icon>\n    }\n    @if (label) {\n      <span class=\"cps-checkbox-label\">\n        {{ label }}\n      </span>\n    }\n  </label>\n  @if (infoTooltip) {\n    <cps-info-circle\n      class=\"cps-checkbox-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  }\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .cps-checkbox-container{line-height:normal;display:flex;align-items:center}:host .cps-checkbox-container .cps-checkbox{display:flex;align-items:center;font-size:1rem;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400;color:var(--cps-color-text-dark);cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-checkbox-container .cps-checkbox-disabled{cursor:default;color:var(--cps-color-text-mild)}:host .cps-checkbox-container .cps-checkbox-input{position:absolute;opacity:0;width:1.125rem;height:1.125rem;margin:0}:host .cps-checkbox-container .cps-checkbox-indicator{position:relative;display:inline-block;width:1.125rem;height:1.125rem;border:.125rem solid var(--cps-color-text-medium);border-radius:.125rem}:host .cps-checkbox-container .cps-checkbox-label,:host .cps-checkbox-container .cps-checkbox-icon{margin-left:.625rem}:host .cps-checkbox-container .cps-checkbox-input:checked~.cps-checkbox-indicator{color:#fff;background:var(--cps-color-calm) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgdmlld0JveD0iMCAwIDEyIDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TCAuMDU3IDUuNjRsLjgyOS0xLjIyN0w0LjQ3IDcuMjY4IDEwLjkyMS4wODZsLjkyMyAxLjEwMy02Ljg2MyA3LjY0Yy0uMTM0LS4wMDMtLjQwNi4xNDgtLjQwNi4xNDh6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+) 50% 40% no-repeat;background-size:.75rem auto;border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-input:disabled~.cps-checkbox-indicator{border-color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox-input:checked:disabled~.cps-checkbox-indicator{background:var(--cps-color-text-light) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgdmlld0JveD0iMCAwIDEyIDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TCAuMDU3IDUuNjRsLjgyOS0xLjIyN0w0LjQ3IDcuMjY4IDEwLjkyMS4wODZsLjkyMyAxLjEwMy02Ljg2MyA3LjY0Yy0uMTM0LS4wMDMtLjQwNi4xNDgtLjQwNi4xNDh6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+) 50% 40% no-repeat;background-size:.75rem auto}:host .cps-checkbox-container .cps-checkbox:not(.cps-checkbox-disabled):hover .cps-checkbox-indicator{border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator{border-color:var(--cps-color-calm);outline:none;position:relative}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:before,:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:before{inset:-.325rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:after{inset:-.45rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator.suppress-focus-visible:before,:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator.suppress-focus-visible:after{display:none}:host .cps-checkbox-container .cps-checkbox-info-circle{margin-left:.5rem}:host .cps-checkbox-container .cps-checkbox-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule, CpsInfoCircleComponent, CpsIconComponent], selector: 'cps-checkbox', template: "<div class=\"cps-checkbox-container\">\n  <label class=\"cps-checkbox\" [class.cps-checkbox-disabled]=\"disabled\">\n    <input\n      type=\"checkbox\"\n      class=\"cps-checkbox-input\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      (change)=\"updateValueEvent($event)\"\n      [attr.aria-label]=\"ariaLabel || label || null\" />\n    <span class=\"cps-checkbox-indicator\" aria-hidden=\"true\"></span>\n    @if (icon) {\n      <cps-icon\n        class=\"cps-checkbox-icon\"\n        [icon]=\"icon\"\n        size=\"small\"\n        [color]=\"disabled ? 'text-mild' : iconColor\"\n        aria-hidden=\"true\">\n      </cps-icon>\n    }\n    @if (label) {\n      <span class=\"cps-checkbox-label\">\n        {{ label }}\n      </span>\n    }\n  </label>\n  @if (infoTooltip) {\n    <cps-info-circle\n      class=\"cps-checkbox-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  }\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .cps-checkbox-container{line-height:normal;display:flex;align-items:center}:host .cps-checkbox-container .cps-checkbox{display:flex;align-items:center;font-size:1rem;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400;color:var(--cps-color-text-dark);cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-checkbox-container .cps-checkbox-disabled{cursor:default;color:var(--cps-color-text-mild)}:host .cps-checkbox-container .cps-checkbox-input{position:absolute;opacity:0;width:1.125rem;height:1.125rem;margin:0}:host .cps-checkbox-container .cps-checkbox-indicator{position:relative;display:inline-block;width:1.125rem;height:1.125rem;border:.125rem solid var(--cps-color-text-medium);border-radius:.125rem}:host .cps-checkbox-container .cps-checkbox-label,:host .cps-checkbox-container .cps-checkbox-icon{margin-left:.625rem}:host .cps-checkbox-container .cps-checkbox-input:checked~.cps-checkbox-indicator{color:#fff;background:var(--cps-color-calm) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgdmlld0JveD0iMCAwIDEyIDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TCAuMDU3IDUuNjRsLjgyOS0xLjIyN0w0LjQ3IDcuMjY4IDEwLjkyMS4wODZsLjkyMyAxLjEwMy02Ljg2MyA3LjY0Yy0uMTM0LS4wMDMtLjQwNi4xNDgtLjQwNi4xNDh6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+) 50% 40% no-repeat;background-size:.75rem auto;border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-input:disabled~.cps-checkbox-indicator{border-color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox-input:checked:disabled~.cps-checkbox-indicator{background:var(--cps-color-text-light) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgdmlld0JveD0iMCAwIDEyIDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TCAuMDU3IDUuNjRsLjgyOS0xLjIyN0w0LjQ3IDcuMjY4IDEwLjkyMS4wODZsLjkyMyAxLjEwMy02Ljg2MyA3LjY0Yy0uMTM0LS4wMDMtLjQwNi4xNDgtLjQwNi4xNDh6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+) 50% 40% no-repeat;background-size:.75rem auto}:host .cps-checkbox-container .cps-checkbox:not(.cps-checkbox-disabled):hover .cps-checkbox-indicator{border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator{border-color:var(--cps-color-calm);outline:none;position:relative}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:before,:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:before{inset:-.325rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:after{inset:-.45rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator.suppress-focus-visible:before,:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator.suppress-focus-visible:after{display:none}:host .cps-checkbox-container .cps-checkbox-info-circle{margin-left:.5rem}:host .cps-checkbox-container .cps-checkbox-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}\n"] }]
+            args: [{ imports: [CommonModule, CpsInfoCircleComponent, CpsIconComponent], selector: 'cps-checkbox', template: "<div class=\"cps-checkbox-container\">\n  <label class=\"cps-checkbox\" [class.cps-checkbox-disabled]=\"disabled\">\n    <input\n      #checkboxInput\n      type=\"checkbox\"\n      class=\"cps-checkbox-input\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      (change)=\"updateValueEvent($event)\"\n      [attr.aria-label]=\"ariaLabel || label || null\" />\n    <span class=\"cps-checkbox-indicator\" aria-hidden=\"true\"></span>\n    @if (icon) {\n      <cps-icon\n        class=\"cps-checkbox-icon\"\n        [icon]=\"icon\"\n        size=\"small\"\n        [color]=\"disabled ? 'text-mild' : iconColor\"\n        aria-hidden=\"true\">\n      </cps-icon>\n    }\n    @if (label) {\n      <span class=\"cps-checkbox-label\">\n        {{ label }}\n      </span>\n    }\n  </label>\n  @if (infoTooltip) {\n    <cps-info-circle\n      class=\"cps-checkbox-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  }\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .cps-checkbox-container{line-height:normal;display:flex;align-items:center}:host .cps-checkbox-container .cps-checkbox{display:flex;align-items:center;font-size:1rem;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400;color:var(--cps-color-text-dark);cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-checkbox-container .cps-checkbox-disabled{cursor:default;color:var(--cps-color-text-mild)}:host .cps-checkbox-container .cps-checkbox-input{position:absolute;opacity:0;width:1.125rem;height:1.125rem;margin:0}:host .cps-checkbox-container .cps-checkbox-indicator{position:relative;display:inline-block;width:1.125rem;height:1.125rem;border:.125rem solid var(--cps-color-text-medium);border-radius:.125rem}:host .cps-checkbox-container .cps-checkbox-label,:host .cps-checkbox-container .cps-checkbox-icon{margin-left:.625rem}:host .cps-checkbox-container .cps-checkbox-input:checked~.cps-checkbox-indicator{color:#fff;background:var(--cps-color-calm) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgdmlld0JveD0iMCAwIDEyIDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TCAuMDU3IDUuNjRsLjgyOS0xLjIyN0w0LjQ3IDcuMjY4IDEwLjkyMS4wODZsLjkyMyAxLjEwMy02Ljg2MyA3LjY0Yy0uMTM0LS4wMDMtLjQwNi4xNDgtLjQwNi4xNDh6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+) 50% 40% no-repeat;background-size:.75rem auto;border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-input:disabled~.cps-checkbox-indicator{border-color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox-input:checked:disabled~.cps-checkbox-indicator{background:var(--cps-color-text-light) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgdmlld0JveD0iMCAwIDEyIDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TCAuMDU3IDUuNjRsLjgyOS0xLjIyN0w0LjQ3IDcuMjY4IDEwLjkyMS4wODZsLjkyMyAxLjEwMy02Ljg2MyA3LjY0Yy0uMTM0LS4wMDMtLjQwNi4xNDgtLjQwNi4xNDh6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+) 50% 40% no-repeat;background-size:.75rem auto}:host .cps-checkbox-container .cps-checkbox:not(.cps-checkbox-disabled):hover .cps-checkbox-indicator{border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator{border-color:var(--cps-color-calm);outline:none;position:relative}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:before,:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:before{inset:-.325rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:after{inset:-.45rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator.suppress-focus-visible:before,:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator.suppress-focus-visible:after{display:none}:host .cps-checkbox-container .cps-checkbox-info-circle{margin-left:.5rem}:host .cps-checkbox-container .cps-checkbox-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -3701,7 +3712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 }] }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.ElementRef }], propDecorators: { label: [{
+                }] }], propDecorators: { label: [{
                 type: Input
             }], ariaLabel: [{
                 type: Input
@@ -3725,6 +3736,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 type: Input
             }], valueChanged: [{
                 type: Output
+            }], checkboxInput: [{
+                type: ViewChild,
+                args: ['checkboxInput']
             }] } });
 
 /**
@@ -3768,6 +3782,26 @@ class CpsInputComponent {
          * @group Props
          */
         this.ariaLabel = '';
+        /**
+         * WAI-ARIA role for the native input element.
+         * @group Props
+         */
+        this.inputRole = null;
+        /**
+         * Whether the element controlled by this input is expanded.
+         * @group Props
+         */
+        this.ariaExpanded = null;
+        /**
+         * Type of popup element the input controls.
+         * @group Props
+         */
+        this.ariaHasPopup = null;
+        /**
+         * ID of the element controlled by this input.
+         * @group Props
+         */
+        this.ariaControls = null;
         /**
          * Bottom hint text for the input field.
          * @group Props
@@ -4070,7 +4104,7 @@ class CpsInputComponent {
         this.elementRef?.nativeElement?.querySelector('input')?.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsInputComponent, isStandalone: true, selector: "cps-input", inputs: { label: "label", ariaLabel: "ariaLabel", hint: "hint", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", autocomplete: "autocomplete", spellcheck: "spellcheck", width: "width", type: "type", loading: "loading", clearable: "clearable", prefixIcon: "prefixIcon", prefixIconClickable: "prefixIconClickable", prefixIconSize: "prefixIconSize", prefixIconAriaLabel: "prefixIconAriaLabel", prefixText: "prefixText", hideDetails: "hideDetails", persistentClear: "persistentClear", error: "error", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", valueToDisplay: "valueToDisplay", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred", cleared: "cleared", enterClicked: "enterClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-input-container\" [style.width]=\"cvtWidth\">\n  @if (label) {\n    <div\n      class=\"cps-input-label\"\n      [class.cps-input-label-disabled]=\"disabled && !readonly\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-input-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n\n  <div\n    class=\"cps-input-wrap\"\n    [class.password]=\"type === 'password'\"\n    [class.cps-input-wrap-error]=\"error\"\n    [class.clearable]=\"clearable\"\n    [class.persistent-clear]=\"persistentClear\"\n    [class.borderless]=\"appearance === 'borderless'\"\n    [class.underlined]=\"appearance === 'underlined'\"\n    [class.keyboard-focused]=\"isKeyboardFocused\">\n    @if (prefixIcon || prefixText) {\n      <div class=\"cps-input-prefix\">\n        @if (prefixIcon) {\n          <span\n            class=\"cps-input-prefix-icon\"\n            [attr.role]=\"prefixIconClickable ? 'button' : null\"\n            [attr.tabindex]=\"\n              prefixIconClickable && !disabled && !readonly ? 0 : null\n            \"\n            [attr.aria-label]=\"\n              prefixIconClickable ? prefixIconAriaLabel || null : null\n            \"\n            (click)=\"onClickPrefixIcon()\"\n            (keydown.enter)=\"onClickPrefixIcon()\"\n            (keydown.space)=\"$event.preventDefault(); onClickPrefixIcon()\">\n            <cps-icon\n              [icon]=\"prefixIcon\"\n              [size]=\"prefixIconSize\"\n              [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n              [style.cursor]=\"\n                prefixIconClickable && !disabled && !readonly\n                  ? 'pointer'\n                  : 'default'\n              \">\n            </cps-icon>\n          </span>\n        }\n\n        @if (prefixText) {\n          <span class=\"cps-input-prefix-text\">\n            {{ prefixText }}\n          </span>\n        }\n      </div>\n    }\n\n    @if (!valueToDisplay) {\n      <input\n        [attr.aria-label]=\"ariaLabel || label || null\"\n        [attr.aria-describedby]=\"describedBy\"\n        [attr.aria-invalid]=\"error ? 'true' : null\"\n        [attr.aria-required]=\"isRequired || null\"\n        [attr.aria-busy]=\"loading ? true : null\"\n        [attr.autocomplete]=\"autocomplete\"\n        [attr.spellcheck]=\"spellcheck\"\n        [type]=\"currentType\"\n        [value]=\"value\"\n        (input)=\"updateValueEvent($event)\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        (keydown.enter)=\"onInputEnterKeyDown()\"\n        [style.width]=\"cvtWidth\"\n        (mousedown)=\"onInputMousedown()\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\" />\n    }\n\n    @if (valueToDisplay) {\n      <input\n        [attr.aria-label]=\"ariaLabel || label || null\"\n        [attr.aria-describedby]=\"describedBy\"\n        [attr.aria-busy]=\"loading ? true : null\"\n        [value]=\"valueToDisplay\"\n        [disabled]=\"true\"\n        [readonly]=\"true\"\n        [style.width]=\"cvtWidth\" />\n    }\n\n    @if (!disabled && !readonly) {\n      <div class=\"cps-input-action-btns\">\n        @if (clearable) {\n          <span\n            class=\"clear-btn\"\n            role=\"button\"\n            tabindex=\"0\"\n            aria-label=\"Clear\"\n            [style.visibility]=\"\n              persistentClear || (!persistentClear && value)\n                ? 'visible'\n                : 'hidden'\n            \"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onClear()\"\n            (keydown.enter)=\"onClear()\"\n            (keydown.space)=\"$event.preventDefault(); onClear()\">\n            <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n          </span>\n        }\n        @if (type === 'password') {\n          <span\n            class=\"password-show-btn\"\n            [class.password-show-btn-active]=\"currentType === 'text'\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"\n              currentType === 'password' ? 'Show password' : 'Hide password'\n            \"\n            [attr.aria-pressed]=\"currentType !== 'password'\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"togglePassword()\"\n            (keydown.enter)=\"togglePassword()\"\n            (keydown.space)=\"$event.preventDefault(); togglePassword()\">\n            <cps-icon icon=\"eye\" size=\"1.125rem\"></cps-icon>\n          </span>\n        }\n      </div>\n    }\n    @if (loading) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.5\"\n        class=\"cps-input-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-input-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-input-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:inherit}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden;display:flex;align-items:stretch;min-height:2.375rem;border:.0625rem solid var(--cps-color-line-light);border-radius:.25rem;background:var(--cps-input-background);transition-duration:.2s}:host .cps-input-container .cps-input-wrap:hover:has(input:enabled:not(:read-only)){border-color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:focus-within:not(:has(input:read-only)),:host .cps-input-container .cps-input-wrap.keyboard-focused:has(input:read-only){border-color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap.keyboard-focused{outline:none;position:relative}:host .cps-input-container .cps-input-wrap.keyboard-focused:before,:host .cps-input-container .cps-input-wrap.keyboard-focused:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-input-container .cps-input-wrap.keyboard-focused:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap.keyboard-focused:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap.keyboard-focused.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap.keyboard-focused:before,:host .cps-input-container .cps-input-wrap.keyboard-focused:after{pointer-events:none}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless{outline:none;position:relative}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:after,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:after,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined.suppress-focus-visible:after,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap:has(input:disabled:not([readonly])){background-color:var(--cps-color-bg-disabled)}:host .cps-input-container .cps-input-wrap-error{border-color:var(--cps-state-error)!important}:host .cps-input-container .cps-input-wrap-error:not(:focus-within){background:var(--cps-error-background)!important}:host .cps-input-container .cps-input-wrap-error .cps-input-prefix-icon{color:var(--cps-state-error)!important}:host .cps-input-container .cps-input-wrap input{font-family:inherit;font-size:1rem;color:var(--cps-color-text-dark);background:transparent;padding:.375rem .75rem;line-height:1.5;border:none;appearance:none;border-radius:0;flex:1;min-width:0}:host .cps-input-container .cps-input-wrap input:focus{outline:0}:host .cps-input-container .cps-input-wrap input:read-only{cursor:default}:host .cps-input-container .cps-input-wrap input:disabled{opacity:1}:host .cps-input-container .cps-input-wrap input:disabled:not([readonly]){color:var(--cps-color-text-mild);background-color:transparent;pointer-events:none}:host .cps-input-container .cps-input-wrap:has(.cps-input-prefix) input{padding-left:0}:host .cps-input-container .cps-input-wrap:has(input:focus:not(:read-only)) .cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap:has(input:hover:not(:read-only)) .cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap:has(input:disabled) .cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus~.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap input:focus~.cps-input-action-btns>.clear-btn:hover cps-icon{opacity:1}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;position:absolute;top:0;bottom:0;right:.5rem;align-items:center}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{display:flex;cursor:pointer;color:var(--cps-state-error);padding:.25rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:hover cps-icon{opacity:1}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus{outline:none}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible{outline:none;position:relative}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible cps-icon{opacity:1}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-top:.125rem;margin-left:.0625rem;cursor:pointer;color:var(--cps-color-text-mild);display:flex;padding:.1875rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:hover cps-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus{outline:none}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible{outline:none;position:relative}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap:has(input:not(:read-only)) .cps-input-prefix:hover>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{display:flex;flex-shrink:0;padding-left:.5rem}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{display:flex;align-self:center;padding:.1875rem;margin-left:.0625rem;margin-right:.3125rem;transition-duration:.2s;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus{outline:none;color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible{outline:none;position:relative}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{display:flex;flex-direction:column;justify-content:center;color:var(--cps-color-text-mild);cursor:default;line-height:1.2;padding-left:.25rem;padding-right:.5rem}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:0;display:block}:host .cps-input-container .cps-input-wrap.borderless,:host .cps-input-container .cps-input-wrap.underlined{border:none!important;border-radius:0}:host .cps-input-container .cps-input-wrap.borderless input,:host .cps-input-container .cps-input-wrap.underlined input{line-height:1}:host .cps-input-container .cps-input-wrap.underlined{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.75rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.5rem}:host .cps-input-container .cps-input-hint{color:var(--cps-color-text-mild);font-family:inherit;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error{color:var(--cps-state-error);font-family:inherit;font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-input-container .cps-input-label .cps-input-label-info-circle{margin-left:.5rem}:host .cps-input-container .cps-input-label-disabled{color:var(--cps-color-text-mild)}:host .cps-input-container ::placeholder{-webkit-user-select:none;user-select:none;font-family:inherit;color:var(--cps-color-text-mild);font-style:italic;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsInputComponent, isStandalone: true, selector: "cps-input", inputs: { label: "label", ariaLabel: "ariaLabel", inputRole: "inputRole", ariaExpanded: "ariaExpanded", ariaHasPopup: "ariaHasPopup", ariaControls: "ariaControls", hint: "hint", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", autocomplete: "autocomplete", spellcheck: "spellcheck", width: "width", type: "type", loading: "loading", clearable: "clearable", prefixIcon: "prefixIcon", prefixIconClickable: "prefixIconClickable", prefixIconSize: "prefixIconSize", prefixIconAriaLabel: "prefixIconAriaLabel", prefixText: "prefixText", hideDetails: "hideDetails", persistentClear: "persistentClear", error: "error", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", valueToDisplay: "valueToDisplay", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred", cleared: "cleared", enterClicked: "enterClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-input-container\" [style.width]=\"cvtWidth\">\n  @if (label) {\n    <div\n      class=\"cps-input-label\"\n      [class.cps-input-label-disabled]=\"disabled && !readonly\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-input-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n\n  <div\n    class=\"cps-input-wrap\"\n    [class.password]=\"type === 'password'\"\n    [class.cps-input-wrap-error]=\"error\"\n    [class.clearable]=\"clearable\"\n    [class.persistent-clear]=\"persistentClear\"\n    [class.borderless]=\"appearance === 'borderless'\"\n    [class.underlined]=\"appearance === 'underlined'\"\n    [class.keyboard-focused]=\"isKeyboardFocused\">\n    @if (prefixIcon || prefixText) {\n      <div class=\"cps-input-prefix\">\n        @if (prefixIcon) {\n          <span\n            class=\"cps-input-prefix-icon\"\n            [attr.role]=\"prefixIconClickable ? 'button' : null\"\n            [attr.tabindex]=\"\n              prefixIconClickable && !disabled && !readonly ? 0 : null\n            \"\n            [attr.aria-label]=\"\n              prefixIconClickable ? prefixIconAriaLabel || null : null\n            \"\n            (click)=\"onClickPrefixIcon()\"\n            (keydown.enter)=\"onClickPrefixIcon()\"\n            (keydown.space)=\"$event.preventDefault(); onClickPrefixIcon()\">\n            <cps-icon\n              [icon]=\"prefixIcon\"\n              [size]=\"prefixIconSize\"\n              [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n              [style.cursor]=\"\n                prefixIconClickable && !disabled && !readonly\n                  ? 'pointer'\n                  : 'default'\n              \">\n            </cps-icon>\n          </span>\n        }\n\n        @if (prefixText) {\n          <span class=\"cps-input-prefix-text\">\n            {{ prefixText }}\n          </span>\n        }\n      </div>\n    }\n\n    @if (!valueToDisplay) {\n      <input\n        [attr.role]=\"inputRole\"\n        [attr.aria-label]=\"ariaLabel || label || null\"\n        [attr.aria-expanded]=\"ariaExpanded\"\n        [attr.aria-haspopup]=\"ariaHasPopup\"\n        [attr.aria-controls]=\"ariaControls\"\n        [attr.aria-describedby]=\"describedBy\"\n        [attr.aria-invalid]=\"error ? 'true' : null\"\n        [attr.aria-required]=\"isRequired || null\"\n        [attr.aria-busy]=\"loading ? true : null\"\n        [attr.autocomplete]=\"autocomplete\"\n        [attr.spellcheck]=\"spellcheck\"\n        [type]=\"currentType\"\n        [value]=\"value\"\n        (input)=\"updateValueEvent($event)\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        (keydown.enter)=\"onInputEnterKeyDown()\"\n        [style.width]=\"cvtWidth\"\n        (mousedown)=\"onInputMousedown()\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\" />\n    }\n\n    @if (valueToDisplay) {\n      <input\n        [attr.aria-label]=\"ariaLabel || label || null\"\n        [attr.aria-describedby]=\"describedBy\"\n        [attr.aria-busy]=\"loading ? true : null\"\n        [value]=\"valueToDisplay\"\n        [disabled]=\"true\"\n        [readonly]=\"true\"\n        [style.width]=\"cvtWidth\" />\n    }\n\n    @if (!disabled && !readonly) {\n      <div class=\"cps-input-action-btns\">\n        @if (clearable) {\n          <span\n            class=\"clear-btn\"\n            role=\"button\"\n            tabindex=\"0\"\n            aria-label=\"Clear\"\n            [style.visibility]=\"\n              persistentClear || (!persistentClear && value)\n                ? 'visible'\n                : 'hidden'\n            \"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onClear()\"\n            (keydown.enter)=\"onClear()\"\n            (keydown.space)=\"$event.preventDefault(); onClear()\">\n            <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n          </span>\n        }\n        @if (type === 'password') {\n          <span\n            class=\"password-show-btn\"\n            [class.password-show-btn-active]=\"currentType === 'text'\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"\n              currentType === 'password' ? 'Show password' : 'Hide password'\n            \"\n            [attr.aria-pressed]=\"currentType !== 'password'\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"togglePassword()\"\n            (keydown.enter)=\"togglePassword()\"\n            (keydown.space)=\"$event.preventDefault(); togglePassword()\">\n            <cps-icon icon=\"eye\" size=\"1.125rem\"></cps-icon>\n          </span>\n        }\n      </div>\n    }\n    @if (loading) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.5\"\n        class=\"cps-input-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-input-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-input-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:inherit}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden;display:flex;align-items:stretch;min-height:2.375rem;border:.0625rem solid var(--cps-color-line-light);border-radius:.25rem;background:var(--cps-input-background);transition-duration:.2s}:host .cps-input-container .cps-input-wrap:hover:has(input:enabled:not(:read-only)){border-color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:focus-within:not(:has(input:read-only)),:host .cps-input-container .cps-input-wrap.keyboard-focused:has(input:read-only){border-color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap.keyboard-focused{outline:none;position:relative}:host .cps-input-container .cps-input-wrap.keyboard-focused:before,:host .cps-input-container .cps-input-wrap.keyboard-focused:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-input-container .cps-input-wrap.keyboard-focused:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap.keyboard-focused:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap.keyboard-focused.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap.keyboard-focused:before,:host .cps-input-container .cps-input-wrap.keyboard-focused:after{pointer-events:none}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless{outline:none;position:relative}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:after,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:after,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined.suppress-focus-visible:after,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap:has(input:disabled:not([readonly])){background-color:var(--cps-color-bg-disabled)}:host .cps-input-container .cps-input-wrap-error{border-color:var(--cps-state-error)!important}:host .cps-input-container .cps-input-wrap-error:not(:focus-within){background:var(--cps-error-background)!important}:host .cps-input-container .cps-input-wrap-error .cps-input-prefix-icon{color:var(--cps-state-error)!important}:host .cps-input-container .cps-input-wrap input{font-family:inherit;font-size:1rem;color:var(--cps-color-text-dark);background:transparent;padding:.375rem .75rem;line-height:1.5;border:none;appearance:none;border-radius:0;flex:1;min-width:0}:host .cps-input-container .cps-input-wrap input:focus{outline:0}:host .cps-input-container .cps-input-wrap input:read-only{cursor:default}:host .cps-input-container .cps-input-wrap input:disabled{opacity:1}:host .cps-input-container .cps-input-wrap input:disabled:not([readonly]){color:var(--cps-color-text-mild);background-color:transparent;pointer-events:none}:host .cps-input-container .cps-input-wrap:has(.cps-input-prefix) input{padding-left:0}:host .cps-input-container .cps-input-wrap:has(input:focus:not(:read-only)) .cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap:has(input:hover:not(:read-only)) .cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap:has(input:disabled) .cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus~.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap input:focus~.cps-input-action-btns>.clear-btn:hover cps-icon{opacity:1}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;position:absolute;top:0;bottom:0;right:.5rem;align-items:center}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{display:flex;cursor:pointer;color:var(--cps-state-error);padding:.25rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:hover cps-icon{opacity:1}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus{outline:none}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible{outline:none;position:relative}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible cps-icon{opacity:1}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-top:.125rem;margin-left:.0625rem;cursor:pointer;color:var(--cps-color-text-mild);display:flex;padding:.1875rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:hover cps-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus{outline:none}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible{outline:none;position:relative}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap:has(input:not(:read-only)) .cps-input-prefix:hover>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{display:flex;flex-shrink:0;padding-left:.5rem}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{display:flex;align-self:center;padding:.1875rem;margin-left:.0625rem;margin-right:.3125rem;transition-duration:.2s;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus{outline:none;color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible{outline:none;position:relative}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{display:flex;flex-direction:column;justify-content:center;color:var(--cps-color-text-mild);cursor:default;line-height:1.2;padding-left:.25rem;padding-right:.5rem}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:0;display:block}:host .cps-input-container .cps-input-wrap.borderless,:host .cps-input-container .cps-input-wrap.underlined{border:none!important;border-radius:0}:host .cps-input-container .cps-input-wrap.borderless input,:host .cps-input-container .cps-input-wrap.underlined input{line-height:1}:host .cps-input-container .cps-input-wrap.underlined{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.75rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.5rem}:host .cps-input-container .cps-input-hint{color:var(--cps-color-text-mild);font-family:inherit;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error{color:var(--cps-state-error);font-family:inherit;font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-input-container .cps-input-label .cps-input-label-info-circle{margin-left:.5rem}:host .cps-input-container .cps-input-label-disabled{color:var(--cps-color-text-mild)}:host .cps-input-container ::placeholder{-webkit-user-select:none;user-select:none;font-family:inherit;color:var(--cps-color-text-mild);font-style:italic;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsInputComponent, decorators: [{
             type: Component,
@@ -4079,7 +4113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         CpsIconComponent,
                         CpsInfoCircleComponent,
                         CpsProgressLinearComponent
-                    ], selector: 'cps-input', template: "<div class=\"cps-input-container\" [style.width]=\"cvtWidth\">\n  @if (label) {\n    <div\n      class=\"cps-input-label\"\n      [class.cps-input-label-disabled]=\"disabled && !readonly\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-input-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n\n  <div\n    class=\"cps-input-wrap\"\n    [class.password]=\"type === 'password'\"\n    [class.cps-input-wrap-error]=\"error\"\n    [class.clearable]=\"clearable\"\n    [class.persistent-clear]=\"persistentClear\"\n    [class.borderless]=\"appearance === 'borderless'\"\n    [class.underlined]=\"appearance === 'underlined'\"\n    [class.keyboard-focused]=\"isKeyboardFocused\">\n    @if (prefixIcon || prefixText) {\n      <div class=\"cps-input-prefix\">\n        @if (prefixIcon) {\n          <span\n            class=\"cps-input-prefix-icon\"\n            [attr.role]=\"prefixIconClickable ? 'button' : null\"\n            [attr.tabindex]=\"\n              prefixIconClickable && !disabled && !readonly ? 0 : null\n            \"\n            [attr.aria-label]=\"\n              prefixIconClickable ? prefixIconAriaLabel || null : null\n            \"\n            (click)=\"onClickPrefixIcon()\"\n            (keydown.enter)=\"onClickPrefixIcon()\"\n            (keydown.space)=\"$event.preventDefault(); onClickPrefixIcon()\">\n            <cps-icon\n              [icon]=\"prefixIcon\"\n              [size]=\"prefixIconSize\"\n              [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n              [style.cursor]=\"\n                prefixIconClickable && !disabled && !readonly\n                  ? 'pointer'\n                  : 'default'\n              \">\n            </cps-icon>\n          </span>\n        }\n\n        @if (prefixText) {\n          <span class=\"cps-input-prefix-text\">\n            {{ prefixText }}\n          </span>\n        }\n      </div>\n    }\n\n    @if (!valueToDisplay) {\n      <input\n        [attr.aria-label]=\"ariaLabel || label || null\"\n        [attr.aria-describedby]=\"describedBy\"\n        [attr.aria-invalid]=\"error ? 'true' : null\"\n        [attr.aria-required]=\"isRequired || null\"\n        [attr.aria-busy]=\"loading ? true : null\"\n        [attr.autocomplete]=\"autocomplete\"\n        [attr.spellcheck]=\"spellcheck\"\n        [type]=\"currentType\"\n        [value]=\"value\"\n        (input)=\"updateValueEvent($event)\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        (keydown.enter)=\"onInputEnterKeyDown()\"\n        [style.width]=\"cvtWidth\"\n        (mousedown)=\"onInputMousedown()\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\" />\n    }\n\n    @if (valueToDisplay) {\n      <input\n        [attr.aria-label]=\"ariaLabel || label || null\"\n        [attr.aria-describedby]=\"describedBy\"\n        [attr.aria-busy]=\"loading ? true : null\"\n        [value]=\"valueToDisplay\"\n        [disabled]=\"true\"\n        [readonly]=\"true\"\n        [style.width]=\"cvtWidth\" />\n    }\n\n    @if (!disabled && !readonly) {\n      <div class=\"cps-input-action-btns\">\n        @if (clearable) {\n          <span\n            class=\"clear-btn\"\n            role=\"button\"\n            tabindex=\"0\"\n            aria-label=\"Clear\"\n            [style.visibility]=\"\n              persistentClear || (!persistentClear && value)\n                ? 'visible'\n                : 'hidden'\n            \"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onClear()\"\n            (keydown.enter)=\"onClear()\"\n            (keydown.space)=\"$event.preventDefault(); onClear()\">\n            <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n          </span>\n        }\n        @if (type === 'password') {\n          <span\n            class=\"password-show-btn\"\n            [class.password-show-btn-active]=\"currentType === 'text'\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"\n              currentType === 'password' ? 'Show password' : 'Hide password'\n            \"\n            [attr.aria-pressed]=\"currentType !== 'password'\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"togglePassword()\"\n            (keydown.enter)=\"togglePassword()\"\n            (keydown.space)=\"$event.preventDefault(); togglePassword()\">\n            <cps-icon icon=\"eye\" size=\"1.125rem\"></cps-icon>\n          </span>\n        }\n      </div>\n    }\n    @if (loading) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.5\"\n        class=\"cps-input-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-input-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-input-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:inherit}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden;display:flex;align-items:stretch;min-height:2.375rem;border:.0625rem solid var(--cps-color-line-light);border-radius:.25rem;background:var(--cps-input-background);transition-duration:.2s}:host .cps-input-container .cps-input-wrap:hover:has(input:enabled:not(:read-only)){border-color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:focus-within:not(:has(input:read-only)),:host .cps-input-container .cps-input-wrap.keyboard-focused:has(input:read-only){border-color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap.keyboard-focused{outline:none;position:relative}:host .cps-input-container .cps-input-wrap.keyboard-focused:before,:host .cps-input-container .cps-input-wrap.keyboard-focused:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-input-container .cps-input-wrap.keyboard-focused:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap.keyboard-focused:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap.keyboard-focused.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap.keyboard-focused:before,:host .cps-input-container .cps-input-wrap.keyboard-focused:after{pointer-events:none}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless{outline:none;position:relative}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:after,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:after,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined.suppress-focus-visible:after,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap:has(input:disabled:not([readonly])){background-color:var(--cps-color-bg-disabled)}:host .cps-input-container .cps-input-wrap-error{border-color:var(--cps-state-error)!important}:host .cps-input-container .cps-input-wrap-error:not(:focus-within){background:var(--cps-error-background)!important}:host .cps-input-container .cps-input-wrap-error .cps-input-prefix-icon{color:var(--cps-state-error)!important}:host .cps-input-container .cps-input-wrap input{font-family:inherit;font-size:1rem;color:var(--cps-color-text-dark);background:transparent;padding:.375rem .75rem;line-height:1.5;border:none;appearance:none;border-radius:0;flex:1;min-width:0}:host .cps-input-container .cps-input-wrap input:focus{outline:0}:host .cps-input-container .cps-input-wrap input:read-only{cursor:default}:host .cps-input-container .cps-input-wrap input:disabled{opacity:1}:host .cps-input-container .cps-input-wrap input:disabled:not([readonly]){color:var(--cps-color-text-mild);background-color:transparent;pointer-events:none}:host .cps-input-container .cps-input-wrap:has(.cps-input-prefix) input{padding-left:0}:host .cps-input-container .cps-input-wrap:has(input:focus:not(:read-only)) .cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap:has(input:hover:not(:read-only)) .cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap:has(input:disabled) .cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus~.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap input:focus~.cps-input-action-btns>.clear-btn:hover cps-icon{opacity:1}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;position:absolute;top:0;bottom:0;right:.5rem;align-items:center}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{display:flex;cursor:pointer;color:var(--cps-state-error);padding:.25rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:hover cps-icon{opacity:1}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus{outline:none}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible{outline:none;position:relative}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible cps-icon{opacity:1}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-top:.125rem;margin-left:.0625rem;cursor:pointer;color:var(--cps-color-text-mild);display:flex;padding:.1875rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:hover cps-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus{outline:none}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible{outline:none;position:relative}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap:has(input:not(:read-only)) .cps-input-prefix:hover>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{display:flex;flex-shrink:0;padding-left:.5rem}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{display:flex;align-self:center;padding:.1875rem;margin-left:.0625rem;margin-right:.3125rem;transition-duration:.2s;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus{outline:none;color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible{outline:none;position:relative}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{display:flex;flex-direction:column;justify-content:center;color:var(--cps-color-text-mild);cursor:default;line-height:1.2;padding-left:.25rem;padding-right:.5rem}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:0;display:block}:host .cps-input-container .cps-input-wrap.borderless,:host .cps-input-container .cps-input-wrap.underlined{border:none!important;border-radius:0}:host .cps-input-container .cps-input-wrap.borderless input,:host .cps-input-container .cps-input-wrap.underlined input{line-height:1}:host .cps-input-container .cps-input-wrap.underlined{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.75rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.5rem}:host .cps-input-container .cps-input-hint{color:var(--cps-color-text-mild);font-family:inherit;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error{color:var(--cps-state-error);font-family:inherit;font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-input-container .cps-input-label .cps-input-label-info-circle{margin-left:.5rem}:host .cps-input-container .cps-input-label-disabled{color:var(--cps-color-text-mild)}:host .cps-input-container ::placeholder{-webkit-user-select:none;user-select:none;font-family:inherit;color:var(--cps-color-text-mild);font-style:italic;opacity:1}\n"] }]
+                    ], selector: 'cps-input', template: "<div class=\"cps-input-container\" [style.width]=\"cvtWidth\">\n  @if (label) {\n    <div\n      class=\"cps-input-label\"\n      [class.cps-input-label-disabled]=\"disabled && !readonly\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-input-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n\n  <div\n    class=\"cps-input-wrap\"\n    [class.password]=\"type === 'password'\"\n    [class.cps-input-wrap-error]=\"error\"\n    [class.clearable]=\"clearable\"\n    [class.persistent-clear]=\"persistentClear\"\n    [class.borderless]=\"appearance === 'borderless'\"\n    [class.underlined]=\"appearance === 'underlined'\"\n    [class.keyboard-focused]=\"isKeyboardFocused\">\n    @if (prefixIcon || prefixText) {\n      <div class=\"cps-input-prefix\">\n        @if (prefixIcon) {\n          <span\n            class=\"cps-input-prefix-icon\"\n            [attr.role]=\"prefixIconClickable ? 'button' : null\"\n            [attr.tabindex]=\"\n              prefixIconClickable && !disabled && !readonly ? 0 : null\n            \"\n            [attr.aria-label]=\"\n              prefixIconClickable ? prefixIconAriaLabel || null : null\n            \"\n            (click)=\"onClickPrefixIcon()\"\n            (keydown.enter)=\"onClickPrefixIcon()\"\n            (keydown.space)=\"$event.preventDefault(); onClickPrefixIcon()\">\n            <cps-icon\n              [icon]=\"prefixIcon\"\n              [size]=\"prefixIconSize\"\n              [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n              [style.cursor]=\"\n                prefixIconClickable && !disabled && !readonly\n                  ? 'pointer'\n                  : 'default'\n              \">\n            </cps-icon>\n          </span>\n        }\n\n        @if (prefixText) {\n          <span class=\"cps-input-prefix-text\">\n            {{ prefixText }}\n          </span>\n        }\n      </div>\n    }\n\n    @if (!valueToDisplay) {\n      <input\n        [attr.role]=\"inputRole\"\n        [attr.aria-label]=\"ariaLabel || label || null\"\n        [attr.aria-expanded]=\"ariaExpanded\"\n        [attr.aria-haspopup]=\"ariaHasPopup\"\n        [attr.aria-controls]=\"ariaControls\"\n        [attr.aria-describedby]=\"describedBy\"\n        [attr.aria-invalid]=\"error ? 'true' : null\"\n        [attr.aria-required]=\"isRequired || null\"\n        [attr.aria-busy]=\"loading ? true : null\"\n        [attr.autocomplete]=\"autocomplete\"\n        [attr.spellcheck]=\"spellcheck\"\n        [type]=\"currentType\"\n        [value]=\"value\"\n        (input)=\"updateValueEvent($event)\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        (keydown.enter)=\"onInputEnterKeyDown()\"\n        [style.width]=\"cvtWidth\"\n        (mousedown)=\"onInputMousedown()\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\" />\n    }\n\n    @if (valueToDisplay) {\n      <input\n        [attr.aria-label]=\"ariaLabel || label || null\"\n        [attr.aria-describedby]=\"describedBy\"\n        [attr.aria-busy]=\"loading ? true : null\"\n        [value]=\"valueToDisplay\"\n        [disabled]=\"true\"\n        [readonly]=\"true\"\n        [style.width]=\"cvtWidth\" />\n    }\n\n    @if (!disabled && !readonly) {\n      <div class=\"cps-input-action-btns\">\n        @if (clearable) {\n          <span\n            class=\"clear-btn\"\n            role=\"button\"\n            tabindex=\"0\"\n            aria-label=\"Clear\"\n            [style.visibility]=\"\n              persistentClear || (!persistentClear && value)\n                ? 'visible'\n                : 'hidden'\n            \"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onClear()\"\n            (keydown.enter)=\"onClear()\"\n            (keydown.space)=\"$event.preventDefault(); onClear()\">\n            <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n          </span>\n        }\n        @if (type === 'password') {\n          <span\n            class=\"password-show-btn\"\n            [class.password-show-btn-active]=\"currentType === 'text'\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"\n              currentType === 'password' ? 'Show password' : 'Hide password'\n            \"\n            [attr.aria-pressed]=\"currentType !== 'password'\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"togglePassword()\"\n            (keydown.enter)=\"togglePassword()\"\n            (keydown.space)=\"$event.preventDefault(); togglePassword()\">\n            <cps-icon icon=\"eye\" size=\"1.125rem\"></cps-icon>\n          </span>\n        }\n      </div>\n    }\n    @if (loading) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.5\"\n        class=\"cps-input-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-input-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-input-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:inherit}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden;display:flex;align-items:stretch;min-height:2.375rem;border:.0625rem solid var(--cps-color-line-light);border-radius:.25rem;background:var(--cps-input-background);transition-duration:.2s}:host .cps-input-container .cps-input-wrap:hover:has(input:enabled:not(:read-only)){border-color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:focus-within:not(:has(input:read-only)),:host .cps-input-container .cps-input-wrap.keyboard-focused:has(input:read-only){border-color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap.keyboard-focused{outline:none;position:relative}:host .cps-input-container .cps-input-wrap.keyboard-focused:before,:host .cps-input-container .cps-input-wrap.keyboard-focused:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-input-container .cps-input-wrap.keyboard-focused:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap.keyboard-focused:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap.keyboard-focused.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap.keyboard-focused:before,:host .cps-input-container .cps-input-wrap.keyboard-focused:after{pointer-events:none}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless{outline:none;position:relative}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:after,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:after,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined.suppress-focus-visible:after,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap:has(input:disabled:not([readonly])){background-color:var(--cps-color-bg-disabled)}:host .cps-input-container .cps-input-wrap-error{border-color:var(--cps-state-error)!important}:host .cps-input-container .cps-input-wrap-error:not(:focus-within){background:var(--cps-error-background)!important}:host .cps-input-container .cps-input-wrap-error .cps-input-prefix-icon{color:var(--cps-state-error)!important}:host .cps-input-container .cps-input-wrap input{font-family:inherit;font-size:1rem;color:var(--cps-color-text-dark);background:transparent;padding:.375rem .75rem;line-height:1.5;border:none;appearance:none;border-radius:0;flex:1;min-width:0}:host .cps-input-container .cps-input-wrap input:focus{outline:0}:host .cps-input-container .cps-input-wrap input:read-only{cursor:default}:host .cps-input-container .cps-input-wrap input:disabled{opacity:1}:host .cps-input-container .cps-input-wrap input:disabled:not([readonly]){color:var(--cps-color-text-mild);background-color:transparent;pointer-events:none}:host .cps-input-container .cps-input-wrap:has(.cps-input-prefix) input{padding-left:0}:host .cps-input-container .cps-input-wrap:has(input:focus:not(:read-only)) .cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap:has(input:hover:not(:read-only)) .cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap:has(input:disabled) .cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus~.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap input:focus~.cps-input-action-btns>.clear-btn:hover cps-icon{opacity:1}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;position:absolute;top:0;bottom:0;right:.5rem;align-items:center}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{display:flex;cursor:pointer;color:var(--cps-state-error);padding:.25rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:hover cps-icon{opacity:1}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus{outline:none}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible{outline:none;position:relative}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible cps-icon{opacity:1}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-top:.125rem;margin-left:.0625rem;cursor:pointer;color:var(--cps-color-text-mild);display:flex;padding:.1875rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:hover cps-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus{outline:none}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible{outline:none;position:relative}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap:has(input:not(:read-only)) .cps-input-prefix:hover>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{display:flex;flex-shrink:0;padding-left:.5rem}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{display:flex;align-self:center;padding:.1875rem;margin-left:.0625rem;margin-right:.3125rem;transition-duration:.2s;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus{outline:none;color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible{outline:none;position:relative}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{display:flex;flex-direction:column;justify-content:center;color:var(--cps-color-text-mild);cursor:default;line-height:1.2;padding-left:.25rem;padding-right:.5rem}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:0;display:block}:host .cps-input-container .cps-input-wrap.borderless,:host .cps-input-container .cps-input-wrap.underlined{border:none!important;border-radius:0}:host .cps-input-container .cps-input-wrap.borderless input,:host .cps-input-container .cps-input-wrap.underlined input{line-height:1}:host .cps-input-container .cps-input-wrap.underlined{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.75rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.5rem}:host .cps-input-container .cps-input-hint{color:var(--cps-color-text-mild);font-family:inherit;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error{color:var(--cps-state-error);font-family:inherit;font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-input-container .cps-input-label .cps-input-label-info-circle{margin-left:.5rem}:host .cps-input-container .cps-input-label-disabled{color:var(--cps-color-text-mild)}:host .cps-input-container ::placeholder{-webkit-user-select:none;user-select:none;font-family:inherit;color:var(--cps-color-text-mild);font-style:italic;opacity:1}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -4088,6 +4122,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 type: Input
             }], ariaLabel: [{
                 type: Input
+            }], inputRole: [{
+                type: Input
+            }], ariaExpanded: [{
+                type: Input
+            }], ariaHasPopup: [{
+                type: Input
+            }], ariaControls: [{
+                type: Input
             }], hint: [{
                 type: Input
             }], placeholder: [{
@@ -4195,10 +4237,15 @@ class CpsDatepickerComponent {
          */
         this.width = '100%';
         /**
-         * Placeholder text.
+         * Date format for displaying and parsing the date string.
+         * @group Props
+         */
+        this.dateFormat = 'MM/DD/YYYY';
+        /**
+         * Placeholder text. Defaults to the configured dateFormat.
          * @group Props
          */
-        this.placeholder = 'MM/DD/YYYY';
+        this.placeholder = '';
         /**
          * Bottom hint text for the input field.
          * @group Props
@@ -4265,11 +4312,16 @@ class CpsDatepickerComponent {
          * @group Emits
          */
         this.valueChanged = new EventEmitter();
+        this.calendarId = generateUniqueId('cps-datepicker-calendar');
         this.stringDate = '';
         this.isOpened = false;
         this.error = '';
         this.cvtWidth = '';
         this._value = null;
+        this._focusCalendarOnOpen = false;
+        this._suppressNextContentClick = false;
+        this._captureKeydown = (e) => this._onCaptureKeydown(e);
+        this._calendarContainer = null;
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = (_event) => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -4285,11 +4337,96 @@ class CpsDatepickerComponent {
         });
         logMissingAriaLabelError('CpsDatepickerComponent', this.label, this.ariaLabel);
     }
-    ngOnChanges() {
+    ngOnChanges(changes) {
+        if (changes.width) {
+            this.cvtWidth = convertSize(this.width);
+        }
+        if (changes.dateFormat && !changes.dateFormat.isFirstChange()) {
+            this.stringDate = this._dateToString(this._value);
+        }
         logMissingAriaLabelError('CpsDatepickerComponent', this.label, this.ariaLabel);
     }
     ngOnDestroy() {
         this._statusChangesSubscription?.unsubscribe();
+        this._removeCalendarListeners();
+    }
+    _removeCalendarListeners() {
+        this._calendarContainer?.removeEventListener('keydown', this._captureKeydown, true);
+    }
+    // PrimeNG's own keyboard handler does not check whether the destination cell
+    // is disabled before moving focus. This capture-phase listener intercepts
+    // arrow keys and swallows them when:
+    //   - the target cell in the month/year grid is disabled, or
+    //   - the keypress would cross a page boundary (next/prev decade, year, or
+    //     month) where every cell on the adjacent page is also disabled.
+    _onCaptureKeydown(event) {
+        const { key } = event;
+        const isLeft = key === 'ArrowLeft';
+        const isUp = key === 'ArrowUp';
+        const isHorizontal = isLeft || key === 'ArrowRight';
+        const isVertical = isUp || key === 'ArrowDown';
+        if (!isHorizontal && !isVertical)
+            return;
+        const view = this._datepicker?.currentView;
+        const target = event.target;
+        const dp = this._datepicker;
+        const isBackward = isLeft || isUp;
+        let blocked = false;
+        if (view === 'month' || view === 'year') {
+            const cellClass = view === 'year' ? 'p-datepicker-year' : 'p-datepicker-month';
+            if (!target.classList.contains(cellClass))
+                return;
+            if (isVertical) {
+                const cells = Array.from(target.parentElement?.children ?? []);
+                const step = view === 'year' ? 2 : 3;
+                const dest = cells[cells.indexOf(target) + (isUp ? -step : step)];
+                blocked = !!dest?.classList.contains('p-disabled');
+            }
+            else {
+                const sibling = (isLeft ? target.previousElementSibling : target.nextElementSibling);
+                if (sibling) {
+                    blocked = sibling.classList.contains('p-disabled');
+                }
+                else if (view === 'year') {
+                    const base = dp.currentYear - (dp.currentYear % 10);
+                    const start = isBackward ? base - 10 : base + 10;
+                    blocked = Array.from({ length: 10 }, (_, i) => start + i).every((y) => dp.isYearDisabled(y));
+                }
+                else {
+                    blocked = dp.isYearDisabled(isBackward ? dp.currentYear - 1 : dp.currentYear + 1);
+                }
+            }
+        }
+        else if (view === 'date') {
+            if (!target.hasAttribute('data-date'))
+                return;
+            const cell = target.parentElement;
+            let crossMonth;
+            if (isHorizontal) {
+                const sibling = isLeft
+                    ? cell?.previousElementSibling
+                    : cell?.nextElementSibling;
+                crossMonth =
+                    !sibling || !!sibling.children[0]?.classList.contains('p-disabled');
+            }
+            else {
+                const cellIndex = Array.from(cell?.parentElement?.children ?? []).indexOf(cell);
+                const adjRow = isUp
+                    ? cell?.parentElement?.previousElementSibling
+                    : cell?.parentElement?.nextElementSibling;
+                crossMonth =
+                    !adjRow ||
+                        !!adjRow.children[cellIndex]?.children[0]?.classList.contains('p-disabled');
+            }
+            if (!crossMonth)
+                return;
+            const adj = new Date(dp.currentYear, dp.currentMonth + (isBackward ? -1 : 1), 1);
+            blocked = dp.isMonthDisabled(adj.getMonth(), adj.getFullYear());
+        }
+        if (blocked) {
+            event.stopImmediatePropagation();
+            event.preventDefault();
+        }
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -4325,48 +4462,67 @@ class CpsDatepickerComponent {
             this._updateValue(this._stringToDate(this.stringDate));
         }
     }
+    _parseFormatParts(dateString) {
+        const parts = dateString.split('/').map((p) => parseInt(p, 10));
+        if (parts.some(isNaN)) {
+            console.warn(`CpsDatepickerComponent: could not parse date string "${dateString}" using dateFormat "${this.dateFormat}". Supported formats: DD/MM/YYYY, MM/DD/YYYY, YYYY/MM/DD.`);
+            return null;
+        }
+        switch (this.dateFormat) {
+            case 'DD/MM/YYYY':
+                return { day: parts[0], month: parts[1], year: parts[2] };
+            case 'MM/DD/YYYY':
+                return { day: parts[1], month: parts[0], year: parts[2] };
+            case 'YYYY/MM/DD':
+                return { day: parts[2], month: parts[1], year: parts[0] };
+        }
+    }
     _checkDateFormat(dateString) {
-        if (!/^\d\d\/\d\d\/\d\d\d\d$/.test(dateString)) {
+        const regex = this.dateFormat === 'YYYY/MM/DD'
+            ? /^\d{4}\/\d{2}\/\d{2}$/
+            : /^\d{2}\/\d{2}\/\d{4}$/;
+        if (!regex.test(dateString))
             return false;
-        }
-        const parts = dateString.split('/').map((p) => parseInt(p, 10));
-        parts[0] -= 1;
-        const d = new Date(parts[2], parts[0], parts[1]);
-        return (d.getMonth() === parts[0] &&
-            d.getDate() === parts[1] &&
-            d.getFullYear() === parts[2]);
+        const parsed = this._parseFormatParts(dateString);
+        if (!parsed)
+            return false;
+        const { day, month, year } = parsed;
+        const d = new Date(year, month - 1, day);
+        return (d.getMonth() === month - 1 &&
+            d.getDate() === day &&
+            d.getFullYear() === year);
     }
     _checkDateInRange(date, minDate, maxDate) {
-        if (!minDate && !maxDate)
-            return true;
-        if (minDate && maxDate) {
-            return (date.getTime() >= minDate.getTime() &&
-                date.getTime() <= maxDate.getTime());
-        }
-        if (minDate) {
-            return date.getTime() >= minDate.getTime();
-        }
-        return date.getTime() <= maxDate.getTime();
+        if (minDate && date.getTime() < minDate.getTime())
+            return false;
+        if (maxDate && date.getTime() > maxDate.getTime())
+            return false;
+        return true;
     }
     _dateToString(dateVal) {
         if (!dateVal)
             return '';
-        let month = '' + (dateVal.getMonth() + 1);
-        if (month.length < 2)
-            month = '0' + month;
-        let day = '' + dateVal.getDate();
-        if (day.length < 2)
-            day = '0' + day;
-        const year = dateVal.getFullYear();
-        return `${month}/${day}/${year}`;
+        const mm = String(dateVal.getMonth() + 1).padStart(2, '0');
+        const dd = String(dateVal.getDate()).padStart(2, '0');
+        const yyyy = String(dateVal.getFullYear());
+        switch (this.dateFormat) {
+            case 'DD/MM/YYYY':
+                return `${dd}/${mm}/${yyyy}`;
+            case 'MM/DD/YYYY':
+                return `${mm}/${dd}/${yyyy}`;
+            case 'YYYY/MM/DD':
+                return `${yyyy}/${mm}/${dd}`;
+        }
     }
     _stringToDate(dateString) {
         if (!this._checkDateFormat(dateString))
             return null;
-        const [month, day, year] = dateString.split('/');
-        const dt = new Date(`${year}-${month}-${day}`);
-        const inRange = this._checkDateInRange(dt, this.minDate, this.maxDate);
-        return inRange ? dt : null;
+        const parsed = this._parseFormatParts(dateString);
+        if (!parsed)
+            return null;
+        const { day, month, year } = parsed;
+        const dt = new Date(year, month - 1, day);
+        return this._checkDateInRange(dt, this.minDate, this.maxDate) ? dt : null;
     }
     _checkErrors() {
         if (this.stringDate && !this._stringToDate(this.stringDate)) {
@@ -4390,9 +4546,6 @@ class CpsDatepickerComponent {
         const message = errArr.find((msg) => typeof msg === 'string');
         this.error = message || 'Unknown error';
     }
-    onClearCalendarDate() {
-        this.onSelectCalendarDate(null);
-    }
     onSelectCalendarDate(dateVal) {
         this.toggleCalendar(false);
         this.writeValue(dateVal);
@@ -4410,6 +4563,17 @@ class CpsDatepickerComponent {
         if (this.openOnInputFocus)
             this.toggleCalendar(true);
     }
+    onInputKeydown(event) {
+        if (!this.isOpened)
+            return;
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this._focusActiveCalendarCell();
+        }
+        else if (event.key === 'Tab') {
+            this.toggleCalendar(false);
+        }
+    }
     onInputEnterClicked() {
         if (!this.isOpened)
             return;
@@ -4423,26 +4587,142 @@ class CpsDatepickerComponent {
             return;
         if (this.isOpened)
             this._updateValueFromInputString();
+        else
+            this._focusCalendarOnOpen = true;
         this.toggleCalendar();
     }
-    onBeforeCalendarHidden() {
+    onCalendarClick(_event) {
+        // Handles view switches triggered by the Month/Year title buttons in the
+        // header (PrimeNG does not call initFocusableCell() after setCurrentView()).
+        // Year-cell clicks are also covered by onYearSelected(), but calling
+        // _initFocusableViewCell twice is harmless since it is idempotent.
+        setTimeout(() => {
+            const view = this._datepicker?.currentView;
+            if (view !== 'month' && view !== 'year')
+                return;
+            this._suppressNextContentClick = true;
+            this._initFocusableViewCell(true);
+        });
+    }
+    onYearSelected() {
+        // Fired by PrimeNG when a year cell is clicked and the view switches to
+        // 'month'. At this point currentView is already 'month' but Zone's tick()
+        // may not have run yet. Use setTimeout so we run after Angular re-renders.
+        this._suppressNextContentClick = true;
+        setTimeout(() => this._initFocusableViewCell(true));
+    }
+    _initFocusableViewCell(focus = false) {
+        const view = this._datepicker?.currentView;
+        if (view !== 'year' && view !== 'month')
+            return;
+        // Delegate to PrimeNG's own initFocusableCell which uses contentViewChild
+        // (the correct root element). Suppress its built-in focus unless requested;
+        // PrimeNG resets preventFocus = false at the end of that method.
+        if (!focus)
+            this._datepicker.preventFocus = true;
+        this._datepicker.initFocusableCell();
+    }
+    onCalendarMenuShown() {
+        this._calendarContainer = this.calendarMenu.container ?? null;
+        this._calendarContainer?.addEventListener('keydown', this._captureKeydown, true);
+        if (!this._focusCalendarOnOpen)
+            return;
+        this._focusCalendarOnOpen = false;
+        // setTimeout fires after requestAnimationFrame, ensuring p-motion has
+        // already removed its initial display:none from the calendar panel.
+        setTimeout(() => this._focusActiveCalendarCell());
+    }
+    _focusActiveCalendarCell() {
+        const container = this.calendarMenu.container;
+        if (!container)
+            return;
+        const view = this._datepicker?.currentView;
+        if (view === 'month' || view === 'year') {
+            this._initFocusableViewCell(true);
+            return;
+        }
+        // Build a [data-date] key for the selected date using PrimeNG's format
+        // (YYYY-M-D, no zero-padding) to query directly rather than relying on the
+        // p-datepicker-day-selected class, which may not be rendered yet due to
+        // PrimeNG's OnPush change detection cycle.
+        let cell = null;
+        if (this.value) {
+            const key = `${this.value.getFullYear()}-${this.value.getMonth()}-${this.value.getDate()}`;
+            cell = container.querySelector(`span[data-date="${key}"]:not(.p-disabled)`);
+        }
+        // Fallback: today's cell, then first available cell
+        cell ??=
+            container.querySelector('td.p-datepicker-today span:not(.p-disabled):not(.p-ink)') ??
+                container.querySelector('.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
+        if (cell) {
+            cell.tabIndex = 0;
+            cell.focus({ preventScroll: true });
+        }
+    }
+    onDatepickerMonthChange() {
+        const navState = this._datepicker?.navigationState;
+        const focusKey = this._datepicker?._focusKey ?? null;
+        // Wait for Angular to re-render the new month's *ngFor cells, then focus.
+        setTimeout(() => {
+            const container = this.calendarMenu.container;
+            if (!container)
+                return;
+            // Prevent PrimeNG from double-handling focus since we do it here.
+            if (this._datepicker) {
+                this._datepicker.navigationState = null;
+                this._datepicker._focusKey = null;
+            }
+            if (navState?.button) {
+                // Nav button was activated - return focus to prev/next month button.
+                const btnClass = navState.backward
+                    ? '.p-datepicker-prev-button'
+                    : '.p-datepicker-next-button';
+                container.querySelector(btnClass)?.focus();
+            }
+            else {
+                // Keyboard boundary navigation — focus the appropriate day cell.
+                let cell = null;
+                if (focusKey) {
+                    cell = container.querySelector(focusKey);
+                }
+                else if (navState?.backward) {
+                    const cells = container.querySelectorAll('.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
+                    cell = cells[cells.length - 1] ?? null;
+                }
+                else {
+                    cell = container.querySelector('.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
+                }
+                if (cell) {
+                    cell.tabIndex = 0;
+                    cell.focus({ preventScroll: true });
+                }
+            }
+        });
+    }
+    onBeforeCalendarHidden(reason) {
+        this._removeCalendarListeners();
+        this._calendarContainer = null;
         if (this.disabled || !this.isOpened)
             return;
         this._updateValueFromInputString();
-        this.toggleCalendar(false);
+        this.toggleCalendar(false, reason !== CpsMenuHideReason.CLICK_OUTSIDE);
     }
     onInputClear() {
         if (this.isOpened)
             this.focusInput();
     }
     onCalendarContentClick() {
+        if (this._suppressNextContentClick) {
+            this._suppressNextContentClick = false;
+            return;
+        }
         if (this.isOpened)
             this.focusInput();
     }
     focusInput() {
         this.datepickerInput.focus();
     }
-    toggleCalendar(show) {
+    toggleCalendar(show, needFocusInput = true) {
         if (this.disabled || this.isOpened === show)
             return;
         const target = this.datepickerInput.elementRef.nativeElement.querySelector('.cps-input-wrap');
@@ -4465,13 +4745,12 @@ class CpsDatepickerComponent {
         if (!this.isOpened) {
             this._control?.control?.markAsTouched();
             this._checkErrors();
-        }
-        else {
-            this.focusInput();
+            if (needFocusInput)
+                this.focusInput();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsDatepickerComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: CpsDatepickerComponent, isStandalone: true, selector: "cps-datepicker", inputs: { label: "label", ariaLabel: "ariaLabel", disabled: "disabled", width: "width", placeholder: "placeholder", hint: "hint", clearable: "clearable", hideDetails: "hideDetails", persistentClear: "persistentClear", showTodayButton: "showTodayButton", openOnInputFocus: "openOnInputFocus", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", minDate: "minDate", maxDate: "maxDate", value: "value" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["datepickerInput"], descendants: true }, { propertyName: "calendarMenu", first: true, predicate: ["calendarMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cps-datepicker\"\n  [ngStyle]=\"{ width: cvtWidth }\"\n  [class.focused]=\"isOpened\">\n  <cps-input\n    #datepickerInput\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    [ariaLabel]=\"ariaLabel\"\n    prefixIcon=\"datepicker\"\n    prefixIconAriaLabel=\"Open calendar\"\n    [placeholder]=\"placeholder\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\n    (valueChanged)=\"onInputValueChanged($event)\"\n    [clearable]=\"clearable\"\n    (blurred)=\"onInputBlur()\"\n    (cleared)=\"onInputClear()\"\n    (enterClicked)=\"onInputEnterClicked()\"\n    [width]=\"width\"\n    [hint]=\"hint\"\n    [hideDetails]=\"hideDetails\"\n    [infoTooltip]=\"infoTooltip\"\n    [infoTooltipClass]=\"infoTooltipClass\"\n    [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n    [infoTooltipPersistent]=\"infoTooltipPersistent\"\n    [persistentClear]=\"persistentClear\"\n    [appearance]=\"appearance\"\n    [error]=\"error\"></cps-input>\n  <cps-menu\n    #calendarMenu\n    [withArrow]=\"false\"\n    (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n    (contentClicked)=\"onCalendarContentClick()\"\n    [focusOnShow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    containerClass=\"cps-datepicker-calendar-menu\">\n    <div class=\"cps-datepicker-calendar\">\n      <p-datepicker\n        [(ngModel)]=\"value\"\n        [inline]=\"true\"\n        [showIcon]=\"true\"\n        [showButtonBar]=\"showTodayButton\"\n        (onSelect)=\"onSelectCalendarDate($event)\"\n        (onClearClick)=\"onClearCalendarDate()\"\n        [showOtherMonths]=\"false\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\" />\n    </div>\n  </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep .cps-input-wrap{border-color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-panel{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#fff;color:var(--cps-color-text-darkest);border:1px solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#fff;font-weight:600;margin:0;border-bottom:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-lightest);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-prepared);border-width:2px;border-style:solid}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-datepicker-day-selected):not(.p-disabled):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-datepicker-day-selected):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-datepicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}.cps-datepicker-calendar ::ng-deep .p-ripple:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-ripple{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-family:Source Sans Pro,sans-serif;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:active{background-color:var(--cps-color-highlight-selected)}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button .p-button-label{font-weight:700}.cps-datepicker-calendar ::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}\n"], dependencies: [{ 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: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "ariaLabel", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked", "containerMouseLeave"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: CpsDatepickerComponent, isStandalone: true, selector: "cps-datepicker", inputs: { label: "label", ariaLabel: "ariaLabel", disabled: "disabled", width: "width", dateFormat: "dateFormat", placeholder: "placeholder", hint: "hint", clearable: "clearable", hideDetails: "hideDetails", persistentClear: "persistentClear", showTodayButton: "showTodayButton", openOnInputFocus: "openOnInputFocus", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", minDate: "minDate", maxDate: "maxDate", value: "value" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["datepickerInput"], descendants: true }, { propertyName: "calendarMenu", first: true, predicate: ["calendarMenu"], descendants: true }, { propertyName: "_datepicker", first: true, predicate: DatePicker, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-datepicker\" [style.width]=\"cvtWidth\" [class.focused]=\"isOpened\">\n  <cps-input\n    #datepickerInput\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    [ariaLabel]=\"ariaLabel\"\n    inputRole=\"combobox\"\n    ariaHasPopup=\"dialog\"\n    [ariaExpanded]=\"isOpened\"\n    [ariaControls]=\"calendarId\"\n    prefixIcon=\"datepicker\"\n    prefixIconAriaLabel=\"Open calendar\"\n    [placeholder]=\"placeholder || dateFormat\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\n    (keydown)=\"onInputKeydown($event)\"\n    (valueChanged)=\"onInputValueChanged($event)\"\n    [clearable]=\"clearable\"\n    (blurred)=\"onInputBlur()\"\n    (cleared)=\"onInputClear()\"\n    (enterClicked)=\"onInputEnterClicked()\"\n    [width]=\"width\"\n    [hint]=\"hint\"\n    [hideDetails]=\"hideDetails\"\n    [infoTooltip]=\"infoTooltip\"\n    [infoTooltipClass]=\"infoTooltipClass\"\n    [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n    [infoTooltipPersistent]=\"infoTooltipPersistent\"\n    [persistentClear]=\"persistentClear\"\n    [appearance]=\"appearance\"\n    [error]=\"error\"></cps-input>\n  <cps-menu\n    #calendarMenu\n    [withArrow]=\"false\"\n    (menuShown)=\"onCalendarMenuShown()\"\n    (beforeMenuHidden)=\"onBeforeCalendarHidden($event)\"\n    (contentClicked)=\"onCalendarContentClick()\"\n    [focusOnShow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    containerClass=\"cps-datepicker-calendar-menu\">\n    <div\n      class=\"cps-datepicker-calendar\"\n      role=\"dialog\"\n      aria-label=\"Date picker\"\n      [attr.id]=\"calendarId\"\n      (click)=\"onCalendarClick($event)\">\n      <p-datepicker\n        [(ngModel)]=\"value\"\n        [inline]=\"true\"\n        [showIcon]=\"true\"\n        [showButtonBar]=\"showTodayButton\"\n        (onSelect)=\"onSelectCalendarDate($event)\"\n        (onClearClick)=\"onSelectCalendarDate(null)\"\n        (onMonthChange)=\"onDatepickerMonthChange()\"\n        (onYearChange)=\"onYearSelected()\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\" />\n    </div>\n  </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep .cps-input-wrap{border-color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-panel{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#fff;color:var(--cps-color-text-darkest);border:.0625rem solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-panel-inline{vertical-align:top}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#fff;font-weight:600;margin:0;border-bottom:.0625rem solid #dee2e6;border-top-right-radius:.375rem;border-top-left-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus{overflow:visible;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:after{content:\"\";position:absolute;border-radius:50%}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus.suppress-focus-visible:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button svg,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button svg{width:.875rem;height:.875rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus{overflow:visible;color:var(--cps-color-calm);outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus.suppress-focus-visible:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:.0625rem solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-light);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{overflow:visible;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:after{content:\"\";position:absolute;border-radius:50%}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:after{inset:-.125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:.0625rem solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-calm);border-width:.125rem;border-style:solid}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus{overflow:visible;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:.0625rem solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:.375rem;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month.p-disabled{color:var(--cps-color-text-light);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:.375rem;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year.p-disabled{color:var(--cps-color-text-light);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:.0625rem solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-datepicker-day-selected):not(.p-disabled):is(:hover,:focus){background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-datepicker-day-selected):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):is(:hover,:focus){background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus{overflow:visible;z-index:1;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):is(:hover,:focus){background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus{overflow:visible;z-index:1;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{visibility:hidden}.cps-datepicker-calendar ::ng-deep .p-ripple:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-ripple{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-family:Source Sans Pro,sans-serif;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:active{background-color:var(--cps-color-highlight-selected)}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button .p-button-label{font-weight:700}.cps-datepicker-calendar ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:.0625rem;margin:-.0625rem;overflow:hidden;padding:0;position:absolute;width:.0625rem}\n"], dependencies: [{ kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "ariaLabel", "inputRole", "ariaExpanded", "ariaHasPopup", "ariaControls", "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: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CommonModule }, { 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: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "ariaLabel", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked", "containerMouseLeave"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsDatepickerComponent, decorators: [{
             type: Component,
@@ -4481,7 +4760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         CommonModule,
                         FormsModule,
                         CpsMenuComponent
-                    ], selector: 'cps-datepicker', template: "<div\n  class=\"cps-datepicker\"\n  [ngStyle]=\"{ width: cvtWidth }\"\n  [class.focused]=\"isOpened\">\n  <cps-input\n    #datepickerInput\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    [ariaLabel]=\"ariaLabel\"\n    prefixIcon=\"datepicker\"\n    prefixIconAriaLabel=\"Open calendar\"\n    [placeholder]=\"placeholder\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\n    (valueChanged)=\"onInputValueChanged($event)\"\n    [clearable]=\"clearable\"\n    (blurred)=\"onInputBlur()\"\n    (cleared)=\"onInputClear()\"\n    (enterClicked)=\"onInputEnterClicked()\"\n    [width]=\"width\"\n    [hint]=\"hint\"\n    [hideDetails]=\"hideDetails\"\n    [infoTooltip]=\"infoTooltip\"\n    [infoTooltipClass]=\"infoTooltipClass\"\n    [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n    [infoTooltipPersistent]=\"infoTooltipPersistent\"\n    [persistentClear]=\"persistentClear\"\n    [appearance]=\"appearance\"\n    [error]=\"error\"></cps-input>\n  <cps-menu\n    #calendarMenu\n    [withArrow]=\"false\"\n    (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n    (contentClicked)=\"onCalendarContentClick()\"\n    [focusOnShow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    containerClass=\"cps-datepicker-calendar-menu\">\n    <div class=\"cps-datepicker-calendar\">\n      <p-datepicker\n        [(ngModel)]=\"value\"\n        [inline]=\"true\"\n        [showIcon]=\"true\"\n        [showButtonBar]=\"showTodayButton\"\n        (onSelect)=\"onSelectCalendarDate($event)\"\n        (onClearClick)=\"onClearCalendarDate()\"\n        [showOtherMonths]=\"false\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\" />\n    </div>\n  </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep .cps-input-wrap{border-color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-panel{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#fff;color:var(--cps-color-text-darkest);border:1px solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#fff;font-weight:600;margin:0;border-bottom:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-lightest);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-prepared);border-width:2px;border-style:solid}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-datepicker-day-selected):not(.p-disabled):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-datepicker-day-selected):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-datepicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}.cps-datepicker-calendar ::ng-deep .p-ripple:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-ripple{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-family:Source Sans Pro,sans-serif;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:active{background-color:var(--cps-color-highlight-selected)}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button .p-button-label{font-weight:700}.cps-datepicker-calendar ::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}\n"] }]
+                    ], selector: 'cps-datepicker', template: "<div class=\"cps-datepicker\" [style.width]=\"cvtWidth\" [class.focused]=\"isOpened\">\n  <cps-input\n    #datepickerInput\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    [ariaLabel]=\"ariaLabel\"\n    inputRole=\"combobox\"\n    ariaHasPopup=\"dialog\"\n    [ariaExpanded]=\"isOpened\"\n    [ariaControls]=\"calendarId\"\n    prefixIcon=\"datepicker\"\n    prefixIconAriaLabel=\"Open calendar\"\n    [placeholder]=\"placeholder || dateFormat\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\n    (keydown)=\"onInputKeydown($event)\"\n    (valueChanged)=\"onInputValueChanged($event)\"\n    [clearable]=\"clearable\"\n    (blurred)=\"onInputBlur()\"\n    (cleared)=\"onInputClear()\"\n    (enterClicked)=\"onInputEnterClicked()\"\n    [width]=\"width\"\n    [hint]=\"hint\"\n    [hideDetails]=\"hideDetails\"\n    [infoTooltip]=\"infoTooltip\"\n    [infoTooltipClass]=\"infoTooltipClass\"\n    [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n    [infoTooltipPersistent]=\"infoTooltipPersistent\"\n    [persistentClear]=\"persistentClear\"\n    [appearance]=\"appearance\"\n    [error]=\"error\"></cps-input>\n  <cps-menu\n    #calendarMenu\n    [withArrow]=\"false\"\n    (menuShown)=\"onCalendarMenuShown()\"\n    (beforeMenuHidden)=\"onBeforeCalendarHidden($event)\"\n    (contentClicked)=\"onCalendarContentClick()\"\n    [focusOnShow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    containerClass=\"cps-datepicker-calendar-menu\">\n    <div\n      class=\"cps-datepicker-calendar\"\n      role=\"dialog\"\n      aria-label=\"Date picker\"\n      [attr.id]=\"calendarId\"\n      (click)=\"onCalendarClick($event)\">\n      <p-datepicker\n        [(ngModel)]=\"value\"\n        [inline]=\"true\"\n        [showIcon]=\"true\"\n        [showButtonBar]=\"showTodayButton\"\n        (onSelect)=\"onSelectCalendarDate($event)\"\n        (onClearClick)=\"onSelectCalendarDate(null)\"\n        (onMonthChange)=\"onDatepickerMonthChange()\"\n        (onYearChange)=\"onYearSelected()\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\" />\n    </div>\n  </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep .cps-input-wrap{border-color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-panel{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#fff;color:var(--cps-color-text-darkest);border:.0625rem solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-panel-inline{vertical-align:top}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#fff;font-weight:600;margin:0;border-bottom:.0625rem solid #dee2e6;border-top-right-radius:.375rem;border-top-left-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus{overflow:visible;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:after{content:\"\";position:absolute;border-radius:50%}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus.suppress-focus-visible:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button svg,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button svg{width:.875rem;height:.875rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus{overflow:visible;color:var(--cps-color-calm);outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus.suppress-focus-visible:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:.0625rem solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-light);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{overflow:visible;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:after{content:\"\";position:absolute;border-radius:50%}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:after{inset:-.125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:.0625rem solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-calm);border-width:.125rem;border-style:solid}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus{overflow:visible;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:.0625rem solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:.375rem;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month.p-disabled{color:var(--cps-color-text-light);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:.375rem;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year.p-disabled{color:var(--cps-color-text-light);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:.0625rem solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-datepicker-day-selected):not(.p-disabled):is(:hover,:focus){background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-datepicker-day-selected):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):is(:hover,:focus){background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus{overflow:visible;z-index:1;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):is(:hover,:focus){background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus{overflow:visible;z-index:1;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{visibility:hidden}.cps-datepicker-calendar ::ng-deep .p-ripple:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-ripple{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-family:Source Sans Pro,sans-serif;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:active{background-color:var(--cps-color-highlight-selected)}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button .p-button-label{font-weight:700}.cps-datepicker-calendar ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:.0625rem;margin:-.0625rem;overflow:hidden;padding:0;position:absolute;width:.0625rem}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -4494,6 +4773,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 type: Input
             }], width: [{
                 type: Input
+            }], dateFormat: [{
+                type: Input
             }], placeholder: [{
                 type: Input
             }], hint: [{
@@ -4534,6 +4815,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             }], calendarMenu: [{
                 type: ViewChild,
                 args: ['calendarMenu']
+            }], _datepicker: [{
+                type: ViewChild,
+                args: [DatePicker]
             }] } });
 
 /**
@@ -4541,9 +4825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
  * @group Components
  */
 class CpsDividerComponent {
-    // eslint-disable-next-line no-useless-constructor
-    constructor(document) {
-        this.document = document;
+    constructor() {
         /**
          * Determines whether the divider is vertically aligned.
          * @group Props
@@ -4565,9 +4847,10 @@ class CpsDividerComponent {
         /**
          * Thickness of the divider, a number denoting pixels or a string.
          * @group Props
-         * @default 1px
+         * @default 0.0625rem
          */
-        this.thickness = input('1px', ...(ngDevMode ? [{ debugName: "thickness" }] : /* istanbul ignore next */ []));
+        this.thickness = input('0.0625rem', ...(ngDevMode ? [{ debugName: "thickness" }] : /* istanbul ignore next */ []));
+        this.document = inject(DOCUMENT);
         this.borderTop = computed(() => {
             return this._constructBorder(!this.vertical());
         }, ...(ngDevMode ? [{ debugName: "borderTop" }] : /* istanbul ignore next */ []));
@@ -4580,20 +4863,19 @@ class CpsDividerComponent {
             ? `${convertSize(this.thickness())} ${this.type()} ${getCSSColor(this.color(), this.document)}`
             : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsDividerComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: CpsDividerComponent, isStandalone: true, selector: "cps-divider", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.border-top": "borderTop()", "style.border-right": "borderRight()" }, classAttribute: "cps-divider" }, ngImport: i0, template: '', isInline: true, styles: [".cps-divider{display:block;margin:0}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: CpsDividerComponent, isStandalone: true, selector: "cps-divider", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "vertical() ? \"vertical\" : \"horizontal\"", "style.border-top": "borderTop()", "style.border-right": "borderRight()" }, classAttribute: "cps-divider" }, ngImport: i0, template: '', isInline: true, styles: [".cps-divider{display:block;margin:0}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsDividerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cps-divider', host: {
                         class: 'cps-divider',
+                        role: 'separator',
+                        '[attr.aria-orientation]': 'vertical() ? "vertical" : "horizontal"',
                         '[style.border-top]': 'borderTop()',
                         '[style.border-right]': 'borderRight()'
-                    }, standalone: true, template: '', encapsulation: ViewEncapsulation.None, styles: [".cps-divider{display:block;margin:0}\n"] }]
-        }], ctorParameters: () => [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }] } });
+                    }, template: '', encapsulation: ViewEncapsulation.None, styles: [".cps-divider{display:block;margin:0}\n"] }]
+        }], propDecorators: { vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }] } });
 
 const transitionType = '0.2s cubic-bezier(0.4, 0, 0.2, 1)';
 /**
@@ -4636,7 +4918,7 @@ class CpsExpansionPanelComponent {
          */
         this.bordered = true;
         /**
-         * The border radius of the component.
+         * The border radius of the component of type number denoting pixels or string.
          * @group Props
          */
         this.borderRadius = 0;
@@ -4667,6 +4949,12 @@ class CpsExpansionPanelComponent {
          * @group Emits
          */
         this.afterExpand = new EventEmitter();
+        this.contentPanelId = generateUniqueId('cps-expansion-panel-content');
+        this.isKeyboardActive = false;
+        this.cvtWidth = '';
+        this.cvtBorderColor = '';
+        this.cvtBackgroundColor = '';
+        this.cvtBorderRadius = '';
         this._contentCollapseAnimation = this._animationBuilder.build([
             style({
                 height: '*'
@@ -4685,16 +4973,48 @@ class CpsExpansionPanelComponent {
         ]);
     }
     ngOnInit() {
-        this.borderColor = getCSSColor(this.borderColor, this.document);
-        this.backgroundColor = getCSSColor(this.backgroundColor, this.document);
-        this.borderRadius = convertSize(this.borderRadius);
-        this.width = convertSize(this.width);
+        this.cvtBorderColor = getCSSColor(this.borderColor, this.document);
+        this.cvtBackgroundColor = getCSSColor(this.backgroundColor, this.document);
+        this.cvtBorderRadius = convertSize(this.borderRadius);
+        this.cvtWidth = convertSize(this.width);
+        this._logHeaderTitleError();
+    }
+    ngOnChanges(changes) {
+        if (changes.borderColor) {
+            this.cvtBorderColor = getCSSColor(this.borderColor, this.document);
+        }
+        if (changes.backgroundColor) {
+            this.cvtBackgroundColor = getCSSColor(this.backgroundColor, this.document);
+        }
+        if (changes.borderRadius) {
+            this.cvtBorderRadius = convertSize(this.borderRadius);
+        }
+        if (changes.width) {
+            this.cvtWidth = convertSize(this.width);
+        }
+        if (changes.headerTitle) {
+            this._logHeaderTitleError();
+        }
     }
     ngAfterViewInit() {
         if (!this.isExpanded) {
             this._updateContentVisibilityStyles(false);
         }
     }
+    onHeaderKeydown(event) {
+        if (this.disabled || event.repeat)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.isKeyboardActive = true;
+            this.toggleExpansion();
+        }
+    }
+    onHeaderKeyup(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            this.isKeyboardActive = false;
+        }
+    }
     toggleExpansion() {
         if (this.disabled || this._contentAnimationPlayer)
             return;
@@ -4739,8 +5059,13 @@ class CpsExpansionPanelComponent {
             this._renderer.setStyle(el, 'visibility', 'hidden');
         }
     }
+    _logHeaderTitleError() {
+        if (!this.headerTitle?.trim()) {
+            console.error('CpsExpansionPanelComponent: the expansion panel must have headerTitle.');
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsExpansionPanelComponent, deps: [{ token: i1$3.AnimationBuilder }, { token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsExpansionPanelComponent, isStandalone: true, selector: "cps-expansion-panel", inputs: { headerTitle: "headerTitle", backgroundColor: "backgroundColor", showChevron: "showChevron", isExpanded: "isExpanded", disabled: "disabled", bordered: "bordered", borderRadius: "borderRadius", borderColor: "borderColor", width: "width", prefixIcon: "prefixIcon" }, outputs: { afterCollapse: "afterCollapse", afterExpand: "afterExpand" }, viewQueries: [{ propertyName: "panelContentElem", first: true, predicate: ["panelContentElem"], descendants: true }], ngImport: i0, template: "<div\n  class=\"cps-expansion-panel\"\n  [class.expanded]=\"isExpanded\"\n  [ngStyle]=\"{\n    'background-color': backgroundColor,\n    'border-radius': borderRadius,\n    width: width,\n    border: bordered ? '1px solid ' + borderColor : ''\n  }\">\n  <div\n    class=\"cps-expansion-panel-header\"\n    [@panelHeader]=\"\n      isExpanded\n        ? {\n            value: 'visible',\n            params: {\n              borderStyle: bordered ? '1px solid ' + borderColor : ''\n            }\n          }\n        : 'hidden'\n    \"\n    [ngClass]=\"{ disabled: disabled }\"\n    [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n    (click)=\"toggleExpansion()\">\n    @if (prefixIcon) {\n      <span class=\"cps-expansion-panel-prefix-icon\">\n        <cps-icon\n          [icon]=\"prefixIcon\"\n          size=\"small\"\n          [color]=\"disabled ? 'text-mild' : 'text-dark'\">\n        </cps-icon>\n      </span>\n    }\n    <div class=\"cps-expansion-panel-title\">{{ headerTitle }}</div>\n    @if (showChevron && !disabled) {\n      <span class=\"cps-expansion-panel-chevron\">\n        <cps-icon icon=\"chevron-down\" size=\"small\" color=\"text-dark\">\n        </cps-icon>\n      </span>\n    }\n  </div>\n  <div class=\"cps-expansion-panel-content\" #panelContentElem>\n    <div class=\"cps-expansion-panel-content-inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-expansion-panel{overflow:hidden;font-family:Source Sans Pro,sans-serif;line-height:20px;color:var(--cps-color-text-dark)}:host .cps-expansion-panel-header{border-bottom-color:transparent;display:flex;align-items:center;padding:10px 16px 10px 24px;font-size:16px;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .cps-expansion-panel-header:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-expansion-panel-header:active{background-color:var(--cps-color-highlight-active)}:host .cps-expansion-panel-header.disabled{pointer-events:none;color:var(--cps-color-text-mild)}:host .cps-expansion-panel-prefix-icon{display:flex;align-items:center;margin-right:12px;margin-bottom:2px}:host .cps-expansion-panel-prefix-icon cps-icon ::ng-deep .cps-icon{width:18px;height:18px}:host .cps-expansion-panel-title{flex:1 0 auto;display:inline-flex;font-weight:600}:host .cps-expansion-panel-chevron{width:16px;display:flex;align-items:center;transition-duration:.2s;margin-left:6px}:host .cps-expansion-panel-content{overflow:auto;color:var(--cps-color-text-dark);font-size:16px}:host .cps-expansion-panel-content-inner{padding:16px 24px}:host .cps-expansion-panel.expanded .cps-expansion-panel-content{max-height:500px}:host .cps-expansion-panel.expanded .cps-expansion-panel-chevron{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: CpsExpansionPanelComponent, isStandalone: true, selector: "cps-expansion-panel", inputs: { headerTitle: "headerTitle", backgroundColor: "backgroundColor", showChevron: "showChevron", isExpanded: "isExpanded", disabled: "disabled", bordered: "bordered", borderRadius: "borderRadius", borderColor: "borderColor", width: "width", prefixIcon: "prefixIcon" }, outputs: { afterCollapse: "afterCollapse", afterExpand: "afterExpand" }, viewQueries: [{ propertyName: "panelContentElem", first: true, predicate: ["panelContentElem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cps-expansion-panel\"\n  [class.expanded]=\"isExpanded\"\n  [style.background-color]=\"cvtBackgroundColor\"\n  [style.border-radius]=\"cvtBorderRadius\"\n  [style.width]=\"cvtWidth\"\n  [style.border]=\"bordered ? '1px solid ' + cvtBorderColor : ''\">\n  <div\n    class=\"cps-expansion-panel-header\"\n    role=\"button\"\n    [attr.tabindex]=\"disabled ? -1 : 0\"\n    [attr.aria-expanded]=\"isExpanded\"\n    [attr.aria-disabled]=\"disabled ? true : null\"\n    [attr.aria-controls]=\"contentPanelId\"\n    [@panelHeader]=\"\n      isExpanded\n        ? {\n            value: 'visible',\n            params: {\n              borderStyle: bordered ? '1px solid ' + cvtBorderColor : ''\n            }\n          }\n        : 'hidden'\n    \"\n    [class.disabled]=\"disabled\"\n    [class.keyboard-active]=\"isKeyboardActive\"\n    [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n    (click)=\"toggleExpansion()\"\n    (keydown)=\"onHeaderKeydown($event)\"\n    (keyup)=\"onHeaderKeyup($event)\">\n    @if (prefixIcon) {\n      <span class=\"cps-expansion-panel-prefix-icon\">\n        <cps-icon\n          aria-hidden=\"true\"\n          [icon]=\"prefixIcon\"\n          size=\"small\"\n          [color]=\"disabled ? 'text-mild' : 'text-dark'\">\n        </cps-icon>\n      </span>\n    }\n    <div class=\"cps-expansion-panel-title\">{{ headerTitle }}</div>\n    @if (showChevron && !disabled) {\n      <span class=\"cps-expansion-panel-chevron\">\n        <cps-icon\n          aria-hidden=\"true\"\n          icon=\"chevron-down\"\n          size=\"small\"\n          color=\"text-dark\">\n        </cps-icon>\n      </span>\n    }\n  </div>\n  <div\n    class=\"cps-expansion-panel-content\"\n    #panelContentElem\n    [id]=\"contentPanelId\"\n    [attr.aria-hidden]=\"!isExpanded\">\n    <div class=\"cps-expansion-panel-content-inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-expansion-panel{overflow:hidden;font-family:Source Sans Pro,sans-serif;line-height:1.25rem;color:var(--cps-color-text-dark)}:host .cps-expansion-panel-header{border-radius:inherit;border-bottom-color:transparent;display:flex;align-items:center;padding:.625rem 1rem .625rem 1.5rem;font-size:1rem;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .cps-expansion-panel-header:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-expansion-panel-header:active{background-color:var(--cps-color-highlight-active)}:host .cps-expansion-panel-header.disabled{pointer-events:none;color:var(--cps-color-text-mild)}:host .cps-expansion-panel-header:focus-visible{background-color:var(--cps-color-highlight-hover);outline:none;position:relative}:host .cps-expansion-panel-header:focus-visible:before,:host .cps-expansion-panel-header:focus-visible:after{content:\"\";position:absolute;border-radius:inherit}:host .cps-expansion-panel-header:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-expansion-panel-header:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-expansion-panel-header:focus-visible.suppress-focus-visible:before,:host .cps-expansion-panel-header:focus-visible.suppress-focus-visible:after{display:none}:host .cps-expansion-panel-header.keyboard-active{background-color:var(--cps-color-highlight-active)}:host .cps-expansion-panel-prefix-icon{display:flex;align-items:center;margin-right:.75rem;margin-bottom:.125rem}:host .cps-expansion-panel-prefix-icon cps-icon ::ng-deep .cps-icon{width:1.125rem;height:1.125rem}:host .cps-expansion-panel-title{flex:1 0 auto;display:inline-flex;font-weight:600}:host .cps-expansion-panel-chevron{width:1rem;display:flex;align-items:center;transition-duration:.2s;margin-left:.375rem}:host .cps-expansion-panel-content{overflow:auto;color:var(--cps-color-text-dark);font-size:1rem}:host .cps-expansion-panel-content-inner{padding:1rem 1.5rem}:host .cps-expansion-panel.expanded .cps-expansion-panel-content{max-height:31.25rem}:host .cps-expansion-panel.expanded .cps-expansion-panel-chevron{transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }], animations: [
             trigger('panelHeader', [
                 state('hidden', style({
                     borderBottom: ''
@@ -4755,7 +5080,7 @@ class CpsExpansionPanelComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsExpansionPanelComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule, CpsIconComponent], selector: 'cps-expansion-panel', animations: [
+            args: [{ imports: [CpsIconComponent], selector: 'cps-expansion-panel', animations: [
                         trigger('panelHeader', [
                             state('hidden', style({
                                 borderBottom: ''
@@ -4766,7 +5091,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             transition('visible <=> hidden', [animate(transitionType)]),
                             transition('void => *', animate(0))
                         ])
-                    ], template: "<div\n  class=\"cps-expansion-panel\"\n  [class.expanded]=\"isExpanded\"\n  [ngStyle]=\"{\n    'background-color': backgroundColor,\n    'border-radius': borderRadius,\n    width: width,\n    border: bordered ? '1px solid ' + borderColor : ''\n  }\">\n  <div\n    class=\"cps-expansion-panel-header\"\n    [@panelHeader]=\"\n      isExpanded\n        ? {\n            value: 'visible',\n            params: {\n              borderStyle: bordered ? '1px solid ' + borderColor : ''\n            }\n          }\n        : 'hidden'\n    \"\n    [ngClass]=\"{ disabled: disabled }\"\n    [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n    (click)=\"toggleExpansion()\">\n    @if (prefixIcon) {\n      <span class=\"cps-expansion-panel-prefix-icon\">\n        <cps-icon\n          [icon]=\"prefixIcon\"\n          size=\"small\"\n          [color]=\"disabled ? 'text-mild' : 'text-dark'\">\n        </cps-icon>\n      </span>\n    }\n    <div class=\"cps-expansion-panel-title\">{{ headerTitle }}</div>\n    @if (showChevron && !disabled) {\n      <span class=\"cps-expansion-panel-chevron\">\n        <cps-icon icon=\"chevron-down\" size=\"small\" color=\"text-dark\">\n        </cps-icon>\n      </span>\n    }\n  </div>\n  <div class=\"cps-expansion-panel-content\" #panelContentElem>\n    <div class=\"cps-expansion-panel-content-inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-expansion-panel{overflow:hidden;font-family:Source Sans Pro,sans-serif;line-height:20px;color:var(--cps-color-text-dark)}:host .cps-expansion-panel-header{border-bottom-color:transparent;display:flex;align-items:center;padding:10px 16px 10px 24px;font-size:16px;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .cps-expansion-panel-header:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-expansion-panel-header:active{background-color:var(--cps-color-highlight-active)}:host .cps-expansion-panel-header.disabled{pointer-events:none;color:var(--cps-color-text-mild)}:host .cps-expansion-panel-prefix-icon{display:flex;align-items:center;margin-right:12px;margin-bottom:2px}:host .cps-expansion-panel-prefix-icon cps-icon ::ng-deep .cps-icon{width:18px;height:18px}:host .cps-expansion-panel-title{flex:1 0 auto;display:inline-flex;font-weight:600}:host .cps-expansion-panel-chevron{width:16px;display:flex;align-items:center;transition-duration:.2s;margin-left:6px}:host .cps-expansion-panel-content{overflow:auto;color:var(--cps-color-text-dark);font-size:16px}:host .cps-expansion-panel-content-inner{padding:16px 24px}:host .cps-expansion-panel.expanded .cps-expansion-panel-content{max-height:500px}:host .cps-expansion-panel.expanded .cps-expansion-panel-chevron{transform:rotate(180deg)}\n"] }]
+                    ], template: "<div\n  class=\"cps-expansion-panel\"\n  [class.expanded]=\"isExpanded\"\n  [style.background-color]=\"cvtBackgroundColor\"\n  [style.border-radius]=\"cvtBorderRadius\"\n  [style.width]=\"cvtWidth\"\n  [style.border]=\"bordered ? '1px solid ' + cvtBorderColor : ''\">\n  <div\n    class=\"cps-expansion-panel-header\"\n    role=\"button\"\n    [attr.tabindex]=\"disabled ? -1 : 0\"\n    [attr.aria-expanded]=\"isExpanded\"\n    [attr.aria-disabled]=\"disabled ? true : null\"\n    [attr.aria-controls]=\"contentPanelId\"\n    [@panelHeader]=\"\n      isExpanded\n        ? {\n            value: 'visible',\n            params: {\n              borderStyle: bordered ? '1px solid ' + cvtBorderColor : ''\n            }\n          }\n        : 'hidden'\n    \"\n    [class.disabled]=\"disabled\"\n    [class.keyboard-active]=\"isKeyboardActive\"\n    [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n    (click)=\"toggleExpansion()\"\n    (keydown)=\"onHeaderKeydown($event)\"\n    (keyup)=\"onHeaderKeyup($event)\">\n    @if (prefixIcon) {\n      <span class=\"cps-expansion-panel-prefix-icon\">\n        <cps-icon\n          aria-hidden=\"true\"\n          [icon]=\"prefixIcon\"\n          size=\"small\"\n          [color]=\"disabled ? 'text-mild' : 'text-dark'\">\n        </cps-icon>\n      </span>\n    }\n    <div class=\"cps-expansion-panel-title\">{{ headerTitle }}</div>\n    @if (showChevron && !disabled) {\n      <span class=\"cps-expansion-panel-chevron\">\n        <cps-icon\n          aria-hidden=\"true\"\n          icon=\"chevron-down\"\n          size=\"small\"\n          color=\"text-dark\">\n        </cps-icon>\n      </span>\n    }\n  </div>\n  <div\n    class=\"cps-expansion-panel-content\"\n    #panelContentElem\n    [id]=\"contentPanelId\"\n    [attr.aria-hidden]=\"!isExpanded\">\n    <div class=\"cps-expansion-panel-content-inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-expansion-panel{overflow:hidden;font-family:Source Sans Pro,sans-serif;line-height:1.25rem;color:var(--cps-color-text-dark)}:host .cps-expansion-panel-header{border-radius:inherit;border-bottom-color:transparent;display:flex;align-items:center;padding:.625rem 1rem .625rem 1.5rem;font-size:1rem;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .cps-expansion-panel-header:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-expansion-panel-header:active{background-color:var(--cps-color-highlight-active)}:host .cps-expansion-panel-header.disabled{pointer-events:none;color:var(--cps-color-text-mild)}:host .cps-expansion-panel-header:focus-visible{background-color:var(--cps-color-highlight-hover);outline:none;position:relative}:host .cps-expansion-panel-header:focus-visible:before,:host .cps-expansion-panel-header:focus-visible:after{content:\"\";position:absolute;border-radius:inherit}:host .cps-expansion-panel-header:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-expansion-panel-header:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-expansion-panel-header:focus-visible.suppress-focus-visible:before,:host .cps-expansion-panel-header:focus-visible.suppress-focus-visible:after{display:none}:host .cps-expansion-panel-header.keyboard-active{background-color:var(--cps-color-highlight-active)}:host .cps-expansion-panel-prefix-icon{display:flex;align-items:center;margin-right:.75rem;margin-bottom:.125rem}:host .cps-expansion-panel-prefix-icon cps-icon ::ng-deep .cps-icon{width:1.125rem;height:1.125rem}:host .cps-expansion-panel-title{flex:1 0 auto;display:inline-flex;font-weight:600}:host .cps-expansion-panel-chevron{width:1rem;display:flex;align-items:center;transition-duration:.2s;margin-left:.375rem}:host .cps-expansion-panel-content{overflow:auto;color:var(--cps-color-text-dark);font-size:1rem}:host .cps-expansion-panel-content-inner{padding:1rem 1.5rem}:host .cps-expansion-panel.expanded .cps-expansion-panel-content{max-height:31.25rem}:host .cps-expansion-panel.expanded .cps-expansion-panel-chevron{transform:rotate(180deg)}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.AnimationBuilder }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -8519,7 +8844,7 @@ class CpsSchedulerComponent {
         return isNaN(res) ? 0 : res;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsSchedulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsSchedulerComponent, isStandalone: true, selector: "cps-scheduler", inputs: { label: "label", ariaLabel: "ariaLabel", cron: "cron", timeZone: "timeZone", showNotSet: "showNotSet", showAdvanced: "showAdvanced", showMinutes: "showMinutes", showTimeZone: "showTimeZone", defaultTime: "defaultTime", use24HourTime: "use24HourTime", disabled: "disabled", infoTooltip: "infoTooltip" }, outputs: { cronChange: "cronChange", timeZoneChange: "timeZoneChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-scheduler-selector\">\n  <cps-button-toggle\n    data-testid=\"schedule-type-toggle\"\n    [options]=\"scheduleTypes\"\n    [disabled]=\"disabled\"\n    [ariaLabel]=\"ariaLabel\"\n    [label]=\"label\"\n    [infoTooltip]=\"infoTooltip\"\n    [(ngModel)]=\"activeScheduleType\"\n    (ngModelChange)=\"setActiveScheduleType($event)\">\n  </cps-button-toggle>\n</div>\n\n<div\n  class=\"cps-scheduler-container\"\n  [class.cps-scheduler-container-disabled]=\"disabled\">\n  @switch (activeScheduleType) {\n    @case ('Not set') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"not-set-config\"></div>\n    }\n\n    @case ('Minutes') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"minutes-config\">\n        <div class=\"cps-scheduler-tab-pane-row\">\n          Every\n          <cps-select\n            ariaLabel=\"Select minutes frequency\"\n            width=\"4.375rem\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"minutes-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.minutes.minutes\"\n            [options]=\"selectOptions.minutes\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          minute(s)\n        </div>\n      </div>\n    }\n\n    @case ('Hourly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"hourly-config\">\n        <div class=\"cps-scheduler-tab-pane-row\">\n          Every\n          <cps-select\n            ariaLabel=\"Select hours frequency\"\n            width=\"4.375rem\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"hourly-hours-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.hourly.hours\"\n            [options]=\"selectOptions.hours\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          hour(s) on minute\n          <cps-select\n            ariaLabel=\"Select on which minute\"\n            width=\"4.375rem\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"hourly-minutes-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.hourly.minutes\"\n            [options]=\"selectOptions.fullMinutes\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n        </div>\n      </div>\n    }\n\n    @case ('Daily') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"daily-config\">\n        <cps-radio-group\n          ariaLabel=\"Daily schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.daily.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel: 'Repeat every N days at a specific time',\n              value: 'everyDays',\n              disabled: disabled\n            }\"\n            data-testid=\"daily-subtab-everyDays\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.daily.subTab !== 'everyDays'\n              \">\n              Every\n              <cps-select\n                ariaLabel=\"Select days frequency\"\n                width=\"4.375rem\"\n                data-testid=\"daily-every-days-input\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.daily.everyDays.days\"\n                [options]=\"selectOptions.monthDays\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              day(s) at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                data-testid=\"daily-timepicker\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.daily.everyDays)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"onTimeChanged($event, state.daily.everyDays)\">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n          <cps-radio\n            data-testid=\"daily-subtab-everyWeekDay\"\n            [option]=\"{\n              ariaLabel: 'Repeat every working day at a specific time',\n              value: 'everyWeekDay',\n              disabled: disabled\n            }\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              data-testid=\"daily-weekday-config\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.daily.subTab !== 'everyWeekDay'\n              \">\n              Every working day at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyWeekDay'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.daily.everyWeekDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.daily.everyWeekDay)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Weekly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"weekly-config\">\n        <div class=\"cps-scheduler-days-checkbox-group\">\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-MON\"\n            label=\"Monday\"\n            [(ngModel)]=\"state.weekly.MON\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-TUE\"\n            label=\"Tuesday\"\n            [(ngModel)]=\"state.weekly.TUE\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-WED\"\n            label=\"Wednesday\"\n            [(ngModel)]=\"state.weekly.WED\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-THU\"\n            label=\"Thursday\"\n            [(ngModel)]=\"state.weekly.THU\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-FRI\"\n            label=\"Friday\"\n            [(ngModel)]=\"state.weekly.FRI\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-SAT\"\n            label=\"Saturday\"\n            [(ngModel)]=\"state.weekly.SAT\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-SUN\"\n            label=\"Sunday\"\n            [(ngModel)]=\"state.weekly.SUN\">\n          </cps-checkbox>\n        </div>\n        <div class=\"cps-scheduler-tab-pane-row\">\n          at\n          <cps-timepicker\n            ariaLabel=\"Time\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-timepicker\"\n            [use24HourTime]=\"use24HourTime\"\n            [mandatoryValue]=\"true\"\n            [value]=\"formatTimeValue(state.weekly)\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"onTimeChanged($event, state.weekly)\">\n          </cps-timepicker>\n        </div>\n      </div>\n    }\n\n    @case ('Monthly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"monthly-config\">\n        <cps-radio-group\n          ariaLabel=\"Monthly schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.monthly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat every N months on a selected day at a chosen time, nearest weekday optional',\n              value: 'specificDay',\n              disabled: disabled\n            }\"\n            data-testid=\"monthly-subtab-specificDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.monthly.subTab !== 'specificDay'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select day of month\"\n                width=\"7.5rem\"\n                data-testid=\"monthly-day-select\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificDay.day\"\n                [options]=\"selectOptions.monthDaysWithLasts\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of every\n              <cps-select\n                ariaLabel=\"Select months frequency\"\n                width=\"4.375rem\"\n                data-testid=\"monthly-months-input\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificDay.months\"\n                [options]=\"selectOptions.monthsNumeric\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              month(s) at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.monthly.specificDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.monthly.specificDay)\n                \">\n              </cps-timepicker>\n              <cps-checkbox\n                data-testid=\"monthly-weekday-toggle\"\n                (valueChanged)=\"regenerateCron()\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                label=\"During the nearest weekday\"\n                [(ngModel)]=\"state.monthly.runOnWeekday\"\n                class=\"cps-scheduler-nearest-weekday-checkbox\">\n              </cps-checkbox>\n            </div>\n          </cps-radio>\n\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat every N months on a weekday pattern from a chosen month at a chosen time',\n              value: 'specificWeekDay',\n              disabled: disabled\n            }\"\n            data-testid=\"monthly-subtab-specificWeekDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.monthly.subTab !== 'specificWeekDay'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select weekday occurrence\"\n                width=\"6.625rem\"\n                data-testid=\"monthly-week-select\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.monthWeek\"\n                [options]=\"selectOptions.monthWeeks\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              <cps-select\n                ariaLabel=\"Select weekday\"\n                width=\"8.125rem\"\n                data-testid=\"monthly-weekday-select\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.day\"\n                [options]=\"selectOptions.days\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of every\n              <cps-select\n                ariaLabel=\"Select months frequency\"\n                width=\"5.625rem\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                data-testid=\"monthly-weekday-months-input\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.months\"\n                [options]=\"selectOptions.monthsNumeric\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              month(s) starting in\n              <cps-select\n                ariaLabel=\"Select starting month\"\n                width=\"7.5rem\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                data-testid=\"monthly-weekday-start-month-select\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.startMonth\"\n                [options]=\"selectOptions.months\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                data-testid=\"monthly-weekday-timepicker\"\n                [value]=\"formatTimeValue(state.monthly.specificWeekDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.monthly.specificWeekDay)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Yearly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"yearly-config\">\n        <cps-radio-group\n          ariaLabel=\"Yearly schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.yearly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat in a selected month on a selected day at a chosen time, nearest weekday optional',\n              value: 'specificMonthDay',\n              disabled: disabled\n            }\"\n            data-testid=\"yearly-subtab-specificMonthDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.yearly.subTab !== 'specificMonthDay'\n              \">\n              Every\n              <cps-select\n                ariaLabel=\"Select month\"\n                width=\"7.5rem\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthDay.month\"\n                [options]=\"selectOptions.months\"\n                data-testid=\"yearly-month-select\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              on the\n              <cps-select\n                ariaLabel=\"Select day of month\"\n                width=\"7.5rem\"\n                data-testid=\"yearly-day-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthDay.day\"\n                [options]=\"selectOptions.monthDaysWithLasts\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.yearly.specificMonthDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.yearly.specificMonthDay)\n                \">\n              </cps-timepicker>\n              <cps-checkbox\n                data-testid=\"yearly-weekday-toggle\"\n                (valueChanged)=\"regenerateCron()\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                label=\"During the nearest weekday\"\n                [(ngModel)]=\"state.yearly.runOnWeekday\"\n                class=\"cps-scheduler-nearest-weekday-checkbox\">\n              </cps-checkbox>\n            </div>\n          </cps-radio>\n\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat in a selected month on a selected weekday at a chosen time',\n              value: 'specificMonthWeek',\n              disabled: disabled\n            }\"\n            data-testid=\"yearly-subtab-specificMonthWeek\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.yearly.subTab !== 'specificMonthWeek'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select weekday occurrence\"\n                width=\"6.625rem\"\n                data-testid=\"yearly-week-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.monthWeek\"\n                [options]=\"selectOptions.monthWeeks\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              <cps-select\n                ariaLabel=\"Select weekday\"\n                width=\"7.5rem\"\n                data-testid=\"yearly-weekday-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.day\"\n                [options]=\"selectOptions.days\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of\n              <cps-select\n                ariaLabel=\"Select month\"\n                width=\"7.5rem\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.month\"\n                [options]=\"selectOptions.months\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.yearly.specificMonthWeek)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.yearly.specificMonthWeek)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Advanced') {\n      <div data-testid=\"advanced-config\">\n        <form [formGroup]=\"form\">\n          <cps-input\n            ariaLabel=\"Advanced cron expression\"\n            data-testid=\"advanced-cron-input\"\n            [disabled]=\"disabled\"\n            width=\"31.25rem\"\n            placeholder=\"Please enter\"\n            formControlName=\"advanced\"\n            (valueChanged)=\"regenerateCron()\">\n          </cps-input>\n        </form>\n      </div>\n    }\n  }\n\n  @if (cron && showTimeZone) {\n    <div class=\"cps-scheduler-time-zone\" data-testid=\"timezone-selector\">\n      <cps-autocomplete\n        label=\"Time zone\"\n        [disabled]=\"disabled\"\n        data-testid=\"timezone-select\"\n        [(ngModel)]=\"timeZone\"\n        (valueChanged)=\"onTimeZoneChanged($event)\"\n        [returnObject]=\"false\"\n        width=\"18.75rem\"\n        [options]=\"timeZoneOptions\">\n      </cps-autocomplete>\n    </div>\n  }\n</div>\n", styles: [":host .cps-scheduler-selector{margin-bottom:1.5rem}:host .cps-scheduler-container{margin-top:.625rem;margin-left:1rem}:host .cps-scheduler-container .cps-scheduler-select-control{margin-left:.5rem;margin-right:.5rem}:host .cps-scheduler-container .cps-scheduler-days-checkbox-group{max-width:43.75rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(9.375rem,1fr));grid-template-rows:1fr 1fr;grid-gap:1.25rem;margin-bottom:1rem}:host .cps-scheduler-container .cps-scheduler-tab-pane{margin-bottom:1.75rem}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-radio-group ::ng-deep .cps-radio-group-content{margin-left:0!important}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row{display:flex;align-items:center}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row-disabled{color:var(--cps-color-text-mild)}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-nearest-weekday-checkbox{margin-left:1rem}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-timepicker{margin-left:.5rem}:host .cps-scheduler-container-disabled{color:var(--cps-color-text-mild)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "ariaLabel", "options", "multiple", "disabled", "mandatory", "radioNavigation", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { 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: CpsRadioGroupComponent, selector: "cps-radio-group", inputs: ["options", "groupLabel", "ariaLabel", "vertical", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "hint", "hideDetails", "value"], outputs: ["valueChanged", "blurred", "focused"] }, { kind: "component", type: CpsRadioComponent, selector: "cps-radio", inputs: ["option"] }, { kind: "component", type: CpsCheckboxComponent, selector: "cps-checkbox", inputs: ["label", "ariaLabel", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "icon", "iconColor", "value"], outputs: ["valueChanged"] }, { 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: CpsTimepickerComponent, selector: "cps-timepicker", inputs: ["label", "ariaLabel", "disabled", "use24HourTime", "withSeconds", "hint", "hideDetails", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "mandatoryValue", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "validating", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsSchedulerComponent, isStandalone: true, selector: "cps-scheduler", inputs: { label: "label", ariaLabel: "ariaLabel", cron: "cron", timeZone: "timeZone", showNotSet: "showNotSet", showAdvanced: "showAdvanced", showMinutes: "showMinutes", showTimeZone: "showTimeZone", defaultTime: "defaultTime", use24HourTime: "use24HourTime", disabled: "disabled", infoTooltip: "infoTooltip" }, outputs: { cronChange: "cronChange", timeZoneChange: "timeZoneChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-scheduler-selector\">\n  <cps-button-toggle\n    data-testid=\"schedule-type-toggle\"\n    [options]=\"scheduleTypes\"\n    [disabled]=\"disabled\"\n    [ariaLabel]=\"ariaLabel\"\n    [label]=\"label\"\n    [infoTooltip]=\"infoTooltip\"\n    [(ngModel)]=\"activeScheduleType\"\n    (ngModelChange)=\"setActiveScheduleType($event)\">\n  </cps-button-toggle>\n</div>\n\n<div\n  class=\"cps-scheduler-container\"\n  [class.cps-scheduler-container-disabled]=\"disabled\">\n  @switch (activeScheduleType) {\n    @case ('Not set') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"not-set-config\"></div>\n    }\n\n    @case ('Minutes') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"minutes-config\">\n        <div class=\"cps-scheduler-tab-pane-row\">\n          Every\n          <cps-select\n            ariaLabel=\"Select minutes frequency\"\n            width=\"4.375rem\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"minutes-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.minutes.minutes\"\n            [options]=\"selectOptions.minutes\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          minute(s)\n        </div>\n      </div>\n    }\n\n    @case ('Hourly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"hourly-config\">\n        <div class=\"cps-scheduler-tab-pane-row\">\n          Every\n          <cps-select\n            ariaLabel=\"Select hours frequency\"\n            width=\"4.375rem\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"hourly-hours-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.hourly.hours\"\n            [options]=\"selectOptions.hours\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          hour(s) on minute\n          <cps-select\n            ariaLabel=\"Select on which minute\"\n            width=\"4.375rem\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"hourly-minutes-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.hourly.minutes\"\n            [options]=\"selectOptions.fullMinutes\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n        </div>\n      </div>\n    }\n\n    @case ('Daily') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"daily-config\">\n        <cps-radio-group\n          ariaLabel=\"Daily schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.daily.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel: 'Repeat every N days at a specific time',\n              value: 'everyDays',\n              disabled: disabled\n            }\"\n            data-testid=\"daily-subtab-everyDays\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.daily.subTab !== 'everyDays'\n              \">\n              Every\n              <cps-select\n                ariaLabel=\"Select days frequency\"\n                width=\"4.375rem\"\n                data-testid=\"daily-every-days-input\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.daily.everyDays.days\"\n                [options]=\"selectOptions.monthDays\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              day(s) at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                data-testid=\"daily-timepicker\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.daily.everyDays)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"onTimeChanged($event, state.daily.everyDays)\">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n          <cps-radio\n            data-testid=\"daily-subtab-everyWeekDay\"\n            [option]=\"{\n              ariaLabel: 'Repeat every working day at a specific time',\n              value: 'everyWeekDay',\n              disabled: disabled\n            }\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              data-testid=\"daily-weekday-config\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.daily.subTab !== 'everyWeekDay'\n              \">\n              Every working day at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyWeekDay'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.daily.everyWeekDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.daily.everyWeekDay)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Weekly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"weekly-config\">\n        <div class=\"cps-scheduler-days-checkbox-group\">\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-MON\"\n            label=\"Monday\"\n            [(ngModel)]=\"state.weekly.MON\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-TUE\"\n            label=\"Tuesday\"\n            [(ngModel)]=\"state.weekly.TUE\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-WED\"\n            label=\"Wednesday\"\n            [(ngModel)]=\"state.weekly.WED\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-THU\"\n            label=\"Thursday\"\n            [(ngModel)]=\"state.weekly.THU\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-FRI\"\n            label=\"Friday\"\n            [(ngModel)]=\"state.weekly.FRI\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-SAT\"\n            label=\"Saturday\"\n            [(ngModel)]=\"state.weekly.SAT\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-SUN\"\n            label=\"Sunday\"\n            [(ngModel)]=\"state.weekly.SUN\">\n          </cps-checkbox>\n        </div>\n        <div class=\"cps-scheduler-tab-pane-row\">\n          at\n          <cps-timepicker\n            ariaLabel=\"Time\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-timepicker\"\n            [use24HourTime]=\"use24HourTime\"\n            [mandatoryValue]=\"true\"\n            [value]=\"formatTimeValue(state.weekly)\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"onTimeChanged($event, state.weekly)\">\n          </cps-timepicker>\n        </div>\n      </div>\n    }\n\n    @case ('Monthly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"monthly-config\">\n        <cps-radio-group\n          ariaLabel=\"Monthly schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.monthly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat every N months on a selected day at a chosen time, nearest weekday optional',\n              value: 'specificDay',\n              disabled: disabled\n            }\"\n            data-testid=\"monthly-subtab-specificDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.monthly.subTab !== 'specificDay'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select day of month\"\n                width=\"7.5rem\"\n                data-testid=\"monthly-day-select\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificDay.day\"\n                [options]=\"selectOptions.monthDaysWithLasts\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of every\n              <cps-select\n                ariaLabel=\"Select months frequency\"\n                width=\"4.375rem\"\n                data-testid=\"monthly-months-input\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificDay.months\"\n                [options]=\"selectOptions.monthsNumeric\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              month(s) at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.monthly.specificDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.monthly.specificDay)\n                \">\n              </cps-timepicker>\n              <cps-checkbox\n                data-testid=\"monthly-weekday-toggle\"\n                (valueChanged)=\"regenerateCron()\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                label=\"During the nearest weekday\"\n                [(ngModel)]=\"state.monthly.runOnWeekday\"\n                class=\"cps-scheduler-nearest-weekday-checkbox\">\n              </cps-checkbox>\n            </div>\n          </cps-radio>\n\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat every N months on a weekday pattern from a chosen month at a chosen time',\n              value: 'specificWeekDay',\n              disabled: disabled\n            }\"\n            data-testid=\"monthly-subtab-specificWeekDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.monthly.subTab !== 'specificWeekDay'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select weekday occurrence\"\n                width=\"6.625rem\"\n                data-testid=\"monthly-week-select\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.monthWeek\"\n                [options]=\"selectOptions.monthWeeks\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              <cps-select\n                ariaLabel=\"Select weekday\"\n                width=\"8.125rem\"\n                data-testid=\"monthly-weekday-select\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.day\"\n                [options]=\"selectOptions.days\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of every\n              <cps-select\n                ariaLabel=\"Select months frequency\"\n                width=\"5.625rem\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                data-testid=\"monthly-weekday-months-input\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.months\"\n                [options]=\"selectOptions.monthsNumeric\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              month(s) starting in\n              <cps-select\n                ariaLabel=\"Select starting month\"\n                width=\"7.5rem\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                data-testid=\"monthly-weekday-start-month-select\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.startMonth\"\n                [options]=\"selectOptions.months\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                data-testid=\"monthly-weekday-timepicker\"\n                [value]=\"formatTimeValue(state.monthly.specificWeekDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.monthly.specificWeekDay)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Yearly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"yearly-config\">\n        <cps-radio-group\n          ariaLabel=\"Yearly schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.yearly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat in a selected month on a selected day at a chosen time, nearest weekday optional',\n              value: 'specificMonthDay',\n              disabled: disabled\n            }\"\n            data-testid=\"yearly-subtab-specificMonthDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.yearly.subTab !== 'specificMonthDay'\n              \">\n              Every\n              <cps-select\n                ariaLabel=\"Select month\"\n                width=\"7.5rem\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthDay.month\"\n                [options]=\"selectOptions.months\"\n                data-testid=\"yearly-month-select\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              on the\n              <cps-select\n                ariaLabel=\"Select day of month\"\n                width=\"7.5rem\"\n                data-testid=\"yearly-day-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthDay.day\"\n                [options]=\"selectOptions.monthDaysWithLasts\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.yearly.specificMonthDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.yearly.specificMonthDay)\n                \">\n              </cps-timepicker>\n              <cps-checkbox\n                data-testid=\"yearly-weekday-toggle\"\n                (valueChanged)=\"regenerateCron()\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                label=\"During the nearest weekday\"\n                [(ngModel)]=\"state.yearly.runOnWeekday\"\n                class=\"cps-scheduler-nearest-weekday-checkbox\">\n              </cps-checkbox>\n            </div>\n          </cps-radio>\n\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat in a selected month on a selected weekday at a chosen time',\n              value: 'specificMonthWeek',\n              disabled: disabled\n            }\"\n            data-testid=\"yearly-subtab-specificMonthWeek\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.yearly.subTab !== 'specificMonthWeek'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select weekday occurrence\"\n                width=\"6.625rem\"\n                data-testid=\"yearly-week-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.monthWeek\"\n                [options]=\"selectOptions.monthWeeks\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              <cps-select\n                ariaLabel=\"Select weekday\"\n                width=\"7.5rem\"\n                data-testid=\"yearly-weekday-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.day\"\n                [options]=\"selectOptions.days\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of\n              <cps-select\n                ariaLabel=\"Select month\"\n                width=\"7.5rem\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.month\"\n                [options]=\"selectOptions.months\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.yearly.specificMonthWeek)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.yearly.specificMonthWeek)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Advanced') {\n      <div data-testid=\"advanced-config\">\n        <form [formGroup]=\"form\">\n          <cps-input\n            ariaLabel=\"Advanced cron expression\"\n            data-testid=\"advanced-cron-input\"\n            [disabled]=\"disabled\"\n            width=\"31.25rem\"\n            placeholder=\"Please enter\"\n            formControlName=\"advanced\"\n            (valueChanged)=\"regenerateCron()\">\n          </cps-input>\n        </form>\n      </div>\n    }\n  }\n\n  @if (cron && showTimeZone) {\n    <div class=\"cps-scheduler-time-zone\" data-testid=\"timezone-selector\">\n      <cps-autocomplete\n        label=\"Time zone\"\n        [disabled]=\"disabled\"\n        data-testid=\"timezone-select\"\n        [(ngModel)]=\"timeZone\"\n        (valueChanged)=\"onTimeZoneChanged($event)\"\n        [returnObject]=\"false\"\n        width=\"18.75rem\"\n        [options]=\"timeZoneOptions\">\n      </cps-autocomplete>\n    </div>\n  }\n</div>\n", styles: [":host .cps-scheduler-selector{margin-bottom:1.5rem}:host .cps-scheduler-container{margin-top:.625rem;margin-left:1rem}:host .cps-scheduler-container .cps-scheduler-select-control{margin-left:.5rem;margin-right:.5rem}:host .cps-scheduler-container .cps-scheduler-days-checkbox-group{max-width:43.75rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(9.375rem,1fr));grid-template-rows:1fr 1fr;grid-gap:1.25rem;margin-bottom:1rem}:host .cps-scheduler-container .cps-scheduler-tab-pane{margin-bottom:1.75rem}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-radio-group ::ng-deep .cps-radio-group-content{margin-left:0!important}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row{display:flex;align-items:center}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row-disabled{color:var(--cps-color-text-mild)}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-nearest-weekday-checkbox{margin-left:1rem}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-timepicker{margin-left:.5rem}:host .cps-scheduler-container-disabled{color:var(--cps-color-text-mild)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "ariaLabel", "options", "multiple", "disabled", "mandatory", "radioNavigation", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { 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: CpsRadioGroupComponent, selector: "cps-radio-group", inputs: ["options", "groupLabel", "ariaLabel", "vertical", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "hint", "hideDetails", "value"], outputs: ["valueChanged", "blurred", "focused"] }, { kind: "component", type: CpsRadioComponent, selector: "cps-radio", inputs: ["option"] }, { kind: "component", type: CpsCheckboxComponent, selector: "cps-checkbox", inputs: ["label", "ariaLabel", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "icon", "iconColor", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "ariaLabel", "inputRole", "ariaExpanded", "ariaHasPopup", "ariaControls", "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: CpsTimepickerComponent, selector: "cps-timepicker", inputs: ["label", "ariaLabel", "disabled", "use24HourTime", "withSeconds", "hint", "hideDetails", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "mandatoryValue", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "validating", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsSchedulerComponent, decorators: [{
             type: Component,
@@ -8717,16 +9042,20 @@ class CpsSwitchComponent {
     get value() {
         return this._value;
     }
-    constructor(_control, _elementRef) {
+    constructor(_control) {
         this._control = _control;
-        this._elementRef = _elementRef;
         /**
-         * Label of the component.
+         * Label of the switch component.
          * @group Props
          */
         this.label = '';
         /**
-         * Determines whether the component is disabled.
+         * Aria label for the switch component, used for accessibility, it takes precedence over label.
+         * @group Props
+         */
+        this.ariaLabel = '';
+        /**
+         * Determines whether the switch component is disabled.
          * @group Props
          */
         this.disabled = false;
@@ -8770,6 +9099,12 @@ class CpsSwitchComponent {
             this._control.valueAccessor = this;
         }
     }
+    ngOnInit() {
+        logMissingAriaLabelError('CpsSwitchComponent', this.label, this.ariaLabel);
+    }
+    ngOnChanges() {
+        logMissingAriaLabelError('CpsSwitchComponent', this.label, this.ariaLabel);
+    }
     registerOnChange(fn) {
         this.onChange = fn;
     }
@@ -8793,19 +9128,21 @@ class CpsSwitchComponent {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     setDisabledState(_disabled) { }
     focus() {
-        this._elementRef?.nativeElement?.querySelector('input')?.focus();
+        this.switchInput?.nativeElement?.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsSwitchComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsSwitchComponent, isStandalone: true, selector: "cps-switch", inputs: { label: "label", disabled: "disabled", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", value: "value" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<div class=\"cps-switch-container\">\n  <label class=\"cps-switch\">\n    <input\n      type=\"checkbox\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      (change)=\"updateValueEvent($event)\" />\n    <span class=\"cps-switch-slider\"></span>\n  </label>\n  @if (label) {\n    <span\n      class=\"cps-switch-label\"\n      [ngClass]=\"{ 'cps-switch-label-disabled': disabled }\"\n      >{{ label }}</span\n    >\n  }\n  @if (infoTooltip) {\n    <cps-info-circle\n      class=\"cps-switch-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  }\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .cps-switch-container{line-height:normal;display:flex;align-items:center}:host .cps-switch-container .cps-switch{position:relative;display:inline-block;width:48px;height:24px}:host .cps-switch-container .cps-switch input{opacity:0;width:0;height:0}:host .cps-switch-container .cps-switch-slider{position:absolute;cursor:pointer;inset:0;background-color:#fff;transition:.2s;border:1px solid var(--cps-color-calm);border-radius:30px}:host .cps-switch-container .cps-switch-label{font-size:16px;font-family:Source Sans Pro,sans-serif;font-style:normal;color:var(--cps-color-text-dark);margin-left:10px;cursor:default}:host .cps-switch-container .cps-switch-label-disabled{color:var(--cps-color-text-light)}:host .cps-switch-container .cps-switch-slider:before{position:absolute;content:\"\";height:14px;width:14px;border-radius:20px;left:4px;bottom:4px;background-color:var(--cps-color-calm);transition:.2s}:host .cps-switch-container input:checked+.cps-switch-slider{background-color:var(--cps-color-calm)}:host .cps-switch-container input:focus+.cps-switch-slider{box-shadow:0 0 1px var(--cps-color-calm)}:host .cps-switch-container input:checked+.cps-switch-slider:before{transform:translate(24px);background-color:#fff}:host .cps-switch-container input:disabled~.cps-switch-slider{cursor:default;border-color:var(--cps-color-text-lightest)}:host .cps-switch-container input:disabled:checked~.cps-switch-slider{background-color:var(--cps-color-text-lightest)}:host .cps-switch-container input:disabled:not(:checked)~.cps-switch-slider:before{background-color:var(--cps-color-text-lightest)}:host .cps-switch-container .cps-switch-info-circle{margin-left:8px}:host .cps-switch-container .cps-switch-info-circle ::ng-deep cps-icon i{width:14px;height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsSwitchComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsSwitchComponent, isStandalone: true, selector: "cps-switch", inputs: { label: "label", ariaLabel: "ariaLabel", disabled: "disabled", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", value: "value" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "switchInput", first: true, predicate: ["switchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-switch-container\">\n  <label class=\"cps-switch\">\n    <input\n      #switchInput\n      type=\"checkbox\"\n      role=\"switch\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      (change)=\"updateValueEvent($event)\"\n      [attr.aria-label]=\"ariaLabel || label || null\" />\n    <span class=\"cps-switch-slider\" aria-hidden=\"true\"></span>\n  </label>\n  @if (label) {\n    <span\n      class=\"cps-switch-label\"\n      [ngClass]=\"{ 'cps-switch-label-disabled': disabled }\"\n      aria-hidden=\"true\"\n      >{{ label }}</span\n    >\n  }\n  @if (infoTooltip) {\n    <cps-info-circle\n      class=\"cps-switch-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  }\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .cps-switch-container{line-height:normal;display:flex;align-items:center}:host .cps-switch-container .cps-switch{position:relative;display:inline-block;width:3rem;height:1.5rem}:host .cps-switch-container .cps-switch input{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0}:host .cps-switch-container .cps-switch-slider{position:absolute;cursor:pointer;inset:0;background-color:#fff;transition:.2s;border:.0625rem solid var(--cps-color-calm);border-radius:1.875rem}:host .cps-switch-container .cps-switch-label{font-size:1rem;font-family:Source Sans Pro,sans-serif;font-style:normal;color:var(--cps-color-text-dark);margin-left:.625rem;cursor:default}:host .cps-switch-container .cps-switch-label-disabled{color:var(--cps-color-text-mild)}:host .cps-switch-container .cps-switch-slider:before{position:absolute;content:\"\";height:.875rem;width:.875rem;border-radius:1.25rem;left:.25rem;bottom:.25rem;background-color:var(--cps-color-calm);transition:.2s}:host .cps-switch-container input:checked+.cps-switch-slider{background-color:var(--cps-color-calm)}:host .cps-switch-container .cps-switch:has(input:focus-visible){outline:none;position:relative}:host .cps-switch-container .cps-switch:has(input:focus-visible):before,:host .cps-switch-container .cps-switch:has(input:focus-visible):after{content:\"\";position:absolute;border-radius:1.875rem}:host .cps-switch-container .cps-switch:has(input:focus-visible):before{inset:-.1875rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-switch-container .cps-switch:has(input:focus-visible):after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-switch-container .cps-switch:has(input:focus-visible).suppress-focus-visible:before,:host .cps-switch-container .cps-switch:has(input:focus-visible).suppress-focus-visible:after{display:none}:host .cps-switch-container input:checked+.cps-switch-slider:before{transform:translate(1.5rem);background-color:#fff}:host .cps-switch-container input:disabled~.cps-switch-slider{cursor:default;border-color:var(--cps-color-text-light)}:host .cps-switch-container input:disabled:checked~.cps-switch-slider{background-color:var(--cps-color-text-light)}:host .cps-switch-container input:disabled:not(:checked)~.cps-switch-slider:before{background-color:var(--cps-color-text-light)}:host .cps-switch-container .cps-switch-info-circle{margin-left:.5rem}:host .cps-switch-container .cps-switch-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsSwitchComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule, CpsInfoCircleComponent], selector: 'cps-switch', template: "<div class=\"cps-switch-container\">\n  <label class=\"cps-switch\">\n    <input\n      type=\"checkbox\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      (change)=\"updateValueEvent($event)\" />\n    <span class=\"cps-switch-slider\"></span>\n  </label>\n  @if (label) {\n    <span\n      class=\"cps-switch-label\"\n      [ngClass]=\"{ 'cps-switch-label-disabled': disabled }\"\n      >{{ label }}</span\n    >\n  }\n  @if (infoTooltip) {\n    <cps-info-circle\n      class=\"cps-switch-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  }\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .cps-switch-container{line-height:normal;display:flex;align-items:center}:host .cps-switch-container .cps-switch{position:relative;display:inline-block;width:48px;height:24px}:host .cps-switch-container .cps-switch input{opacity:0;width:0;height:0}:host .cps-switch-container .cps-switch-slider{position:absolute;cursor:pointer;inset:0;background-color:#fff;transition:.2s;border:1px solid var(--cps-color-calm);border-radius:30px}:host .cps-switch-container .cps-switch-label{font-size:16px;font-family:Source Sans Pro,sans-serif;font-style:normal;color:var(--cps-color-text-dark);margin-left:10px;cursor:default}:host .cps-switch-container .cps-switch-label-disabled{color:var(--cps-color-text-light)}:host .cps-switch-container .cps-switch-slider:before{position:absolute;content:\"\";height:14px;width:14px;border-radius:20px;left:4px;bottom:4px;background-color:var(--cps-color-calm);transition:.2s}:host .cps-switch-container input:checked+.cps-switch-slider{background-color:var(--cps-color-calm)}:host .cps-switch-container input:focus+.cps-switch-slider{box-shadow:0 0 1px var(--cps-color-calm)}:host .cps-switch-container input:checked+.cps-switch-slider:before{transform:translate(24px);background-color:#fff}:host .cps-switch-container input:disabled~.cps-switch-slider{cursor:default;border-color:var(--cps-color-text-lightest)}:host .cps-switch-container input:disabled:checked~.cps-switch-slider{background-color:var(--cps-color-text-lightest)}:host .cps-switch-container input:disabled:not(:checked)~.cps-switch-slider:before{background-color:var(--cps-color-text-lightest)}:host .cps-switch-container .cps-switch-info-circle{margin-left:8px}:host .cps-switch-container .cps-switch-info-circle ::ng-deep cps-icon i{width:14px;height:14px}\n"] }]
+            args: [{ imports: [CommonModule, CpsInfoCircleComponent], selector: 'cps-switch', template: "<div class=\"cps-switch-container\">\n  <label class=\"cps-switch\">\n    <input\n      #switchInput\n      type=\"checkbox\"\n      role=\"switch\"\n      [disabled]=\"disabled\"\n      [checked]=\"value\"\n      (change)=\"updateValueEvent($event)\"\n      [attr.aria-label]=\"ariaLabel || label || null\" />\n    <span class=\"cps-switch-slider\" aria-hidden=\"true\"></span>\n  </label>\n  @if (label) {\n    <span\n      class=\"cps-switch-label\"\n      [ngClass]=\"{ 'cps-switch-label-disabled': disabled }\"\n      aria-hidden=\"true\"\n      >{{ label }}</span\n    >\n  }\n  @if (infoTooltip) {\n    <cps-info-circle\n      class=\"cps-switch-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  }\n</div>\n", styles: [":host{min-width:max-content;display:inline-block}:host .cps-switch-container{line-height:normal;display:flex;align-items:center}:host .cps-switch-container .cps-switch{position:relative;display:inline-block;width:3rem;height:1.5rem}:host .cps-switch-container .cps-switch input{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;margin:0}:host .cps-switch-container .cps-switch-slider{position:absolute;cursor:pointer;inset:0;background-color:#fff;transition:.2s;border:.0625rem solid var(--cps-color-calm);border-radius:1.875rem}:host .cps-switch-container .cps-switch-label{font-size:1rem;font-family:Source Sans Pro,sans-serif;font-style:normal;color:var(--cps-color-text-dark);margin-left:.625rem;cursor:default}:host .cps-switch-container .cps-switch-label-disabled{color:var(--cps-color-text-mild)}:host .cps-switch-container .cps-switch-slider:before{position:absolute;content:\"\";height:.875rem;width:.875rem;border-radius:1.25rem;left:.25rem;bottom:.25rem;background-color:var(--cps-color-calm);transition:.2s}:host .cps-switch-container input:checked+.cps-switch-slider{background-color:var(--cps-color-calm)}:host .cps-switch-container .cps-switch:has(input:focus-visible){outline:none;position:relative}:host .cps-switch-container .cps-switch:has(input:focus-visible):before,:host .cps-switch-container .cps-switch:has(input:focus-visible):after{content:\"\";position:absolute;border-radius:1.875rem}:host .cps-switch-container .cps-switch:has(input:focus-visible):before{inset:-.1875rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-switch-container .cps-switch:has(input:focus-visible):after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-switch-container .cps-switch:has(input:focus-visible).suppress-focus-visible:before,:host .cps-switch-container .cps-switch:has(input:focus-visible).suppress-focus-visible:after{display:none}:host .cps-switch-container input:checked+.cps-switch-slider:before{transform:translate(1.5rem);background-color:#fff}:host .cps-switch-container input:disabled~.cps-switch-slider{cursor:default;border-color:var(--cps-color-text-light)}:host .cps-switch-container input:disabled:checked~.cps-switch-slider{background-color:var(--cps-color-text-light)}:host .cps-switch-container input:disabled:not(:checked)~.cps-switch-slider:before{background-color:var(--cps-color-text-light)}:host .cps-switch-container .cps-switch-info-circle{margin-left:.5rem}:host .cps-switch-container .cps-switch-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: i0.ElementRef }], propDecorators: { label: [{
+                }] }], propDecorators: { label: [{
+                type: Input
+            }], ariaLabel: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -8823,6 +9160,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 type: Input
             }], valueChanged: [{
                 type: Output
+            }], switchInput: [{
+                type: ViewChild,
+                args: ['switchInput']
             }] } });
 
 /**
@@ -9905,7 +10245,7 @@ class TableColumnFilterConstraintComponent {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TableColumnFilterConstraintComponent, deps: [{ 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: TableColumnFilterConstraintComponent, isStandalone: true, selector: "table-column-filter-constraint", inputs: { type: "type", field: "field", filterConstraint: "filterConstraint", categoryOptions: "categoryOptions", asButtonToggle: "asButtonToggle", singleSelection: "singleSelection", placeholder: "placeholder", hasApplyButton: "hasApplyButton" }, viewQueries: [{ propertyName: "categoryAutocompleteComponent", first: true, predicate: ["categoryAutocompleteComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@switch (type) {\n  @case ('text') {\n    <cps-input\n      ariaLabel=\"Text filter\"\n      [placeholder]=\"placeholder\"\n      [hideDetails]=\"true\"\n      (keydown.enter)=\"onEnterKeyDown($event)\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      type=\"text\"></cps-input>\n  }\n  @case ('number') {\n    <cps-input\n      ariaLabel=\"Number filter\"\n      [hideDetails]=\"true\"\n      [placeholder]=\"placeholder\"\n      (keydown.enter)=\"onEnterKeyDown($event)\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      type=\"number\"></cps-input>\n  }\n  @case ('boolean') {\n    <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n      <cps-button-toggle\n        ariaLabel=\"Boolean filter\"\n        [options]=\"booleanOptions\"\n        [value]=\"filterConstraint?.value\"\n        (valueChanged)=\"onValueChange($event)\"\n        [mandatory]=\"false\">\n      </cps-button-toggle>\n    </div>\n  }\n  @case ('date') {\n    <cps-datepicker\n      ariaLabel=\"Date filter\"\n      [openOnInputFocus]=\"true\"\n      [hideDetails]=\"true\"\n      [placeholder]=\"placeholder\"\n      [value]=\"filterConstraint?.value\"\n      (keydown.enter)=\"onEnterKeyDown($event)\"\n      (valueChanged)=\"onValueChange($event)\">\n    </cps-datepicker>\n  }\n  @case ('category') {\n    @if (!asButtonToggle) {\n      <cps-autocomplete\n        #categoryAutocompleteComponent\n        ariaLabel=\"Category filter\"\n        class=\"cps-table-col-filter-category-autocomplete\"\n        [placeholder]=\"placeholder\"\n        [options]=\"categories\"\n        [hideDetails]=\"true\"\n        [clearable]=\"true\"\n        [value]=\"filterConstraint?.value\"\n        (valueChanged)=\"onValueChange($event)\"\n        [returnObject]=\"false\"\n        [multiple]=\"!singleSelection\">\n      </cps-autocomplete>\n    }\n    <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n      @if (asButtonToggle) {\n        <cps-button-toggle\n          ariaLabel=\"Category filter\"\n          [options]=\"categories\"\n          [value]=\"filterConstraint?.value\"\n          (valueChanged)=\"onValueChange($event)\"\n          [mandatory]=\"false\"\n          [multiple]=\"!singleSelection\">\n        </cps-button-toggle>\n      }\n    </div>\n  }\n}\n", styles: [":host .cps-table-col-filter-constraint-btn-toggles{display:flex;justify-content:center}:host .cps-table-col-filter-category-autocomplete{min-width:200px;max-width:400px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: CpsDatepickerComponent, selector: "cps-datepicker", inputs: ["label", "ariaLabel", "disabled", "width", "placeholder", "hint", "clearable", "hideDetails", "persistentClear", "showTodayButton", "openOnInputFocus", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "minDate", "maxDate", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "ariaLabel", "options", "multiple", "disabled", "mandatory", "radioNavigation", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "validating", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TableColumnFilterConstraintComponent, isStandalone: true, selector: "table-column-filter-constraint", inputs: { type: "type", field: "field", filterConstraint: "filterConstraint", categoryOptions: "categoryOptions", asButtonToggle: "asButtonToggle", singleSelection: "singleSelection", placeholder: "placeholder", hasApplyButton: "hasApplyButton" }, viewQueries: [{ propertyName: "categoryAutocompleteComponent", first: true, predicate: ["categoryAutocompleteComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@switch (type) {\n  @case ('text') {\n    <cps-input\n      ariaLabel=\"Text filter\"\n      [placeholder]=\"placeholder\"\n      [hideDetails]=\"true\"\n      (keydown.enter)=\"onEnterKeyDown($event)\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      type=\"text\"></cps-input>\n  }\n  @case ('number') {\n    <cps-input\n      ariaLabel=\"Number filter\"\n      [hideDetails]=\"true\"\n      [placeholder]=\"placeholder\"\n      (keydown.enter)=\"onEnterKeyDown($event)\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      type=\"number\"></cps-input>\n  }\n  @case ('boolean') {\n    <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n      <cps-button-toggle\n        ariaLabel=\"Boolean filter\"\n        [options]=\"booleanOptions\"\n        [value]=\"filterConstraint?.value\"\n        (valueChanged)=\"onValueChange($event)\"\n        [mandatory]=\"false\">\n      </cps-button-toggle>\n    </div>\n  }\n  @case ('date') {\n    <cps-datepicker\n      ariaLabel=\"Date filter\"\n      [openOnInputFocus]=\"true\"\n      [hideDetails]=\"true\"\n      [placeholder]=\"placeholder\"\n      [value]=\"filterConstraint?.value\"\n      (keydown.enter)=\"onEnterKeyDown($event)\"\n      (valueChanged)=\"onValueChange($event)\">\n    </cps-datepicker>\n  }\n  @case ('category') {\n    @if (!asButtonToggle) {\n      <cps-autocomplete\n        #categoryAutocompleteComponent\n        ariaLabel=\"Category filter\"\n        class=\"cps-table-col-filter-category-autocomplete\"\n        [placeholder]=\"placeholder\"\n        [options]=\"categories\"\n        [hideDetails]=\"true\"\n        [clearable]=\"true\"\n        [value]=\"filterConstraint?.value\"\n        (valueChanged)=\"onValueChange($event)\"\n        [returnObject]=\"false\"\n        [multiple]=\"!singleSelection\">\n      </cps-autocomplete>\n    }\n    <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n      @if (asButtonToggle) {\n        <cps-button-toggle\n          ariaLabel=\"Category filter\"\n          [options]=\"categories\"\n          [value]=\"filterConstraint?.value\"\n          (valueChanged)=\"onValueChange($event)\"\n          [mandatory]=\"false\"\n          [multiple]=\"!singleSelection\">\n        </cps-button-toggle>\n      }\n    </div>\n  }\n}\n", styles: [":host .cps-table-col-filter-constraint-btn-toggles{display:flex;justify-content:center}:host .cps-table-col-filter-category-autocomplete{min-width:200px;max-width:400px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "ariaLabel", "inputRole", "ariaExpanded", "ariaHasPopup", "ariaControls", "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: CpsDatepickerComponent, selector: "cps-datepicker", inputs: ["label", "ariaLabel", "disabled", "width", "dateFormat", "placeholder", "hint", "clearable", "hideDetails", "persistentClear", "showTodayButton", "openOnInputFocus", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "minDate", "maxDate", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "ariaLabel", "options", "multiple", "disabled", "mandatory", "radioNavigation", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "validating", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TableColumnFilterConstraintComponent, decorators: [{
             type: Component,
@@ -10266,7 +10606,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 +11643,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", "inputRole", "ariaExpanded", "ariaHasPopup", "ariaControls", "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,
@@ -11649,6 +11989,8 @@ class CpsTagComponent {
          */
         this.valueChanged = new EventEmitter();
         this.classesList = [];
+        this.pressing = false;
+        this.cvtColor = '';
         this._value = false;
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = (_event) => { };
@@ -11658,18 +12000,29 @@ class CpsTagComponent {
             this._control.valueAccessor = this;
         }
     }
-    ngOnChanges() {
-        this.color = getCSSColor(this.color, this.document);
+    ngOnInit() {
+        this.cvtColor = getCSSColor(this.color, this.document);
         this.setClasses();
+        this._logMissingLabelError();
+    }
+    ngOnChanges(changes) {
+        if (changes.color) {
+            this.cvtColor = getCSSColor(this.color, this.document);
+        }
+        if (changes.selectable || changes.disabled) {
+            this.setClasses();
+        }
+        this._logMissingLabelError();
     }
     setClasses() {
-        this.classesList = ['cps-tag'];
+        const classes = ['cps-tag'];
         if (this.selectable) {
-            this.classesList.push('cps-tag--selectable');
+            classes.push('cps-tag--selectable');
         }
         if (this.disabled) {
-            this.classesList.push('cps-tag--disabled');
+            classes.push('cps-tag--disabled');
         }
+        this.classesList = classes;
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -11680,7 +12033,18 @@ class CpsTagComponent {
     writeValue(value) {
         this.value = value;
     }
+    handleEnterKeydown(event) {
+        if (event.repeat)
+            return;
+        event.preventDefault();
+        this.toggleSelected();
+    }
+    handleSpaceKeydown(event) {
+        event.preventDefault();
+        this.pressing = true;
+    }
     toggleSelected() {
+        this.pressing = false;
         if (this.disabled || !this.selectable)
             return;
         this._updateValue(!this.value);
@@ -11690,12 +12054,17 @@ class CpsTagComponent {
         this.onChange(value);
         this.valueChanged.emit(value);
     }
+    _logMissingLabelError() {
+        if (!this.label?.trim()) {
+            console.error('CpsTagComponent: the tag must have a label.');
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsTagComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: CpsTagComponent, isStandalone: true, selector: "cps-tag", inputs: { label: "label", color: "color", disabled: "disabled", selectable: "selectable", value: "value" }, outputs: { valueChanged: "valueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div\n  [ngClass]=\"classesList\"\n  [class.unselected]=\"!value && selectable\"\n  [ngStyle]=\"{ borderColor: color }\"\n  (click)=\"toggleSelected()\">\n  <p>{{ label }}</p>\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-tag{font-family:Source Sans Pro,sans-serif;min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .cps-tag.cps-tag--selectable{cursor:pointer}:host .cps-tag.cps-tag--selectable:not(:active):not(:disabled){box-shadow:1px 3px 4px #0000001a}:host .cps-tag.cps-tag--disabled{pointer-events:none;border-color:var(--cps-color-line-dark)!important}:host .cps-tag.cps-tag--disabled p{color:var(--cps-color-text-light)}:host .cps-tag.unselected{border-color:var(--cps-color-text-light)!important}:host .cps-tag p{margin:0;font-size:11px;color:var(--cps-color-text-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: CpsTagComponent, isStandalone: true, selector: "cps-tag", inputs: { label: "label", color: "color", disabled: "disabled", selectable: "selectable", value: "value" }, outputs: { valueChanged: "valueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div\n  [ngClass]=\"classesList\"\n  [class.unselected]=\"!value && selectable\"\n  [style.borderColor]=\"cvtColor\"\n  [attr.role]=\"selectable ? 'checkbox' : null\"\n  [attr.aria-checked]=\"selectable ? value : null\"\n  [attr.aria-disabled]=\"selectable && disabled ? true : null\"\n  [attr.tabindex]=\"selectable ? (disabled ? -1 : 0) : null\"\n  (click)=\"toggleSelected()\"\n  (keydown.enter)=\"handleEnterKeydown($event)\"\n  [class.cps-tag--pressing]=\"pressing\"\n  (keydown.space)=\"handleSpaceKeydown($event)\"\n  (keyup.space)=\"toggleSelected()\">\n  <span>{{ label }}</span>\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-tag{font-family:Source Sans Pro,sans-serif;min-height:1.5625rem;align-items:center;padding:0 .625rem;background-color:#fff;display:inline-flex;cursor:default;border:solid .0625rem;border-left:solid .25rem}:host .cps-tag.cps-tag--selectable{cursor:pointer}:host .cps-tag.cps-tag--selectable:not(:active):not(.cps-tag--pressing){box-shadow:.0625rem .1875rem .25rem #0000001a}:host .cps-tag.cps-tag--selectable:focus{outline:none}:host .cps-tag.cps-tag--selectable:focus-visible{outline:none;position:relative}:host .cps-tag.cps-tag--selectable:focus-visible:before,:host .cps-tag.cps-tag--selectable:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-tag.cps-tag--selectable:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-tag.cps-tag--selectable:focus-visible:after{inset:-.1875rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-tag.cps-tag--selectable:focus-visible.suppress-focus-visible:before,:host .cps-tag.cps-tag--selectable:focus-visible.suppress-focus-visible:after{display:none}:host .cps-tag.cps-tag--disabled{pointer-events:none;border-color:var(--cps-color-text-lightest)!important}:host .cps-tag.cps-tag--disabled span{color:var(--cps-color-text-mild)}:host .cps-tag.unselected{border-color:var(--cps-color-text-light)!important}:host .cps-tag span{margin:0;font-size:.6875rem;color:var(--cps-color-text-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsTagComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule], selector: 'cps-tag', template: "<div\n  [ngClass]=\"classesList\"\n  [class.unselected]=\"!value && selectable\"\n  [ngStyle]=\"{ borderColor: color }\"\n  (click)=\"toggleSelected()\">\n  <p>{{ label }}</p>\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-tag{font-family:Source Sans Pro,sans-serif;min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .cps-tag.cps-tag--selectable{cursor:pointer}:host .cps-tag.cps-tag--selectable:not(:active):not(:disabled){box-shadow:1px 3px 4px #0000001a}:host .cps-tag.cps-tag--disabled{pointer-events:none;border-color:var(--cps-color-line-dark)!important}:host .cps-tag.cps-tag--disabled p{color:var(--cps-color-text-light)}:host .cps-tag.unselected{border-color:var(--cps-color-text-light)!important}:host .cps-tag p{margin:0;font-size:11px;color:var(--cps-color-text-dark)}\n"] }]
+            args: [{ imports: [CommonModule], selector: 'cps-tag', template: "<div\n  [ngClass]=\"classesList\"\n  [class.unselected]=\"!value && selectable\"\n  [style.borderColor]=\"cvtColor\"\n  [attr.role]=\"selectable ? 'checkbox' : null\"\n  [attr.aria-checked]=\"selectable ? value : null\"\n  [attr.aria-disabled]=\"selectable && disabled ? true : null\"\n  [attr.tabindex]=\"selectable ? (disabled ? -1 : 0) : null\"\n  (click)=\"toggleSelected()\"\n  (keydown.enter)=\"handleEnterKeydown($event)\"\n  [class.cps-tag--pressing]=\"pressing\"\n  (keydown.space)=\"handleSpaceKeydown($event)\"\n  (keyup.space)=\"toggleSelected()\">\n  <span>{{ label }}</span>\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-tag{font-family:Source Sans Pro,sans-serif;min-height:1.5625rem;align-items:center;padding:0 .625rem;background-color:#fff;display:inline-flex;cursor:default;border:solid .0625rem;border-left:solid .25rem}:host .cps-tag.cps-tag--selectable{cursor:pointer}:host .cps-tag.cps-tag--selectable:not(:active):not(.cps-tag--pressing){box-shadow:.0625rem .1875rem .25rem #0000001a}:host .cps-tag.cps-tag--selectable:focus{outline:none}:host .cps-tag.cps-tag--selectable:focus-visible{outline:none;position:relative}:host .cps-tag.cps-tag--selectable:focus-visible:before,:host .cps-tag.cps-tag--selectable:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-tag.cps-tag--selectable:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-tag.cps-tag--selectable:focus-visible:after{inset:-.1875rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-tag.cps-tag--selectable:focus-visible.suppress-focus-visible:before,:host .cps-tag.cps-tag--selectable:focus-visible.suppress-focus-visible:after{display:none}:host .cps-tag.cps-tag--disabled{pointer-events:none;border-color:var(--cps-color-text-lightest)!important}:host .cps-tag.cps-tag--disabled span{color:var(--cps-color-text-mild)}:host .cps-tag.unselected{border-color:var(--cps-color-text-light)!important}:host .cps-tag span{margin:0;font-size:.6875rem;color:var(--cps-color-text-dark)}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -14912,7 +15281,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", "inputRole", "ariaExpanded", "ariaHasPopup", "ariaControls", "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 +16315,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 +16372,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,
@@ -16189,6 +16558,17 @@ var CpsNotificationType;
 })(CpsNotificationType || (CpsNotificationType = {}));
 
 class CpsToastComponent {
+    get isPolite() {
+        if (this.data?.type === CpsNotificationType.ERROR)
+            return !!this.config?.politeError;
+        if (this.data?.type === CpsNotificationType.WARNING)
+            return !!this.config?.politeWarning;
+        return true;
+    }
+    get closeAriaLabel() {
+        const type = this.data?.type;
+        return `Close ${type ? type + ' ' : ''}notification`;
+    }
     // eslint-disable-next-line no-useless-constructor
     constructor(zone) {
         this.zone = zone;
@@ -16200,6 +16580,7 @@ class CpsToastComponent {
         this.closed = new EventEmitter();
         this.filled = true;
         this.color = '';
+        this.srAnnouncement = '';
     }
     ngOnInit() {
         this.maxWidth = convertSize(this.config?.maxWidth || '');
@@ -16211,6 +16592,11 @@ class CpsToastComponent {
     }
     ngAfterViewInit() {
         this.initiateTimeout();
+        setTimeout(() => {
+            const type = this.data?.type;
+            const details = this.data?.details;
+            this.srAnnouncement = `${type ? type + ': ' : ''}${this.data?.message ?? ''}${details ? '. ' + details : ''}`;
+        });
     }
     ngOnDestroy() {
         this.clearTimeout();
@@ -16235,7 +16621,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: "<span\n  [attr.role]=\"isPolite ? 'status' : 'alert'\"\n  aria-atomic=\"true\"\n  class=\"cps-sr-only\">\n  {{ srAnnouncement }}\n</span>\n<div\n  (mouseenter)=\"clearTimeout()\"\n  (mouseleave)=\"initiateTimeout()\"\n  (focusin)=\"clearTimeout()\"\n  (focusout)=\"initiateTimeout()\"\n  [class]=\"data.type\"\n  [@toastState]=\"{\n    value: 'visible'\n  }\"\n  [style.max-width]=\"maxWidth\"\n  class=\"cps-toast-content\">\n  <div class=\"cps-toast-icon\" [class.filled]=\"filled\" aria-hidden=\"true\">\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]=\"closeAriaLabel\"\n      icon=\"close-x\"\n      class=\"cps-toast-close-button\"\n      width=\"2.5rem\"\n      type=\"borderless\"></cps-button>\n  </div>\n</div>\n", styles: [":host .cps-toast-content{color:var(--cps-color-text-darkest);border-radius:.25rem;box-shadow:0 .0625rem .1875rem #0000004d;display:flex;overflow:hidden}:host .cps-toast-content.success{background-color:var(--cps-color-success-bg);border:.125rem 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:.125rem 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:.125rem 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:.125rem 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:1.25rem}:host .cps-toast-message{display:flex;flex-direction:column;justify-content:center;padding:0 1rem;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:.875rem}:host .cps-toast-buttons{display:flex;justify-content:center;align-items:center}:host .cps-toast-buttons .cps-toast-close-button{margin:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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)',
@@ -16275,7 +16661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                                 }))
                             ])
                         ])
-                    ], 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"] }]
+                    ], template: "<span\n  [attr.role]=\"isPolite ? 'status' : 'alert'\"\n  aria-atomic=\"true\"\n  class=\"cps-sr-only\">\n  {{ srAnnouncement }}\n</span>\n<div\n  (mouseenter)=\"clearTimeout()\"\n  (mouseleave)=\"initiateTimeout()\"\n  (focusin)=\"clearTimeout()\"\n  (focusout)=\"initiateTimeout()\"\n  [class]=\"data.type\"\n  [@toastState]=\"{\n    value: 'visible'\n  }\"\n  [style.max-width]=\"maxWidth\"\n  class=\"cps-toast-content\">\n  <div class=\"cps-toast-icon\" [class.filled]=\"filled\" aria-hidden=\"true\">\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]=\"closeAriaLabel\"\n      icon=\"close-x\"\n      class=\"cps-toast-close-button\"\n      width=\"2.5rem\"\n      type=\"borderless\"></cps-button>\n  </div>\n</div>\n", styles: [":host .cps-toast-content{color:var(--cps-color-text-darkest);border-radius:.25rem;box-shadow:0 .0625rem .1875rem #0000004d;display:flex;overflow:hidden}:host .cps-toast-content.success{background-color:var(--cps-color-success-bg);border:.125rem 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:.125rem 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:.125rem 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:.125rem 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:1.25rem}:host .cps-toast-message{display:flex;flex-direction:column;justify-content:center;padding:0 1rem;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:.875rem}:host .cps-toast-buttons{display:flex;justify-content:center;align-items:center}:host .cps-toast-buttons .cps-toast-close-button{margin:0 .5rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { config: [{
                 type: Input
             }], data: [{
@@ -16337,7 +16723,7 @@ class CpsNotificationContainerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsNotificationContainerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.PrimeNG }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsNotificationContainerComponent, isStandalone: true, selector: "cps-notification-container", inputs: { position: "position" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div\n  [ngClass]=\"{\n    'cps-notification-container-mask': true,\n    'cps-notification-container-left':\n      position === CpsNotificationPosition.LEFT,\n    'cps-notification-container-right':\n      position === CpsNotificationPosition.RIGHT,\n    'cps-notification-container-top': position === CpsNotificationPosition.TOP,\n    'cps-notification-container-bottom':\n      position === CpsNotificationPosition.BOTTOM,\n    'cps-notification-container-top-left':\n      position === CpsNotificationPosition.TOPLEFT,\n    'cps-notification-container-top-right':\n      position === CpsNotificationPosition.TOPRIGHT,\n    'cps-notification-container-bottom-left':\n      position === CpsNotificationPosition.BOTTOMLEFT,\n    'cps-notification-container-bottom-right':\n      position === CpsNotificationPosition.BOTTOMRIGHT\n  }\">\n  <div #container class=\"cps-notification-container\" role=\"notification\">\n    <div\n      #content\n      class=\"cps-notification-container-content\"\n      [ngStyle]=\"{\n        'align-items': [\n          CpsNotificationPosition.RIGHT,\n          CpsNotificationPosition.TOPRIGHT,\n          CpsNotificationPosition.BOTTOMRIGHT\n        ].includes(position)\n          ? 'flex-end'\n          : 'flex-start'\n      }\">\n      @for (notification of notifications; track notification; let i = $index) {\n        <cps-toast\n          [data]=\"notification.data\"\n          [config]=\"notification.config\"\n          @notificationAnimation\n          (closed)=\"onCloseNotification(i)\">\n        </cps-toast>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".cps-notification-container-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cps-notification-container{box-sizing:border-box;display:flex;flex-direction:column;pointer-events:auto;transform:scale(1);position:relative;border-radius:4px;border:0 none;font-family:Source Sans Pro,sans-serif;font-size:1rem;font-weight:400}.cps-notification-container .cps-notification-container-content{background:transparent;flex-grow:1;gap:12px;display:flex;flex-direction:column-reverse}.cps-notification-container-top .cps-notification-container,.cps-notification-container-bottom .cps-notification-container,.cps-notification-container-left .cps-notification-container,.cps-notification-container-right .cps-notification-container,.cps-notification-container-top-left .cps-notification-container,.cps-notification-container-top-right .cps-notification-container,.cps-notification-container-bottom-left .cps-notification-container,.cps-notification-container-bottom-right .cps-notification-container{margin:.75rem;transform:translateZ(0)}.cps-notification-container-left{justify-content:flex-start}.cps-notification-container-right{justify-content:flex-end}.cps-notification-container-top{align-items:flex-start}.cps-notification-container-top-left{justify-content:flex-start;align-items:flex-start}.cps-notification-container-top-right{justify-content:flex-end;align-items:flex-start}.cps-notification-container-bottom{align-items:flex-end}.cps-notification-container-bottom-left{justify-content:flex-start;align-items:flex-end}.cps-notification-container-bottom-right{justify-content:flex-end;align-items:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: CpsToastComponent, selector: "cps-toast", inputs: ["config", "data"], outputs: ["closed"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsNotificationContainerComponent, isStandalone: true, selector: "cps-notification-container", inputs: { position: "position" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div\n  role=\"region\"\n  [attr.aria-label]=\"'Notifications: ' + position\"\n  [ngClass]=\"{\n    'cps-notification-container-mask': true,\n    'cps-notification-container-left':\n      position === CpsNotificationPosition.LEFT,\n    'cps-notification-container-right':\n      position === CpsNotificationPosition.RIGHT,\n    'cps-notification-container-top': position === CpsNotificationPosition.TOP,\n    'cps-notification-container-bottom':\n      position === CpsNotificationPosition.BOTTOM,\n    'cps-notification-container-top-left':\n      position === CpsNotificationPosition.TOPLEFT,\n    'cps-notification-container-top-right':\n      position === CpsNotificationPosition.TOPRIGHT,\n    'cps-notification-container-bottom-left':\n      position === CpsNotificationPosition.BOTTOMLEFT,\n    'cps-notification-container-bottom-right':\n      position === CpsNotificationPosition.BOTTOMRIGHT\n  }\">\n  <div #container class=\"cps-notification-container\">\n    <div\n      #content\n      class=\"cps-notification-container-content\"\n      [ngStyle]=\"{\n        'align-items': [\n          CpsNotificationPosition.RIGHT,\n          CpsNotificationPosition.TOPRIGHT,\n          CpsNotificationPosition.BOTTOMRIGHT\n        ].includes(position)\n          ? 'flex-end'\n          : 'flex-start'\n      }\">\n      @for (notification of notifications; track notification; let i = $index) {\n        <cps-toast\n          [data]=\"notification.data\"\n          [config]=\"notification.config\"\n          @notificationAnimation\n          (closed)=\"onCloseNotification(i)\">\n        </cps-toast>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".cps-notification-container-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cps-notification-container{box-sizing:border-box;display:flex;flex-direction:column;pointer-events:auto;transform:scale(1);position:relative;border-radius:.25rem;border:0 none;font-family:Source Sans Pro,sans-serif;font-size:1rem;font-weight:400}.cps-notification-container .cps-notification-container-content{background:transparent;flex-grow:1;gap:.75rem;display:flex;flex-direction:column-reverse}.cps-notification-container-top .cps-notification-container,.cps-notification-container-bottom .cps-notification-container,.cps-notification-container-left .cps-notification-container,.cps-notification-container-right .cps-notification-container,.cps-notification-container-top-left .cps-notification-container,.cps-notification-container-top-right .cps-notification-container,.cps-notification-container-bottom-left .cps-notification-container,.cps-notification-container-bottom-right .cps-notification-container{margin:.75rem;transform:translateZ(0)}.cps-notification-container-left{justify-content:flex-start}.cps-notification-container-right{justify-content:flex-end}.cps-notification-container-top{align-items:flex-start}.cps-notification-container-top-left{justify-content:flex-start;align-items:flex-start}.cps-notification-container-top-right{justify-content:flex-end;align-items:flex-start}.cps-notification-container-bottom{align-items:flex-end}.cps-notification-container-bottom-left{justify-content:flex-start;align-items:flex-end}.cps-notification-container-bottom-right{justify-content:flex-end;align-items:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: CpsToastComponent, selector: "cps-toast", inputs: ["config", "data"], outputs: ["closed"] }], animations: [
             trigger('notificationAnimation', [
                 transition(':enter, :leave', [query('@*', animateChild())])
             ])
@@ -16349,7 +16735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         trigger('notificationAnimation', [
                             transition(':enter, :leave', [query('@*', animateChild())])
                         ])
-                    ], template: "<div\n  [ngClass]=\"{\n    'cps-notification-container-mask': true,\n    'cps-notification-container-left':\n      position === CpsNotificationPosition.LEFT,\n    'cps-notification-container-right':\n      position === CpsNotificationPosition.RIGHT,\n    'cps-notification-container-top': position === CpsNotificationPosition.TOP,\n    'cps-notification-container-bottom':\n      position === CpsNotificationPosition.BOTTOM,\n    'cps-notification-container-top-left':\n      position === CpsNotificationPosition.TOPLEFT,\n    'cps-notification-container-top-right':\n      position === CpsNotificationPosition.TOPRIGHT,\n    'cps-notification-container-bottom-left':\n      position === CpsNotificationPosition.BOTTOMLEFT,\n    'cps-notification-container-bottom-right':\n      position === CpsNotificationPosition.BOTTOMRIGHT\n  }\">\n  <div #container class=\"cps-notification-container\" role=\"notification\">\n    <div\n      #content\n      class=\"cps-notification-container-content\"\n      [ngStyle]=\"{\n        'align-items': [\n          CpsNotificationPosition.RIGHT,\n          CpsNotificationPosition.TOPRIGHT,\n          CpsNotificationPosition.BOTTOMRIGHT\n        ].includes(position)\n          ? 'flex-end'\n          : 'flex-start'\n      }\">\n      @for (notification of notifications; track notification; let i = $index) {\n        <cps-toast\n          [data]=\"notification.data\"\n          [config]=\"notification.config\"\n          @notificationAnimation\n          (closed)=\"onCloseNotification(i)\">\n        </cps-toast>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".cps-notification-container-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cps-notification-container{box-sizing:border-box;display:flex;flex-direction:column;pointer-events:auto;transform:scale(1);position:relative;border-radius:4px;border:0 none;font-family:Source Sans Pro,sans-serif;font-size:1rem;font-weight:400}.cps-notification-container .cps-notification-container-content{background:transparent;flex-grow:1;gap:12px;display:flex;flex-direction:column-reverse}.cps-notification-container-top .cps-notification-container,.cps-notification-container-bottom .cps-notification-container,.cps-notification-container-left .cps-notification-container,.cps-notification-container-right .cps-notification-container,.cps-notification-container-top-left .cps-notification-container,.cps-notification-container-top-right .cps-notification-container,.cps-notification-container-bottom-left .cps-notification-container,.cps-notification-container-bottom-right .cps-notification-container{margin:.75rem;transform:translateZ(0)}.cps-notification-container-left{justify-content:flex-start}.cps-notification-container-right{justify-content:flex-end}.cps-notification-container-top{align-items:flex-start}.cps-notification-container-top-left{justify-content:flex-start;align-items:flex-start}.cps-notification-container-top-right{justify-content:flex-end;align-items:flex-start}.cps-notification-container-bottom{align-items:flex-end}.cps-notification-container-bottom-left{justify-content:flex-start;align-items:flex-end}.cps-notification-container-bottom-right{justify-content:flex-end;align-items:flex-end}\n"] }]
+                    ], template: "<div\n  role=\"region\"\n  [attr.aria-label]=\"'Notifications: ' + position\"\n  [ngClass]=\"{\n    'cps-notification-container-mask': true,\n    'cps-notification-container-left':\n      position === CpsNotificationPosition.LEFT,\n    'cps-notification-container-right':\n      position === CpsNotificationPosition.RIGHT,\n    'cps-notification-container-top': position === CpsNotificationPosition.TOP,\n    'cps-notification-container-bottom':\n      position === CpsNotificationPosition.BOTTOM,\n    'cps-notification-container-top-left':\n      position === CpsNotificationPosition.TOPLEFT,\n    'cps-notification-container-top-right':\n      position === CpsNotificationPosition.TOPRIGHT,\n    'cps-notification-container-bottom-left':\n      position === CpsNotificationPosition.BOTTOMLEFT,\n    'cps-notification-container-bottom-right':\n      position === CpsNotificationPosition.BOTTOMRIGHT\n  }\">\n  <div #container class=\"cps-notification-container\">\n    <div\n      #content\n      class=\"cps-notification-container-content\"\n      [ngStyle]=\"{\n        'align-items': [\n          CpsNotificationPosition.RIGHT,\n          CpsNotificationPosition.TOPRIGHT,\n          CpsNotificationPosition.BOTTOMRIGHT\n        ].includes(position)\n          ? 'flex-end'\n          : 'flex-start'\n      }\">\n      @for (notification of notifications; track notification; let i = $index) {\n        <cps-toast\n          [data]=\"notification.data\"\n          [config]=\"notification.config\"\n          @notificationAnimation\n          (closed)=\"onCloseNotification(i)\">\n        </cps-toast>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".cps-notification-container-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.cps-notification-container{box-sizing:border-box;display:flex;flex-direction:column;pointer-events:auto;transform:scale(1);position:relative;border-radius:.25rem;border:0 none;font-family:Source Sans Pro,sans-serif;font-size:1rem;font-weight:400}.cps-notification-container .cps-notification-container-content{background:transparent;flex-grow:1;gap:.75rem;display:flex;flex-direction:column-reverse}.cps-notification-container-top .cps-notification-container,.cps-notification-container-bottom .cps-notification-container,.cps-notification-container-left .cps-notification-container,.cps-notification-container-right .cps-notification-container,.cps-notification-container-top-left .cps-notification-container,.cps-notification-container-top-right .cps-notification-container,.cps-notification-container-bottom-left .cps-notification-container,.cps-notification-container-bottom-right .cps-notification-container{margin:.75rem;transform:translateZ(0)}.cps-notification-container-left{justify-content:flex-start}.cps-notification-container-right{justify-content:flex-end}.cps-notification-container-top{align-items:flex-start}.cps-notification-container-top-left{justify-content:flex-start;align-items:flex-start}.cps-notification-container-top-right{justify-content:flex-end;align-items:flex-start}.cps-notification-container-bottom{align-items:flex-end}.cps-notification-container-bottom-left{justify-content:flex-start;align-items:flex-end}.cps-notification-container-bottom-right{justify-content:flex-end;align-items:flex-end}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.PrimeNG }, { type: i0.ChangeDetectorRef }], propDecorators: { position: [{
                 type: Input
             }], closed: [{
@@ -16441,7 +16827,7 @@ class CpsNotificationService {
         const position = config.position || CpsNotificationPosition.TOPRIGHT;
         let containerComponentRef = this._containersMap.get(position);
         if (!containerComponentRef) {
-            containerComponentRef = createComponent(CpsNotificationContainerComponent, { environmentInjector: this._appRef.injector });
+            containerComponentRef = this._createContainerComponent();
             containerComponentRef.setInput('position', position);
             this._appRef.attachView(containerComponentRef.hostView);
             const domElem = containerComponentRef.hostView
@@ -16454,6 +16840,11 @@ class CpsNotificationService {
         }
         containerComponentRef.instance.addNotification(config, data);
     }
+    _createContainerComponent() {
+        return createComponent(CpsNotificationContainerComponent, {
+            environmentInjector: this._appRef.injector
+        });
+    }
     _tryRemoveContainer(position) {
         const container = this._containersMap.get(position);
         if (!container?.instance || container.instance.notifications.length > 0)