cps-ui-kit 21.18.0 → 21.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/cps-ui-kit.mjs +339 -169
  2. package/fesm2022/cps-ui-kit.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/cps-ui-kit.d.ts +55 -19
package/fesm2022/cps-ui-kit.mjs CHANGED
@@ -184,6 +184,11 @@ const focusElement = (element) => {
184
184
  setTimeout(() => element.focus());
185
185
  }
186
186
  };
187
+ const logMissingAriaLabelError = (componentName, label, ariaLabel) => {
188
+ if (!label?.trim() && !ariaLabel?.trim()) {
189
+ console.error(`${componentName}: unlabeled component must have an ariaLabel for accessibility.`);
190
+ }
191
+ };
187
192
 
188
193
  const isSameDomain = (styleSheet, _window) => {
189
194
  if (!styleSheet.href) {
@@ -536,11 +541,11 @@ class CpsChipComponent {
536
541
  this.closed.emit(this.label);
537
542
  }
538
543
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
539
- 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"] }] }); }
544
+ 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"] }] }); }
540
545
  }
541
546
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsChipComponent, decorators: [{
542
547
  type: Component,
543
- 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"] }]
548
+ 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"] }]
544
549
  }], propDecorators: { label: [{
545
550
  type: Input
546
551
  }], icon: [{
@@ -622,7 +627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
622
627
  */
623
628
  class CpsTooltipDirective {
624
629
  get _rootFontSizePx() {
625
- return this._cpsRootFontSizeService?.fontSize() ?? 16;
630
+ return this._cpsRootFontSizeService?.fontSize() || 16;
626
631
  }
627
632
  constructor() {
628
633
  /**
@@ -1994,8 +1999,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
1994
1999
  args: ['menuArrow']
1995
2000
  }] } });
1996
2001
 
1997
- const VIRTUAL_SCROLL_ITEM_SIZE_REM = 2.75;
1998
- const VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS = 5.5;
2002
+ const VIRTUAL_SCROLL_ITEM_SIZE_REM$1 = 2.75;
2003
+ const VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS$1 = 5.5;
1999
2004
  /**
2000
2005
  * CpsAutocompleteComponent is an input component that provides real-time suggestions when being typed.
2001
2006
  * @group Components
@@ -2277,9 +2282,10 @@ class CpsAutocompleteComponent {
2277
2282
  this.backspaceClickedOnce = false;
2278
2283
  this.activeSingle = false;
2279
2284
  this.optionHighlightedIndex = -1;
2280
- this.virtualScrollItemSizePx = computed(() => (this._cpsRootFontSizeService?.fontSize() ?? 16) *
2281
- VIRTUAL_SCROLL_ITEM_SIZE_REM, ...(ngDevMode ? [{ debugName: "virtualScrollItemSizePx" }] : /* istanbul ignore next */ []));
2282
- this.virtualListHeightRem = VIRTUAL_SCROLL_ITEM_SIZE_REM * VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS;
2285
+ this.isArrowNavigating = false;
2286
+ this.virtualScrollItemSizePx = computed(() => (this._cpsRootFontSizeService?.fontSize() || 16) *
2287
+ VIRTUAL_SCROLL_ITEM_SIZE_REM$1, ...(ngDevMode ? [{ debugName: "virtualScrollItemSizePx" }] : /* istanbul ignore next */ []));
2288
+ this.virtualListHeightRem = VIRTUAL_SCROLL_ITEM_SIZE_REM$1 * VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS$1;
2283
2289
  this.autocompleteBoxWidthPx = 0;
2284
2290
  this.isTimePickerField = false;
2285
2291
  this.optionsListId = generateUniqueId('cps-autocomplete-options-list');
@@ -2306,7 +2312,8 @@ class CpsAutocompleteComponent {
2306
2312
  }
2307
2313
  ngOnInit() {
2308
2314
  this.virtualListHeightRem =
2309
- VIRTUAL_SCROLL_ITEM_SIZE_REM * VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS;
2315
+ VIRTUAL_SCROLL_ITEM_SIZE_REM$1 * VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS$1;
2316
+ this.cvtWidth = convertSize(this.width);
2310
2317
  if (this.multiple && !this._value) {
2311
2318
  this._value = [];
2312
2319
  }
@@ -2324,6 +2331,7 @@ class CpsAutocompleteComponent {
2324
2331
  this.inputTextDebounced = this.inputText;
2325
2332
  this.inputChanged.emit(val);
2326
2333
  });
2334
+ logMissingAriaLabelError('CpsAutocompleteComponent', this.label, this.ariaLabel);
2327
2335
  }
2328
2336
  ngOnChanges(changes) {
2329
2337
  if (changes.width) {
@@ -2340,11 +2348,7 @@ class CpsAutocompleteComponent {
2340
2348
  loadChanges.previousValue) {
2341
2349
  this._toggleOptions(true);
2342
2350
  }
2343
- if (changes.label || changes.ariaLabel) {
2344
- if (!this.label?.trim() && !this.ariaLabel?.trim()) {
2345
- console.error('CpsAutocompleteComponent: unlabeled autocomplete component must have an ariaLabel for accessibility.');
2346
- }
2347
- }
2351
+ logMissingAriaLabelError('CpsAutocompleteComponent', this.label, this.ariaLabel);
2348
2352
  }
2349
2353
  ngAfterViewInit() {
2350
2354
  this.resizeObserver.observe(this.autocompleteBox.nativeElement);
@@ -2465,8 +2469,8 @@ class CpsAutocompleteComponent {
2465
2469
  clear(event) {
2466
2470
  event?.stopPropagation();
2467
2471
  event?.preventDefault();
2468
- if ((!this.multiple && !this.isEmptyValue()) ||
2469
- (this.multiple && this.value?.length > 0)) {
2472
+ const hadValue = this.hasSelectedValue();
2473
+ if (hadValue) {
2470
2474
  if (this.openOnClear) {
2471
2475
  this._toggleOptions(true);
2472
2476
  }
@@ -2475,9 +2479,11 @@ class CpsAutocompleteComponent {
2475
2479
  }
2476
2480
  this.clearInput();
2477
2481
  this._dehighlightOption();
2478
- setTimeout(() => {
2479
- this.focusInput();
2480
- }, 0);
2482
+ if (hadValue) {
2483
+ setTimeout(() => {
2484
+ this.focusInput();
2485
+ }, 0);
2486
+ }
2481
2487
  }
2482
2488
  // eslint-disable-next-line @typescript-eslint/no-empty-function
2483
2489
  setDisabledState(_disabled) { }
@@ -2514,19 +2520,22 @@ class CpsAutocompleteComponent {
2514
2520
  }
2515
2521
  this._confirmInput(this.inputText || '', false);
2516
2522
  this._closeAndClear();
2517
- this.onBlur();
2518
2523
  }
2519
2524
  onBoxClick() {
2525
+ const wasOpened = this.isOpened;
2520
2526
  if (!this.multiple) {
2521
2527
  this.activeSingle = true;
2522
2528
  if (!this.inputText)
2523
2529
  this.inputText = this._getValueLabel();
2524
- if (!this.isOpened)
2530
+ if (!wasOpened)
2525
2531
  this.filteredOptions = this.options;
2526
2532
  }
2527
2533
  this._dehighlightOption();
2528
2534
  setTimeout(() => {
2529
- this.focus();
2535
+ this.focusInput();
2536
+ if (!wasOpened) {
2537
+ this._toggleOptions(true);
2538
+ }
2530
2539
  });
2531
2540
  }
2532
2541
  onContainerKeyDown(event) {
@@ -2596,7 +2605,7 @@ class CpsAutocompleteComponent {
2596
2605
  }
2597
2606
  }
2598
2607
  focusInput() {
2599
- this.autocompleteContainer?.nativeElement?.querySelector('input')?.focus();
2608
+ this.autocompleteInput?.nativeElement?.focus();
2600
2609
  }
2601
2610
  focus() {
2602
2611
  this.focusInput();
@@ -2607,15 +2616,17 @@ class CpsAutocompleteComponent {
2607
2616
  return;
2608
2617
  const currentLen = this.filteredOptions?.length || 0;
2609
2618
  this.virtualListHeightRem =
2610
- VIRTUAL_SCROLL_ITEM_SIZE_REM *
2611
- Math.min(currentLen, VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS);
2619
+ VIRTUAL_SCROLL_ITEM_SIZE_REM$1 *
2620
+ Math.min(currentLen, VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS$1);
2612
2621
  this.virtualList?.setSpacerSize();
2613
2622
  }
2614
- isEmptyValue() {
2615
- return (this.value === null ||
2616
- this.value === undefined ||
2617
- (typeof this.value === 'string' && this.value.trim() === '') ||
2618
- Number.isNaN(this.value));
2623
+ hasSelectedValue() {
2624
+ if (this.multiple) {
2625
+ return this.value?.length > 0;
2626
+ }
2627
+ return (this.value != null &&
2628
+ !(typeof this.value === 'string' && this.value.trim() === '') &&
2629
+ !Number.isNaN(this.value));
2619
2630
  }
2620
2631
  clearInput() {
2621
2632
  this.filteredOptions = this.options;
@@ -2695,6 +2706,7 @@ class CpsAutocompleteComponent {
2695
2706
  setTimeout(() => {
2696
2707
  if (this.isOpened && this.filteredOptions.length > 0) {
2697
2708
  this.recalcVirtualListHeight();
2709
+ this._syncHighlightToValue();
2698
2710
  const selected = this.optionsList.nativeElement.querySelector('.selected');
2699
2711
  if (selected) {
2700
2712
  selected.scrollIntoView({
@@ -2703,18 +2715,8 @@ class CpsAutocompleteComponent {
2703
2715
  inline: 'center'
2704
2716
  });
2705
2717
  }
2706
- else if (this.virtualScroll && !this.isEmptyValue()) {
2707
- let v;
2708
- if (this.multiple) {
2709
- if (this.value.length > 0) {
2710
- v = this.value[0];
2711
- }
2712
- }
2713
- else
2714
- v = this.value;
2715
- const idx = this.filteredOptions.findIndex((o) => isEqual(o, v));
2716
- if (idx >= 0)
2717
- this.virtualList.scrollToIndex(idx);
2718
+ else if (this.virtualScroll && this.optionHighlightedIndex >= 0) {
2719
+ this._scrollVirtualListToIndex(this.optionHighlightedIndex);
2718
2720
  }
2719
2721
  }
2720
2722
  });
@@ -2754,7 +2756,7 @@ class CpsAutocompleteComponent {
2754
2756
  this.valueChanged.emit(value);
2755
2757
  }
2756
2758
  _getValueLabel() {
2757
- return !this.isEmptyValue()
2759
+ return this.hasSelectedValue()
2758
2760
  ? this.returnObject
2759
2761
  ? this.value[this.optionLabel]
2760
2762
  : this._labelByValue.transform(this.value, this.options, this.optionValue, this.optionLabel)
@@ -2767,6 +2769,16 @@ class CpsAutocompleteComponent {
2767
2769
  }
2768
2770
  _dehighlightOption() {
2769
2771
  this.optionHighlightedIndex = -1;
2772
+ this.isArrowNavigating = false;
2773
+ }
2774
+ _syncHighlightToValue() {
2775
+ if (!this.hasSelectedValue())
2776
+ return;
2777
+ const firstSelected = this.multiple ? this.value[0] : this.value;
2778
+ const idx = this.filteredOptions.findIndex((o) => isEqual(this.returnObject ? o : o[this.optionValue], firstSelected));
2779
+ if (idx < 0)
2780
+ return;
2781
+ this.optionHighlightedIndex = idx + (this.isSelectAllVisible ? 1 : 0);
2770
2782
  }
2771
2783
  _getHighlightedOptionId() {
2772
2784
  if (this.optionHighlightedIndex < 0) {
@@ -2800,6 +2812,7 @@ class CpsAutocompleteComponent {
2800
2812
  return;
2801
2813
  if (this.optionsAriaSetSize < 1)
2802
2814
  return;
2815
+ this.isArrowNavigating = true;
2803
2816
  this.optionHighlightedIndex = this._nextHighlightIndex(up, this.optionsAriaSetSize);
2804
2817
  const activeId = this._getHighlightedOptionId();
2805
2818
  if (!activeId)
@@ -2815,6 +2828,7 @@ class CpsAutocompleteComponent {
2815
2828
  const len = this.filteredOptions.length;
2816
2829
  if (len < 1)
2817
2830
  return;
2831
+ this.isArrowNavigating = true;
2818
2832
  this.optionHighlightedIndex = this._nextHighlightIndex(up, len);
2819
2833
  this._syncVirtualHighlightedOptionIntoView();
2820
2834
  }
@@ -2860,14 +2874,22 @@ class CpsAutocompleteComponent {
2860
2874
  return;
2861
2875
  searchVal = searchVal.toLowerCase();
2862
2876
  if (!searchVal) {
2863
- if (this.multiple)
2877
+ if (this.multiple) {
2878
+ this._closeAndClear();
2864
2879
  return;
2865
- // Only reset the value if the inputText was changed by the user
2866
- if (this.inputText !== this._getValueLabel()) {
2867
- this.updateValue(this._getEmptyValue());
2868
2880
  }
2869
- this.cdRef.detectChanges();
2870
- this._closeAndClear();
2881
+ const shouldUpdateValue = this.activeSingle && this.inputText !== this._getValueLabel();
2882
+ this.clearInput();
2883
+ this._dehighlightOption();
2884
+ if (shouldUpdateValue) {
2885
+ setTimeout(() => {
2886
+ this.updateValue(this._getEmptyValue());
2887
+ if (needFocusInput) {
2888
+ this.cdRef.detectChanges();
2889
+ this.focusInput();
2890
+ }
2891
+ }, 0);
2892
+ }
2871
2893
  return;
2872
2894
  }
2873
2895
  const found = this.filteredOptions.find((o) => o[this.optionLabel].toLowerCase() === searchVal);
@@ -2907,7 +2929,7 @@ class CpsAutocompleteComponent {
2907
2929
  }, 0);
2908
2930
  }
2909
2931
  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 }); }
2910
- 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.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]=\"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" }] }); }
2932
+ 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" }] }); }
2911
2933
  }
2912
2934
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsAutocompleteComponent, decorators: [{
2913
2935
  type: Component,
@@ -2922,7 +2944,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
2922
2944
  CheckOptionSelectedPipe,
2923
2945
  ScrollerModule,
2924
2946
  CpsMenuComponent
2925
- ], 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.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]=\"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"] }]
2947
+ ], 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"] }]
2926
2948
  }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
2927
2949
  type: Self
2928
2950
  }, {
@@ -3161,19 +3183,16 @@ class CpsButtonToggleComponent {
3161
3183
  if (this.multiple && !this._value) {
3162
3184
  this._value = [];
3163
3185
  }
3186
+ logMissingAriaLabelError('CpsButtonToggleComponent', this.label, this.ariaLabel);
3164
3187
  }
3165
3188
  ngOnChanges(changes) {
3166
- if (changes.label || changes.ariaLabel) {
3167
- if (!this.label?.trim() && !this.ariaLabel?.trim()) {
3168
- console.error('CpsButtonToggleComponent: unlabeled button toggle component must have an ariaLabel for accessibility.');
3169
- }
3170
- }
3171
3189
  if (changes.options) {
3172
3190
  const hasInaccessibleOption = this.options.some((opt) => !opt.label?.trim() && !opt.ariaLabel?.trim());
3173
3191
  if (hasInaccessibleOption) {
3174
3192
  console.error('CpsButtonToggleComponent: each unlabeled option must have an ariaLabel for accessibility.');
3175
3193
  }
3176
3194
  }
3195
+ logMissingAriaLabelError('CpsButtonToggleComponent', this.label, this.ariaLabel);
3177
3196
  }
3178
3197
  // eslint-disable-next-line @typescript-eslint/no-empty-function
3179
3198
  setDisabledState(_disabled) { }
@@ -3387,7 +3406,10 @@ class CpsButtonComponent {
3387
3406
  this.classesList = [];
3388
3407
  this.enterActive = false;
3389
3408
  }
3390
- ngOnChanges(changes) {
3409
+ ngOnInit() {
3410
+ logMissingAriaLabelError('CpsButtonComponent', this.label, this.ariaLabel);
3411
+ }
3412
+ ngOnChanges() {
3391
3413
  this.buttonColor = getCSSColor(this.color, this.document);
3392
3414
  this.borderRadius = convertSize(this.borderRadius);
3393
3415
  this.textColor =
@@ -3397,12 +3419,8 @@ class CpsButtonComponent {
3397
3419
  if (this.disabled || this.loading) {
3398
3420
  this.enterActive = false;
3399
3421
  }
3400
- if (changes.label || changes.ariaLabel) {
3401
- if (!this.label?.trim() && !this.ariaLabel?.trim()) {
3402
- console.error('CpsButtonComponent: icon-only or unlabeled button must have an ariaLabel for accessibility.');
3403
- }
3404
- }
3405
3422
  this.setClasses();
3423
+ logMissingAriaLabelError('CpsButtonComponent', this.label, this.ariaLabel);
3406
3424
  }
3407
3425
  setClasses() {
3408
3426
  this.classesList = ['cps-button'];
@@ -3615,13 +3633,10 @@ class CpsCheckboxComponent {
3615
3633
  }
3616
3634
  ngOnInit() {
3617
3635
  this.iconColor = getCSSColor(this.iconColor, this.document);
3636
+ logMissingAriaLabelError('CpsCheckboxComponent', this.label, this.ariaLabel);
3618
3637
  }
3619
- ngOnChanges(changes) {
3620
- if (changes.label || changes.ariaLabel) {
3621
- if (!this.label?.trim() && !this.ariaLabel?.trim()) {
3622
- console.error('CpsCheckboxComponent: icon-only or unlabeled checkbox must have an ariaLabel for accessibility.');
3623
- }
3624
- }
3638
+ ngOnChanges() {
3639
+ logMissingAriaLabelError('CpsCheckboxComponent', this.label, this.ariaLabel);
3625
3640
  }
3626
3641
  registerOnChange(fn) {
3627
3642
  this.onChange = fn;
@@ -5057,6 +5072,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
5057
5072
  args: [{ standalone: true, name: 'combineLabels' }]
5058
5073
  }] });
5059
5074
 
5075
+ const VIRTUAL_SCROLL_ITEM_SIZE_REM = 2.75;
5076
+ const VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS = 5.5;
5060
5077
  /**
5061
5078
  * CpsSelectComponent is used to select items from a collection.
5062
5079
  * @group Components
@@ -5076,6 +5093,11 @@ class CpsSelectComponent {
5076
5093
  * @group Props
5077
5094
  */
5078
5095
  this.label = '';
5096
+ /**
5097
+ * Aria label for the select component, used for accessibility, it takes precedence over label.
5098
+ * @group Props
5099
+ */
5100
+ this.ariaLabel = '';
5079
5101
  /**
5080
5102
  * Placeholder text for the select component.
5081
5103
  * @group Props
@@ -5185,7 +5207,7 @@ class CpsSelectComponent {
5185
5207
  * Size of icon before input value.
5186
5208
  * @group Props
5187
5209
  */
5188
- this.prefixIconSize = '18px';
5210
+ this.prefixIconSize = '1.125rem';
5189
5211
  /**
5190
5212
  * When enabled, a loading bar is displayed.
5191
5213
  * @group Props
@@ -5267,10 +5289,18 @@ class CpsSelectComponent {
5267
5289
  this.error = '';
5268
5290
  this.cvtWidth = '';
5269
5291
  this.isOpened = false;
5292
+ this.isActive = false;
5270
5293
  this.optionHighlightedIndex = -1;
5271
- this.virtualListHeight = 242;
5272
- this.virtualScrollItemSize = 44;
5273
- this.selectBoxWidth = 0;
5294
+ this.isArrowNavigating = false;
5295
+ this.virtualScrollItemSizePx = computed(() => (this._cpsRootFontSizeService?.fontSize() || 16) *
5296
+ VIRTUAL_SCROLL_ITEM_SIZE_REM, ...(ngDevMode ? [{ debugName: "virtualScrollItemSizePx" }] : /* istanbul ignore next */ []));
5297
+ this.virtualListHeightRem = VIRTUAL_SCROLL_ITEM_SIZE_REM * VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS;
5298
+ this.selectBoxWidthPx = 0;
5299
+ this._cpsRootFontSizeService = inject(CPS_ROOT_FONT_SIZE_SERVICE);
5300
+ this.optionsListId = generateUniqueId('cps-select-options-list');
5301
+ this.selectAllOptionId = generateUniqueId('cps-select-option-select-all');
5302
+ this._optionIdPrefix = generateUniqueId('cps-select-option');
5303
+ this._optionIds = new WeakMap();
5274
5304
  // eslint-disable-next-line @typescript-eslint/no-empty-function
5275
5305
  this.onChange = (_event) => { };
5276
5306
  // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -5281,11 +5311,13 @@ class CpsSelectComponent {
5281
5311
  this.resizeObserver = new ResizeObserver((entries) => {
5282
5312
  entries.forEach((entry) => {
5283
5313
  if (entry?.target)
5284
- this.selectBoxWidth = entry.target.offsetWidth;
5314
+ this.selectBoxWidthPx = entry.target.offsetWidth;
5285
5315
  });
5286
5316
  });
5287
5317
  }
