cps-ui-kit 21.17.0 → 21.19.0

package/fesm2022/cps-ui-kit.mjs

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
-import { DOCUMENT, CommonModule, isPlatformBrowser } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Input, Inject, Component, EventEmitter, Output, input, computed, ElementRef, PLATFORM_ID, SecurityContext, Directive, Pipe, signal, Injectable, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Self, Optional, HostBinding, booleanAttribute, ChangeDetectorRef, ViewChildren, TemplateRef, viewChildren, afterRenderEffect, ContentChildren, Host, HostListener, ContentChild, RendererStyleFlags2, createComponent, createEnvironmentInjector, SkipSelf } from '@angular/core';
+import { inject, PLATFORM_ID, signal, Injectable, InjectionToken, Input, Inject, Component, EventEmitter, Output, input, computed, ElementRef, SecurityContext, Directive, Pipe, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Self, Optional, effect, HostBinding, booleanAttribute, ChangeDetectorRef, ViewChildren, TemplateRef, viewChildren, afterRenderEffect, ContentChildren, Host, HostListener, ContentChild, RendererStyleFlags2, createComponent, createEnvironmentInjector, SkipSelf } from '@angular/core';
 import * as i1$2 from '@angular/forms';
 import { Validators, FormsModule, FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { Subject, takeUntil, debounceTime, distinctUntilChanged, take, catchError, of, Subscription, fromEvent } from 'rxjs';
@@ -50,6 +50,116 @@ const parseSize = (size) => {
     return { value: parseFloat(match[1]), unit: match[2] };
 };
 
+/**
+ * CpsRootFontSizeService tracks the application's current root font size.
+ *
+ * The service uses a ResizeObserver strategy to reliably detect root font-size changes:
+ *
+ * **Sentinel element** (`<div style="width:1rem;height:0">`) — its pixel width
+ *    mirrors `1rem`. Any root font-size change — caused by CSS class toggles,
+ *    stylesheet rules, direct JS assignment, or viewport resize (e.g.
+ *    `font-size: 1.5vw`) — changes the sentinel's computed width, firing the
+ *    observer.
+ * The cached value is stored in a signal and is only updated when the actual
+ * font-size value changes, preventing spurious updates.
+ *
+ * In microfrontend environments the sentinel element is keyed by a known DOM
+ * attribute (`data-cps-root-font-size-sentinel`) and reused if already present,
+ * so only one sentinel node exists per document regardless of how many
+ * instances of this service are created. The sentinel is intentionally never
+ * removed from the DOM — it is a lightweight, invisible element and removing it
+ * could silently break any other live service instance still observing it.
+ *
+ * Only active in browser environments. Under SSR the `fontSize` signal is
+ * initialized to `16` (the standard browser default) and no DOM observers are created.
+ *
+ * Prefer injecting {@link CPS_ROOT_FONT_SIZE_SERVICE} over this class directly
+ * to allow consumer applications to override the behavior.
+ *
+ * @example
+ * ```typescript
+ * class MyComponent {
+ *   private fontSizeService = inject(CPS_ROOT_FONT_SIZE_SERVICE);
+ *   readonly fontSize = this.fontSizeService?.fontSize;
+ * }
+ * ```
+ */
+class CpsRootFontSizeService {
+    static { this._SENTINEL_ATTR = 'data-cps-root-font-size-sentinel'; }
+    constructor() {
+        this._document = inject(DOCUMENT);
+        this._platformId = inject(PLATFORM_ID);
+        this._fontSize = signal(isPlatformBrowser(this._platformId) ? this._readRootFontSize() : 16, ...(ngDevMode ? [{ debugName: "_fontSize" }] : /* istanbul ignore next */ []));
+        this._sentinelObserver = null;
+        /** Reactive signal containing the current root font size in pixels. */
+        this.fontSize = this._fontSize.asReadonly();
+        if (!isPlatformBrowser(this._platformId))
+            return;
+        this._setupObservers();
+    }
+    ngOnDestroy() {
+        this._sentinelObserver?.disconnect();
+        this._sentinelObserver = null;
+    }
+    _setupObservers() {
+        // Reuse an existing sentinel if another service instance already created one.
+        let sentinel = this._document.querySelector(`[${CpsRootFontSizeService._SENTINEL_ATTR}]`);
+        if (!sentinel) {
+            sentinel = this._document.createElement('div');
+            sentinel.setAttribute(CpsRootFontSizeService._SENTINEL_ATTR, '');
+            Object.assign(sentinel.style, {
+                position: 'absolute',
+                width: '1rem',
+                height: '0',
+                visibility: 'hidden',
+                pointerEvents: 'none',
+                userSelect: 'none',
+                top: '0',
+                left: '0'
+            });
+            this._document.documentElement.appendChild(sentinel);
+        }
+        this._sentinelObserver = new ResizeObserver(() => this._refresh());
+        this._sentinelObserver.observe(sentinel);
+    }
+    _refresh() {
+        const newSize = this._readRootFontSize();
+        if (newSize !== this._fontSize()) {
+            this._fontSize.set(newSize);
+        }
+    }
+    _readRootFontSize() {
+        return parseFloat(getComputedStyle(this._document.documentElement).fontSize);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsRootFontSizeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsRootFontSizeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsRootFontSizeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Injection token for the root font size service.
+ *
+ * By default it resolves to the singleton {@link CpsRootFontSizeService}.
+ * Consumer applications can override it to:
+ * - Supply a custom subclass
+ * - Provide `null` to disable dynamic tracking entirely
+ *
+ * @example Disable dynamic tracking:
+ * ```typescript
+ * providers: [
+ *   { provide: CPS_ROOT_FONT_SIZE_SERVICE, useValue: null }
+ * ]
+ * ```
+ */
+const CPS_ROOT_FONT_SIZE_SERVICE = new InjectionToken('CpsRootFontSizeService', {
+    providedIn: 'root',
+    factory: () => inject(CpsRootFontSizeService)
+});
+
 let id = 0;
 const randomPrefix = Math.random().toString(36).slice(2, 8);
 const generateUniqueId = (prefix = 'cps') => {
@@ -426,11 +536,11 @@ class CpsChipComponent {
         this.closed.emit(this.label);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsChipComponent, isStandalone: true, selector: "cps-chip", inputs: { label: "label", icon: "icon", iconColor: "iconColor", iconPosition: "iconPosition", closable: "closable", disabled: "disabled", closeButtonAriaLabel: "closeButtonAriaLabel" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"classesList\" [attr.aria-label]=\"label\">\n  @if (icon) {\n    <cps-icon\n      class=\"cps-chip-icon\"\n      [icon]=\"icon\"\n      [color]=\"iconColor\"></cps-icon>\n  }\n  <span class=\"cps-chip-label\">{{ label }}</span>\n  @if (closable) {\n    <cps-icon\n      role=\"button\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      [attr.aria-label]=\"closeButtonAriaLabel\"\n      [attr.aria-disabled]=\"disabled\"\n      class=\"cps-chip-close-icon\"\n      icon=\"close-x\"\n      size=\"xsmall\"\n      color=\"text-darkest\"\n      (click)=\"onCloseClick($event)\"\n      (keydown.enter)=\"onCloseClick($event)\"\n      (keydown.space)=\"onCloseClick($event)\">\n    </cps-icon>\n  }\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-chip{align-items:center;display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:.875rem;line-height:1rem;padding:.25rem .75rem;cursor:default}:host .cps-chip-close-icon{margin-left:.375rem;cursor:pointer}:host .cps-chip-close-icon:focus{outline:none}:host .cps-chip-close-icon:focus-visible{outline:none;position:relative}:host .cps-chip-close-icon:focus-visible:before,:host .cps-chip-close-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-chip-close-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-chip-close-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-chip-close-icon:focus-visible.suppress-focus-visible:before,:host .cps-chip-close-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-chip-close-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-calm)!important}:host .cps-chip-label{font-size:.875rem;color:var(--cps-color-text-darkest);font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400}:host .cps-chip.cps-chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .cps-chip.cps-chip-disabled .cps-chip-label{color:var(--cps-color-text-mild)}:host .cps-chip.cps-chip-disabled .cps-chip-icon ::ng-deep .cps-icon,:host .cps-chip.cps-chip-disabled .cps-chip-close-icon ::ng-deep .cps-icon{color:var(--cps-color-text-mild)!important}:host .cps-chip.cps-chip--icon-before .cps-chip-icon{margin-right:.375rem}:host .cps-chip.cps-chip--icon-after .cps-chip-icon{margin-left:.375rem;order:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsChipComponent, isStandalone: true, selector: "cps-chip", inputs: { label: "label", icon: "icon", iconColor: "iconColor", iconPosition: "iconPosition", closable: "closable", disabled: "disabled", closeButtonAriaLabel: "closeButtonAriaLabel" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"classesList\" [attr.aria-label]=\"label\">\n  @if (icon) {\n    <cps-icon\n      class=\"cps-chip-icon\"\n      [icon]=\"icon\"\n      [color]=\"iconColor\"></cps-icon>\n  }\n  <span class=\"cps-chip-label\">{{ label }}</span>\n  @if (closable) {\n    <cps-icon\n      role=\"button\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      [attr.aria-label]=\"closeButtonAriaLabel\"\n      [attr.aria-disabled]=\"disabled\"\n      class=\"cps-chip-close-icon\"\n      icon=\"close-x\"\n      size=\"xsmall\"\n      color=\"text-darkest\"\n      (click)=\"onCloseClick($event)\"\n      (keydown.enter)=\"onCloseClick($event)\"\n      (keydown.space)=\"onCloseClick($event)\">\n    </cps-icon>\n  }\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-chip{align-items:center;display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:.875rem;line-height:1rem;padding-left:.75rem;padding-right:.375rem;cursor:default}:host .cps-chip-close-icon{padding:.375rem;cursor:pointer}:host .cps-chip-close-icon:focus{outline:none}:host .cps-chip-close-icon:focus-visible{outline:none;position:relative}:host .cps-chip-close-icon:focus-visible:before,:host .cps-chip-close-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-chip-close-icon:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-chip-close-icon:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-chip-close-icon:focus-visible.suppress-focus-visible:before,:host .cps-chip-close-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-chip-close-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-calm)!important}:host .cps-chip-label{margin-top:.25rem;margin-bottom:.25rem;font-size:.875rem;color:var(--cps-color-text-darkest);font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400}:host .cps-chip-label:not(:has(+.cps-chip-close-icon)){margin-right:.375rem}:host .cps-chip.cps-chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .cps-chip.cps-chip-disabled .cps-chip-label{color:var(--cps-color-text-mild)}:host .cps-chip.cps-chip-disabled .cps-chip-icon ::ng-deep .cps-icon,:host .cps-chip.cps-chip-disabled .cps-chip-close-icon ::ng-deep .cps-icon{color:var(--cps-color-text-mild)!important}:host .cps-chip.cps-chip--icon-before .cps-chip-icon{margin-right:.375rem}:host .cps-chip.cps-chip--icon-after .cps-chip-icon{margin-left:.375rem;order:1}:host .cps-chip.cps-chip--icon-after .cps-chip-icon:not(:has(~.cps-chip-close-icon)){margin-right:.375rem}:host .cps-chip.cps-chip--icon-after .cps-chip-close-icon{order:2}:host .cps-chip.cps-chip--icon-after .cps-chip-label{margin-right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsChipComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule, CpsIconComponent], selector: 'cps-chip', template: "<div [ngClass]=\"classesList\" [attr.aria-label]=\"label\">\n  @if (icon) {\n    <cps-icon\n      class=\"cps-chip-icon\"\n      [icon]=\"icon\"\n      [color]=\"iconColor\"></cps-icon>\n  }\n  <span class=\"cps-chip-label\">{{ label }}</span>\n  @if (closable) {\n    <cps-icon\n      role=\"button\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      [attr.aria-label]=\"closeButtonAriaLabel\"\n      [attr.aria-disabled]=\"disabled\"\n      class=\"cps-chip-close-icon\"\n      icon=\"close-x\"\n      size=\"xsmall\"\n      color=\"text-darkest\"\n      (click)=\"onCloseClick($event)\"\n      (keydown.enter)=\"onCloseClick($event)\"\n      (keydown.space)=\"onCloseClick($event)\">\n    </cps-icon>\n  }\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-chip{align-items:center;display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:.875rem;line-height:1rem;padding:.25rem .75rem;cursor:default}:host .cps-chip-close-icon{margin-left:.375rem;cursor:pointer}:host .cps-chip-close-icon:focus{outline:none}:host .cps-chip-close-icon:focus-visible{outline:none;position:relative}:host .cps-chip-close-icon:focus-visible:before,:host .cps-chip-close-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-chip-close-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-chip-close-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-chip-close-icon:focus-visible.suppress-focus-visible:before,:host .cps-chip-close-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-chip-close-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-calm)!important}:host .cps-chip-label{font-size:.875rem;color:var(--cps-color-text-darkest);font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400}:host .cps-chip.cps-chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .cps-chip.cps-chip-disabled .cps-chip-label{color:var(--cps-color-text-mild)}:host .cps-chip.cps-chip-disabled .cps-chip-icon ::ng-deep .cps-icon,:host .cps-chip.cps-chip-disabled .cps-chip-close-icon ::ng-deep .cps-icon{color:var(--cps-color-text-mild)!important}:host .cps-chip.cps-chip--icon-before .cps-chip-icon{margin-right:.375rem}:host .cps-chip.cps-chip--icon-after .cps-chip-icon{margin-left:.375rem;order:1}\n"] }]
+            args: [{ imports: [CommonModule, CpsIconComponent], selector: 'cps-chip', template: "<div [ngClass]=\"classesList\" [attr.aria-label]=\"label\">\n  @if (icon) {\n    <cps-icon\n      class=\"cps-chip-icon\"\n      [icon]=\"icon\"\n      [color]=\"iconColor\"></cps-icon>\n  }\n  <span class=\"cps-chip-label\">{{ label }}</span>\n  @if (closable) {\n    <cps-icon\n      role=\"button\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      [attr.aria-label]=\"closeButtonAriaLabel\"\n      [attr.aria-disabled]=\"disabled\"\n      class=\"cps-chip-close-icon\"\n      icon=\"close-x\"\n      size=\"xsmall\"\n      color=\"text-darkest\"\n      (click)=\"onCloseClick($event)\"\n      (keydown.enter)=\"onCloseClick($event)\"\n      (keydown.space)=\"onCloseClick($event)\">\n    </cps-icon>\n  }\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-chip{align-items:center;display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:.875rem;line-height:1rem;padding-left:.75rem;padding-right:.375rem;cursor:default}:host .cps-chip-close-icon{padding:.375rem;cursor:pointer}:host .cps-chip-close-icon:focus{outline:none}:host .cps-chip-close-icon:focus-visible{outline:none;position:relative}:host .cps-chip-close-icon:focus-visible:before,:host .cps-chip-close-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-chip-close-icon:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-chip-close-icon:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-chip-close-icon:focus-visible.suppress-focus-visible:before,:host .cps-chip-close-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-chip-close-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-calm)!important}:host .cps-chip-label{margin-top:.25rem;margin-bottom:.25rem;font-size:.875rem;color:var(--cps-color-text-darkest);font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400}:host .cps-chip-label:not(:has(+.cps-chip-close-icon)){margin-right:.375rem}:host .cps-chip.cps-chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .cps-chip.cps-chip-disabled .cps-chip-label{color:var(--cps-color-text-mild)}:host .cps-chip.cps-chip-disabled .cps-chip-icon ::ng-deep .cps-icon,:host .cps-chip.cps-chip-disabled .cps-chip-close-icon ::ng-deep .cps-icon{color:var(--cps-color-text-mild)!important}:host .cps-chip.cps-chip--icon-before .cps-chip-icon{margin-right:.375rem}:host .cps-chip.cps-chip--icon-after .cps-chip-icon{margin-left:.375rem;order:1}:host .cps-chip.cps-chip--icon-after .cps-chip-icon:not(:has(~.cps-chip-close-icon)){margin-right:.375rem}:host .cps-chip.cps-chip--icon-after .cps-chip-close-icon{order:2}:host .cps-chip.cps-chip--icon-after .cps-chip-label{margin-right:0}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], icon: [{
@@ -511,6 +621,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
  * @group Components
  */
 class CpsTooltipDirective {
+    get _rootFontSizePx() {
+        return this._cpsRootFontSizeService?.fontSize() || 16;
+    }
     constructor() {
         /**
          * Tooltip text or html to show.
@@ -572,7 +685,7 @@ class CpsTooltipDirective {
          */
         this.tooltipOffset = input('0.5rem', ...(ngDevMode ? [{ debugName: "tooltipOffset" }] : /* istanbul ignore next */ []));
         this.cvtTooltipOffset = computed(() => convertSize(this.tooltipOffset()), ...(ngDevMode ? [{ debugName: "cvtTooltipOffset" }] : /* istanbul ignore next */ []));
-        this._rootFontSizePx = 16;
+        this._cpsRootFontSizeService = inject(CPS_ROOT_FONT_SIZE_SERVICE);
         this._elementRef = inject((ElementRef));
         this._document = inject(DOCUMENT);
         this._platformId = inject(PLATFORM_ID);
@@ -661,11 +774,6 @@ class CpsTooltipDirective {
         };
         this.window = this._document.defaultView;
     }
-    ngOnInit() {
-        if (isPlatformBrowser(this._platformId)) {
-            this._rootFontSizePx = parseFloat(getComputedStyle(this._document.documentElement).fontSize || '16');
-        }
-    }
     ngOnDestroy() {
         clearTimeout(this._showTimeout);
         clearTimeout(this._hideTimeout);
@@ -1886,9 +1994,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 args: ['menuArrow']
             }] } });
 
-const DEFAULT_VIRTUAL_SCROLL_ITEM_SIZE_PX = 44;
-const VIRTUAL_SCROLL_ITEM_SIZE_REM = 2.75;
-const VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS = 5.5;
+const VIRTUAL_SCROLL_ITEM_SIZE_REM$1 = 2.75;
+const VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS$1 = 5.5;
 /**
  * CpsAutocompleteComponent is an input component that provides real-time suggestions when being typed.
  * @group Components
@@ -1917,10 +2024,8 @@ class CpsAutocompleteComponent {
     get options() {
         return this._options;
     }
-    constructor(_control, document, platformId, cdRef, _labelByValue) {
+    constructor(_control, cdRef, _labelByValue) {
         this._control = _control;
-        this.document = document;
-        this.platformId = platformId;
         this.cdRef = cdRef;
         this._labelByValue = _labelByValue;
         /**
@@ -2172,14 +2277,16 @@ class CpsAutocompleteComponent {
         this.backspaceClickedOnce = false;
         this.activeSingle = false;
         this.optionHighlightedIndex = -1;
-        this.virtualScrollItemSizePx = DEFAULT_VIRTUAL_SCROLL_ITEM_SIZE_PX;
-        this.virtualListHeightRem = VIRTUAL_SCROLL_ITEM_SIZE_REM * VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS;
-        this.autocompleteBoxWidthRem = 0;
+        this.isArrowNavigating = false;
+        this.virtualScrollItemSizePx = computed(() => (this._cpsRootFontSizeService?.fontSize() || 16) *
+            VIRTUAL_SCROLL_ITEM_SIZE_REM$1, ...(ngDevMode ? [{ debugName: "virtualScrollItemSizePx" }] : /* istanbul ignore next */ []));
+        this.virtualListHeightRem = VIRTUAL_SCROLL_ITEM_SIZE_REM$1 * VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS$1;
+        this.autocompleteBoxWidthPx = 0;
         this.isTimePickerField = false;
         this.optionsListId = generateUniqueId('cps-autocomplete-options-list');
         this.selectAllOptionId = generateUniqueId('cps-autocomplete-option-select-all');
         this._optionIdPrefix = generateUniqueId('cps-autocomplete-option');