5288
5318
  ngOnInit() {
5319
+ this.virtualListHeightRem =
5320
+ VIRTUAL_SCROLL_ITEM_SIZE_REM * VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS;
5289
5321
  this.cvtWidth = convertSize(this.width);
5290
5322
  if (this.multiple && !this._value) {
5291
5323
  this._value = [];
@@ -5293,7 +5325,23 @@ class CpsSelectComponent {
5293
5325
  this._statusChangesSubscription = this._control?.statusChanges?.subscribe(() => {
5294
5326
  this._checkErrors();
5295
5327
  });
5296
- this._recalcVirtualListHeight();
5328
+ this.recalcVirtualListHeight();
5329
+ logMissingAriaLabelError('CpsSelectComponent', this.label, this.ariaLabel);
5330
+ }
5331
+ ngOnChanges(changes) {
5332
+ if (changes.width) {
5333
+ this.cvtWidth = convertSize(this.width);
5334
+ }
5335
+ if (changes.options) {
5336
+ this._optionIds = new WeakMap();
5337
+ this.options.forEach((opt, index) => {
5338
+ if (opt && typeof opt === 'object') {
5339
+ this._optionIds.set(opt, this._buildOptionId(index));
5340
+ }
5341
+ });
5342
+ this.recalcVirtualListHeight();
5343
+ }
5344
+ logMissingAriaLabelError('CpsSelectComponent', this.label, this.ariaLabel);
5297
5345
  }
5298
5346
  ngAfterViewInit() {
5299
5347
  this.resizeObserver.observe(this.selectBox.nativeElement);
@@ -5323,6 +5371,7 @@ class CpsSelectComponent {
5323
5371
  this.isOpened = this.optionsMenu.isVisible();
5324
5372
  setTimeout(() => {
5325
5373
  if (this.isOpened && this.options.length > 0) {
5374
+ this._syncHighlightToValue();
5326
5375
  const selected = this.optionsList.nativeElement.querySelector('.selected');
5327
5376
  if (selected) {
5328
5377
  selected.scrollIntoView({
@@ -5331,27 +5380,20 @@ class CpsSelectComponent {
5331
5380
  inline: 'center'
5332
5381
  });
5333
5382
  }
5334
- else if (this.virtualScroll && !this.isEmptyValue()) {
5335
- let v;
5336
- if (this.multiple) {
5337
- if (this.value.length > 0) {
5338
- v = this.value[0];
5339
- }
5340
- }
5341
- else
5342
- v = this.value;
5343
- const idx = this.options.findIndex((o) => isEqual(o, v));
5344
- if (idx >= 0)
5345
- this.virtualList.scrollToIndex(idx);
5383
+ else if (this.virtualScroll && this.optionHighlightedIndex >= 0) {
5384
+ this._scrollVirtualListToIndex(this.optionHighlightedIndex);
5346
5385
  }
5347
5386
  }
5348
5387
  });
5349
5388
  }
5350
- _recalcVirtualListHeight() {
5389
+ recalcVirtualListHeight() {
5351
5390
  if (!this.virtualScroll)
5352
5391
  return;
5353
5392
  const currentLen = this.options?.length || 0;
5354
- this.virtualListHeight = Math.min(this.virtualScrollItemSize * currentLen, 242);
5393
+ this.virtualListHeightRem =
5394
+ VIRTUAL_SCROLL_ITEM_SIZE_REM *
5395
+ Math.min(currentLen, VIRTUAL_SCROLL_MAX_VISIBLE_ITEMS);
5396
+ this.virtualList?.setSpacerSize();
5355
5397
  }
5356
5398
  select(option, byValue) {
5357
5399
  function includes(array, val) {
@@ -5404,22 +5446,20 @@ class CpsSelectComponent {
5404
5446
  this._toggleOptions(false);
5405
5447
  }
5406
5448
  }
5407
- _getHTMLOptions() {
5408
- return (this.optionsList.nativeElement.querySelectorAll('.cps-select-options-option') || []);
5449
+ _dehighlightOption() {
5450
+ this.optionHighlightedIndex = -1;
5451
+ this.isArrowNavigating = false;
5409
5452
  }
5410
- _dehighlightOption(el) {
5411
- if (el)
5412
- el.classList.remove('highlighten');
5413
- else {
5414
- if (this.optionHighlightedIndex < 0)
5415
- return;
5416
- const optionItems = this._getHTMLOptions();
5417
- optionItems[this.optionHighlightedIndex].classList.remove('highlighten');
5418
- this.optionHighlightedIndex = -1;
5419
- }
5453
+ _syncHighlightToValue() {
5454
+ if (!this.hasSelectedValue())
5455
+ return;
5456
+ const firstSelected = this.multiple ? this.value[0] : this.value;
5457
+ const idx = this.options.findIndex((o) => isEqual(this.returnObject ? o : o[this.optionValue], firstSelected));
5458
+ if (idx < 0)
5459
+ return;
5460
+ this.optionHighlightedIndex = idx + (this.isSelectAllVisible ? 1 : 0);
5420
5461
  }
5421
5462
  _highlightOption(el) {
5422
- el.classList.add('highlighten');
5423
5463
  const parent = el.parentElement;
5424
5464
  if (!parent)
5425
5465
  return;
@@ -5435,53 +5475,60 @@ class CpsSelectComponent {
5435
5475
  _navigateOptionsByArrows(up) {
5436
5476
  if (!this.isOpened)
5437
5477
  return;
5438
- const optionItems = this._getHTMLOptions();
5439
- const len = optionItems.length;
5440
- if (len < 1)
5478
+ if (this.optionsAriaSetSize < 1)
5441
5479
  return;
5442
- if (len === 1) {
5443
- this.optionHighlightedIndex = 0;
5444
- this._highlightOption(optionItems[0]);
5480
+ this.isArrowNavigating = true;
5481
+ this.optionHighlightedIndex = this._nextHighlightIndex(up, this.optionsAriaSetSize);
5482
+ const activeId = this._getHighlightedOptionId();
5483
+ if (!activeId)
5445
5484
  return;
5446
- }
5447
- if (up) {
5448
- this._dehighlightOption(optionItems[this.optionHighlightedIndex]);
5449
- this.optionHighlightedIndex =
5450
- this.optionHighlightedIndex < 1
5451
- ? len - 1
5452
- : this.optionHighlightedIndex - 1;
5453
- this._highlightOption(optionItems[this.optionHighlightedIndex]);
5454
- }
5455
- else {
5456
- this._dehighlightOption(optionItems[this.optionHighlightedIndex]);
5457
- this.optionHighlightedIndex = [-1, len - 1].includes(this.optionHighlightedIndex)
5458
- ? 0
5459
- : this.optionHighlightedIndex + 1;
5460
- this._highlightOption(optionItems[this.optionHighlightedIndex]);
5485
+ const activeOption = this.optionsList?.nativeElement?.querySelector(`#${activeId}`);
5486
+ if (activeOption) {
5487
+ this._highlightOption(activeOption);
5461
5488
  }
5462
5489
  }
5463
- onBeforeOptionsHidden() {
5490
+ onBeforeOptionsHidden(reason) {
5491
+ if ([CpsMenuHideReason.SCROLL, CpsMenuHideReason.RESIZE].includes(reason)) {
5492
+ this._toggleOptions(false);
5493
+ return;
5494
+ }
5464
5495
  this._toggleOptions(false);
5465
5496
  this._dehighlightOption();
5466
5497
  }
5467
5498
  onBoxClick() {
5468
- this._toggleOptions();
5499
+ if (!this.isOpened) {
5500
+ this.selectContainer?.nativeElement?.focus();
5501
+ this._toggleOptions(true);
5502
+ }
5469
5503
  this._dehighlightOption();
5470
5504
  }
5471
- onKeyDown(event) {
5505
+ onChevronClick(event) {
5506
+ event.stopPropagation();
5472
5507
  event.preventDefault();
5473
- const code = event.keyCode;
5474
- // escape
5475
- if (code === 27) {
5508
+ if (this.isOpened) {
5476
5509
  this._toggleOptions(false);
5477
- this._dehighlightOption();
5478
5510
  }
5479
- // enter
5480
- else if (code === 13) {
5511
+ else {
5512
+ this.selectContainer?.nativeElement?.focus();
5513
+ this._toggleOptions(true);
5514
+ }
5515
+ this._dehighlightOption();
5516
+ }
5517
+ onContainerKeyDown(event) {
5518
+ const code = event.keyCode;
5519
+ // enter or space
5520
+ if (code === 13 || code === 32) {
5521
+ event.preventDefault();
5522
+ if (!this.isOpened) {
5523
+ this._toggleOptions(true);
5524
+ return;
5525
+ }
5481
5526
  let idx = this.optionHighlightedIndex;
5482
- if (idx < 0)
5527
+ if (idx < 0) {
5528
+ this._toggleOptions(false);
5483
5529
  return;
5484
- if (this.multiple && this.selectAll && !this.virtualScroll) {
5530
+ }
5531
+ if (this.isSelectAllVisible) {
5485
5532
  if (idx === 0) {
5486
5533
  this.toggleAll();
5487
5534
  return;
@@ -5493,9 +5540,17 @@ class CpsSelectComponent {
5493
5540
  }
5494
5541
  // vertical arrows
5495
5542
  else if ([38, 40].includes(code)) {
5496
- // Arrows navigation doesn't work with virtual scroll
5497
- if (!this.virtualScroll)
5543
+ event.preventDefault();
5544
+ if (!this.isOpened) {
5545
+ this._toggleOptions(true);
5546
+ return;
5547
+ }
5548
+ if (this.virtualScroll) {
5549
+ this._navigateVirtualOptionsByArrows(code === 38);
5550
+ }
5551
+ else {
5498
5552
  this._navigateOptionsByArrows(code === 38);
5553
+ }
5499
5554
  }
5500
5555
  }
5501
5556
  toggleAll() {
@@ -5546,8 +5601,9 @@ class CpsSelectComponent {
5546
5601
  }
5547
5602
  clear(event) {
5548
5603
  event?.stopPropagation();
5549
- if ((!this.multiple && !this.isEmptyValue()) ||
5550
- (this.multiple && this.value?.length > 0)) {
5604
+ event?.preventDefault();
5605
+ const hadValue = this.hasSelectedValue();
5606
+ if (hadValue) {
5551
5607
  if (this.openOnClear) {
5552
5608
  this._toggleOptions(true);
5553
5609
  }
@@ -5555,14 +5611,27 @@ class CpsSelectComponent {
5555
5611
  this.updateValue(val);
5556
5612
  }
5557
5613
  this._dehighlightOption();
5614
+ if (hadValue) {
5615
+ setTimeout(() => {
5616
+ this.selectContainer?.nativeElement?.focus();
5617
+ }, 0);
5618
+ }
5558
5619
  }
5559
5620
  // eslint-disable-next-line @typescript-eslint/no-empty-function
5560
5621
  setDisabledState(_disabled) { }
5561
5622
  onBlur() {
5623
+ this.isActive = false;
5624
+ if (this.isOpened) {
5625
+ this._toggleOptions(false);
5626
+ this._dehighlightOption();
5627
+ }
5562
5628
  this._checkErrors();
5563
5629
  this.blurred.emit();
5564
5630
  }
5565
5631
  onFocus() {
5632
+ if (!this.disabled) {
5633
+ this.isActive = true;
5634
+ }
5566
5635
  this._control?.control?.markAsTouched();
5567
5636
  this.focused.emit();
5568
5637
  }
@@ -5570,14 +5639,106 @@ class CpsSelectComponent {
5570
5639
  this.selectContainer?.nativeElement?.focus();
5571
5640
  this._toggleOptions(true);
5572
5641
  }
5573
- isEmptyValue() {
5574
- return (this.value === null ||
5575
- this.value === undefined ||
5576
- (typeof this.value === 'string' && this.value.trim() === '') ||
5577
- Number.isNaN(this.value));
5642
+ get isRequired() {
5643
+ return this._control?.control?.hasValidator(Validators.required) ?? false;
5644
+ }
5645
+ get computedLabel() {
5646
+ return getComputedLabel({
5647
+ label: this.ariaLabel || this.label,
5648
+ error: this.error,
5649
+ hideDetails: this.hideDetails
5650
+ });
5651
+ }
5652
+ get isSelectAllVisible() {
5653
+ return (!this.virtualScroll &&
5654
+ this.multiple &&
5655
+ this.selectAll &&
5656
+ this.options.length > 1);
5657
+ }
5658
+ get optionsAriaSetSize() {
5659
+ return this.options.length + (this.isSelectAllVisible ? 1 : 0);
5660
+ }
5661
+ get activeDescendantId() {
5662
+ if (!this.isOpened || this.optionHighlightedIndex < 0) {
5663
+ return null;
5664
+ }
5665
+ return this._getHighlightedOptionId();
5666
+ }
5667
+ getOptionAriaPosInSet(itemIndex) {
5668
+ return itemIndex + 1 + (this.isSelectAllVisible ? 1 : 0);
5669
+ }
5670
+ getOptionId(option, index) {
5671
+ if (option && typeof option === 'object') {
5672
+ return this._optionIds.get(option) || this._buildOptionId(index);
5673
+ }
5674
+ return this._buildOptionId(index);
5675
+ }
5676
+ _buildOptionId(index) {
5677
+ return `${this._optionIdPrefix}-${index}`;
5678
+ }
5679
+ _getHighlightedOptionId() {
5680
+ if (this.isSelectAllVisible && this.optionHighlightedIndex === 0) {
5681
+ return this.selectAllOptionId;
5682
+ }
5683
+ const optionIndex = this.optionHighlightedIndex - (this.isSelectAllVisible ? 1 : 0);
5684
+ const activeOption = this.options[optionIndex];
5685
+ if (!activeOption) {
5686
+ return null;
5687
+ }
5688
+ return this.getOptionId(activeOption, optionIndex);
5689
+ }
5690
+ hasSelectedValue() {
5691
+ if (this.multiple) {
5692
+ return this.value?.length > 0;
5693
+ }
5694
+ return (this.value != null &&
5695
+ !(typeof this.value === 'string' && this.value.trim() === '') &&
5696
+ !Number.isNaN(this.value));
5697
+ }
5698
+ _navigateVirtualOptionsByArrows(up) {
5699
+ if (!this.isOpened)
5700
+ return;
5701
+ const len = this.options.length;
5702
+ if (len < 1)
5703
+ return;
5704
+ this.isArrowNavigating = true;
5705
+ this.optionHighlightedIndex = this._nextHighlightIndex(up, len);
5706
+ this._scrollVirtualListToIndex(this.optionHighlightedIndex);
5707
+ }
5708
+ _nextHighlightIndex(up, len) {
5709
+ if (up) {
5710
+ return this.optionHighlightedIndex < 1
5711
+ ? len - 1
5712
+ : this.optionHighlightedIndex - 1;
5713
+ }
5714
+ return [-1, len - 1].includes(this.optionHighlightedIndex)
5715
+ ? 0
5716
+ : this.optionHighlightedIndex + 1;
5717
+ }
5718
+ _scrollVirtualListToIndex(index) {
5719
+ const scrollerEl = this.optionsList?.nativeElement?.querySelector('.p-virtualscroller');
5720
+ if (!scrollerEl) {
5721
+ this.virtualList?.scrollToIndex(index);
5722
+ return;
5723
+ }
5724
+ const itemTop = index * this.virtualScrollItemSizePx();
5725
+ const itemBottom = itemTop + this.virtualScrollItemSizePx();
5726
+ const viewportTop = scrollerEl.scrollTop;
5727
+ const viewportBottom = viewportTop + scrollerEl.clientHeight;
5728
+ let nextTop = viewportTop;
5729
+ if (itemTop < viewportTop) {
5730
+ nextTop = itemTop;
5731
+ }
5732
+ else if (itemBottom > viewportBottom) {
5733
+ nextTop = itemBottom - scrollerEl.clientHeight;
5734
+ }
5735
+ if (nextTop === viewportTop)
5736
+ return;
5737
+ const maxTop = Math.max(0, scrollerEl.scrollHeight - scrollerEl.clientHeight);
5738
+ scrollerEl.scrollTop = Math.min(Math.max(0, nextTop), maxTop);
5578
5739
  }
5579
5740
  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 }); }
5580
- 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" }] }); }
5741
+ 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" }] }); }
5581
5742
  }
5582
5743
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsSelectComponent, decorators: [{
5583
5744
  type: Component,
@@ -5593,13 +5754,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
5593
5754
  CheckOptionSelectedPipe,
5594
5755
  ScrollerModule,
5595
5756
  CpsMenuComponent
5596
- ], 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"] }]
5757
+ ], 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"] }]
5597
5758
  }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
5598
5759
  type: Self
5599
5760
  }, {
5600
5761
  type: Optional
5601
5762
  }] }], propDecorators: { label: [{
5602
5763
  type: Input
5764
+ }], ariaLabel: [{
5765
+ type: Input
5603
5766
  }], placeholder: [{
5604
5767
  type: Input
5605
5768
  }], hint: [{
@@ -5773,11 +5936,11 @@ class CpsPaginatorComponent {
5773
5936
  this.paginator.changePage(this.paginator.getPage());
5774
5937
  }
5775
5938
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsPaginatorComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
5776
- 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"] }] }); }
5939
+ 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"] }] }); }
5777
5940
  }
5778
5941
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsPaginatorComponent, decorators: [{
5779
5942
  type: Component,
5780
- 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"] }]
5943
+ 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"] }]
5781
5944
  }], ctorParameters: () => [{ type: Document, decorators: [{
5782
5945
  type: Inject,
5783
5946
  args: [DOCUMENT]
@@ -6025,13 +6188,10 @@ class CpsRadioGroupComponent {
6025
6188
  this._statusChangesSubscription = this._control?.statusChanges?.subscribe(() => {
6026
6189
  this._checkErrors();
6027
6190
  });
6191
+ logMissingAriaLabelError('CpsRadioGroupComponent', this.groupLabel, this.ariaLabel);
6028
6192
  }
6029
- ngOnChanges(changes) {
6030
- if (changes.groupLabel || changes.ariaLabel) {
6031
- if (!this.groupLabel?.trim() && !this.ariaLabel?.trim()) {
6032
- console.error('CpsRadioGroupComponent: unlabeled radio group component must have an ariaLabel for accessibility.');
6033
- }
6034
- }
6193
+ ngOnChanges() {
6194
+ logMissingAriaLabelError('CpsRadioGroupComponent', this.groupLabel, this.ariaLabel);
6035
6195
  }
6036
6196
  ngOnDestroy() {
6037
6197
  this._statusChangesSubscription?.unsubscribe();
@@ -6640,6 +6800,11 @@ class CpsTimepickerComponent {
6640
6800
  * @group Props
6641
6801
  */
6642
6802
  this.label = '';
6803
+ /**
6804
+ * Aria label for the timepicker component, used for accessibility, it takes precedence over label.
6805
+ * @group Props
6806
+ */
6807
+ this.ariaLabel = '';
6643
6808
  /**
6644
6809
  * Determines whether the timepicker is disabled.
6645
6810
  * @group Props
@@ -6747,6 +6912,7 @@ class CpsTimepickerComponent {
6747
6912
  this._statusChangesSubscription = this._control?.statusChanges?.subscribe(() => {
6748
6913
  this._checkErrors();
6749
6914
  });
6915
+ logMissingAriaLabelError('CpsTimepickerComponent', this.label, this.ariaLabel);
6750
6916
  }
6751
6917
  ngAfterViewInit() {
6752
6918
  if (this.hoursField)
@@ -6756,6 +6922,9 @@ class CpsTimepickerComponent {
6756
6922
  if (this.secondsField)
6757
6923
  this.secondsField.isTimePickerField = true;
6758
6924
  }
6925
+ ngOnChanges() {
6926
+ logMissingAriaLabelError('CpsTimepickerComponent', this.label, this.ariaLabel);
6927
+ }
6759
6928
  ngOnDestroy() {
6760
6929
  this._statusChangesSubscription?.unsubscribe();
6761
6930
  }
@@ -6918,7 +7087,7 @@ class CpsTimepickerComponent {
6918
7087
  return Array.from({ length: until + 1 - startFrom }, (_, k) => k + startFrom);
6919
7088
  }
6920
7089
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsTimepickerComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
6921
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsTimepickerComponent, isStandalone: true, selector: "cps-timepicker", inputs: { label: "label", disabled: "disabled", use24HourTime: "use24HourTime", withSeconds: "withSeconds", hint: "hint", hideDetails: "hideDetails", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", mandatoryValue: "mandatoryValue", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", blurred: "blurred" }, viewQueries: [{ propertyName: "hoursField", first: true, predicate: ["hoursField"], descendants: true }, { propertyName: "minutesField", first: true, predicate: ["minutesField"], descendants: true }, { propertyName: "secondsField", first: true, predicate: ["secondsField"], descendants: true }], ngImport: i0, template: "<div class=\"cps-timepicker\">\n @if (label) {\n <div\n class=\"cps-timepicker-label\"\n [ngClass]=\"{ 'cps-timepicker-label-disabled': disabled }\">\n <label>{{ label }}</label>\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-timepicker-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n }\n </div>\n }\n <div class=\"cps-timepicker-body\">\n <cps-autocomplete\n #hoursField\n ariaLabel=\"Hours\"\n (keypress)=\"numberOnly($event)\"\n width=\"60\"\n [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n [options]=\"hoursOptions\"\n [withOptionsAliases]=\"!use24HourTime\"\n [useOptionsAliasesWhenNoMatch]=\"true\"\n [hideDetails]=\"true\"\n [disabled]=\"disabled\"\n [showChevron]=\"false\"\n [showEmptyMessage]=\"false\"\n (focused)=\"onFieldFocus()\"\n (blurred)=\"onFieldBlur()\"\n [returnObject]=\"false\"\n [value]=\"value?.hours\"\n (valueChanged)=\"updateHours($event)\"\n [externalError]=\"hoursError\"\n placeholder=\"HH\"></cps-autocomplete>\n <span class=\"cps-timepicker-delimiter\">:</span>\n <cps-autocomplete\n #minutesField\n ariaLabel=\"Minutes\"\n (keypress)=\"numberOnly($event)\"\n width=\"60\"\n [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n [options]=\"minutesOptions\"\n [hideDetails]=\"true\"\n [disabled]=\"disabled\"\n [showChevron]=\"false\"\n [showEmptyMessage]=\"false\"\n (focused)=\"onFieldFocus()\"\n (blurred)=\"onFieldBlur()\"\n [returnObject]=\"false\"\n [value]=\"value?.minutes\"\n (valueChanged)=\"updateMinutes($event)\"\n [externalError]=\"minutesError\"\n placeholder=\"MM\"></cps-autocomplete>\n @if (withSeconds) {\n <span class=\"cps-timepicker-delimiter\">:</span>\n }\n @if (withSeconds) {\n <cps-autocomplete\n #secondsField\n ariaLabel=\"Seconds\"\n (keypress)=\"numberOnly($event)\"\n width=\"60\"\n [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n [options]=\"secondsOptions\"\n [hideDetails]=\"true\"\n [disabled]=\"disabled\"\n [showChevron]=\"false\"\n [showEmptyMessage]=\"false\"\n (focused)=\"onFieldFocus()\"\n (blurred)=\"onFieldBlur()\"\n [returnObject]=\"false\"\n [value]=\"value?.seconds\"\n (valueChanged)=\"updateSeconds($event)\"\n [externalError]=\"secondsError\"\n placeholder=\"SS\"></cps-autocomplete>\n }\n @if (!use24HourTime) {\n <cps-button-toggle\n class=\"cps-timepicker-am-pm-selector\"\n ariaLabel=\"Day period\"\n [options]=\"dayPeriodOptions\"\n [disabled]=\"disabled\"\n [value]=\"value?.dayPeriod || 'AM'\"\n (valueChanged)=\"updateDayPeriod($event)\">\n </cps-button-toggle>\n }\n </div>\n @if (!error && !hideDetails) {\n <div class=\"cps-timepicker-hint\">\n {{ hint }}\n </div>\n }\n @if (error && !hideDetails) {\n <div class=\"cps-timepicker-error\">\n {{ error }}\n </div>\n }\n</div>\n", styles: [":host .cps-timepicker{display:flex;flex-direction:column}:host .cps-timepicker .cps-timepicker-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-timepicker .cps-timepicker-label-info-circle{margin-left:8px}:host .cps-timepicker .cps-timepicker-label-disabled{color:var(--cps-color-text-mild)}:host .cps-timepicker-body{display:flex;flex-direction:row}:host .cps-timepicker-body .cps-timepicker-am-pm-selector{margin-left:10px;margin-top:0}:host .cps-timepicker-body .cps-timepicker-delimiter{color:var(--cps-color-text-lightest);font-size:24px;margin:0 10px}:host .cps-timepicker .cps-timepicker-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-timepicker .cps-timepicker-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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: 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"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }] }); }
7090
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsTimepickerComponent, isStandalone: true, selector: "cps-timepicker", inputs: { label: "label", ariaLabel: "ariaLabel", disabled: "disabled", use24HourTime: "use24HourTime", withSeconds: "withSeconds", hint: "hint", hideDetails: "hideDetails", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", mandatoryValue: "mandatoryValue", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", blurred: "blurred" }, viewQueries: [{ propertyName: "hoursField", first: true, predicate: ["hoursField"], descendants: true }, { propertyName: "minutesField", first: true, predicate: ["minutesField"], descendants: true }, { propertyName: "secondsField", first: true, predicate: ["secondsField"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-timepicker\">\n @if (label) {\n <div\n class=\"cps-timepicker-label\"\n [ngClass]=\"{ 'cps-timepicker-label-disabled': disabled }\">\n <label>{{ label }}</label>\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-timepicker-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n }\n </div>\n }\n <div class=\"cps-timepicker-body\">\n <cps-autocomplete\n #hoursField\n [ariaLabel]=\"`Hours, ${ariaLabel || label}`\"\n (keypress)=\"numberOnly($event)\"\n width=\"3.75rem\"\n [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n [options]=\"hoursOptions\"\n [withOptionsAliases]=\"!use24HourTime\"\n [useOptionsAliasesWhenNoMatch]=\"true\"\n [hideDetails]=\"true\"\n [disabled]=\"disabled\"\n [showChevron]=\"false\"\n [showEmptyMessage]=\"false\"\n (focused)=\"onFieldFocus()\"\n (blurred)=\"onFieldBlur()\"\n [returnObject]=\"false\"\n [value]=\"value?.hours\"\n (valueChanged)=\"updateHours($event)\"\n [externalError]=\"hoursError\"\n placeholder=\"HH\"></cps-autocomplete>\n <span aria-hidden=\"true\" class=\"cps-timepicker-delimiter\">:</span>\n <cps-autocomplete\n #minutesField\n ariaLabel=\"Minutes\"\n (keypress)=\"numberOnly($event)\"\n width=\"3.75rem\"\n [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n [options]=\"minutesOptions\"\n [hideDetails]=\"true\"\n [disabled]=\"disabled\"\n [showChevron]=\"false\"\n [showEmptyMessage]=\"false\"\n (focused)=\"onFieldFocus()\"\n (blurred)=\"onFieldBlur()\"\n [returnObject]=\"false\"\n [value]=\"value?.minutes\"\n (valueChanged)=\"updateMinutes($event)\"\n [externalError]=\"minutesError\"\n placeholder=\"MM\"></cps-autocomplete>\n @if (withSeconds) {\n <span aria-hidden=\"true\" class=\"cps-timepicker-delimiter\">:</span>\n <cps-autocomplete\n #secondsField\n ariaLabel=\"Seconds\"\n (keypress)=\"numberOnly($event)\"\n width=\"3.75rem\"\n [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n [options]=\"secondsOptions\"\n [hideDetails]=\"true\"\n [disabled]=\"disabled\"\n [showChevron]=\"false\"\n [showEmptyMessage]=\"false\"\n (focused)=\"onFieldFocus()\"\n (blurred)=\"onFieldBlur()\"\n [returnObject]=\"false\"\n [value]=\"value?.seconds\"\n (valueChanged)=\"updateSeconds($event)\"\n [externalError]=\"secondsError\"\n placeholder=\"SS\"></cps-autocomplete>\n }\n @if (!use24HourTime) {\n <cps-button-toggle\n class=\"cps-timepicker-am-pm-selector\"\n ariaLabel=\"Day period\"\n [options]=\"dayPeriodOptions\"\n [disabled]=\"disabled\"\n [value]=\"value?.dayPeriod || 'AM'\"\n (valueChanged)=\"updateDayPeriod($event)\">\n </cps-button-toggle>\n }\n </div>\n @if (!error && !hideDetails) {\n <div class=\"cps-timepicker-hint\">\n {{ hint }}\n </div>\n }\n @if (error && !hideDetails) {\n <div class=\"cps-timepicker-error\">\n {{ error }}\n </div>\n }\n</div>\n", styles: [":host .cps-timepicker{display:flex;flex-direction:column}:host .cps-timepicker .cps-timepicker-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-timepicker .cps-timepicker-label-info-circle{margin-left:.5rem}:host .cps-timepicker .cps-timepicker-label-disabled{color:var(--cps-color-text-mild)}:host .cps-timepicker-body{display:flex;flex-direction:row}:host .cps-timepicker-body .cps-timepicker-am-pm-selector{margin-left:.625rem;margin-top:0}:host .cps-timepicker-body .cps-timepicker-delimiter{color:var(--cps-color-text-lightest);font-size:1.5rem;margin:0 .625rem}:host .cps-timepicker .cps-timepicker-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-timepicker .cps-timepicker-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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: 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"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }] }); }
6922
7091
  }
6923
7092
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsTimepickerComponent, decorators: [{
6924
7093
  type: Component,
@@ -6928,13 +7097,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
6928
7097
  CpsButtonToggleComponent,
6929
7098
  CpsAutocompleteComponent,
6930
7099
  CpsInfoCircleComponent
6931
- ], template: "<div class=\"cps-timepicker\">\n @if (label) {\n <div\n class=\"cps-timepicker-label\"\n [ngClass]=\"{ 'cps-timepicker-label-disabled': disabled }\">\n <label>{{ label }}</label>\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-timepicker-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n }\n </div>\n }\n <div class=\"cps-timepicker-body\">\n <cps-autocomplete\n #hoursField\n ariaLabel=\"Hours\"\n (keypress)=\"numberOnly($event)\"\n width=\"60\"\n [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n [options]=\"hoursOptions\"\n [withOptionsAliases]=\"!use24HourTime\"\n [useOptionsAliasesWhenNoMatch]=\"true\"\n [hideDetails]=\"true\"\n [disabled]=\"disabled\"\n [showChevron]=\"false\"\n [showEmptyMessage]=\"false\"\n (focused)=\"onFieldFocus()\"\n (blurred)=\"onFieldBlur()\"\n [returnObject]=\"false\"\n [value]=\"value?.hours\"\n (valueChanged)=\"updateHours($event)\"\n [externalError]=\"hoursError\"\n placeholder=\"HH\"></cps-autocomplete>\n <span class=\"cps-timepicker-delimiter\">:</span>\n <cps-autocomplete\n #minutesField\n ariaLabel=\"Minutes\"\n (keypress)=\"numberOnly($event)\"\n width=\"60\"\n [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n [options]=\"minutesOptions\"\n [hideDetails]=\"true\"\n [disabled]=\"disabled\"\n [showChevron]=\"false\"\n [showEmptyMessage]=\"false\"\n (focused)=\"onFieldFocus()\"\n (blurred)=\"onFieldBlur()\"\n [returnObject]=\"false\"\n [value]=\"value?.minutes\"\n (valueChanged)=\"updateMinutes($event)\"\n [externalError]=\"minutesError\"\n placeholder=\"MM\"></cps-autocomplete>\n @if (withSeconds) {\n <span class=\"cps-timepicker-delimiter\">:</span>\n }\n @if (withSeconds) {\n <cps-autocomplete\n #secondsField\n ariaLabel=\"Seconds\"\n (keypress)=\"numberOnly($event)\"\n width=\"60\"\n [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n [options]=\"secondsOptions\"\n [hideDetails]=\"true\"\n [disabled]=\"disabled\"\n [showChevron]=\"false\"\n [showEmptyMessage]=\"false\"\n (focused)=\"onFieldFocus()\"\n (blurred)=\"onFieldBlur()\"\n [returnObject]=\"false\"\n [value]=\"value?.seconds\"\n (valueChanged)=\"updateSeconds($event)\"\n [externalError]=\"secondsError\"\n placeholder=\"SS\"></cps-autocomplete>\n }\n @if (!use24HourTime) {\n <cps-button-toggle\n class=\"cps-timepicker-am-pm-selector\"\n ariaLabel=\"Day period\"\n [options]=\"dayPeriodOptions\"\n [disabled]=\"disabled\"\n [value]=\"value?.dayPeriod || 'AM'\"\n (valueChanged)=\"updateDayPeriod($event)\">\n </cps-button-toggle>\n }\n </div>\n @if (!error && !hideDetails) {\n <div class=\"cps-timepicker-hint\">\n {{ hint }}\n </div>\n }\n @if (error && !hideDetails) {\n <div class=\"cps-timepicker-error\">\n {{ error }}\n </div>\n }\n</div>\n", styles: [":host .cps-timepicker{display:flex;flex-direction:column}:host .cps-timepicker .cps-timepicker-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-timepicker .cps-timepicker-label-info-circle{margin-left:8px}:host .cps-timepicker .cps-timepicker-label-disabled{color:var(--cps-color-text-mild)}:host .cps-timepicker-body{display:flex;flex-direction:row}:host .cps-timepicker-body .cps-timepicker-am-pm-selector{margin-left:10px;margin-top:0}:host .cps-timepicker-body .cps-timepicker-delimiter{color:var(--cps-color-text-lightest);font-size:24px;margin:0 10px}:host .cps-timepicker .cps-timepicker-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-timepicker .cps-timepicker-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}\n"] }]
7100
+ ], template: "<div class=\"cps-timepicker\">\n @if (label) {\n <div\n class=\"cps-timepicker-label\"\n [ngClass]=\"{ 'cps-timepicker-label-disabled': disabled }\">\n <label>{{ label }}</label>\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-timepicker-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n }\n </div>\n }\n <div class=\"cps-timepicker-body\">\n <cps-autocomplete\n #hoursField\n [ariaLabel]=\"`Hours, ${ariaLabel || label}`\"\n (keypress)=\"numberOnly($event)\"\n width=\"3.75rem\"\n [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n [options]=\"hoursOptions\"\n [withOptionsAliases]=\"!use24HourTime\"\n [useOptionsAliasesWhenNoMatch]=\"true\"\n [hideDetails]=\"true\"\n [disabled]=\"disabled\"\n [showChevron]=\"false\"\n [showEmptyMessage]=\"false\"\n (focused)=\"onFieldFocus()\"\n (blurred)=\"onFieldBlur()\"\n [returnObject]=\"false\"\n [value]=\"value?.hours\"\n (valueChanged)=\"updateHours($event)\"\n [externalError]=\"hoursError\"\n placeholder=\"HH\"></cps-autocomplete>\n <span aria-hidden=\"true\" class=\"cps-timepicker-delimiter\">:</span>\n <cps-autocomplete\n #minutesField\n ariaLabel=\"Minutes\"\n (keypress)=\"numberOnly($event)\"\n width=\"3.75rem\"\n [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n [options]=\"minutesOptions\"\n [hideDetails]=\"true\"\n [disabled]=\"disabled\"\n [showChevron]=\"false\"\n [showEmptyMessage]=\"false\"\n (focused)=\"onFieldFocus()\"\n (blurred)=\"onFieldBlur()\"\n [returnObject]=\"false\"\n [value]=\"value?.minutes\"\n (valueChanged)=\"updateMinutes($event)\"\n [externalError]=\"minutesError\"\n placeholder=\"MM\"></cps-autocomplete>\n @if (withSeconds) {\n <span aria-hidden=\"true\" class=\"cps-timepicker-delimiter\">:</span>\n <cps-autocomplete\n #secondsField\n ariaLabel=\"Seconds\"\n (keypress)=\"numberOnly($event)\"\n width=\"3.75rem\"\n [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n [options]=\"secondsOptions\"\n [hideDetails]=\"true\"\n [disabled]=\"disabled\"\n [showChevron]=\"false\"\n [showEmptyMessage]=\"false\"\n (focused)=\"onFieldFocus()\"\n (blurred)=\"onFieldBlur()\"\n [returnObject]=\"false\"\n [value]=\"value?.seconds\"\n (valueChanged)=\"updateSeconds($event)\"\n [externalError]=\"secondsError\"\n placeholder=\"SS\"></cps-autocomplete>\n }\n @if (!use24HourTime) {\n <cps-button-toggle\n class=\"cps-timepicker-am-pm-selector\"\n ariaLabel=\"Day period\"\n [options]=\"dayPeriodOptions\"\n [disabled]=\"disabled\"\n [value]=\"value?.dayPeriod || 'AM'\"\n (valueChanged)=\"updateDayPeriod($event)\">\n </cps-button-toggle>\n }\n </div>\n @if (!error && !hideDetails) {\n <div class=\"cps-timepicker-hint\">\n {{ hint }}\n </div>\n }\n @if (error && !hideDetails) {\n <div class=\"cps-timepicker-error\">\n {{ error }}\n </div>\n }\n</div>\n", styles: [":host .cps-timepicker{display:flex;flex-direction:column}:host .cps-timepicker .cps-timepicker-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-timepicker .cps-timepicker-label-info-circle{margin-left:.5rem}:host .cps-timepicker .cps-timepicker-label-disabled{color:var(--cps-color-text-mild)}:host .cps-timepicker-body{display:flex;flex-direction:row}:host .cps-timepicker-body .cps-timepicker-am-pm-selector{margin-left:.625rem;margin-top:0}:host .cps-timepicker-body .cps-timepicker-delimiter{color:var(--cps-color-text-lightest);font-size:1.5rem;margin:0 .625rem}:host .cps-timepicker .cps-timepicker-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-timepicker .cps-timepicker-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}\n"] }]
6932
7101
  }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
6933
7102
  type: Self
6934
7103
  }, {
6935
7104
  type: Optional
6936
7105
  }] }], propDecorators: { label: [{
6937
7106
  type: Input
7107
+ }], ariaLabel: [{
7108
+ type: Input
6938
7109
  }], disabled: [{
6939
7110
  type: Input
6940
7111
  }], use24HourTime: [{
@@ -8237,7 +8408,7 @@ class CpsSchedulerComponent {
8237
8408
  return isNaN(res) ? 0 : res;
8238
8409
  }
8239
8410
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsSchedulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8240
- 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 }); }
8411
+ 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 ariaLabel=\"Time\"\n data-testid=\"daily-timepicker\"\n [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.daily.everyDays)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"onTimeChanged($event, state.daily.everyDays)\">\n </cps-timepicker>\n </div>\n </cps-radio>\n <cps-radio\n data-testid=\"daily-subtab-everyWeekDay\"\n [option]=\"{\n ariaLabel: 'Repeat every working day at a specific time',\n value: 'everyWeekDay',\n disabled: disabled\n }\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n data-testid=\"daily-weekday-config\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.daily.subTab !== 'everyWeekDay'\n \">\n Every working day at\n <cps-timepicker\n ariaLabel=\"Time\"\n [disabled]=\"disabled || state.daily.subTab !== 'everyWeekDay'\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.daily.everyWeekDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.daily.everyWeekDay)\n \">\n </cps-timepicker>\n </div>\n </cps-radio>\n </cps-radio-group>\n </div>\n }\n\n @case ('Weekly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"weekly-config\">\n <div class=\"cps-scheduler-days-checkbox-group\">\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-MON\"\n label=\"Monday\"\n [(ngModel)]=\"state.weekly.MON\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-TUE\"\n label=\"Tuesday\"\n [(ngModel)]=\"state.weekly.TUE\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-WED\"\n label=\"Wednesday\"\n [(ngModel)]=\"state.weekly.WED\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-THU\"\n label=\"Thursday\"\n [(ngModel)]=\"state.weekly.THU\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-FRI\"\n label=\"Friday\"\n [(ngModel)]=\"state.weekly.FRI\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-SAT\"\n label=\"Saturday\"\n [(ngModel)]=\"state.weekly.SAT\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-SUN\"\n label=\"Sunday\"\n [(ngModel)]=\"state.weekly.SUN\">\n </cps-checkbox>\n </div>\n <div class=\"cps-scheduler-tab-pane-row\">\n at\n <cps-timepicker\n ariaLabel=\"Time\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-timepicker\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.weekly)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"onTimeChanged($event, state.weekly)\">\n </cps-timepicker>\n </div>\n </div>\n }\n\n @case ('Monthly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"monthly-config\">\n <cps-radio-group\n ariaLabel=\"Monthly schedule frequency\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"state.monthly.subTab\"\n (valueChanged)=\"regenerateCron()\"\n [vertical]=\"true\">\n <cps-radio\n [option]=\"{\n ariaLabel:\n 'Repeat every N months on a selected day at a chosen time, nearest weekday optional',\n value: 'specificDay',\n disabled: disabled\n }\"\n data-testid=\"monthly-subtab-specificDay\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.monthly.subTab !== 'specificDay'\n \">\n On the\n <cps-select\n ariaLabel=\"Select day of month\"\n width=\"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 ariaLabel=\"Time\"\n [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.monthly.specificDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.monthly.specificDay)\n \">\n </cps-timepicker>\n <cps-checkbox\n data-testid=\"monthly-weekday-toggle\"\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n label=\"During the nearest weekday\"\n [(ngModel)]=\"state.monthly.runOnWeekday\"\n class=\"cps-scheduler-nearest-weekday-checkbox\">\n </cps-checkbox>\n </div>\n </cps-radio>\n\n <cps-radio\n [option]=\"{\n ariaLabel:\n 'Repeat every N months on a weekday pattern from a chosen month at a chosen time',\n value: 'specificWeekDay',\n disabled: disabled\n }\"\n data-testid=\"monthly-subtab-specificWeekDay\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.monthly.subTab !== 'specificWeekDay'\n \">\n On the\n <cps-select\n ariaLabel=\"Select weekday occurrence\"\n width=\"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 ariaLabel=\"Time\"\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n data-testid=\"monthly-weekday-timepicker\"\n [value]=\"formatTimeValue(state.monthly.specificWeekDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.monthly.specificWeekDay)\n \">\n </cps-timepicker>\n </div>\n </cps-radio>\n </cps-radio-group>\n </div>\n }\n\n @case ('Yearly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"yearly-config\">\n <cps-radio-group\n ariaLabel=\"Yearly schedule frequency\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"state.yearly.subTab\"\n (valueChanged)=\"regenerateCron()\"\n [vertical]=\"true\">\n <cps-radio\n [option]=\"{\n ariaLabel:\n 'Repeat in a selected month on a selected day at a chosen time, nearest weekday optional',\n value: 'specificMonthDay',\n disabled: disabled\n }\"\n data-testid=\"yearly-subtab-specificMonthDay\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.yearly.subTab !== 'specificMonthDay'\n \">\n Every\n <cps-select\n ariaLabel=\"Select month\"\n width=\"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 ariaLabel=\"Time\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthDay'\n \"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.yearly.specificMonthDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.yearly.specificMonthDay)\n \">\n </cps-timepicker>\n <cps-checkbox\n data-testid=\"yearly-weekday-toggle\"\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthDay'\n \"\n label=\"During the nearest weekday\"\n [(ngModel)]=\"state.yearly.runOnWeekday\"\n class=\"cps-scheduler-nearest-weekday-checkbox\">\n </cps-checkbox>\n </div>\n </cps-radio>\n\n <cps-radio\n [option]=\"{\n ariaLabel:\n 'Repeat in a selected month on a selected weekday at a chosen time',\n value: 'specificMonthWeek',\n disabled: disabled\n }\"\n data-testid=\"yearly-subtab-specificMonthWeek\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.yearly.subTab !== 'specificMonthWeek'\n \">\n On the\n <cps-select\n ariaLabel=\"Select weekday occurrence\"\n width=\"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 ariaLabel=\"Time\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthWeek'\n \"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.yearly.specificMonthWeek)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.yearly.specificMonthWeek)\n \">\n </cps-timepicker>\n </div>\n </cps-radio>\n </cps-radio-group>\n </div>\n }\n\n @case ('Advanced') {\n <div data-testid=\"advanced-config\">\n <form [formGroup]=\"form\">\n <cps-input\n 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", "ariaLabel", "disabled", "use24HourTime", "withSeconds", "hint", "hideDetails", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "mandatoryValue", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "validating", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8241
8412
  }
8242
8413
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsSchedulerComponent, decorators: [{
8243
8414
  type: Component,
@@ -8252,7 +8423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
8252
8423
  CpsInputComponent,
8253
8424
  CpsTimepickerComponent,
8254
8425
  CpsAutocompleteComponent
8255
- ], 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"] }]
8426
+ ], 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 ariaLabel=\"Time\"\n data-testid=\"daily-timepicker\"\n [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.daily.everyDays)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"onTimeChanged($event, state.daily.everyDays)\">\n </cps-timepicker>\n </div>\n </cps-radio>\n <cps-radio\n data-testid=\"daily-subtab-everyWeekDay\"\n [option]=\"{\n ariaLabel: 'Repeat every working day at a specific time',\n value: 'everyWeekDay',\n disabled: disabled\n }\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n data-testid=\"daily-weekday-config\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.daily.subTab !== 'everyWeekDay'\n \">\n Every working day at\n <cps-timepicker\n ariaLabel=\"Time\"\n [disabled]=\"disabled || state.daily.subTab !== 'everyWeekDay'\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.daily.everyWeekDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.daily.everyWeekDay)\n \">\n </cps-timepicker>\n </div>\n </cps-radio>\n </cps-radio-group>\n </div>\n }\n\n @case ('Weekly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"weekly-config\">\n <div class=\"cps-scheduler-days-checkbox-group\">\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-MON\"\n label=\"Monday\"\n [(ngModel)]=\"state.weekly.MON\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-TUE\"\n label=\"Tuesday\"\n [(ngModel)]=\"state.weekly.TUE\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-WED\"\n label=\"Wednesday\"\n [(ngModel)]=\"state.weekly.WED\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-THU\"\n label=\"Thursday\"\n [(ngModel)]=\"state.weekly.THU\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-FRI\"\n label=\"Friday\"\n [(ngModel)]=\"state.weekly.FRI\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-SAT\"\n label=\"Saturday\"\n [(ngModel)]=\"state.weekly.SAT\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-SUN\"\n label=\"Sunday\"\n [(ngModel)]=\"state.weekly.SUN\">\n </cps-checkbox>\n </div>\n <div class=\"cps-scheduler-tab-pane-row\">\n at\n <cps-timepicker\n ariaLabel=\"Time\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-timepicker\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.weekly)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"onTimeChanged($event, state.weekly)\">\n </cps-timepicker>\n </div>\n </div>\n }\n\n @case ('Monthly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"monthly-config\">\n <cps-radio-group\n ariaLabel=\"Monthly schedule frequency\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"state.monthly.subTab\"\n (valueChanged)=\"regenerateCron()\"\n [vertical]=\"true\">\n <cps-radio\n [option]=\"{\n ariaLabel:\n 'Repeat every N months on a selected day at a chosen time, nearest weekday optional',\n value: 'specificDay',\n disabled: disabled\n }\"\n data-testid=\"monthly-subtab-specificDay\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.monthly.subTab !== 'specificDay'\n \">\n On the\n <cps-select\n ariaLabel=\"Select day of month\"\n width=\"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 ariaLabel=\"Time\"\n [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.monthly.specificDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.monthly.specificDay)\n \">\n </cps-timepicker>\n <cps-checkbox\n data-testid=\"monthly-weekday-toggle\"\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n label=\"During the nearest weekday\"\n [(ngModel)]=\"state.monthly.runOnWeekday\"\n class=\"cps-scheduler-nearest-weekday-checkbox\">\n </cps-checkbox>\n </div>\n </cps-radio>\n\n <cps-radio\n [option]=\"{\n ariaLabel:\n 'Repeat every N months on a weekday pattern from a chosen month at a chosen time',\n value: 'specificWeekDay',\n disabled: disabled\n }\"\n data-testid=\"monthly-subtab-specificWeekDay\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.monthly.subTab !== 'specificWeekDay'\n \">\n On the\n <cps-select\n ariaLabel=\"Select weekday occurrence\"\n width=\"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 ariaLabel=\"Time\"\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n data-testid=\"monthly-weekday-timepicker\"\n [value]=\"formatTimeValue(state.monthly.specificWeekDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.monthly.specificWeekDay)\n \">\n </cps-timepicker>\n </div>\n </cps-radio>\n </cps-radio-group>\n </div>\n }\n\n @case ('Yearly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"yearly-config\">\n <cps-radio-group\n ariaLabel=\"Yearly schedule frequency\"\n [hideDetails]=\"true\"\n [(ngModel)]=\"state.yearly.subTab\"\n (valueChanged)=\"regenerateCron()\"\n [vertical]=\"true\">\n <cps-radio\n [option]=\"{\n ariaLabel:\n 'Repeat in a selected month on a selected day at a chosen time, nearest weekday optional',\n value: 'specificMonthDay',\n disabled: disabled\n }\"\n data-testid=\"yearly-subtab-specificMonthDay\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.yearly.subTab !== 'specificMonthDay'\n \">\n Every\n <cps-select\n ariaLabel=\"Select month\"\n width=\"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 ariaLabel=\"Time\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthDay'\n \"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.yearly.specificMonthDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.yearly.specificMonthDay)\n \">\n </cps-timepicker>\n <cps-checkbox\n data-testid=\"yearly-weekday-toggle\"\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthDay'\n \"\n label=\"During the nearest weekday\"\n [(ngModel)]=\"state.yearly.runOnWeekday\"\n class=\"cps-scheduler-nearest-weekday-checkbox\">\n </cps-checkbox>\n </div>\n </cps-radio>\n\n <cps-radio\n [option]=\"{\n ariaLabel:\n 'Repeat in a selected month on a selected weekday at a chosen time',\n value: 'specificMonthWeek',\n disabled: disabled\n }\"\n data-testid=\"yearly-subtab-specificMonthWeek\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.yearly.subTab !== 'specificMonthWeek'\n \">\n On the\n <cps-select\n ariaLabel=\"Select weekday occurrence\"\n width=\"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 ariaLabel=\"Time\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthWeek'\n \"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.yearly.specificMonthWeek)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.yearly.specificMonthWeek)\n \">\n </cps-timepicker>\n </div>\n </cps-radio>\n </cps-radio-group>\n </div>\n }\n\n @case ('Advanced') {\n <div data-testid=\"advanced-config\">\n <form [formGroup]=\"form\">\n <cps-input\n 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"] }]
8256
8427
  }], propDecorators: { label: [{
8257
8428
  type: Input
8258
8429
  }], cron: [{
@@ -8599,12 +8770,11 @@ class CpsTabComponent {
8599
8770
  this.badgeTooltip = '';
8600
8771
  this.active = false;
8601
8772
  }
8602
- ngOnChanges(changes) {
8603
- if (changes.label || changes.ariaLabel) {
8604
- if (!this.label?.trim() && !this.ariaLabel?.trim()) {
8605
- console.error('CpsTabComponent: unlabeled tab component must have an ariaLabel for accessibility.');
8606
- }
8607
- }
8773
+ ngOnInit() {
8774
+ logMissingAriaLabelError('CpsTabComponent', this.label, this.ariaLabel);
8775
+ }
8776
+ ngOnChanges() {
8777
+ logMissingAriaLabelError('CpsTabComponent', this.label, this.ariaLabel);
8608
8778
  }
8609
8779
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8610
8780
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: CpsTabComponent, isStandalone: true, selector: "cps-tab", inputs: { label: "label", ariaLabel: "ariaLabel", icon: "icon", disabled: "disabled", tooltipText: "tooltipText", tooltipContentClass: "tooltipContentClass", tooltipMaxWidth: "tooltipMaxWidth", tooltipPersistent: "tooltipPersistent", badgeValue: "badgeValue", badgeTooltip: "badgeTooltip" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -9983,7 +10153,7 @@ class TableColumnFilterComponent {
9983
10153
  this._updateSortIconColor('');
9984
10154
  }
9985
10155
  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 }); }
9986
- 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"] }] }); }
10156
+ 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"] }] }); }
9987
10157
  }
9988
10158
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TableColumnFilterComponent, decorators: [{
9989
10159
  type: Component,
@@ -9995,7 +10165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
9995
10165
  CpsIconComponent,
9996
10166
  CpsSelectComponent,
9997
10167
  TableColumnFilterConstraintComponent
9998
- ], 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"] }]
10168
+ ], 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"] }]
9999
10169
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$5.Table, decorators: [{
10000
10170
  type: Optional
10001
10171
  }] }, { type: i2$2.TreeTable, decorators: [{
@@ -11020,7 +11190,7 @@ class CpsTableComponent {
11020
11190
  // eslint-disable-next-line no-use-before-define
11021
11191
  deps: [CpsTableComponent]
11022
11192
  }
11023
- ], 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 }); }
11193
+ ], 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 }); }
11024
11194
  }
11025
11195
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsTableComponent, decorators: [{
11026
11196
  type: Component,
@@ -11048,7 +11218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
11048
11218
  // eslint-disable-next-line no-use-before-define
11049
11219
  deps: [CpsTableComponent]
11050
11220
  }
11051
- ], 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"] }]
11221
+ ], 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"] }]
11052
11222
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
11053
11223
  type: Inject,
11054
11224
  args: [DOCUMENT]
@@ -14488,7 +14658,7 @@ class CpsTreeTableComponent {
14488
14658
  // eslint-disable-next-line no-use-before-define
14489
14659
  deps: [CpsTreeTableComponent]
14490
14660
  }
14491
- ], 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 }); }
14661
+ ], 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 }); }
14492
14662
  }
14493
14663
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsTreeTableComponent, decorators: [{
14494
14664
  type: Component,
@@ -14520,7 +14690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
14520
14690
  // eslint-disable-next-line no-use-before-define
14521
14691
  deps: [CpsTreeTableComponent]
14522
14692
  }
14523
- ], 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"] }]
14693
+ ], 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"] }]
14524
14694
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
14525
14695
  type: Inject,
14526
14696
  args: [DOCUMENT]
@@ -14894,7 +15064,7 @@ const hideAnimation = animation([
14894
15064
  const MIN_DRAG_VISIBLE_REM = 3;
14895
15065
  class CpsDialogComponent {
14896
15066
  get _rootFontSizePx() {
14897
- return this._cpsRootFontSizeService?.fontSize() ?? 16;
15067
+ return this._cpsRootFontSizeService?.fontSize() || 16;
14898
15068
  }
14899
15069
  get ariaLabel() {
14900
15070
  if (this.config.ariaLabelledBy)