-        this._rootFontSizePx = 16;
+        this._cpsRootFontSizeService = inject(CPS_ROOT_FONT_SIZE_SERVICE);
         this._inputChangeSubject$ = new Subject();
         this._destroy$ = new Subject();
         this._options = [];
@@ -2194,18 +2301,13 @@ class CpsAutocompleteComponent {
         this.resizeObserver = new ResizeObserver((entries) => {
             entries.forEach((entry) => {
                 if (entry?.target)
-                    this.autocompleteBoxWidthRem = this._pxToRem(entry.target.offsetWidth);
+                    this.autocompleteBoxWidthPx = entry.target.offsetWidth;
             });
         });
     }
     ngOnInit() {
-        if (isPlatformBrowser(this.platformId)) {
-            this._rootFontSizePx = parseFloat(getComputedStyle(this.document.documentElement).fontSize || '16');
-        }
-        this.virtualScrollItemSizePx =
-            this._rootFontSizePx * VIRTUAL_SCROLL_ITEM_SIZE_REM;
         this.virtualListHeightRem =
-            VIRTUAL_SCROLL_ITEM_SIZE_REM * VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS;
+            VIRTUAL_SCROLL_ITEM_SIZE_REM$1 * VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS$1;
         this.cvtWidth = convertSize(this.width);
         if (this.multiple && !this._value) {
             this._value = [];
@@ -2226,6 +2328,9 @@ class CpsAutocompleteComponent {
         });
     }
     ngOnChanges(changes) {
+        if (changes.width) {
+            this.cvtWidth = convertSize(this.width);
+        }
         if (changes.options) {
             this.filteredOptions = this.options;
             this.recalcVirtualListHeight();
@@ -2237,10 +2342,8 @@ class CpsAutocompleteComponent {
             loadChanges.previousValue) {
             this._toggleOptions(true);
         }
-        if (changes.label || changes.ariaLabel) {
-            if (!this.label?.trim() && !this.ariaLabel?.trim()) {
-                console.error('CpsAutocompleteComponent: unlabeled autocomplete component must have an ariaLabel for accessibility.');
-            }
+        if (!this.label?.trim() && !this.ariaLabel?.trim()) {
+            console.error('CpsAutocompleteComponent: unlabeled autocomplete component must have an ariaLabel for accessibility.');
         }
     }
     ngAfterViewInit() {
@@ -2362,8 +2465,8 @@ class CpsAutocompleteComponent {
     clear(event) {
         event?.stopPropagation();
         event?.preventDefault();
-        if ((!this.multiple && !this.isEmptyValue()) ||
-            (this.multiple && this.value?.length > 0)) {
+        const hadValue = this.hasSelectedValue();
+        if (hadValue) {
             if (this.openOnClear) {
                 this._toggleOptions(true);
             }
@@ -2372,9 +2475,11 @@ class CpsAutocompleteComponent {
         }
         this.clearInput();
         this._dehighlightOption();
-        setTimeout(() => {
-            this.focusInput();
-        }, 0);
+        if (hadValue) {
+            setTimeout(() => {
+                this.focusInput();
+            }, 0);
+        }
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     setDisabledState(_disabled) { }
@@ -2411,19 +2516,22 @@ class CpsAutocompleteComponent {
         }
         this._confirmInput(this.inputText || '', false);
         this._closeAndClear();
-        this.onBlur();
     }
     onBoxClick() {
+        const wasOpened = this.isOpened;
         if (!this.multiple) {
             this.activeSingle = true;
             if (!this.inputText)
                 this.inputText = this._getValueLabel();
-            if (!this.isOpened)
+            if (!wasOpened)
                 this.filteredOptions = this.options;
         }
         this._dehighlightOption();
         setTimeout(() => {
-            this.focus();
+            this.focusInput();
+            if (!wasOpened) {
+                this._toggleOptions(true);
+            }
         });
     }
     onContainerKeyDown(event) {
@@ -2493,7 +2601,7 @@ class CpsAutocompleteComponent {
         }
     }
     focusInput() {
-        this.autocompleteContainer?.nativeElement?.querySelector('input')?.focus();
+        this.autocompleteInput?.nativeElement?.focus();
     }
     focus() {
         this.focusInput();
@@ -2504,14 +2612,17 @@ class CpsAutocompleteComponent {
             return;
         const currentLen = this.filteredOptions?.length || 0;
         this.virtualListHeightRem =
-            VIRTUAL_SCROLL_ITEM_SIZE_REM *
-                Math.min(currentLen, VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS);
+            VIRTUAL_SCROLL_ITEM_SIZE_REM$1 *
+                Math.min(currentLen, VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS$1);
+        this.virtualList?.setSpacerSize();
     }
-    isEmptyValue() {
-        return (this.value === null ||
-            this.value === undefined ||
-            (typeof this.value === 'string' && this.value.trim() === '') ||
-            Number.isNaN(this.value));
+    hasSelectedValue() {
+        if (this.multiple) {
+            return this.value?.length > 0;
+        }
+        return (this.value != null &&
+            !(typeof this.value === 'string' && this.value.trim() === '') &&
+            !Number.isNaN(this.value));
     }
     clearInput() {
         this.filteredOptions = this.options;
@@ -2591,6 +2702,7 @@ class CpsAutocompleteComponent {
         setTimeout(() => {
             if (this.isOpened && this.filteredOptions.length > 0) {
                 this.recalcVirtualListHeight();
+                this._syncHighlightToValue();
                 const selected = this.optionsList.nativeElement.querySelector('.selected');
                 if (selected) {
                     selected.scrollIntoView({
@@ -2599,18 +2711,8 @@ class CpsAutocompleteComponent {
                         inline: 'center'
                     });
                 }
-                else if (this.virtualScroll && !this.isEmptyValue()) {
-                    let v;
-                    if (this.multiple) {
-                        if (this.value.length > 0) {
-                            v = this.value[0];
-                        }
-                    }
-                    else
-                        v = this.value;
-                    const idx = this.filteredOptions.findIndex((o) => isEqual(o, v));
-                    if (idx >= 0)
-                        this.virtualList.scrollToIndex(idx);
+                else if (this.virtualScroll && this.optionHighlightedIndex >= 0) {
+                    this._scrollVirtualListToIndex(this.optionHighlightedIndex);
                 }
             }
         });
@@ -2650,7 +2752,7 @@ class CpsAutocompleteComponent {
         this.valueChanged.emit(value);
     }
     _getValueLabel() {
-        return !this.isEmptyValue()
+        return this.hasSelectedValue()
             ? this.returnObject
                 ? this.value[this.optionLabel]
                 : this._labelByValue.transform(this.value, this.options, this.optionValue, this.optionLabel)
@@ -2663,6 +2765,16 @@ class CpsAutocompleteComponent {
     }
     _dehighlightOption() {
         this.optionHighlightedIndex = -1;
+        this.isArrowNavigating = false;
+    }
+    _syncHighlightToValue() {
+        if (!this.hasSelectedValue())
+            return;
+        const firstSelected = this.multiple ? this.value[0] : this.value;
+        const idx = this.filteredOptions.findIndex((o) => isEqual(this.returnObject ? o : o[this.optionValue], firstSelected));
+        if (idx < 0)
+            return;
+        this.optionHighlightedIndex = idx + (this.isSelectAllVisible ? 1 : 0);
     }
     _getHighlightedOptionId() {
         if (this.optionHighlightedIndex < 0) {
@@ -2696,6 +2808,7 @@ class CpsAutocompleteComponent {
             return;
         if (this.optionsAriaSetSize < 1)
             return;
+        this.isArrowNavigating = true;
         this.optionHighlightedIndex = this._nextHighlightIndex(up, this.optionsAriaSetSize);
         const activeId = this._getHighlightedOptionId();
         if (!activeId)
@@ -2711,6 +2824,7 @@ class CpsAutocompleteComponent {
         const len = this.filteredOptions.length;
         if (len < 1)
             return;
+        this.isArrowNavigating = true;
         this.optionHighlightedIndex = this._nextHighlightIndex(up, len);
         this._syncVirtualHighlightedOptionIntoView();
     }
@@ -2735,8 +2849,8 @@ class CpsAutocompleteComponent {
             this.virtualList?.scrollToIndex(index);
             return;
         }
-        const itemTop = index * this.virtualScrollItemSizePx;
-        const itemBottom = itemTop + this.virtualScrollItemSizePx;
+        const itemTop = index * this.virtualScrollItemSizePx();
+        const itemBottom = itemTop + this.virtualScrollItemSizePx();
         const viewportTop = scrollerEl.scrollTop;
         const viewportBottom = viewportTop + scrollerEl.clientHeight;
         let nextTop = viewportTop;
@@ -2756,14 +2870,22 @@ class CpsAutocompleteComponent {
             return;
         searchVal = searchVal.toLowerCase();
         if (!searchVal) {
-            if (this.multiple)
+            if (this.multiple) {
+                this._closeAndClear();
                 return;
-            // Only reset the value if the inputText was changed by the user
-            if (this.inputText !== this._getValueLabel()) {
-                this.updateValue(this._getEmptyValue());
             }
-            this.cdRef.detectChanges();
-            this._closeAndClear();
+            const shouldUpdateValue = this.activeSingle && this.inputText !== this._getValueLabel();
+            this.clearInput();
+            this._dehighlightOption();
+            if (shouldUpdateValue) {
+                setTimeout(() => {
+                    this.updateValue(this._getEmptyValue());
+                    if (needFocusInput) {
+                        this.cdRef.detectChanges();
+                        this.focusInput();
+                    }
+                }, 0);
+            }
             return;
         }
         const found = this.filteredOptions.find((o) => o[this.optionLabel].toLowerCase() === searchVal);
@@ -2802,11 +2924,8 @@ class CpsAutocompleteComponent {
             this.focusInput();
         }, 0);
     }
-    _pxToRem(px) {
-        return px / this._rootFontSizePx;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsAutocompleteComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ChangeDetectorRef }, { token: LabelByValuePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", ariaLabel: "ariaLabel", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", showChevron: "showChevron", withOptionsAliases: "withOptionsAliases", useOptionsAliasesWhenNoMatch: "useOptionsAliasesWhenNoMatch", optionAlias: "optionAlias", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", loadingMessage: "loadingMessage", showLoadingMessage: "showLoadingMessage", emptyMessage: "emptyMessage", showEmptyMessage: "showEmptyMessage", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", externalError: "externalError", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", emptyOptionIndex: "emptyOptionIndex", inputChangeDebounceTime: "inputChangeDebounceTime", validating: "validating", _value: ["value", "_value"], options: "options" }, outputs: { valueChanged: "valueChanged", inputChanged: "inputChanged", focused: "focused", blurred: "blurred" }, providers: [LabelByValuePipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "autocompleteBox", first: true, predicate: ["autocompleteBox"], descendants: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isActive,\n    opened: isOpened\n  }\"\n  #autocompleteContainer>\n  @if (label) {\n    <div class=\"cps-autocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-autocomplete-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-autocomplete-container\"\n    [class.active]=\"isActive\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (\n          (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n        ) {\n          <div class=\"cps-autocomplete-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                <div class=\"single-item-selection\">\n                  <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                    returnObject\n                      ? value[optionLabel]\n                      : (value\n                        | labelByValue: options : optionValue : optionLabel)\n                  }}</span>\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'single-item-input',\n                      inputStyle: activeSingle ? { opacity: '1' } : null\n                    }\n                  \">\n                </ng-container>\n              </span>\n            }\n            @if (multiple && !chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"text-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <div\n                      class=\"text-group-item\"\n                      role=\"listitem\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\">\n                      {{\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue\n                              : options\n                              : optionValue\n                              : optionLabel)\n                      }}{{ !last ? ',' : '' }}\n                    </div>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-item-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"chips-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <cps-chip\n                      role=\"listitem\"\n                      closeButtonAriaLabel=\"Remove\"\n                      [disabled]=\"disabled\"\n                      [closable]=\"closableChips\"\n                      (closed)=\"select(val, true)\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\"\n                      [label]=\"\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue: options : optionValue : optionLabel)\n                      \">\n                    </cps-chip>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-chip-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"autocompleteInputTemplate\"></ng-container>\n        }\n        <span class=\"cps-autocomplete-box-icons\">\n          @if (clearable && !disabled) {\n            <span\n              role=\"button\"\n              (click)=\"clear($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (keydown.enter)=\"clear($event)\"\n              (keydown.space)=\"clear($event)\"\n              aria-label=\"Clear selection\"\n              [tabindex]=\"disabled ? -1 : 0\"\n              class=\"cps-autocomplete-box-clear-icon\"\n              [ngClass]=\"{\n                'cps-autocomplete-box-clear-icon-hidden':\n                  !persistentClear &&\n                  (!multiple || !value?.length) &&\n                  (multiple || isEmptyValue())\n              }\">\n              <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n            </span>\n          }\n          @if (showChevron && options.length) {\n            <span\n              class=\"cps-autocomplete-box-chevron\"\n              role=\"button\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\">\n              <cps-icon\n                icon=\"chevron-down\"\n                size=\"small\"\n                [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n            </span>\n          }\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-autocomplete-options-menu\">\n      <div\n        #optionsList\n        role=\"listbox\"\n        [id]=\"optionsListId\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-autocomplete-options\"\n        [style.width.rem]=\"autocompleteBoxWidthRem\">\n        @if (loading && showLoadingMessage) {\n          <div\n            class=\"cps-autocomplete-options-loading\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ loadingMessage }}\n          </div>\n        }\n        @if (\n          showEmptyMessage &&\n          filteredOptions.length < 1 &&\n          !loading &&\n          inputTextDebounced\n        ) {\n          <div\n            class=\"cps-autocomplete-options-empty\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ emptyMessage }}\n          </div>\n        }\n        @if (isSelectAllVisible) {\n          <div\n            class=\"cps-autocomplete-options-option select-all-option\"\n            [id]=\"selectAllOptionId\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"false\"\n            [attr.aria-setsize]=\"optionsAriaSetSize\"\n            [attr.aria-posinset]=\"1\"\n            [attr.aria-selected]=\"value?.length === options.length\"\n            [class.allselected]=\"value?.length === options.length\"\n            [class.highlighten]=\"optionHighlightedIndex === 0\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-autocomplete-options-option-left\">\n              @if (multiple) {\n                <span class=\"cps-autocomplete-options-option-check\"> </span>\n              }\n              <span class=\"cps-autocomplete-options-option-label\"\n                >Select all</span\n              >\n            </span>\n          </div>\n        }\n        @if (!loading) {\n          @if (virtualScroll) {\n            <p-virtualscroller\n              #virtualList\n              [tabindex]=\"-1\"\n              [items]=\"filteredOptions\"\n              [delay]=\"0\"\n              [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n              [options]=\"{ numToleratedItems: numToleratedItems }\"\n              [itemSize]=\"virtualScrollItemSizePx\">\n              <ng-template pTemplate=\"item\" let-item let-options=\"options\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemTemplate;\n                    context: {\n                      item: item,\n                      itemIndex: options.index\n                    }\n                  \"></ng-container>\n              </ng-template>\n            </p-virtualscroller>\n          } @else {\n            @for (item of filteredOptions; track item; let itemIndex = $index) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item,\n                    itemIndex: itemIndex\n                  }\n                \"></ng-container>\n            }\n          }\n        }\n      </div>\n    </cps-menu>\n    @if (loading || validating) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"autocomplete-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !externalError && !hideDetails) {\n    <div class=\"cps-autocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if ((error || externalError) && !hideDetails) {\n    <div class=\"cps-autocomplete-error\" role=\"alert\" aria-live=\"assertive\">\n      {{ error || externalError }}\n    </div>\n  }\n</div>\n\n<ng-template\n  #autocompleteInputTemplate\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    #autocompleteInput\n    type=\"text\"\n    class=\"cps-autocomplete-box-input\"\n    spellcheck=\"false\"\n    [disabled]=\"disabled\"\n    role=\"combobox\"\n    aria-autocomplete=\"list\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-invalid]=\"error || externalError ? 'true' : null\"\n    [attr.aria-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-required]=\"isRequired || null\"\n    [ngClass]=\"inputClass\"\n    [ngStyle]=\"inputStyle\"\n    [placeholder]=\"\n      (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n        ? placeholder\n        : ''\n    \"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    [attr.aria-label]=\"computedLabel\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <div\n    class=\"cps-autocomplete-options-option\"\n    [id]=\"getOptionId(item, itemIndex)\"\n    role=\"option\"\n    tabindex=\"-1\"\n    [attr.aria-setsize]=\"optionsAriaSetSize\"\n    [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIndex)\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onOptionClick(item)\"\n    [class.highlighten]=\"\n      itemIndex === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-autocomplete-options-option-check\"> </span>\n      }\n      <span\n        data-testid=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:inherit;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.opened .cps-autocomplete-box .cps-autocomplete-box-chevron{top:1.375rem;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);background-color:var(--cps-surface-body);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container.active .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:var(--cps-input-background);font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:2.25rem;padding:0;background-color:transparent;width:0;min-width:1.875rem;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:inherit}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-input-placeholder);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:.1875rem;padding-bottom:.1875rem;min-height:2.25rem;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:1.875rem}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:1.75rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group{display:contents}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group{display:contents;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group .text-group-item{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-state-error);margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:hover cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus cps-icon{opacity:1}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon-hidden{visibility:hidden}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);background-color:var(--cps-surface-body);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:var(--cps-color-bg-disabled)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-state-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:inherit;background:var(--cps-popover-background);overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:.6875rem;font-size:1rem;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-medium);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:1rem;height:1rem;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:.5rem;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:.25rem;left:.0625rem;width:.5rem;height:.1875rem;border-left:.125rem solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:.125rem solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-right{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$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: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled", "closeButtonAriaLabel"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "ngmodule", type: ScrollerModule }, { kind: "component", type: i4$1.Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsAutocompleteComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: LabelByValuePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", ariaLabel: "ariaLabel", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", showChevron: "showChevron", withOptionsAliases: "withOptionsAliases", useOptionsAliasesWhenNoMatch: "useOptionsAliasesWhenNoMatch", optionAlias: "optionAlias", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", loadingMessage: "loadingMessage", showLoadingMessage: "showLoadingMessage", emptyMessage: "emptyMessage", showEmptyMessage: "showEmptyMessage", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", externalError: "externalError", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", emptyOptionIndex: "emptyOptionIndex", inputChangeDebounceTime: "inputChangeDebounceTime", validating: "validating", _value: ["value", "_value"], options: "options" }, outputs: { valueChanged: "valueChanged", inputChanged: "inputChanged", focused: "focused", blurred: "blurred" }, providers: [LabelByValuePipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "autocompleteBox", first: true, predicate: ["autocompleteBox"], descendants: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isActive,\n    opened: isOpened\n  }\"\n  #autocompleteContainer>\n  @if (label) {\n    <div class=\"cps-autocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-autocomplete-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-autocomplete-container\"\n    [class.active]=\"isActive\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            aria-hidden=\"true\"\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (hasSelectedValue()) {\n          <div class=\"cps-autocomplete-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                <div class=\"single-item-selection\">\n                  <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                    returnObject\n                      ? value[optionLabel]\n                      : (value\n                        | labelByValue: options : optionValue : optionLabel)\n                  }}</span>\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'single-item-input',\n                      inputStyle: activeSingle ? { opacity: '1' } : null\n                    }\n                  \">\n                </ng-container>\n              </span>\n            }\n            @if (multiple && !chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"text-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <div\n                      class=\"text-group-item\"\n                      role=\"listitem\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\">\n                      {{\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue\n                              : options\n                              : optionValue\n                              : optionLabel)\n                      }}{{ !last ? ',' : '' }}\n                    </div>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-item-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"chips-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <cps-chip\n                      role=\"listitem\"\n                      closeButtonAriaLabel=\"Remove\"\n                      [disabled]=\"disabled\"\n                      [closable]=\"closableChips\"\n                      (closed)=\"select(val, true)\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\"\n                      [label]=\"\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue: options : optionValue : optionLabel)\n                      \">\n                    </cps-chip>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-chip-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"autocompleteInputTemplate\"></ng-container>\n        }\n        <span class=\"cps-autocomplete-box-icons\">\n          @if (clearable && !disabled) {\n            <span\n              role=\"button\"\n              (click)=\"clear($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (keydown.enter)=\"clear($event)\"\n              (keydown.space)=\"clear($event)\"\n              aria-label=\"Clear selection\"\n              [tabindex]=\"disabled ? -1 : 0\"\n              class=\"cps-autocomplete-box-clear-icon\"\n              [ngClass]=\"{\n                'cps-autocomplete-box-clear-icon-hidden':\n                  !persistentClear && !hasSelectedValue()\n              }\">\n              <cps-icon\n                icon=\"delete\"\n                size=\"small\"\n                aria-hidden=\"true\"></cps-icon>\n            </span>\n          }\n          @if (showChevron && options.length) {\n            <span\n              class=\"cps-autocomplete-box-chevron\"\n              role=\"button\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\">\n              <cps-icon\n                aria-hidden=\"true\"\n                icon=\"chevron-down\"\n                size=\"small\"\n                [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n            </span>\n          }\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-autocomplete-options-menu\">\n      <div\n        #optionsList\n        role=\"listbox\"\n        [id]=\"optionsListId\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-autocomplete-options\"\n        [style.width.px]=\"autocompleteBoxWidthPx\">\n        @if (loading && showLoadingMessage) {\n          <div\n            class=\"cps-autocomplete-options-loading\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ loadingMessage }}\n          </div>\n        }\n        @if (\n          showEmptyMessage &&\n          filteredOptions.length < 1 &&\n          !loading &&\n          inputTextDebounced\n        ) {\n          <div\n            class=\"cps-autocomplete-options-empty\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ emptyMessage }}\n          </div>\n        }\n        @if (isSelectAllVisible) {\n          <div\n            class=\"cps-autocomplete-options-option select-all-option\"\n            [id]=\"selectAllOptionId\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"false\"\n            [attr.aria-setsize]=\"optionsAriaSetSize\"\n            [attr.aria-posinset]=\"1\"\n            [attr.aria-selected]=\"value?.length === options.length\"\n            [class.allselected]=\"value?.length === options.length\"\n            [class.highlighten]=\"\n              isArrowNavigating && optionHighlightedIndex === 0\n            \"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-autocomplete-options-option-left\">\n              @if (multiple) {\n                <span class=\"cps-autocomplete-options-option-check\"> </span>\n              }\n              <span class=\"cps-autocomplete-options-option-label\"\n                >Select all</span\n              >\n            </span>\n          </div>\n        }\n        @if (!loading) {\n          @if (virtualScroll) {\n            <p-virtualscroller\n              #virtualList\n              [tabindex]=\"-1\"\n              [items]=\"filteredOptions\"\n              [delay]=\"0\"\n              [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n              [options]=\"{ numToleratedItems: numToleratedItems }\"\n              [itemSize]=\"virtualScrollItemSizePx()\">\n              <ng-template pTemplate=\"item\" let-item let-options=\"options\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemTemplate;\n                    context: {\n                      item: item,\n                      itemIndex: options.index\n                    }\n                  \"></ng-container>\n              </ng-template>\n            </p-virtualscroller>\n          } @else {\n            @for (item of filteredOptions; track item; let itemIndex = $index) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item,\n                    itemIndex: itemIndex\n                  }\n                \"></ng-container>\n            }\n          }\n        }\n      </div>\n    </cps-menu>\n    @if (loading || validating) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"autocomplete-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !externalError && !hideDetails) {\n    <div class=\"cps-autocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if ((error || externalError) && !hideDetails) {\n    <div class=\"cps-autocomplete-error\" role=\"alert\" aria-live=\"assertive\">\n      {{ error || externalError }}\n    </div>\n  }\n</div>\n\n<ng-template\n  #autocompleteInputTemplate\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    #autocompleteInput\n    type=\"text\"\n    class=\"cps-autocomplete-box-input\"\n    spellcheck=\"false\"\n    [disabled]=\"disabled\"\n    role=\"combobox\"\n    aria-autocomplete=\"list\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-invalid]=\"error || externalError ? 'true' : null\"\n    [attr.aria-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-required]=\"isRequired || null\"\n    [ngClass]=\"inputClass\"\n    [ngStyle]=\"inputStyle\"\n    [placeholder]=\"!hasSelectedValue() ? placeholder : ''\"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    [attr.aria-label]=\"computedLabel\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <div\n    class=\"cps-autocomplete-options-option\"\n    [id]=\"getOptionId(item, itemIndex)\"\n    role=\"option\"\n    tabindex=\"-1\"\n    [attr.aria-setsize]=\"optionsAriaSetSize\"\n    [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIndex)\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onOptionClick(item)\"\n    [class.highlighten]=\"\n      isArrowNavigating &&\n      itemIndex === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-autocomplete-options-option-check\"> </span>\n      }\n      <span\n        data-testid=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:inherit;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.opened .cps-autocomplete-box .cps-autocomplete-box-chevron{top:1.375rem;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);background-color:var(--cps-surface-body);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container.active .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:var(--cps-input-background);font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:2.25rem;padding:0;background-color:transparent;width:0;min-width:1.875rem;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:inherit}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{-webkit-user-select:none;user-select:none;color:var(--cps-input-placeholder);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:.1875rem;padding-bottom:.1875rem;min-height:2.25rem;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:1.875rem}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:1.75rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group{display:contents}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group{display:contents;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group .text-group-item{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-state-error);margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:hover cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus cps-icon{opacity:1}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon-hidden{visibility:hidden}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);background-color:var(--cps-surface-body);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:var(--cps-color-bg-disabled)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-state-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:inherit;background:var(--cps-popover-background);overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:.6875rem;font-size:1rem;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-medium);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:1rem;height:1rem;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:.5rem;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:.25rem;left:.0625rem;width:.5rem;height:.1875rem;border-left:.125rem solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:.125rem solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-right{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$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: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled", "closeButtonAriaLabel"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "ngmodule", type: ScrollerModule }, { kind: "component", type: i4$1.Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsAutocompleteComponent, decorators: [{
             type: Component,
@@ -2821,17 +2940,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         CheckOptionSelectedPipe,
                         ScrollerModule,
                         CpsMenuComponent
-                    ], providers: [LabelByValuePipe, CheckOptionSelectedPipe], selector: 'cps-autocomplete', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isActive,\n    opened: isOpened\n  }\"\n  #autocompleteContainer>\n  @if (label) {\n    <div class=\"cps-autocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-autocomplete-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-autocomplete-container\"\n    [class.active]=\"isActive\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (\n          (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n        ) {\n          <div class=\"cps-autocomplete-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                <div class=\"single-item-selection\">\n                  <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                    returnObject\n                      ? value[optionLabel]\n                      : (value\n                        | labelByValue: options : optionValue : optionLabel)\n                  }}</span>\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'single-item-input',\n                      inputStyle: activeSingle ? { opacity: '1' } : null\n                    }\n                  \">\n                </ng-container>\n              </span>\n            }\n            @if (multiple && !chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"text-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <div\n                      class=\"text-group-item\"\n                      role=\"listitem\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\">\n                      {{\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue\n                              : options\n                              : optionValue\n                              : optionLabel)\n                      }}{{ !last ? ',' : '' }}\n                    </div>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-item-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"chips-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <cps-chip\n                      role=\"listitem\"\n                      closeButtonAriaLabel=\"Remove\"\n                      [disabled]=\"disabled\"\n                      [closable]=\"closableChips\"\n                      (closed)=\"select(val, true)\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\"\n                      [label]=\"\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue: options : optionValue : optionLabel)\n                      \">\n                    </cps-chip>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-chip-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"autocompleteInputTemplate\"></ng-container>\n        }\n        <span class=\"cps-autocomplete-box-icons\">\n          @if (clearable && !disabled) {\n            <span\n              role=\"button\"\n              (click)=\"clear($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (keydown.enter)=\"clear($event)\"\n              (keydown.space)=\"clear($event)\"\n              aria-label=\"Clear selection\"\n              [tabindex]=\"disabled ? -1 : 0\"\n              class=\"cps-autocomplete-box-clear-icon\"\n              [ngClass]=\"{\n                'cps-autocomplete-box-clear-icon-hidden':\n                  !persistentClear &&\n                  (!multiple || !value?.length) &&\n                  (multiple || isEmptyValue())\n              }\">\n              <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n            </span>\n          }\n          @if (showChevron && options.length) {\n            <span\n              class=\"cps-autocomplete-box-chevron\"\n              role=\"button\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\">\n              <cps-icon\n                icon=\"chevron-down\"\n                size=\"small\"\n                [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n            </span>\n          }\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-autocomplete-options-menu\">\n      <div\n        #optionsList\n        role=\"listbox\"\n        [id]=\"optionsListId\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-autocomplete-options\"\n        [style.width.rem]=\"autocompleteBoxWidthRem\">\n        @if (loading && showLoadingMessage) {\n          <div\n            class=\"cps-autocomplete-options-loading\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ loadingMessage }}\n          </div>\n        }\n        @if (\n          showEmptyMessage &&\n          filteredOptions.length < 1 &&\n          !loading &&\n          inputTextDebounced\n        ) {\n          <div\n            class=\"cps-autocomplete-options-empty\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ emptyMessage }}\n          </div>\n        }\n        @if (isSelectAllVisible) {\n          <div\n            class=\"cps-autocomplete-options-option select-all-option\"\n            [id]=\"selectAllOptionId\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"false\"\n            [attr.aria-setsize]=\"optionsAriaSetSize\"\n            [attr.aria-posinset]=\"1\"\n            [attr.aria-selected]=\"value?.length === options.length\"\n            [class.allselected]=\"value?.length === options.length\"\n            [class.highlighten]=\"optionHighlightedIndex === 0\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-autocomplete-options-option-left\">\n              @if (multiple) {\n                <span class=\"cps-autocomplete-options-option-check\"> </span>\n              }\n              <span class=\"cps-autocomplete-options-option-label\"\n                >Select all</span\n              >\n            </span>\n          </div>\n        }\n        @if (!loading) {\n          @if (virtualScroll) {\n            <p-virtualscroller\n              #virtualList\n              [tabindex]=\"-1\"\n              [items]=\"filteredOptions\"\n              [delay]=\"0\"\n              [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n              [options]=\"{ numToleratedItems: numToleratedItems }\"\n              [itemSize]=\"virtualScrollItemSizePx\">\n              <ng-template pTemplate=\"item\" let-item let-options=\"options\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemTemplate;\n                    context: {\n                      item: item,\n                      itemIndex: options.index\n                    }\n                  \"></ng-container>\n              </ng-template>\n            </p-virtualscroller>\n          } @else {\n            @for (item of filteredOptions; track item; let itemIndex = $index) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item,\n                    itemIndex: itemIndex\n                  }\n                \"></ng-container>\n            }\n          }\n        }\n      </div>\n    </cps-menu>\n    @if (loading || validating) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"autocomplete-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !externalError && !hideDetails) {\n    <div class=\"cps-autocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if ((error || externalError) && !hideDetails) {\n    <div class=\"cps-autocomplete-error\" role=\"alert\" aria-live=\"assertive\">\n      {{ error || externalError }}\n    </div>\n  }\n</div>\n\n<ng-template\n  #autocompleteInputTemplate\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    #autocompleteInput\n    type=\"text\"\n    class=\"cps-autocomplete-box-input\"\n    spellcheck=\"false\"\n    [disabled]=\"disabled\"\n    role=\"combobox\"\n    aria-autocomplete=\"list\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-invalid]=\"error || externalError ? 'true' : null\"\n    [attr.aria-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-required]=\"isRequired || null\"\n    [ngClass]=\"inputClass\"\n    [ngStyle]=\"inputStyle\"\n    [placeholder]=\"\n      (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n        ? placeholder\n        : ''\n    \"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    [attr.aria-label]=\"computedLabel\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <div\n    class=\"cps-autocomplete-options-option\"\n    [id]=\"getOptionId(item, itemIndex)\"\n    role=\"option\"\n    tabindex=\"-1\"\n    [attr.aria-setsize]=\"optionsAriaSetSize\"\n    [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIndex)\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onOptionClick(item)\"\n    [class.highlighten]=\"\n      itemIndex === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-autocomplete-options-option-check\"> </span>\n      }\n      <span\n        data-testid=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:inherit;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.opened .cps-autocomplete-box .cps-autocomplete-box-chevron{top:1.375rem;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);background-color:var(--cps-surface-body);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container.active .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:var(--cps-input-background);font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:2.25rem;padding:0;background-color:transparent;width:0;min-width:1.875rem;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:inherit}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-input-placeholder);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:.1875rem;padding-bottom:.1875rem;min-height:2.25rem;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:1.875rem}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:1.75rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group{display:contents}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group{display:contents;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group .text-group-item{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-state-error);margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:hover cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus cps-icon{opacity:1}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon-hidden{visibility:hidden}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);background-color:var(--cps-surface-body);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:var(--cps-color-bg-disabled)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-state-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:inherit;background:var(--cps-popover-background);overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:.6875rem;font-size:1rem;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-medium);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:1rem;height:1rem;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:.5rem;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:.25rem;left:.0625rem;width:.5rem;height:.1875rem;border-left:.125rem solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:.125rem solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-right{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"] }]
+                    ], providers: [LabelByValuePipe, CheckOptionSelectedPipe], selector: 'cps-autocomplete', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isActive,\n    opened: isOpened\n  }\"\n  #autocompleteContainer>\n  @if (label) {\n    <div class=\"cps-autocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-autocomplete-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-autocomplete-container\"\n    [class.active]=\"isActive\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            aria-hidden=\"true\"\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (hasSelectedValue()) {\n          <div class=\"cps-autocomplete-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                <div class=\"single-item-selection\">\n                  <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                    returnObject\n                      ? value[optionLabel]\n                      : (value\n                        | labelByValue: options : optionValue : optionLabel)\n                  }}</span>\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'single-item-input',\n                      inputStyle: activeSingle ? { opacity: '1' } : null\n                    }\n                  \">\n                </ng-container>\n              </span>\n            }\n            @if (multiple && !chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"text-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <div\n                      class=\"text-group-item\"\n                      role=\"listitem\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\">\n                      {{\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue\n                              : options\n                              : optionValue\n                              : optionLabel)\n                      }}{{ !last ? ',' : '' }}\n                    </div>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-item-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"chips-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <cps-chip\n                      role=\"listitem\"\n                      closeButtonAriaLabel=\"Remove\"\n                      [disabled]=\"disabled\"\n                      [closable]=\"closableChips\"\n                      (closed)=\"select(val, true)\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\"\n                      [label]=\"\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue: options : optionValue : optionLabel)\n                      \">\n                    </cps-chip>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-chip-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"autocompleteInputTemplate\"></ng-container>\n        }\n        <span class=\"cps-autocomplete-box-icons\">\n          @if (clearable && !disabled) {\n            <span\n              role=\"button\"\n              (click)=\"clear($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (keydown.enter)=\"clear($event)\"\n              (keydown.space)=\"clear($event)\"\n              aria-label=\"Clear selection\"\n              [tabindex]=\"disabled ? -1 : 0\"\n              class=\"cps-autocomplete-box-clear-icon\"\n              [ngClass]=\"{\n                'cps-autocomplete-box-clear-icon-hidden':\n                  !persistentClear && !hasSelectedValue()\n              }\">\n              <cps-icon\n                icon=\"delete\"\n                size=\"small\"\n                aria-hidden=\"true\"></cps-icon>\n            </span>\n          }\n          @if (showChevron && options.length) {\n            <span\n              class=\"cps-autocomplete-box-chevron\"\n              role=\"button\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\">\n              <cps-icon\n                aria-hidden=\"true\"\n                icon=\"chevron-down\"\n                size=\"small\"\n                [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n            </span>\n          }\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-autocomplete-options-menu\">\n      <div\n        #optionsList\n        role=\"listbox\"\n        [id]=\"optionsListId\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-autocomplete-options\"\n        [style.width.px]=\"autocompleteBoxWidthPx\">\n        @if (loading && showLoadingMessage) {\n          <div\n            class=\"cps-autocomplete-options-loading\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ loadingMessage }}\n          </div>\n        }\n        @if (\n          showEmptyMessage &&\n          filteredOptions.length < 1 &&\n          !loading &&\n          inputTextDebounced\n        ) {\n          <div\n            class=\"cps-autocomplete-options-empty\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ emptyMessage }}\n          </div>\n        }\n        @if (isSelectAllVisible) {\n          <div\n            class=\"cps-autocomplete-options-option select-all-option\"\n            [id]=\"selectAllOptionId\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"false\"\n            [attr.aria-setsize]=\"optionsAriaSetSize\"\n            [attr.aria-posinset]=\"1\"\n            [attr.aria-selected]=\"value?.length === options.length\"\n            [class.allselected]=\"value?.length === options.length\"\n            [class.highlighten]=\"\n              isArrowNavigating && optionHighlightedIndex === 0\n            \"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-autocomplete-options-option-left\">\n              @if (multiple) {\n                <span class=\"cps-autocomplete-options-option-check\"> </span>\n              }\n              <span class=\"cps-autocomplete-options-option-label\"\n                >Select all</span\n              >\n            </span>\n          </div>\n        }\n        @if (!loading) {\n          @if (virtualScroll) {\n            <p-virtualscroller\n              #virtualList\n              [tabindex]=\"-1\"\n              [items]=\"filteredOptions\"\n              [delay]=\"0\"\n              [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n              [options]=\"{ numToleratedItems: numToleratedItems }\"\n              [itemSize]=\"virtualScrollItemSizePx()\">\n              <ng-template pTemplate=\"item\" let-item let-options=\"options\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemTemplate;\n                    context: {\n                      item: item,\n                      itemIndex: options.index\n                    }\n                  \"></ng-container>\n              </ng-template>\n            </p-virtualscroller>\n          } @else {\n            @for (item of filteredOptions; track item; let itemIndex = $index) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item,\n                    itemIndex: itemIndex\n                  }\n                \"></ng-container>\n            }\n          }\n        }\n      </div>\n    </cps-menu>\n    @if (loading || validating) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"autocomplete-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !externalError && !hideDetails) {\n    <div class=\"cps-autocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if ((error || externalError) && !hideDetails) {\n    <div class=\"cps-autocomplete-error\" role=\"alert\" aria-live=\"assertive\">\n      {{ error || externalError }}\n    </div>\n  }\n</div>\n\n<ng-template\n  #autocompleteInputTemplate\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    #autocompleteInput\n    type=\"text\"\n    class=\"cps-autocomplete-box-input\"\n    spellcheck=\"false\"\n    [disabled]=\"disabled\"\n    role=\"combobox\"\n    aria-autocomplete=\"list\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-invalid]=\"error || externalError ? 'true' : null\"\n    [attr.aria-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-required]=\"isRequired || null\"\n    [ngClass]=\"inputClass\"\n    [ngStyle]=\"inputStyle\"\n    [placeholder]=\"!hasSelectedValue() ? placeholder : ''\"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    [attr.aria-label]=\"computedLabel\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <div\n    class=\"cps-autocomplete-options-option\"\n    [id]=\"getOptionId(item, itemIndex)\"\n    role=\"option\"\n    tabindex=\"-1\"\n    [attr.aria-setsize]=\"optionsAriaSetSize\"\n    [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIndex)\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onOptionClick(item)\"\n    [class.highlighten]=\"\n      isArrowNavigating &&\n      itemIndex === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-autocomplete-options-option-check\"> </span>\n      }\n      <span\n        data-testid=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:inherit;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.opened .cps-autocomplete-box .cps-autocomplete-box-chevron{top:1.375rem;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);background-color:var(--cps-surface-body);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container.active .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:var(--cps-input-background);font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:2.25rem;padding:0;background-color:transparent;width:0;min-width:1.875rem;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:inherit}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{-webkit-user-select:none;user-select:none;color:var(--cps-input-placeholder);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:.1875rem;padding-bottom:.1875rem;min-height:2.25rem;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:1.875rem}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:1.75rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group{display:contents}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group{display:contents;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group .text-group-item{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-state-error);margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:hover cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus cps-icon{opacity:1}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon-hidden{visibility:hidden}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);background-color:var(--cps-surface-body);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:var(--cps-color-bg-disabled)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-state-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:inherit;background:var(--cps-popover-background);overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:.6875rem;font-size:1rem;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-medium);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:1rem;height:1rem;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:.5rem;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:.25rem;left:.0625rem;width:.5rem;height:.1875rem;border-left:.125rem solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:.125rem solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-right{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
                 }] }, { type: i0.ChangeDetectorRef }, { type: LabelByValuePipe }], propDecorators: { label: [{
                 type: Input
             }], ariaLabel: [{
@@ -2961,12 +3074,10 @@ class CpsButtonToggleComponent {
     get value() {
         return this._value;
     }
-    constructor(_control, document, platformId, renderer, cdr) {
+    constructor(_control, document, renderer) {
         this._control = _control;
         this.document = document;
-        this.platformId = platformId;
         this.renderer = renderer;
-        this.cdr = cdr;
         /**
          * Label of the button toggle component.
          * @group Props
@@ -3044,7 +3155,7 @@ class CpsButtonToggleComponent {
          */
         this.valueChanged = new EventEmitter();
         this.largestButtonWidthRem = 0;
-        this._rootFontSizePx = 16;
+        this._cpsRootFontSizeService = inject(CPS_ROOT_FONT_SIZE_SERVICE);
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = (_event) => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -3052,29 +3163,26 @@ class CpsButtonToggleComponent {
         if (this._control) {
             this._control.valueAccessor = this;
         }
+        effect(() => {
+            const rootFontSizePx = this._cpsRootFontSizeService?.fontSize() || 16;
+            if (this.document?.fonts?.ready) {
+                this.document.fonts.ready.then(() => {
+                    this._setEqualWidths(this._cpsRootFontSizeService?.fontSize() || 16);
+                });
+            }
+            else {
+                this._setEqualWidths(rootFontSizePx);
+            }
+        });
     }
     ngOnInit() {
         if (this.multiple && !this._value) {
             this._value = [];
         }
-        if (isPlatformBrowser(this.platformId)) {
-            this._rootFontSizePx = parseFloat(getComputedStyle(this.document.documentElement).fontSize || '16');
-        }
-        if (this.document?.fonts?.ready) {
-            this.document.fonts.ready.then(() => {
-                this._setEqualWidths();
-                this.cdr.markForCheck();
-            });
-        }
-        else {
-            this._setEqualWidths();
-        }
     }
     ngOnChanges(changes) {
-        if (changes.label || changes.ariaLabel) {
-            if (!this.label?.trim() && !this.ariaLabel?.trim()) {
-                console.error('CpsButtonToggleComponent: unlabeled button toggle component must have an ariaLabel for accessibility.');
-            }
+        if (!this.label?.trim() && !this.ariaLabel?.trim()) {
+            console.error('CpsButtonToggleComponent: unlabeled button toggle component must have an ariaLabel for accessibility.');
         }
         if (changes.options) {
             const hasInaccessibleOption = this.options.some((opt) => !opt.label?.trim() && !opt.ariaLabel?.trim());
@@ -3128,7 +3236,7 @@ class CpsButtonToggleComponent {
         this.onChange(value);
         this.valueChanged.emit(value);
     }
-    _setEqualWidths() {
+    _setEqualWidths(rootFontSizePx) {
         if (!this.equalWidths)
             return;
         const hiddenSpan = this.renderer.createElement('span');
@@ -3143,7 +3251,7 @@ class CpsButtonToggleComponent {
         this.options.forEach((opt) => {
             const label = opt.label || '';
             this.renderer.setProperty(hiddenSpan, 'textContent', label);
-            const textWidthRem = this._pxToRem(hiddenSpan.offsetWidth || 0);
+            const textWidthRem = (hiddenSpan.offsetWidth || 0) / rootFontSizePx;
             let totalWidthRem = textWidthRem + 1.625; // padding: 2×0.75rem + borders: 2×0.0625rem = 1.625rem
             if (opt.icon) {
                 totalWidthRem += 1; // icon width: 1rem (cps-icon 'small' size)
@@ -3155,10 +3263,7 @@ class CpsButtonToggleComponent {
         });
         this.renderer.removeChild(this.document.body, hiddenSpan);
     }
-    _pxToRem(px) {
-        return px / this._rootFontSizePx;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsButtonToggleComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsButtonToggleComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", ariaLabel: "ariaLabel", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", equalWidths: "equalWidths", optionTooltipPosition: "optionTooltipPosition", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-btn-toggle\">\n  @if (label) {\n    <div class=\"cps-btn-toggle-label\" [class.disabled]=\"disabled\">\n      <span>{{ label }}</span>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-btn-toggle-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    class=\"cps-btn-toggle-content\"\n    role=\"group\"\n    [attr.aria-label]=\"ariaLabel || label || null\">\n    @for (option of options; track option.value) {\n      @if (option.tooltip) {\n        <span\n          class=\"cps-btn-toggle-option-wrapper\"\n          [cpsTooltip]=\"option.tooltip\"\n          tooltipCloseDelay=\"0\"\n          [tooltipPosition]=\"optionTooltipPosition\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              buttonTemplate;\n              context: { option }\n            \"></ng-container>\n        </span>\n      }\n      @if (!option.tooltip) {\n        <span class=\"cps-btn-toggle-option-wrapper\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              buttonTemplate;\n              context: { option }\n            \"></ng-container>\n        </span>\n      }\n    }\n  </div>\n</div>\n<ng-template #buttonTemplate let-option=\"option\">\n  <button\n    type=\"button\"\n    class=\"cps-btn-toggle-content-option\"\n    [class.is-selected]=\"\n      option.value | checkOptionSelected: value : multiple : true : ''\n    \"\n    [disabled]=\"option.disabled || disabled\"\n    (click)=\"updateValueOnClick(option.value)\"\n    [attr.aria-pressed]=\"\n      option.value | checkOptionSelected: value : multiple : true : ''\n    \"\n    [attr.aria-label]=\"option.ariaLabel || option.label || null\"\n    [style.min-width.rem]=\"equalWidths ? largestButtonWidthRem : null\">\n    <span class=\"cps-btn-toggle-content-option-inner\">\n      @if (option.icon) {\n        <cps-icon [class.me-2]=\"!!option.label\" [icon]=\"option.icon\">\n        </cps-icon>\n      }\n      @if (option.label) {\n        <span>{{ option.label }}</span>\n      }\n    </span>\n  </button>\n</ng-template>\n", styles: [":host .cps-btn-toggle{display:block}:host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:flex;font-weight:700;font-size:1rem;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-btn-toggle-label.disabled{color:var(--cps-color-text-mild)}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:.5rem}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}:host .cps-btn-toggle-content{display:flex;flex-wrap:nowrap}:host .cps-btn-toggle-option-wrapper{display:flex}:host .cps-btn-toggle-option-wrapper:not(:last-child) .cps-btn-toggle-content-option{border-right:0}:host .cps-btn-toggle-content-option{height:2.375rem;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;padding:.375rem .75rem;position:relative;border:.0625rem solid var(--cps-color-text-lightest);font-weight:400;font-size:1rem;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option:hover{background:var(--cps-color-highlight-hover);transition:background-color .2s ease}:host .cps-btn-toggle-content-option:active{background:var(--cps-color-highlight-active);transition:background-color .2s ease}:host .cps-btn-toggle-content-option:focus-visible:not(.is-selected):not(:active){background:var(--cps-color-highlight-hover)}:host .cps-btn-toggle-content-option:focus-visible{outline:none;position:relative}:host .cps-btn-toggle-content-option:focus-visible:before,:host .cps-btn-toggle-content-option:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-btn-toggle-content-option:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-btn-toggle-content-option:focus-visible:after{inset:-.3125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-btn-toggle-content-option:focus-visible.suppress-focus-visible:before,:host .cps-btn-toggle-content-option:focus-visible.suppress-focus-visible:after{display:none}:host .cps-btn-toggle-content-option:focus-visible{z-index:1}:host .cps-btn-toggle-content-option.is-selected{background:var(--cps-color-calm);color:#fff}:host .cps-btn-toggle-content-option:disabled{background:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild);cursor:default}:host .cps-btn-toggle-content-option:disabled.is-selected{background:var(--cps-color-bg-disabled-selected);color:var(--cps-color-text-medium);opacity:1}:host .cps-btn-toggle-option-wrapper:first-child .cps-btn-toggle-content-option{border-radius:.25rem 0 0 .25rem}:host .cps-btn-toggle-option-wrapper:last-child .cps-btn-toggle-content-option{border-radius:0 .25rem .25rem 0}:host .cps-btn-toggle-content-option-inner{display:flex;align-items:center;justify-content:center;width:100%;height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsButtonToggleComponent, decorators: [{
@@ -3177,10 +3282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 }] }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
+                }] }, { type: i0.Renderer2 }], propDecorators: { label: [{
                 type: Input
             }], ariaLabel: [{
                 type: Input
@@ -3301,7 +3403,7 @@ class CpsButtonComponent {
         this.classesList = [];
         this.enterActive = false;
     }
-    ngOnChanges(changes) {
+    ngOnChanges() {
         this.buttonColor = getCSSColor(this.color, this.document);
         this.borderRadius = convertSize(this.borderRadius);
         this.textColor =
@@ -3311,10 +3413,8 @@ class CpsButtonComponent {
         if (this.disabled || this.loading) {
             this.enterActive = false;
         }
-        if (changes.label || changes.ariaLabel) {
-            if (!this.label?.trim() && !this.ariaLabel?.trim()) {
-                console.error('CpsButtonComponent: icon-only or unlabeled button must have an ariaLabel for accessibility.');
-            }
+        if (!this.label?.trim() && !this.ariaLabel?.trim()) {
+            console.error('CpsButtonComponent: icon-only or unlabeled button must have an ariaLabel for accessibility.');
         }
         this.setClasses();
     }
@@ -3530,11 +3630,9 @@ class CpsCheckboxComponent {
     ngOnInit() {
         this.iconColor = getCSSColor(this.iconColor, this.document);
     }
-    ngOnChanges(changes) {
-        if (changes.label || changes.ariaLabel) {
-            if (!this.label?.trim() && !this.ariaLabel?.trim()) {
-                console.error('CpsCheckboxComponent: icon-only or unlabeled checkbox must have an ariaLabel for accessibility.');
-            }
+    ngOnChanges() {
+        if (!this.label?.trim() && !this.ariaLabel?.trim()) {
+            console.error('CpsCheckboxComponent: icon-only or unlabeled checkbox must have an ariaLabel for accessibility.');
         }
     }
     registerOnChange(fn) {
@@ -4971,6 +5069,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             args: [{ standalone: true, name: 'combineLabels' }]
         }] });
 
+const VIRTUAL_SCROLL_ITEM_SIZE_REM = 2.75;
+const VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS = 5.5;
 /**
  * CpsSelectComponent is used to select items from a collection.
  * @group Components
@@ -4990,6 +5090,11 @@ class CpsSelectComponent {
          * @group Props
          */
         this.label = '';
+        /**
+         * Aria label for the select component, used for accessibility, it takes precedence over label.
+         * @group Props
+         */
+        this.ariaLabel = '';
         /**
          * Placeholder text for the select component.
          * @group Props
@@ -5099,7 +5204,7 @@ class CpsSelectComponent {
          * Size of icon before input value.
          * @group Props
          */
-        this.prefixIconSize = '18px';
+        this.prefixIconSize = '1.125rem';
         /**
          * When enabled, a loading bar is displayed.
          * @group Props
@@ -5181,10 +5286,18 @@ class CpsSelectComponent {
         this.error = '';
         this.cvtWidth = '';
         this.isOpened = false;
+        this.isActive = false;
         this.optionHighlightedIndex = -1;
-        this.virtualListHeight = 242;
-        this.virtualScrollItemSize = 44;
-        this.selectBoxWidth = 0;
+        this.isArrowNavigating = false;
+        this.virtualScrollItemSizePx = computed(() => (this._cpsRootFontSizeService?.fontSize() || 16) *
+            VIRTUAL_SCROLL_ITEM_SIZE_REM, ...(ngDevMode ? [{ debugName: "virtualScrollItemSizePx" }] : /* istanbul ignore next */ []));
+        this.virtualListHeightRem = VIRTUAL_SCROLL_ITEM_SIZE_REM * VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS;
+        this.selectBoxWidthPx = 0;
+        this._cpsRootFontSizeService = inject(CPS_ROOT_FONT_SIZE_SERVICE);
+        this.optionsListId = generateUniqueId('cps-select-options-list');
+        this.selectAllOptionId = generateUniqueId('cps-select-option-select-all');
+        this._optionIdPrefix = generateUniqueId('cps-select-option');
+        this._optionIds = new WeakMap();
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = (_event) => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -5195,11 +5308,13 @@ class CpsSelectComponent {
         this.resizeObserver = new ResizeObserver((entries) => {
             entries.forEach((entry) => {
                 if (entry?.target)
-                    this.selectBoxWidth = entry.target.offsetWidth;
+                    this.selectBoxWidthPx = entry.target.offsetWidth;
             });
         });
     }
     ngOnInit() {
+        this.virtualListHeightRem =
+            VIRTUAL_SCROLL_ITEM_SIZE_REM * VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS;
         this.cvtWidth = convertSize(this.width);
         if (this.multiple && !this._value) {
             this._value = [];
@@ -5207,7 +5322,24 @@ class CpsSelectComponent {
         this._statusChangesSubscription = this._control?.statusChanges?.subscribe(() => {
             this._checkErrors();
         });
-        this._recalcVirtualListHeight();
+        this.recalcVirtualListHeight();
+    }
+    ngOnChanges(changes) {
+        if (changes.width) {
+            this.cvtWidth = convertSize(this.width);
+        }
+        if (changes.options) {
+            this._optionIds = new WeakMap();
+            this.options.forEach((opt, index) => {
+                if (opt && typeof opt === 'object') {
+                    this._optionIds.set(opt, this._buildOptionId(index));
+                }
+            });
+            this.recalcVirtualListHeight();
+        }
+        if (!this.label?.trim() && !this.ariaLabel?.trim()) {
+            console.error('CpsSelectComponent: unlabeled select component must have an ariaLabel for accessibility.');
+        }
     }
     ngAfterViewInit() {
         this.resizeObserver.observe(this.selectBox.nativeElement);
@@ -5237,6 +5369,7 @@ class CpsSelectComponent {
         this.isOpened = this.optionsMenu.isVisible();
         setTimeout(() => {
             if (this.isOpened && this.options.length > 0) {
+                this._syncHighlightToValue();
                 const selected = this.optionsList.nativeElement.querySelector('.selected');
                 if (selected) {
                     selected.scrollIntoView({
@@ -5245,27 +5378,20 @@ class CpsSelectComponent {
                         inline: 'center'
                     });
                 }
-                else if (this.virtualScroll && !this.isEmptyValue()) {
-                    let v;
-                    if (this.multiple) {
-                        if (this.value.length > 0) {
-                            v = this.value[0];
-                        }
-                    }
-                    else
-                        v = this.value;
-                    const idx = this.options.findIndex((o) => isEqual(o, v));
-                    if (idx >= 0)
-                        this.virtualList.scrollToIndex(idx);
+                else if (this.virtualScroll && this.optionHighlightedIndex >= 0) {
+                    this._scrollVirtualListToIndex(this.optionHighlightedIndex);
                 }
             }
         });
     }
-    _recalcVirtualListHeight() {
+    recalcVirtualListHeight() {
         if (!this.virtualScroll)
             return;
         const currentLen = this.options?.length || 0;
-        this.virtualListHeight = Math.min(this.virtualScrollItemSize * currentLen, 242);
+        this.virtualListHeightRem =
+            VIRTUAL_SCROLL_ITEM_SIZE_REM *
+                Math.min(currentLen, VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS);
+        this.virtualList?.setSpacerSize();
     }
     select(option, byValue) {
         function includes(array, val) {
@@ -5318,22 +5444,20 @@ class CpsSelectComponent {
             this._toggleOptions(false);
         }
     }
-    _getHTMLOptions() {
-        return (this.optionsList.nativeElement.querySelectorAll('.cps-select-options-option') || []);
+    _dehighlightOption() {
+        this.optionHighlightedIndex = -1;
+        this.isArrowNavigating = false;
     }
-    _dehighlightOption(el) {
-        if (el)
-            el.classList.remove('highlighten');
-        else {
-            if (this.optionHighlightedIndex < 0)
-                return;
-            const optionItems = this._getHTMLOptions();
-            optionItems[this.optionHighlightedIndex].classList.remove('highlighten');
-            this.optionHighlightedIndex = -1;
-        }
+    _syncHighlightToValue() {
+        if (!this.hasSelectedValue())
+            return;
+        const firstSelected = this.multiple ? this.value[0] : this.value;
+        const idx = this.options.findIndex((o) => isEqual(this.returnObject ? o : o[this.optionValue], firstSelected));
+        if (idx < 0)
+            return;
+        this.optionHighlightedIndex = idx + (this.isSelectAllVisible ? 1 : 0);
     }
     _highlightOption(el) {
-        el.classList.add('highlighten');
         const parent = el.parentElement;
         if (!parent)
             return;
@@ -5349,53 +5473,60 @@ class CpsSelectComponent {
     _navigateOptionsByArrows(up) {
         if (!this.isOpened)
             return;
-        const optionItems = this._getHTMLOptions();
-        const len = optionItems.length;
-        if (len < 1)
+        if (this.optionsAriaSetSize < 1)
             return;
-        if (len === 1) {
-            this.optionHighlightedIndex = 0;
-            this._highlightOption(optionItems[0]);
+        this.isArrowNavigating = true;
+        this.optionHighlightedIndex = this._nextHighlightIndex(up, this.optionsAriaSetSize);
+        const activeId = this._getHighlightedOptionId();
+        if (!activeId)
             return;
-        }
-        if (up) {
-            this._dehighlightOption(optionItems[this.optionHighlightedIndex]);
-            this.optionHighlightedIndex =
-                this.optionHighlightedIndex < 1
-                    ? len - 1
-                    : this.optionHighlightedIndex - 1;
-            this._highlightOption(optionItems[this.optionHighlightedIndex]);
-        }
-        else {
-            this._dehighlightOption(optionItems[this.optionHighlightedIndex]);
-            this.optionHighlightedIndex = [-1, len - 1].includes(this.optionHighlightedIndex)
-                ? 0
-                : this.optionHighlightedIndex + 1;
-            this._highlightOption(optionItems[this.optionHighlightedIndex]);
+        const activeOption = this.optionsList?.nativeElement?.querySelector(`#${activeId}`);
+        if (activeOption) {
+            this._highlightOption(activeOption);
         }
     }
-    onBeforeOptionsHidden() {
+    onBeforeOptionsHidden(reason) {
+        if ([CpsMenuHideReason.SCROLL, CpsMenuHideReason.RESIZE].includes(reason)) {
+            this._toggleOptions(false);
+            return;
+        }
         this._toggleOptions(false);
         this._dehighlightOption();
     }
     onBoxClick() {
-        this._toggleOptions();
+        if (!this.isOpened) {
+            this.selectContainer?.nativeElement?.focus();
+            this._toggleOptions(true);
+        }
         this._dehighlightOption();
     }
-    onKeyDown(event) {
+    onChevronClick(event) {
+        event.stopPropagation();
         event.preventDefault();
-        const code = event.keyCode;
-        // escape
-        if (code === 27) {
+        if (this.isOpened) {
             this._toggleOptions(false);
-            this._dehighlightOption();
         }
-        // enter
-        else if (code === 13) {
+        else {
+            this.selectContainer?.nativeElement?.focus();
+            this._toggleOptions(true);
+        }
+        this._dehighlightOption();
+    }
+    onContainerKeyDown(event) {
+        const code = event.keyCode;
+        // enter or space
+        if (code === 13 || code === 32) {
+            event.preventDefault();
+            if (!this.isOpened) {
+                this._toggleOptions(true);
+                return;
+            }
             let idx = this.optionHighlightedIndex;
-            if (idx < 0)
+            if (idx < 0) {
+                this._toggleOptions(false);
                 return;
-            if (this.multiple && this.selectAll && !this.virtualScroll) {
+            }
+            if (this.isSelectAllVisible) {
                 if (idx === 0) {
                     this.toggleAll();
                     return;
@@ -5407,9 +5538,17 @@ class CpsSelectComponent {
         }
         // vertical arrows
         else if ([38, 40].includes(code)) {
-            // Arrows navigation doesn't work with virtual scroll
-            if (!this.virtualScroll)
+            event.preventDefault();
+            if (!this.isOpened) {
+                this._toggleOptions(true);
+                return;
+            }
+            if (this.virtualScroll) {
+                this._navigateVirtualOptionsByArrows(code === 38);
+            }
+            else {
                 this._navigateOptionsByArrows(code === 38);
+            }
         }
     }
     toggleAll() {
@@ -5460,8 +5599,9 @@ class CpsSelectComponent {
     }
     clear(event) {
         event?.stopPropagation();
-        if ((!this.multiple && !this.isEmptyValue()) ||
-            (this.multiple && this.value?.length > 0)) {
+        event?.preventDefault();
+        const hadValue = this.hasSelectedValue();
+        if (hadValue) {
             if (this.openOnClear) {
                 this._toggleOptions(true);
             }
@@ -5469,14 +5609,27 @@ class CpsSelectComponent {
             this.updateValue(val);
         }
         this._dehighlightOption();
+        if (hadValue) {
+            setTimeout(() => {
+                this.selectContainer?.nativeElement?.focus();
+            }, 0);
+        }
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     setDisabledState(_disabled) { }
     onBlur() {
+        this.isActive = false;
+        if (this.isOpened) {
+            this._toggleOptions(false);
+            this._dehighlightOption();
+        }
         this._checkErrors();
         this.blurred.emit();
     }
     onFocus() {
+        if (!this.disabled) {
+            this.isActive = true;
+        }
         this._control?.control?.markAsTouched();
         this.focused.emit();
     }
@@ -5484,14 +5637,106 @@ class CpsSelectComponent {
         this.selectContainer?.nativeElement?.focus();
         this._toggleOptions(true);
     }
-    isEmptyValue() {
-        return (this.value === null ||
-            this.value === undefined ||
-            (typeof this.value === 'string' && this.value.trim() === '') ||
-            Number.isNaN(this.value));
+    get isRequired() {
+        return this._control?.control?.hasValidator(Validators.required) ?? false;
+    }
+    get computedLabel() {
+        return getComputedLabel({
+            label: this.ariaLabel || this.label,
+            error: this.error,
+            hideDetails: this.hideDetails
+        });
+    }
+    get isSelectAllVisible() {
+        return (!this.virtualScroll &&
+            this.multiple &&
+            this.selectAll &&
+            this.options.length > 1);
+    }
+    get optionsAriaSetSize() {
+        return this.options.length + (this.isSelectAllVisible ? 1 : 0);
+    }
+    get activeDescendantId() {
+        if (!this.isOpened || this.optionHighlightedIndex < 0) {
+            return null;
+        }
+        return this._getHighlightedOptionId();
+    }
+    getOptionAriaPosInSet(itemIndex) {
+        return itemIndex + 1 + (this.isSelectAllVisible ? 1 : 0);
+    }
+    getOptionId(option, index) {
+        if (option && typeof option === 'object') {
+            return this._optionIds.get(option) || this._buildOptionId(index);
+        }
+        return this._buildOptionId(index);
+    }
+    _buildOptionId(index) {
+        return `${this._optionIdPrefix}-${index}`;
+    }
+    _getHighlightedOptionId() {
+        if (this.isSelectAllVisible && this.optionHighlightedIndex === 0) {
+            return this.selectAllOptionId;
+        }
+        const optionIndex = this.optionHighlightedIndex - (this.isSelectAllVisible ? 1 : 0);
+        const activeOption = this.options[optionIndex];
+        if (!activeOption) {
+            return null;
+        }
+        return this.getOptionId(activeOption, optionIndex);
+    }
+    hasSelectedValue() {
+        if (this.multiple) {
+            return this.value?.length > 0;
+        }
+        return (this.value != null &&
+            !(typeof this.value === 'string' && this.value.trim() === '') &&
+            !Number.isNaN(this.value));
+    }
+    _navigateVirtualOptionsByArrows(up) {
+        if (!this.isOpened)
+            return;
+        const len = this.options.length;
+        if (len < 1)
+            return;
+        this.isArrowNavigating = true;
+        this.optionHighlightedIndex = this._nextHighlightIndex(up, len);
+        this._scrollVirtualListToIndex(this.optionHighlightedIndex);
+    }
+    _nextHighlightIndex(up, len) {
+        if (up) {
+            return this.optionHighlightedIndex < 1
+                ? len - 1
+                : this.optionHighlightedIndex - 1;
+        }
+        return [-1, len - 1].includes(this.optionHighlightedIndex)
+            ? 0
+            : this.optionHighlightedIndex + 1;
+    }
+    _scrollVirtualListToIndex(index) {
+        const scrollerEl = this.optionsList?.nativeElement?.querySelector('.p-virtualscroller');
+        if (!scrollerEl) {
+            this.virtualList?.scrollToIndex(index);
+            return;
+        }
+        const itemTop = index * this.virtualScrollItemSizePx();
+        const itemBottom = itemTop + this.virtualScrollItemSizePx();
+        const viewportTop = scrollerEl.scrollTop;
+        const viewportBottom = viewportTop + scrollerEl.clientHeight;
+        let nextTop = viewportTop;
+        if (itemTop < viewportTop) {
+            nextTop = itemTop;
+        }
+        else if (itemBottom > viewportBottom) {
+            nextTop = itemBottom - scrollerEl.clientHeight;
+        }
+        if (nextTop === viewportTop)
+            return;
+        const maxTop = Math.max(0, scrollerEl.scrollHeight - scrollerEl.clientHeight);
+        scrollerEl.scrollTop = Math.min(Math.max(0, nextTop), maxTop);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsSelectComponent, 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: CpsSelectComponent, isStandalone: true, selector: "cps-select", inputs: { label: "label", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", optionIcon: "optionIcon", optionIconColor: "optionIconColor", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", optionsClass: "optionsClass", appearance: "appearance", showChevron: "showChevron", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged", focused: "focused", blurred: "blurred" }, providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true }, { propertyName: "selectContainer", first: true, predicate: ["selectContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-select\"\n  tabindex=\"0\"\n  [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n  #selectContainer\n  (keydown)=\"onKeyDown($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\">\n  @if (label) {\n    <div class=\"cps-select-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-select-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    class=\"cps-select-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div class=\"cps-select-box\" #selectBox (click)=\"onBoxClick()\">\n      <div class=\"cps-select-box-left\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? '#9a9595' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if ((!multiple && isEmptyValue()) || (value?.length < 1 && multiple)) {\n          <div class=\"cps-select-box-placeholder\">\n            {{ placeholder }}\n          </div>\n        }\n        @if (\n          (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n        ) {\n          <div class=\"cps-select-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                {{\n                  returnObject\n                    ? value[optionLabel]\n                    : (value\n                      | labelByValue: options : optionValue : optionLabel)\n                }}</span\n              >\n            }\n            @if (multiple && !chips) {\n              <div class=\"text-group\">\n                <span class=\"text-group-item\">\n                  {{\n                    value\n                      | combineLabels\n                        : options\n                        : optionValue\n                        : optionLabel\n                        : returnObject\n                  }}\n                </span>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div class=\"chips-group\">\n                @for (val of value; track val) {\n                  <cps-chip\n                    [disabled]=\"disabled\"\n                    [closable]=\"closableChips\"\n                    (closed)=\"select(val, true)\"\n                    [label]=\"\n                      returnObject\n                        ? val[optionLabel]\n                        : (val\n                          | labelByValue: options : optionValue : optionLabel)\n                    \">\n                  </cps-chip>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <span class=\"cps-select-box-icons\">\n        @if (clearable && !disabled) {\n          <span\n            [style.visibility]=\"\n              persistentClear ||\n              (!persistentClear &&\n                ((multiple && value?.length) || (!multiple && !isEmptyValue())))\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-select-box-clear-icon\">\n            <cps-icon\n              icon=\"delete\"\n              size=\"small\"\n              (click)=\"clear($event)\"></cps-icon>\n          </span>\n        }\n        @if (showChevron) {\n          <span class=\"cps-select-box-chevron\">\n            <cps-icon\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        }\n      </span>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n      hideTransitionOptions=\"0s linear\"\n      [containerClass]=\"'cps-select-options-menu ' + optionsClass\">\n      <div\n        #optionsList\n        class=\"cps-select-options\"\n        [ngStyle]=\"{\n          width: selectBoxWidth + 'px'\n        }\">\n        @if (!virtualScroll) {\n          @if (multiple && selectAll && options.length > 1) {\n            <div\n              class=\"cps-select-options-option select-all-option\"\n              [class.allselected]=\"value?.length === options.length\"\n              (click)=\"toggleAll()\">\n              <span class=\"cps-select-options-option-left\">\n                @if (multiple) {\n                  <span class=\"cps-select-options-option-check\"> </span>\n                }\n                <span class=\"cps-select-options-option-label\">Select all</span>\n              </span>\n            </div>\n          }\n          @for (item of options; track item) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                  item: item\n                }\n              \"></ng-container>\n          }\n        }\n        @if (virtualScroll) {\n          <p-virtualscroller\n            #virtualList\n            [items]=\"options\"\n            [delay]=\"0\"\n            [scrollHeight]=\"virtualListHeight + 'px'\"\n            [options]=\"{ numToleratedItems: numToleratedItems }\"\n            [itemSize]=\"virtualScrollItemSize\">\n            <ng-template pTemplate=\"item\" let-item>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item\n                  }\n                \"></ng-container>\n            </ng-template>\n          </p-virtualscroller>\n        }\n      </div>\n    </cps-menu>\n\n    @if (loading) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"select-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div class=\"cps-select-hint\">{{ hint }}</div>\n  }\n  @if (error && !hideDetails) {\n    <div class=\"cps-select-error\">{{ error }}</div>\n  }\n</div>\n\n<ng-template #itemTemplate let-item=\"item\">\n  <div\n    class=\"cps-select-options-option\"\n    (click)=\"onOptionClick(item)\"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-select-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-select-options-option-check\"> </span>\n      }\n      <span\n        class=\"cps-select-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-select-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\">\n      {{ item[optionInfo] }}\n      @if (item[optionIcon]) {\n        <cps-icon\n          [icon]=\"item[optionIcon]\"\n          [color]=\"item[optionIconColor] || 'text-light'\"\n          class=\"cps-select-options-option-right-icon\">\n        </cps-icon>\n      }\n    </span>\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-select .cps-select-container{position:relative}:host .cps-select .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-select .cps-select-container.borderless .cps-select-box,:host .cps-select .cps-select-container.underlined .cps-select-box{line-height:1;border:none!important;border-radius:0}:host .cps-select .cps-select-container.underlined .cps-select-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-select .cps-select-label .cps-select-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-mild);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:3px;margin-bottom:3px}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-state-error);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select .cps-select-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:var(--cps-color-bg-disabled)}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:var(--cps-state-error)!important;background:#fef3f2!important}.cps-select-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-select-options .cps-select-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);display:flex;align-items:center}.cps-select-options .cps-select-options-option-right-icon{margin-left:8px}.cps-select-options .cps-select-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-select-options .cps-select-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-select-options .cps-select-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-select-options .cps-select-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-select-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-options .virtual-row{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled", "closeButtonAriaLabel"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "ngmodule", type: ScrollerModule }, { kind: "component", type: i4$1.Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsSelectComponent, isStandalone: true, selector: "cps-select", inputs: { label: "label", ariaLabel: "ariaLabel", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", optionIcon: "optionIcon", optionIconColor: "optionIconColor", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", optionsClass: "optionsClass", appearance: "appearance", showChevron: "showChevron", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged", focused: "focused", blurred: "blurred" }, providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true }, { propertyName: "selectContainer", first: true, predicate: ["selectContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-select\"\n  [ngClass]=\"{ disabled: disabled, error: error }\">\n  @if (label) {\n    <div class=\"cps-select-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-select-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    class=\"cps-select-container\"\n    [tabindex]=\"disabled ? -1 : 0\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-required]=\"isRequired || null\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-label]=\"computedLabel\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined',\n      active: isOpened,\n      focused: isActive\n    }\"\n    #selectContainer\n    (keydown)=\"onContainerKeyDown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\">\n    <div class=\"cps-select-box\" #selectBox (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-select-box-left\">\n        @if (prefixIcon) {\n          <cps-icon\n            aria-hidden=\"true\"\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? '#9a9595' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (!hasSelectedValue()) {\n          <div class=\"cps-select-box-placeholder\">\n            {{ placeholder }}\n          </div>\n        } @else {\n          <div class=\"cps-select-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                {{\n                  returnObject\n                    ? value[optionLabel]\n                    : (value\n                      | labelByValue: options : optionValue : optionLabel)\n                }}</span\n              >\n            }\n            @if (multiple && !chips) {\n              <div class=\"text-group\" role=\"list\" aria-label=\"Selected options\">\n                <span class=\"text-group-item\" role=\"listitem\">\n                  {{\n                    value\n                      | combineLabels\n                        : options\n                        : optionValue\n                        : optionLabel\n                        : returnObject\n                  }}\n                </span>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div\n                class=\"chips-group\"\n                role=\"list\"\n                aria-label=\"Selected options\">\n                @for (val of value; track val) {\n                  <cps-chip\n                    role=\"listitem\"\n                    closeButtonAriaLabel=\"Remove\"\n                    [disabled]=\"disabled\"\n                    [closable]=\"closableChips\"\n                    (closed)=\"select(val, true)\"\n                    [label]=\"\n                      returnObject\n                        ? val[optionLabel]\n                        : (val\n                          | labelByValue: options : optionValue : optionLabel)\n                    \">\n                  </cps-chip>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <span class=\"cps-select-box-icons\">\n        @if (clearable && !disabled) {\n          <span\n            role=\"button\"\n            aria-label=\"Clear selection\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            (click)=\"clear($event)\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown.enter)=\"clear($event)\"\n            (keydown.space)=\"clear($event)\"\n            [style.visibility]=\"\n              persistentClear || (!persistentClear && hasSelectedValue())\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-select-box-clear-icon\">\n            <cps-icon icon=\"delete\" size=\"small\" aria-hidden=\"true\"></cps-icon>\n          </span>\n        }\n        @if (showChevron) {\n          <span\n            class=\"cps-select-box-chevron\"\n            role=\"button\"\n            [attr.aria-label]=\"isOpened ? 'Collapse options' : 'Expand options'\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            (mousedown)=\"onChevronClick($event)\"\n            (keydown.enter)=\"onChevronClick($event)\"\n            (keydown.space)=\"onChevronClick($event)\">\n            <cps-icon\n              aria-hidden=\"true\"\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        }\n      </span>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      [containerClass]=\"'cps-select-options-menu ' + optionsClass\">\n      <div\n        #optionsList\n        [id]=\"optionsListId\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-select-options\"\n        [style.width.px]=\"selectBoxWidthPx\">\n        @if (!virtualScroll) {\n          @if (multiple && selectAll && options.length > 1) {\n            <div\n              class=\"cps-select-options-option select-all-option\"\n              [id]=\"selectAllOptionId\"\n              role=\"option\"\n              tabindex=\"-1\"\n              aria-disabled=\"false\"\n              [attr.aria-setsize]=\"optionsAriaSetSize\"\n              [attr.aria-posinset]=\"1\"\n              [attr.aria-selected]=\"value?.length === options.length\"\n              [class.allselected]=\"value?.length === options.length\"\n              [class.highlighten]=\"\n                isArrowNavigating && optionHighlightedIndex === 0\n              \"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"toggleAll()\">\n              <span class=\"cps-select-options-option-left\">\n                @if (multiple) {\n                  <span class=\"cps-select-options-option-check\"> </span>\n                }\n                <span class=\"cps-select-options-option-label\">Select all</span>\n              </span>\n            </div>\n          }\n          @for (item of options; track item; let itemIdx = $index) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                  item: item,\n                  itemIdx: itemIdx\n                }\n              \"></ng-container>\n          }\n        }\n        @if (virtualScroll) {\n          <p-virtualscroller\n            #virtualList\n            [tabindex]=\"-1\"\n            [items]=\"options\"\n            [delay]=\"0\"\n            [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n            [options]=\"{ numToleratedItems: numToleratedItems }\"\n            [itemSize]=\"virtualScrollItemSizePx()\">\n            <ng-template pTemplate=\"item\" let-item let-options=\"options\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item,\n                    itemIdx: options.index\n                  }\n                \"></ng-container>\n            </ng-template>\n          </p-virtualscroller>\n        }\n      </div>\n    </cps-menu>\n\n    @if (loading) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"select-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div class=\"cps-select-hint\">{{ hint }}</div>\n  }\n  @if (error && !hideDetails) {\n    <div class=\"cps-select-error\" role=\"alert\" aria-live=\"assertive\">\n      {{ error }}\n    </div>\n  }\n</div>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIdx=\"itemIdx\">\n  <div\n    class=\"cps-select-options-option\"\n    [id]=\"getOptionId(item, itemIdx)\"\n    role=\"option\"\n    tabindex=\"-1\"\n    aria-disabled=\"false\"\n    [attr.aria-setsize]=\"optionsAriaSetSize\"\n    [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIdx)\"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onOptionClick(item)\"\n    [class.highlighten]=\"\n      isArrowNavigating &&\n      itemIdx === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-select-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-select-options-option-check\"> </span>\n      }\n      <span\n        class=\"cps-select-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-select-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\">\n      {{ item[optionInfo] }}\n      @if (item[optionIcon]) {\n        <cps-icon\n          aria-hidden=\"true\"\n          [icon]=\"item[optionIcon]\"\n          [color]=\"item[optionIconColor] || 'text-light'\"\n          class=\"cps-select-options-option-right-icon\">\n        </cps-icon>\n      }\n    </span>\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-select .cps-select-container{position:relative;outline:none}:host .cps-select .cps-select-container .select-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-select .cps-select-container.borderless .cps-select-box,:host .cps-select .cps-select-container.underlined .cps-select-box{line-height:1;border:none!important;border-radius:0}:host .cps-select .cps-select-container.underlined .cps-select-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-select .cps-select-container.focused .cps-select-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-container.active .cps-select-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-chevron{top:1.375rem}:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-chevron cps-icon{transform:rotate(180deg)}:host .cps-select .cps-select-container:focus-visible{outline:none;position:relative}:host .cps-select .cps-select-container:focus-visible:before,:host .cps-select .cps-select-container:focus-visible:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-select .cps-select-container:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-container:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-select .cps-select-container:focus-visible.suppress-focus-visible:before,:host .cps-select .cps-select-container:focus-visible.suppress-focus-visible:after{display:none}:host .cps-select .cps-select-container:focus-visible:before,:host .cps-select .cps-select-container:focus-visible:after{pointer-events:none}:host .cps-select .cps-select-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-select .cps-select-label .cps-select-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:2.375rem;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding-left:.75rem;padding-right:.5rem;border-radius:.25rem;align-items:center;display:flex;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-mild);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:.1875rem;margin-bottom:.1875rem}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:.1875rem;padding-bottom:.1875rem}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;padding:.25rem;color:var(--cps-state-error);margin-left:.25rem;cursor:pointer}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus{outline:none}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:hover cps-icon,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus cps-icon{opacity:1}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;padding:.25rem;transition-duration:.2s;cursor:pointer}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron cps-icon{transition:transform .2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus{outline:none}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible{outline:none;position:relative}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-select .cps-select-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:var(--cps-color-bg-disabled)}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:var(--cps-state-error)!important;background:#fef3f2!important}.cps-select-options{background:#fff;overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-select-options .cps-select-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-select-options .cps-select-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-medium);display:flex;align-items:center}.cps-select-options .cps-select-options-option-right-icon{margin-left:.5rem}.cps-select-options .cps-select-options-option-check{background-color:transparent;border:0;width:1rem;height:1rem;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:.5rem;opacity:0}.cps-select-options .cps-select-options-option-check:after{color:var(--cps-color-calm);top:.25rem;left:.0625rem;width:.5rem;height:.1875rem;border-left:.125rem solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:.125rem solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-right{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-select-options .cps-select-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-select-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-options .virtual-row{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled", "closeButtonAriaLabel"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "ngmodule", type: ScrollerModule }, { kind: "component", type: i4$1.Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsSelectComponent, decorators: [{
             type: Component,
@@ -5507,13 +5752,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         CheckOptionSelectedPipe,
                         ScrollerModule,
                         CpsMenuComponent
-                    ], providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], selector: 'cps-select', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-select\"\n  tabindex=\"0\"\n  [ngClass]=\"{ disabled: disabled, error: error, active: isOpened }\"\n  #selectContainer\n  (keydown)=\"onKeyDown($event)\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\">\n  @if (label) {\n    <div class=\"cps-select-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-select-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    class=\"cps-select-container\"\n    [class.focused]=\"isOpened\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div class=\"cps-select-box\" #selectBox (click)=\"onBoxClick()\">\n      <div class=\"cps-select-box-left\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? '#9a9595' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if ((!multiple && isEmptyValue()) || (value?.length < 1 && multiple)) {\n          <div class=\"cps-select-box-placeholder\">\n            {{ placeholder }}\n          </div>\n        }\n        @if (\n          (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n        ) {\n          <div class=\"cps-select-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                {{\n                  returnObject\n                    ? value[optionLabel]\n                    : (value\n                      | labelByValue: options : optionValue : optionLabel)\n                }}</span\n              >\n            }\n            @if (multiple && !chips) {\n              <div class=\"text-group\">\n                <span class=\"text-group-item\">\n                  {{\n                    value\n                      | combineLabels\n                        : options\n                        : optionValue\n                        : optionLabel\n                        : returnObject\n                  }}\n                </span>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div class=\"chips-group\">\n                @for (val of value; track val) {\n                  <cps-chip\n                    [disabled]=\"disabled\"\n                    [closable]=\"closableChips\"\n                    (closed)=\"select(val, true)\"\n                    [label]=\"\n                      returnObject\n                        ? val[optionLabel]\n                        : (val\n                          | labelByValue: options : optionValue : optionLabel)\n                    \">\n                  </cps-chip>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <span class=\"cps-select-box-icons\">\n        @if (clearable && !disabled) {\n          <span\n            [style.visibility]=\"\n              persistentClear ||\n              (!persistentClear &&\n                ((multiple && value?.length) || (!multiple && !isEmptyValue())))\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-select-box-clear-icon\">\n            <cps-icon\n              icon=\"delete\"\n              size=\"small\"\n              (click)=\"clear($event)\"></cps-icon>\n          </span>\n        }\n        @if (showChevron) {\n          <span class=\"cps-select-box-chevron\">\n            <cps-icon\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        }\n      </span>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n      hideTransitionOptions=\"0s linear\"\n      [containerClass]=\"'cps-select-options-menu ' + optionsClass\">\n      <div\n        #optionsList\n        class=\"cps-select-options\"\n        [ngStyle]=\"{\n          width: selectBoxWidth + 'px'\n        }\">\n        @if (!virtualScroll) {\n          @if (multiple && selectAll && options.length > 1) {\n            <div\n              class=\"cps-select-options-option select-all-option\"\n              [class.allselected]=\"value?.length === options.length\"\n              (click)=\"toggleAll()\">\n              <span class=\"cps-select-options-option-left\">\n                @if (multiple) {\n                  <span class=\"cps-select-options-option-check\"> </span>\n                }\n                <span class=\"cps-select-options-option-label\">Select all</span>\n              </span>\n            </div>\n          }\n          @for (item of options; track item) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                  item: item\n                }\n              \"></ng-container>\n          }\n        }\n        @if (virtualScroll) {\n          <p-virtualscroller\n            #virtualList\n            [items]=\"options\"\n            [delay]=\"0\"\n            [scrollHeight]=\"virtualListHeight + 'px'\"\n            [options]=\"{ numToleratedItems: numToleratedItems }\"\n            [itemSize]=\"virtualScrollItemSize\">\n            <ng-template pTemplate=\"item\" let-item>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item\n                  }\n                \"></ng-container>\n            </ng-template>\n          </p-virtualscroller>\n        }\n      </div>\n    </cps-menu>\n\n    @if (loading) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"select-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div class=\"cps-select-hint\">{{ hint }}</div>\n  }\n  @if (error && !hideDetails) {\n    <div class=\"cps-select-error\">{{ error }}</div>\n  }\n</div>\n\n<ng-template #itemTemplate let-item=\"item\">\n  <div\n    class=\"cps-select-options-option\"\n    (click)=\"onOptionClick(item)\"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-select-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-select-options-option-check\"> </span>\n      }\n      <span\n        class=\"cps-select-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-select-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\">\n      {{ item[optionInfo] }}\n      @if (item[optionIcon]) {\n        <cps-icon\n          [icon]=\"item[optionIcon]\"\n          [color]=\"item[optionIconColor] || 'text-light'\"\n          class=\"cps-select-options-option-right-icon\">\n        </cps-icon>\n      }\n    </span>\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-select .cps-select-container{position:relative}:host .cps-select .cps-select-container .select-progress-bar{position:absolute;bottom:1px;padding:0 1px}:host .cps-select .cps-select-container.borderless .cps-select-box,:host .cps-select .cps-select-container.underlined .cps-select-box{line-height:1;border:none!important;border-radius:0}:host .cps-select .cps-select-container.underlined .cps-select-box{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-select.active .cps-select-box{border:1px solid var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select.active .cps-select-box .cps-select-box-chevron{top:22px;transform:rotate(180deg)}:host .cps-select .cps-select-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-select .cps-select-label .cps-select-label-info-circle{margin-left:8px;pointer-events:all}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:.5}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:38px;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding:0 12px;border-radius:4px;align-items:center;display:flex;border:1px solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-mild);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:3px;margin-bottom:3px}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:3px;padding-bottom:3px}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:3px;padding-top:3px;padding-right:4px}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:1px solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;color:var(--cps-state-error);margin-left:8px}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon:hover{opacity:1!important}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;margin-left:8px;transition-duration:.2s}:host .cps-select .cps-select-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:var(--cps-color-bg-disabled)}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:var(--cps-state-error)!important;background:#fef3f2!important}.cps-select-options{background:#fff;overflow-x:hidden;max-height:242px;overflow-y:auto}.cps-select-options .cps-select-options-option{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-select-options .cps-select-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:8px}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-light);display:flex;align-items:center}.cps-select-options .cps-select-options-option-right-icon{margin-left:8px}.cps-select-options .cps-select-options-option-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-select-options .cps-select-options-option-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-select-options .cps-select-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-select-options .cps-select-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-select-options .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-options .virtual-row{white-space:nowrap}\n"] }]
+                    ], providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], selector: 'cps-select', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-select\"\n  [ngClass]=\"{ disabled: disabled, error: error }\">\n  @if (label) {\n    <div class=\"cps-select-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-select-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    class=\"cps-select-container\"\n    [tabindex]=\"disabled ? -1 : 0\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-required]=\"isRequired || null\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-label]=\"computedLabel\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined',\n      active: isOpened,\n      focused: isActive\n    }\"\n    #selectContainer\n    (keydown)=\"onContainerKeyDown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\">\n    <div class=\"cps-select-box\" #selectBox (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-select-box-left\">\n        @if (prefixIcon) {\n          <cps-icon\n            aria-hidden=\"true\"\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? '#9a9595' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (!hasSelectedValue()) {\n          <div class=\"cps-select-box-placeholder\">\n            {{ placeholder }}\n          </div>\n        } @else {\n          <div class=\"cps-select-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                {{\n                  returnObject\n                    ? value[optionLabel]\n                    : (value\n                      | labelByValue: options : optionValue : optionLabel)\n                }}</span\n              >\n            }\n            @if (multiple && !chips) {\n              <div class=\"text-group\" role=\"list\" aria-label=\"Selected options\">\n                <span class=\"text-group-item\" role=\"listitem\">\n                  {{\n                    value\n                      | combineLabels\n                        : options\n                        : optionValue\n                        : optionLabel\n                        : returnObject\n                  }}\n                </span>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div\n                class=\"chips-group\"\n                role=\"list\"\n                aria-label=\"Selected options\">\n                @for (val of value; track val) {\n                  <cps-chip\n                    role=\"listitem\"\n                    closeButtonAriaLabel=\"Remove\"\n                    [disabled]=\"disabled\"\n                    [closable]=\"closableChips\"\n                    (closed)=\"select(val, true)\"\n                    [label]=\"\n                      returnObject\n                        ? val[optionLabel]\n                        : (val\n                          | labelByValue: options : optionValue : optionLabel)\n                    \">\n                  </cps-chip>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <span class=\"cps-select-box-icons\">\n        @if (clearable && !disabled) {\n          <span\n            role=\"button\"\n            aria-label=\"Clear selection\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            (click)=\"clear($event)\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown.enter)=\"clear($event)\"\n            (keydown.space)=\"clear($event)\"\n            [style.visibility]=\"\n              persistentClear || (!persistentClear && hasSelectedValue())\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-select-box-clear-icon\">\n            <cps-icon icon=\"delete\" size=\"small\" aria-hidden=\"true\"></cps-icon>\n          </span>\n        }\n        @if (showChevron) {\n          <span\n            class=\"cps-select-box-chevron\"\n            role=\"button\"\n            [attr.aria-label]=\"isOpened ? 'Collapse options' : 'Expand options'\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            (mousedown)=\"onChevronClick($event)\"\n            (keydown.enter)=\"onChevronClick($event)\"\n            (keydown.space)=\"onChevronClick($event)\">\n            <cps-icon\n              aria-hidden=\"true\"\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        }\n      </span>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      [containerClass]=\"'cps-select-options-menu ' + optionsClass\">\n      <div\n        #optionsList\n        [id]=\"optionsListId\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-select-options\"\n        [style.width.px]=\"selectBoxWidthPx\">\n        @if (!virtualScroll) {\n          @if (multiple && selectAll && options.length > 1) {\n            <div\n              class=\"cps-select-options-option select-all-option\"\n              [id]=\"selectAllOptionId\"\n              role=\"option\"\n              tabindex=\"-1\"\n              aria-disabled=\"false\"\n              [attr.aria-setsize]=\"optionsAriaSetSize\"\n              [attr.aria-posinset]=\"1\"\n              [attr.aria-selected]=\"value?.length === options.length\"\n              [class.allselected]=\"value?.length === options.length\"\n              [class.highlighten]=\"\n                isArrowNavigating && optionHighlightedIndex === 0\n              \"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"toggleAll()\">\n              <span class=\"cps-select-options-option-left\">\n                @if (multiple) {\n                  <span class=\"cps-select-options-option-check\"> </span>\n                }\n                <span class=\"cps-select-options-option-label\">Select all</span>\n              </span>\n            </div>\n          }\n          @for (item of options; track item; let itemIdx = $index) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                  item: item,\n                  itemIdx: itemIdx\n                }\n              \"></ng-container>\n          }\n        }\n        @if (virtualScroll) {\n          <p-virtualscroller\n            #virtualList\n            [tabindex]=\"-1\"\n            [items]=\"options\"\n            [delay]=\"0\"\n            [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n            [options]=\"{ numToleratedItems: numToleratedItems }\"\n            [itemSize]=\"virtualScrollItemSizePx()\">\n            <ng-template pTemplate=\"item\" let-item let-options=\"options\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item,\n                    itemIdx: options.index\n                  }\n                \"></ng-container>\n            </ng-template>\n          </p-virtualscroller>\n        }\n      </div>\n    </cps-menu>\n\n    @if (loading) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"select-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div class=\"cps-select-hint\">{{ hint }}</div>\n  }\n  @if (error && !hideDetails) {\n    <div class=\"cps-select-error\" role=\"alert\" aria-live=\"assertive\">\n      {{ error }}\n    </div>\n  }\n</div>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIdx=\"itemIdx\">\n  <div\n    class=\"cps-select-options-option\"\n    [id]=\"getOptionId(item, itemIdx)\"\n    role=\"option\"\n    tabindex=\"-1\"\n    aria-disabled=\"false\"\n    [attr.aria-setsize]=\"optionsAriaSetSize\"\n    [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIdx)\"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onOptionClick(item)\"\n    [class.highlighten]=\"\n      isArrowNavigating &&\n      itemIdx === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-select-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-select-options-option-check\"> </span>\n      }\n      <span\n        class=\"cps-select-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-select-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\">\n      {{ item[optionInfo] }}\n      @if (item[optionIcon]) {\n        <cps-icon\n          aria-hidden=\"true\"\n          [icon]=\"item[optionIcon]\"\n          [color]=\"item[optionIconColor] || 'text-light'\"\n          class=\"cps-select-options-option-right-icon\">\n        </cps-icon>\n      }\n    </span>\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-select .cps-select-container{position:relative;outline:none}:host .cps-select .cps-select-container .select-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-select .cps-select-container.borderless .cps-select-box,:host .cps-select .cps-select-container.underlined .cps-select-box{line-height:1;border:none!important;border-radius:0}:host .cps-select .cps-select-container.underlined .cps-select-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-select .cps-select-container.focused .cps-select-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-container.active .cps-select-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-chevron{top:1.375rem}:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-chevron cps-icon{transform:rotate(180deg)}:host .cps-select .cps-select-container:focus-visible{outline:none;position:relative}:host .cps-select .cps-select-container:focus-visible:before,:host .cps-select .cps-select-container:focus-visible:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-select .cps-select-container:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-container:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-select .cps-select-container:focus-visible.suppress-focus-visible:before,:host .cps-select .cps-select-container:focus-visible.suppress-focus-visible:after{display:none}:host .cps-select .cps-select-container:focus-visible:before,:host .cps-select .cps-select-container:focus-visible:after{pointer-events:none}:host .cps-select .cps-select-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-select .cps-select-label .cps-select-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:2.375rem;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding-left:.75rem;padding-right:.5rem;border-radius:.25rem;align-items:center;display:flex;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-mild);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:.1875rem;margin-bottom:.1875rem}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:.1875rem;padding-bottom:.1875rem}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;padding:.25rem;color:var(--cps-state-error);margin-left:.25rem;cursor:pointer}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus{outline:none}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:hover cps-icon,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus cps-icon{opacity:1}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;padding:.25rem;transition-duration:.2s;cursor:pointer}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron cps-icon{transition:transform .2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus{outline:none}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible{outline:none;position:relative}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-select .cps-select-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:var(--cps-color-bg-disabled)}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:var(--cps-state-error)!important;background:#fef3f2!important}.cps-select-options{background:#fff;overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-select-options .cps-select-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-select-options .cps-select-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-medium);display:flex;align-items:center}.cps-select-options .cps-select-options-option-right-icon{margin-left:.5rem}.cps-select-options .cps-select-options-option-check{background-color:transparent;border:0;width:1rem;height:1rem;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:.5rem;opacity:0}.cps-select-options .cps-select-options-option-check:after{color:var(--cps-color-calm);top:.25rem;left:.0625rem;width:.5rem;height:.1875rem;border-left:.125rem solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:.125rem solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-right{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-select-options .cps-select-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-select-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-options .virtual-row{white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
                 }] }], propDecorators: { label: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input
             }], placeholder: [{
                 type: Input
             }], hint: [{
@@ -5687,11 +5934,11 @@ class CpsPaginatorComponent {
         this.paginator.changePage(this.paginator.getPage());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsPaginatorComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: CpsPaginatorComponent, isStandalone: true, selector: "cps-paginator", inputs: { first: "first", rows: "rows", totalRecords: "totalRecords", rowsPerPageOptions: "rowsPerPageOptions", alwaysShow: "alwaysShow", backgroundColor: "backgroundColor", resetPageOnRowsChange: "resetPageOnRowsChange" }, outputs: { pageChanged: "pageChanged" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], ngImport: i0, template: "<p-paginator\n  #paginator\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [style]=\"{ background: backgroundColor }\"\n  [totalRecords]=\"totalRecords\"\n  [showFirstLastIcon]=\"true\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShow]=\"alwaysShow\"\n  [templateLeft]=\"itemsPerPageTemplate\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n  <div class=\"cps-paginator-itms-per-page\">\n    <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n    <cps-select\n      [options]=\"rowOptions\"\n      [hideDetails]=\"true\"\n      [(ngModel)]=\"rows\"\n      (valueChanged)=\"onRowsPerPageChange($event)\"\n      [returnObject]=\"false\"\n      optionsClass=\"cps-paginator-page-options\"></cps-select>\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-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}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$4.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: CpsPaginatorComponent, isStandalone: true, selector: "cps-paginator", inputs: { first: "first", rows: "rows", totalRecords: "totalRecords", rowsPerPageOptions: "rowsPerPageOptions", alwaysShow: "alwaysShow", backgroundColor: "backgroundColor", resetPageOnRowsChange: "resetPageOnRowsChange" }, outputs: { pageChanged: "pageChanged" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], ngImport: i0, template: "<p-paginator\n  #paginator\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [style]=\"{ background: backgroundColor }\"\n  [totalRecords]=\"totalRecords\"\n  [showFirstLastIcon]=\"true\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShow]=\"alwaysShow\"\n  [templateLeft]=\"itemsPerPageTemplate\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n  <div class=\"cps-paginator-itms-per-page\">\n    <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n    <cps-select\n      ariaLabel=\"Set items per page\"\n      [options]=\"rowOptions\"\n      [hideDetails]=\"true\"\n      [(ngModel)]=\"rows\"\n      (valueChanged)=\"onRowsPerPageChange($event)\"\n      [returnObject]=\"false\"\n      optionsClass=\"cps-paginator-page-options\"></cps-select>\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-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}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$4.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { 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: "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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsPaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cps-paginator', imports: [PaginatorModule, CpsSelectComponent, FormsModule], template: "<p-paginator\n  #paginator\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [style]=\"{ background: backgroundColor }\"\n  [totalRecords]=\"totalRecords\"\n  [showFirstLastIcon]=\"true\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShow]=\"alwaysShow\"\n  [templateLeft]=\"itemsPerPageTemplate\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n  <div class=\"cps-paginator-itms-per-page\">\n    <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n    <cps-select\n      [options]=\"rowOptions\"\n      [hideDetails]=\"true\"\n      [(ngModel)]=\"rows\"\n      (valueChanged)=\"onRowsPerPageChange($event)\"\n      [returnObject]=\"false\"\n      optionsClass=\"cps-paginator-page-options\"></cps-select>\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-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}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
+            args: [{ selector: 'cps-paginator', imports: [PaginatorModule, CpsSelectComponent, FormsModule], template: "<p-paginator\n  #paginator\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [style]=\"{ background: backgroundColor }\"\n  [totalRecords]=\"totalRecords\"\n  [showFirstLastIcon]=\"true\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShow]=\"alwaysShow\"\n  [templateLeft]=\"itemsPerPageTemplate\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n  <div class=\"cps-paginator-itms-per-page\">\n    <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n    <cps-select\n      ariaLabel=\"Set items per page\"\n      [options]=\"rowOptions\"\n      [hideDetails]=\"true\"\n      [(ngModel)]=\"rows\"\n      (valueChanged)=\"onRowsPerPageChange($event)\"\n      [returnObject]=\"false\"\n      optionsClass=\"cps-paginator-page-options\"></cps-select>\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-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}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -5940,11 +6187,9 @@ class CpsRadioGroupComponent {
             this._checkErrors();
         });
     }
-    ngOnChanges(changes) {
-        if (changes.groupLabel || changes.ariaLabel) {
-            if (!this.groupLabel?.trim() && !this.ariaLabel?.trim()) {
-                console.error('CpsRadioGroupComponent: unlabeled radio group component must have an ariaLabel for accessibility.');
-            }
+    ngOnChanges() {
+        if (!this.groupLabel?.trim() && !this.ariaLabel?.trim()) {
+            console.error('CpsRadioGroupComponent: unlabeled radio group component must have an ariaLabel for accessibility.');
         }
     }
     ngOnDestroy() {
@@ -8151,7 +8396,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", 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    [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            width=\"70px\"\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            width=\"70px\"\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            width=\"70px\"\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                width=\"70px\"\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                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                [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            [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                width=\"120px\"\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                width=\"70px\"\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                [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                width=\"106px\"\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                width=\"130px\"\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                width=\"90px\"\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                width=\"120px\"\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                [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                width=\"120px\"\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                width=\"120px\"\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                [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                width=\"106px\"\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                width=\"120px\"\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                width=\"120px\"\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                [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            label=\"\"\n            data-testid=\"advanced-cron-input\"\n            [disabled]=\"disabled\"\n            width=\"500px\"\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        data-testid=\"timezone-select\"\n        [(ngModel)]=\"timeZone\"\n        (valueChanged)=\"onTimeZoneChanged($event)\"\n        [returnObject]=\"false\"\n        width=\"300\"\n        [options]=\"timeZoneOptions\">\n      </cps-autocomplete>\n    </div>\n  }\n</div>\n", styles: [":host .cps-scheduler-selector{margin-bottom:24px}:host .cps-scheduler-container{margin-top:10px;margin-left:16px}:host .cps-scheduler-container .cps-scheduler-select-control{margin-left:8px;margin-right:8px}:host .cps-scheduler-container .cps-scheduler-days-checkbox-group{max-width:700px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-template-rows:1fr 1fr;grid-gap:20px;margin-bottom:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane{margin-bottom:28px}: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-light)}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-nearest-weekday-checkbox{margin-left:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-timepicker{margin-left:8px}:host .cps-scheduler-container-disabled{color:var(--cps-color-text-light)}\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", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "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", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsTimepickerComponent, selector: "cps-timepicker", inputs: ["label", "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", 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    [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=\"70px\"\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=\"70px\"\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=\"70px\"\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=\"70px\"\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                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                [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            [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=\"120px\"\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=\"70px\"\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                [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=\"106px\"\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=\"130px\"\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=\"90px\"\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=\"120px\"\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                [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=\"120px\"\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=\"120px\"\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                [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=\"106px\"\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=\"120px\"\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=\"120px\"\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                [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            label=\"\"\n            data-testid=\"advanced-cron-input\"\n            [disabled]=\"disabled\"\n            width=\"500px\"\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        data-testid=\"timezone-select\"\n        [(ngModel)]=\"timeZone\"\n        (valueChanged)=\"onTimeZoneChanged($event)\"\n        [returnObject]=\"false\"\n        width=\"300\"\n        [options]=\"timeZoneOptions\">\n      </cps-autocomplete>\n    </div>\n  }\n</div>\n", styles: [":host .cps-scheduler-selector{margin-bottom:24px}:host .cps-scheduler-container{margin-top:10px;margin-left:16px}:host .cps-scheduler-container .cps-scheduler-select-control{margin-left:8px;margin-right:8px}:host .cps-scheduler-container .cps-scheduler-days-checkbox-group{max-width:700px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-template-rows:1fr 1fr;grid-gap:20px;margin-bottom:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane{margin-bottom:28px}: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-light)}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-nearest-weekday-checkbox{margin-left:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-timepicker{margin-left:8px}:host .cps-scheduler-container-disabled{color:var(--cps-color-text-light)}\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", "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", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsTimepickerComponent, selector: "cps-timepicker", inputs: ["label", "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,
@@ -8166,7 +8411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         CpsInputComponent,
                         CpsTimepickerComponent,
                         CpsAutocompleteComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cps-scheduler-selector\">\n  <cps-button-toggle\n    data-testid=\"schedule-type-toggle\"\n    [options]=\"scheduleTypes\"\n    [disabled]=\"disabled\"\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            width=\"70px\"\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            width=\"70px\"\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            width=\"70px\"\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                width=\"70px\"\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                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                [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            [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                width=\"120px\"\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                width=\"70px\"\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                [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                width=\"106px\"\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                width=\"130px\"\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                width=\"90px\"\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                width=\"120px\"\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                [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                width=\"120px\"\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                width=\"120px\"\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                [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                width=\"106px\"\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                width=\"120px\"\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                width=\"120px\"\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                [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            label=\"\"\n            data-testid=\"advanced-cron-input\"\n            [disabled]=\"disabled\"\n            width=\"500px\"\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        data-testid=\"timezone-select\"\n        [(ngModel)]=\"timeZone\"\n        (valueChanged)=\"onTimeZoneChanged($event)\"\n        [returnObject]=\"false\"\n        width=\"300\"\n        [options]=\"timeZoneOptions\">\n      </cps-autocomplete>\n    </div>\n  }\n</div>\n", styles: [":host .cps-scheduler-selector{margin-bottom:24px}:host .cps-scheduler-container{margin-top:10px;margin-left:16px}:host .cps-scheduler-container .cps-scheduler-select-control{margin-left:8px;margin-right:8px}:host .cps-scheduler-container .cps-scheduler-days-checkbox-group{max-width:700px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-template-rows:1fr 1fr;grid-gap:20px;margin-bottom:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane{margin-bottom:28px}: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-light)}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-nearest-weekday-checkbox{margin-left:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-timepicker{margin-left:8px}:host .cps-scheduler-container-disabled{color:var(--cps-color-text-light)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cps-scheduler-selector\">\n  <cps-button-toggle\n    data-testid=\"schedule-type-toggle\"\n    [options]=\"scheduleTypes\"\n    [disabled]=\"disabled\"\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=\"70px\"\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=\"70px\"\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=\"70px\"\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=\"70px\"\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                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                [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            [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=\"120px\"\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=\"70px\"\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                [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=\"106px\"\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=\"130px\"\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=\"90px\"\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=\"120px\"\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                [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=\"120px\"\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=\"120px\"\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                [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=\"106px\"\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=\"120px\"\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=\"120px\"\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                [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            label=\"\"\n            data-testid=\"advanced-cron-input\"\n            [disabled]=\"disabled\"\n            width=\"500px\"\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        data-testid=\"timezone-select\"\n        [(ngModel)]=\"timeZone\"\n        (valueChanged)=\"onTimeZoneChanged($event)\"\n        [returnObject]=\"false\"\n        width=\"300\"\n        [options]=\"timeZoneOptions\">\n      </cps-autocomplete>\n    </div>\n  }\n</div>\n", styles: [":host .cps-scheduler-selector{margin-bottom:24px}:host .cps-scheduler-container{margin-top:10px;margin-left:16px}:host .cps-scheduler-container .cps-scheduler-select-control{margin-left:8px;margin-right:8px}:host .cps-scheduler-container .cps-scheduler-days-checkbox-group{max-width:700px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-template-rows:1fr 1fr;grid-gap:20px;margin-bottom:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane{margin-bottom:28px}: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-light)}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-nearest-weekday-checkbox{margin-left:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-timepicker{margin-left:8px}:host .cps-scheduler-container-disabled{color:var(--cps-color-text-light)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], cron: [{
@@ -8513,11 +8758,9 @@ class CpsTabComponent {
         this.badgeTooltip = '';
         this.active = false;
     }
-    ngOnChanges(changes) {
-        if (changes.label || changes.ariaLabel) {
-            if (!this.label?.trim() && !this.ariaLabel?.trim()) {
-                console.error('CpsTabComponent: unlabeled tab component must have an ariaLabel for accessibility.');
-            }
+    ngOnChanges() {
+        if (!this.label?.trim() && !this.ariaLabel?.trim()) {
+            console.error('CpsTabComponent: unlabeled tab component must have an ariaLabel for accessibility.');
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -9897,7 +10140,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            [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                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", "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", "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,
@@ -9909,7 +10152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         CpsIconComponent,
                         CpsSelectComponent,
                         TableColumnFilterConstraintComponent
-                    ], template: "<div class=\"cps-table-col-filter\">\n  <cps-menu\n    #columnFilterMenu\n    [withArrow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    [persistent]=\"persistent || (showApplyButton && isCategoryDropdownOpened)\"\n    (menuShown)=\"onMenuShown()\"\n    (menuHidden)=\"onMenuHidden()\"\n    (beforeMenuHidden)=\"onBeforeMenuHidden()\">\n    <div class=\"cps-table-col-filter-menu-content\">\n      @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            [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                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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$5.Table, decorators: [{
                     type: Optional
                 }] }, { type: i2$2.TreeTable, decorators: [{
@@ -10934,7 +11177,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                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        [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", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "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                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", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "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,
@@ -10962,7 +11205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             // eslint-disable-next-line no-use-before-define
                             deps: [CpsTableComponent]
                         }
-                    ], template: "<p-table\n  #primengTable\n  #tUnsortDirective=\"tWithUnsort\"\n  tWithUnsort\n  [ngClass]=\"{ 'cps-table-loading': loading }\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [value]=\"data\"\n  [dataKey]=\"dataKey\"\n  [columns]=\"selectedColumns\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [showInitialSortBadge]=\"false\"\n  [loading]=\"loading\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [lazy]=\"lazy\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  [(selection)]=\"selectedRows\"\n  [metaKeySelection]=\"false\"\n  [rowHover]=\"rowHover\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [exportFilename]=\"exportFilename\"\n  [csvSeparator]=\"csvSeparator\"\n  [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                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        [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"] }]
+                    ], 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                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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -14402,7 +14645,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                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        [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", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "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", "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                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", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "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,
@@ -14434,7 +14677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             // eslint-disable-next-line no-use-before-define
                             deps: [CpsTreeTableComponent]
                         }
-                    ], template: "<p-treeTable\n  #primengTreeTable\n  ttWithUnsort\n  [ngClass]=\"{\n    'cps-treetable-loading': loading,\n    'cps-treetable-flex': defScrollHeight === 'flex',\n    'cps-treetable-nonvirtual': !virtualScroll,\n    'cps-treetable-autolayout-calced': autoLayout && scrollable\n  }\"\n  [value]=\"data\"\n  [autoLayout]=\"autoLayout && !scrollable\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{\n    numToleratedItems: numToleratedItems,\n    autoSize: false\n  }\"\n  [columns]=\"selectedColumns\"\n  [loading]=\"loading\"\n  [rowHover]=\"rowHover\"\n  [lazy]=\"lazy\"\n  [(selection)]=\"selectedRows\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  compareSelectionBy=\"deepEquals\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  [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                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        [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"] }]
+                    ], 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                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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -14807,6 +15050,9 @@ const hideAnimation = animation([
 ]);
 const MIN_DRAG_VISIBLE_REM = 3;
 class CpsDialogComponent {
+    get _rootFontSizePx() {
+        return this._cpsRootFontSizeService?.fontSize() || 16;
+    }
     get ariaLabel() {
         if (this.config.ariaLabelledBy)
             return null;
@@ -14888,14 +15134,11 @@ class CpsDialogComponent {
         this._resizeStarted = new EventEmitter();
         this._resizeEnded = new EventEmitter();
         this._maximizedStateChanged = new EventEmitter();
-        this._rootFontSizePx = 16;
         this._openedByKeyboard = false;
         this._cpsFocusService = inject(CPS_FOCUS_SERVICE);
+        this._cpsRootFontSizeService = inject(CPS_ROOT_FONT_SIZE_SERVICE);
     }
     ngOnInit() {
-        if (isPlatformBrowser(this.platformId)) {
-            this._rootFontSizePx = parseFloat(getComputedStyle(this.document.documentElement).fontSize || '16');
-        }
         if (!this.config.ariaLabel?.trim() &&
             !this.config.ariaLabelledBy?.trim() &&
             !this.config.headerTitle?.trim()) {
@@ -15965,116 +16208,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                     args: [DOCUMENT]
                 }] }] });
 
-/**
- * CpsRootFontSizeService tracks the application's current root font size.
- *
- * The service uses a ResizeObserver strategy to reliably detect root font-size changes:
- *
- * **Sentinel element** (`<div style="width:1rem;height:0">`) — its pixel width
- *    mirrors `1rem`. Any root font-size change — caused by CSS class toggles,
- *    stylesheet rules, direct JS assignment, or viewport resize (e.g.
- *    `font-size: 1.5vw`) — changes the sentinel's computed width, firing the
- *    observer.
- * The cached value is stored in a signal and is only updated when the actual
- * font-size value changes, preventing spurious updates.
- *
- * In microfrontend environments the sentinel element is keyed by a known DOM
- * attribute (`data-cps-root-font-size-sentinel`) and reused if already present,
- * so only one sentinel node exists per document regardless of how many
- * instances of this service are created. The sentinel is intentionally never
- * removed from the DOM — it is a lightweight, invisible element and removing it
- * could silently break any other live service instance still observing it.
- *
- * Only active in browser environments. Under SSR the `fontSize` signal is
- * initialized to `16` (the standard browser default) and no DOM observers are created.
- *
- * Prefer injecting {@link CPS_ROOT_FONT_SIZE_SERVICE} over this class directly
- * to allow consumer applications to override the behavior.
- *
- * @example
- * ```typescript
- * class MyComponent {
- *   private fontSizeService = inject(CPS_ROOT_FONT_SIZE_SERVICE);
- *   readonly fontSize = this.fontSizeService?.fontSize;
- * }
- * ```
- */
-class CpsRootFontSizeService {
-    static { this._SENTINEL_ATTR = 'data-cps-root-font-size-sentinel'; }
-    constructor() {
-        this._document = inject(DOCUMENT);
-        this._platformId = inject(PLATFORM_ID);
-        this._fontSize = signal(isPlatformBrowser(this._platformId) ? this._readRootFontSize() : 16, ...(ngDevMode ? [{ debugName: "_fontSize" }] : /* istanbul ignore next */ []));
-        this._sentinelObserver = null;
-        /** Reactive signal containing the current root font size in pixels. */
-        this.fontSize = this._fontSize.asReadonly();
-        if (!isPlatformBrowser(this._platformId))
-            return;
-        this._setupObservers();
-    }
-    ngOnDestroy() {
-        this._sentinelObserver?.disconnect();
-        this._sentinelObserver = null;
-    }
-    _setupObservers() {
-        // Reuse an existing sentinel if another service instance already created one.
-        let sentinel = this._document.querySelector(`[${CpsRootFontSizeService._SENTINEL_ATTR}]`);
-        if (!sentinel) {
-            sentinel = this._document.createElement('div');
-            sentinel.setAttribute(CpsRootFontSizeService._SENTINEL_ATTR, '');
-            Object.assign(sentinel.style, {
-                position: 'absolute',
-                width: '1rem',
-                height: '0',
-                visibility: 'hidden',
-                pointerEvents: 'none',
-                userSelect: 'none',
-                top: '0',
-                left: '0'
-            });
-            this._document.documentElement.appendChild(sentinel);
-        }
-        this._sentinelObserver = new ResizeObserver(() => this._refresh());
-        this._sentinelObserver.observe(sentinel);
-    }
-    _refresh() {
-        const newSize = this._readRootFontSize();
-        if (newSize !== this._fontSize()) {
-            this._fontSize.set(newSize);
-        }
-    }
-    _readRootFontSize() {
-        return parseFloat(getComputedStyle(this._document.documentElement).fontSize);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsRootFontSizeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsRootFontSizeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsRootFontSizeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-/**
- * Injection token for the root font size service.
- *
- * By default it resolves to the singleton {@link CpsRootFontSizeService}.
- * Consumer applications can override it to:
- * - Supply a custom subclass
- * - Provide `null` to disable dynamic tracking entirely
- *
- * @example Disable dynamic tracking:
- * ```typescript
- * providers: [
- *   { provide: CPS_ROOT_FONT_SIZE_SERVICE, useValue: null }
- * ]
- * ```
- */
-const CPS_ROOT_FONT_SIZE_SERVICE = new InjectionToken('CpsRootFontSizeService', {
-    providedIn: 'root',
-    factory: () => inject(CpsRootFontSizeService)
-});
-
 /**
  * CpsThemeService manages application theming including dark mode support.
  *