cps-ui-kit 0.52.0 → 0.54.0

package/fesm2020/cps-ui-kit.mjs

@@ -2,7 +2,7 @@ import * as i2 from '@angular/common';
 import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Component, Input, Directive, HostListener, EventEmitter, Self, Optional, Output, ViewChild, Pipe, PLATFORM_ID, ChangeDetectionStrategy, ViewEncapsulation, Inject, HostBinding, Host, ContentChild, TemplateRef, ContentChildren } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Subscription, fromEvent, debounceTime, distinctUntilChanged } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { isEqual, find } from 'lodash-es';
@@ -16,7 +16,7 @@ import { ZIndexUtils } from 'primeng/utils';
 import * as i3$1 from 'primeng/tree';
 import { TreeModule } from 'primeng/tree';
 import * as i1$2 from 'primeng/table';
-import { SortableColumn, SortIcon, TableService, Table, TableModule } from 'primeng/table';
+import { SortableColumn, SortIcon, TableService, Table, TableModule, TableHeaderCheckbox } from 'primeng/table';
 import * as i2$1 from 'primeng/calendar';
 import { CalendarModule } from 'primeng/calendar';
 import * as i1$3 from 'primeng/paginator';
@@ -3544,12 +3544,12 @@ class CpsTableComponent {
         this.rowHover = true;
         this.dataKey = ''; // field, that uniquely identifies a record in data (needed for expandable rows)
         this.showRowMenu = false;
-        this.loading = false;
         this.reorderableRows = false;
-        this.showColumnsToggle = false;
+        this.showColumnsToggle = false; // if external body template is provided, use columnsSelected event emitter
         this.sortable = false; // makes all sortable if columns are provided
+        this.loading = false;
         this.scrollable = true;
-        this.scrollHeight = '';
+        this.scrollHeight = ''; // 'flex' or value+'px'
         this.virtualScroll = false; // works only if scrollable is true
         this.paginator = false;
         this.alwaysShowPaginator = true;
@@ -3557,6 +3557,7 @@ class CpsTableComponent {
         this.first = 0;
         this.rows = 0;
         this.totalRecords = 0;
+        this.emptyBodyHeight = '';
         this.lazy = false;
         this.lazyLoadOnInit = true;
         this.showGlobalFilter = false;
@@ -3571,16 +3572,17 @@ class CpsTableComponent {
         this.selectionChanged = new EventEmitter();
         this.actionBtnClicked = new EventEmitter();
         this.editRowBtnClicked = new EventEmitter();
+        this.rowsRemoved = new EventEmitter();
         this.pageChanged = new EventEmitter();
         this.sorted = new EventEmitter();
         this.rowsReordered = new EventEmitter();
+        this.columnsSelected = new EventEmitter();
         /**
          * A function to implement custom sorting. customSort must be true.
          * @param {any} any - sort meta.
          * @group Emits
          */
         this.customSortFunction = new EventEmitter();
-        this.styleClass = '';
         this.selectedRows = [];
         this.virtualScrollItemSize = 0;
         this.rowOptions = [];
@@ -3610,6 +3612,7 @@ class CpsTableComponent {
         ];
     }
     ngOnInit() {
+        this.emptyBodyHeight = convertSize(this.emptyBodyHeight);
         if (!this.scrollable)
             this.virtualScroll = false;
         if (this.paginator) {
@@ -3632,31 +3635,37 @@ class CpsTableComponent {
             this.data?.length > 0) {
             this.globalFilterFields = Object.keys(this.data[0]);
         }
+        this.selectedColumns = this.columns;
+    }
+    get styleClass() {
+        const classesList = [];
         switch (this.size) {
             case 'small':
-                this.styleClass = 'p-datatable-sm';
+                classesList.push('p-datatable-sm');
                 break;
             case 'large':
-                this.styleClass = 'p-datatable-lg';
+                classesList.push('p-datatable-lg');
                 break;
         }
         switch (this.toolbarSize) {
             case 'small':
-                this.styleClass += ' cps-tbar-small';
+                classesList.push('cps-tbar-small');
                 break;
             case 'normal':
-                this.styleClass += ' cps-tbar-normal';
+                classesList.push('cps-tbar-normal');
                 break;
         }
         if (this.striped) {
-            this.styleClass += ' p-datatable-striped';
+            classesList.push('p-datatable-striped');
         }
         if (this.bordered) {
-            this.styleClass += ' p-datatable-gridlines';
+            classesList.push('p-datatable-gridlines');
         }
-        this.selectedColumns = this.columns;
+        return classesList.join(' ');
     }
-    ngAfterViewInit() {
+    ngAfterViewChecked() {
+        if (!this.virtualScroll || this.virtualScrollItemSize)
+            return;
         this.virtualScrollItemSize =
             this.primengTable?.el?.nativeElement
                 ?.querySelector('.p-datatable-tbody')
@@ -3678,6 +3687,7 @@ class CpsTableComponent {
         const indexes = this.primengTable.selection.map((s) => s._defaultSortOrder);
         indexes.sort((a, b) => b - a);
         this.data = this.data.filter((v) => !indexes.includes(v._defaultSortOrder));
+        this.rowsRemoved.emit(this.selectedRows.map(({ _defaultSortOrder, ...rest }) => rest));
         this.selectedRows = [];
     }
     onClickActionBtn() {
@@ -3693,6 +3703,7 @@ class CpsTableComponent {
     toggleAllColumns() {
         this.selectedColumns =
             this.selectedColumns.length < this.columns.length ? this.columns : [];
+        this.columnsSelected.emit(this.selectedColumns);
     }
     isColumnSelected(col) {
         return !!find(this.selectedColumns, (item) => isEqual(item, col));
@@ -3711,6 +3722,7 @@ class CpsTableComponent {
             });
         }
         this.selectedColumns = res;
+        this.columnsSelected.emit(this.selectedColumns);
     }
     onEditRowClicked(item) {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -3720,6 +3732,8 @@ class CpsTableComponent {
     onRemoveRowClicked(item) {
         this.selectedRows = this.selectedRows.filter((v) => v !== item);
         this.data = this.data.filter((v) => v !== item);
+        const { _defaultSortOrder, ...rest } = item;
+        this.rowsRemoved.emit([rest]);
     }
     onSort(event) {
         this.sorted.emit(event);
@@ -3773,7 +3787,7 @@ class CpsTableComponent {
     }
 }
 CpsTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CpsTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTableComponent, isStandalone: true, selector: "cps-table", inputs: { data: "data", columns: "columns", colHeaderName: "colHeaderName", colFieldName: "colFieldName", striped: "striped", bordered: "bordered", size: "size", selectable: "selectable", emptyMessage: "emptyMessage", hasToolbar: "hasToolbar", toolbarSize: "toolbarSize", toolbarTitle: "toolbarTitle", sortMode: "sortMode", customSort: "customSort", rowHover: "rowHover", dataKey: "dataKey", showRowMenu: "showRowMenu", loading: "loading", reorderableRows: "reorderableRows", showColumnsToggle: "showColumnsToggle", sortable: "sortable", scrollable: "scrollable", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", paginator: "paginator", alwaysShowPaginator: "alwaysShowPaginator", rowsPerPageOptions: "rowsPerPageOptions", first: "first", rows: "rows", totalRecords: "totalRecords", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", showGlobalFilter: "showGlobalFilter", globalFilterPlaceholder: "globalFilterPlaceholder", globalFilterFields: "globalFilterFields", showRemoveBtnOnSelect: "showRemoveBtnOnSelect", showActionBtn: "showActionBtn", actionBtnTitle: "actionBtnTitle", showExportBtn: "showExportBtn", exportFilename: "exportFilename", csvSeparator: "csvSeparator" }, outputs: { selectionChanged: "selectionChanged", actionBtnClicked: "actionBtnClicked", editRowBtnClicked: "editRowBtnClicked", pageChanged: "pageChanged", sorted: "sorted", rowsReordered: "rowsReordered", customSortFunction: "customSortFunction" }, providers: [
+CpsTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTableComponent, isStandalone: true, selector: "cps-table", inputs: { data: "data", columns: "columns", colHeaderName: "colHeaderName", colFieldName: "colFieldName", striped: "striped", bordered: "bordered", size: "size", selectable: "selectable", emptyMessage: "emptyMessage", hasToolbar: "hasToolbar", toolbarSize: "toolbarSize", toolbarTitle: "toolbarTitle", sortMode: "sortMode", customSort: "customSort", rowHover: "rowHover", dataKey: "dataKey", showRowMenu: "showRowMenu", reorderableRows: "reorderableRows", showColumnsToggle: "showColumnsToggle", sortable: "sortable", loading: "loading", scrollable: "scrollable", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", paginator: "paginator", alwaysShowPaginator: "alwaysShowPaginator", rowsPerPageOptions: "rowsPerPageOptions", first: "first", rows: "rows", totalRecords: "totalRecords", emptyBodyHeight: "emptyBodyHeight", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", showGlobalFilter: "showGlobalFilter", globalFilterPlaceholder: "globalFilterPlaceholder", globalFilterFields: "globalFilterFields", showRemoveBtnOnSelect: "showRemoveBtnOnSelect", showActionBtn: "showActionBtn", actionBtnTitle: "actionBtnTitle", showExportBtn: "showExportBtn", exportFilename: "exportFilename", csvSeparator: "csvSeparator" }, outputs: { selectionChanged: "selectionChanged", actionBtnClicked: "actionBtnClicked", editRowBtnClicked: "editRowBtnClicked", rowsRemoved: "rowsRemoved", pageChanged: "pageChanged", sorted: "sorted", rowsReordered: "rowsReordered", columnsSelected: "columnsSelected", customSortFunction: "customSortFunction" }, providers: [
         TableService,
         {
             provide: Table,
@@ -3781,7 +3795,7 @@ CpsTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             // eslint-disable-next-line no-use-before-define
             deps: [CpsTableComponent]
         }
-    ], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "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 }], ngImport: i0, template: "<p-table\n  #primengTable\n  withUnsort\n  [ngClass]=\"{ 'cps-table-loading': loading }\"\n  [styleClass]=\"styleClass\"\n  [value]=\"data\"\n  [dataKey]=\"dataKey\"\n  [columns]=\"selectedColumns\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [lazy]=\"lazy\"\n  [loading]=\"loading\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [showInitialSortBadge]=\"false\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  [(selection)]=\"selectedRows\"\n  [metaKeySelection]=\"false\"\n  [rowHover]=\"rowHover\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [exportFilename]=\"exportFilename\"\n  [csvSeparator]=\"csvSeparator\"\n  (onPage)=\"onPageChange($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onSort)=\"onSort($event)\"\n  (onRowReorder)=\"onRowReorder($event)\">\n  <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n    <ng-container *ngIf=\"toolbarTemplate\">\n      <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!toolbarTemplate\">\n      <div class=\"cps-table-tbar-left\">\n        <div>{{ toolbarTitle }}</div>\n        <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n          <cps-input\n            prefixIcon=\"search\"\n            [placeholder]=\"globalFilterPlaceholder\"\n            (valueChanged)=\"onFilterGlobal($event)\"\n            [clearable]=\"true\"\n            [hideDetails]=\"true\">\n          </cps-input>\n        </div>\n      </div>\n      <div class=\"cps-table-tbar-right\">\n        <div\n          *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-table-tbar-remove-btn\">\n          <cps-button\n            label=\"Remove\"\n            color=\"prepared\"\n            type=\"borderless\"\n            icon=\"remove\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"removeSelected()\">\n          </cps-button>\n        </div>\n        <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n          <cps-button\n            [label]=\"actionBtnTitle\"\n            color=\"prepared\"\n            type=\"outlined\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickActionBtn()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showColumnsToggle && columns.length > 0\"\n          class=\"cps-table-tbar-coltoggle-btn\">\n          <cps-icon\n            icon=\"columns\"\n            size=\"normal\"\n            color=\"prepared-lighten1\"\n            (click)=\"colToggleMenu.toggle($event)\"></cps-icon>\n          <cps-menu #colToggleMenu [withArrow]=\"false\">\n            <div class=\"cps-table-coltoggle-menu\">\n              <div\n                class=\"cps-table-coltoggle-menu-item select-all-option\"\n                [class.allselected]=\"selectedColumns.length === columns.length\"\n                (click)=\"toggleAllColumns()\">\n                <span class=\"cps-table-coltoggle-menu-item-left\">\n                  <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n                  <span class=\"cps-table-coltoggle-menu-item-label\"\n                    >Show all columns</span\n                  >\n                </span>\n              </div>\n              <div\n                *ngFor=\"let col of columns\"\n                class=\"cps-table-coltoggle-menu-item\"\n                (click)=\"onSelectColumn(col)\"\n                [class.selected]=\"isColumnSelected(col)\">\n                <span class=\"cps-table-coltoggle-menu-item-left\">\n                  <span class=\"cps-table-coltoggle-menu-item-check\"></span>\n                  <span class=\"cps-table-coltoggle-menu-item-label\">{{\n                    col[colHeaderName]\n                  }}</span>\n                </span>\n              </div>\n            </div>\n          </cps-menu>\n        </div>\n        <div *ngIf=\"showExportBtn\" class=\"cps-table-tbar-export-btn\">\n          <cps-icon\n            icon=\"export\"\n            size=\"normal\"\n            color=\"prepared\"\n            (click)=\"exportMenu.toggle($event)\"></cps-icon>\n          <cps-menu\n            #exportMenu\n            [items]=\"exportMenuItems\"\n            [compressed]=\"true\"\n            [withArrow]=\"false\">\n          </cps-menu>\n        </div>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" let-columns>\n    <tr>\n      <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n      <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n      <th style=\"width: 4rem\" *ngIf=\"selectable\">\n        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n      </th>\n      <ng-container *ngIf=\"headerTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            headerTemplate;\n            context: {\n              $implicit: columns,\n            }\n          \"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n        <ng-container *ngIf=\"sortable\">\n          <th *ngFor=\"let col of columns\" [cpsColSortable]=\"col[colFieldName]\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n        <ng-container *ngIf=\"!sortable\">\n          <th *ngFor=\"let col of columns\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n      </ng-container>\n      <th\n        style=\"width: 2rem\"\n        class=\"cps-table-row-menu-cell\"\n        *ngIf=\"showRowMenu\"></th>\n    </tr>\n  </ng-template>\n\n  <ng-template\n    pTemplate=\"body\"\n    let-rowData\n    let-columns=\"columns\"\n    let-item\n    let-rowIndex=\"rowIndex\"\n    let-expanded=\"expanded\">\n    <tr\n      [pReorderableRow]=\"rowIndex\"\n      [ngClass]=\"{\n        'cps-table-row-selected': selectable && primengTable.isSelected(item)\n      }\">\n      <td *ngIf=\"rowExpansionTemplate\" class=\"cps-table-row-chevron-cell\">\n        <div\n          class=\"cps-table-row-chevron\"\n          [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n          <cps-icon\n            icon=\"chevron-down\"\n            size=\"small\"\n            color=\"text-dark\"\n            [pRowToggler]=\"item\">\n          </cps-icon>\n        </div>\n      </td>\n      <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n        <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n      </td>\n      <td *ngIf=\"selectable\">\n        <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n      </td>\n      <ng-container *ngIf=\"bodyTemplate\">\n        <ng-container\n          pTemplate=\"body\"\n          *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n              $implicit: item,\n              rowIndex: rowIndex,\n              columns: columns,\n              rowData: rowData\n            }\n          \">\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!bodyTemplate\">\n        <ng-container *ngIf=\"columns.length > 0\">\n          <td *ngFor=\"let col of columns\">\n            {{ rowData[col[colFieldName]] }}\n          </td>\n        </ng-container>\n      </ng-container>\n      <td *ngIf=\"showRowMenu\" class=\"cps-table-row-menu-cell\">\n        <table-row-menu\n          (editRowBtnClicked)=\"onEditRowClicked(item)\"\n          (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"></table-row-menu>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n    <tr class=\"cps-table-row-expanded-content\">\n      <td colspan=\"100\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            rowExpansionTemplate;\n            context: {\n              $implicit: item\n            }\n          \"></ng-container>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td colspan=\"100\" class=\"cps-table-empty-message-td\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border: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-dark);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:18px}: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-remove-btn{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{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{margin-left:8px;margin-right:4px;cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon .cps-icon{width:22px;height:22px}: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-gridlines .p-datatable-thead>tr>th:last-child{border-width:1px}: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-gridlines .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:white;color:var(--cps-color-text-mild)}: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 0;font-weight:400;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:hover sortalticon{opacity:1}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon{color:var(--cps-color-text-dark)}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon{color:var(--cps-color-text-mild);margin-left:.5rem}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon{color:var(--cps-color-calm)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-sortable-column-icon{width:13px;height:13px}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .p-datatable .p-sortable-column .p-column-title,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{vertical-align:unset}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{border-radius:50%;height:1.125rem;min-width:1.125rem;line-height:1.125rem;color:var(--cps-color-calm);background:#f1eaec;margin-left:.5rem}: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(even){background:#ffffff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:#f8f4f5}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#ffffff;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:#f1ebed!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 .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 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 .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{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 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:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderablerow-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderablerow-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-paginator-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable .p-paginator-bottom{border-width:0 0 1px 0;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}: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 .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600}: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;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter cps-input .cps-input-container .cps-input-wrap input{line-height:1;border:none;border-bottom:1px solid var(--cps-color-text-lightest);border-radius:0}:host ::ng-deep .p-sortable-column.cps-table-col-filter-menu-open{cursor:default}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep sortalticon{opacity:0}:host ::ng-deep p-sorticon{display:inline-flex;align-items:baseline}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.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:#f8f4f5}.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:#efe4e7}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:#f5eeef}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:#e6d4d9}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i1$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$2.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$2.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: TableUnsortDirective, selector: "[withUnsort]" }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "directive", type: CpsTableColumnSortableDirective, selector: "[cpsColSortable]", inputs: ["cpsColSortable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }, { propertyName: "rowExpansionTemplate", first: true, predicate: ["rowexpansion"], descendants: true }], viewQueries: [{ propertyName: "primengTable", first: true, predicate: ["primengTable"], descendants: true, static: true }], ngImport: i0, template: "<p-table\n  #primengTable\n  withUnsort\n  [ngClass]=\"{ 'cps-table-loading': loading }\"\n  [styleClass]=\"styleClass\"\n  [value]=\"data\"\n  [dataKey]=\"dataKey\"\n  [columns]=\"selectedColumns\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [lazy]=\"lazy\"\n  [loading]=\"loading\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [showInitialSortBadge]=\"false\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  [(selection)]=\"selectedRows\"\n  [metaKeySelection]=\"false\"\n  [rowHover]=\"rowHover\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [exportFilename]=\"exportFilename\"\n  [csvSeparator]=\"csvSeparator\"\n  (onPage)=\"onPageChange($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onSort)=\"onSort($event)\"\n  (onRowReorder)=\"onRowReorder($event)\">\n  <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n    <ng-container *ngIf=\"toolbarTemplate\">\n      <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!toolbarTemplate\">\n      <div class=\"cps-table-tbar-left\">\n        <div>{{ toolbarTitle }}</div>\n        <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n          <cps-input\n            prefixIcon=\"search\"\n            [placeholder]=\"globalFilterPlaceholder\"\n            (valueChanged)=\"onFilterGlobal($event)\"\n            [clearable]=\"true\"\n            [hideDetails]=\"true\">\n          </cps-input>\n        </div>\n      </div>\n      <div class=\"cps-table-tbar-right\">\n        <div\n          *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-table-tbar-remove-btn\">\n          <cps-button\n            label=\"Remove\"\n            color=\"prepared\"\n            type=\"borderless\"\n            icon=\"remove\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"removeSelected()\">\n          </cps-button>\n        </div>\n        <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n          <cps-button\n            [label]=\"actionBtnTitle\"\n            color=\"prepared\"\n            type=\"outlined\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickActionBtn()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showColumnsToggle && columns.length > 0\"\n          class=\"cps-table-tbar-coltoggle-btn\">\n          <cps-icon\n            icon=\"columns\"\n            size=\"normal\"\n            color=\"prepared-lighten1\"\n            (click)=\"colToggleMenu.toggle($event)\"></cps-icon>\n          <cps-menu #colToggleMenu [withArrow]=\"false\">\n            <div class=\"cps-table-coltoggle-menu\">\n              <div\n                class=\"cps-table-coltoggle-menu-item select-all-option\"\n                [class.allselected]=\"selectedColumns.length === columns.length\"\n                (click)=\"toggleAllColumns()\">\n                <span class=\"cps-table-coltoggle-menu-item-left\">\n                  <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n                  <span class=\"cps-table-coltoggle-menu-item-label\"\n                    >Show all columns</span\n                  >\n                </span>\n              </div>\n              <div\n                *ngFor=\"let col of columns\"\n                class=\"cps-table-coltoggle-menu-item\"\n                (click)=\"onSelectColumn(col)\"\n                [class.selected]=\"isColumnSelected(col)\">\n                <span class=\"cps-table-coltoggle-menu-item-left\">\n                  <span class=\"cps-table-coltoggle-menu-item-check\"></span>\n                  <span class=\"cps-table-coltoggle-menu-item-label\">{{\n                    col[colHeaderName]\n                  }}</span>\n                </span>\n              </div>\n            </div>\n          </cps-menu>\n        </div>\n        <div *ngIf=\"showExportBtn\" class=\"cps-table-tbar-export-btn\">\n          <cps-icon\n            icon=\"export\"\n            size=\"normal\"\n            color=\"prepared\"\n            (click)=\"exportMenu.toggle($event)\"></cps-icon>\n          <cps-menu\n            #exportMenu\n            [items]=\"exportMenuItems\"\n            [compressed]=\"true\"\n            [withArrow]=\"false\">\n          </cps-menu>\n        </div>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n    <ng-container\n      *ngTemplateOutlet=\"\n      nestedHeaderTemplate;\n        context: {\n          $implicit: columns,\n        }\n      \"></ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n    <tr>\n      <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n      <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n      <th style=\"width: 4rem\" *ngIf=\"selectable\">\n        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n      </th>\n      <ng-container *ngIf=\"headerTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            headerTemplate;\n            context: {\n              $implicit: columns,\n            }\n          \"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n        <ng-container *ngIf=\"sortable\">\n          <th *ngFor=\"let col of columns\" [cpsColSortable]=\"col[colFieldName]\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n        <ng-container *ngIf=\"!sortable\">\n          <th *ngFor=\"let col of columns\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n      </ng-container>\n      <th\n        style=\"width: 2rem\"\n        class=\"cps-table-row-menu-cell\"\n        *ngIf=\"showRowMenu\"></th>\n    </tr>\n  </ng-template>\n\n  <ng-template\n    pTemplate=\"body\"\n    let-rowData\n    let-columns=\"columns\"\n    let-item\n    let-rowIndex=\"rowIndex\"\n    let-expanded=\"expanded\">\n    <tr\n      [pReorderableRow]=\"rowIndex\"\n      [ngClass]=\"{\n        'cps-table-row-selected': selectable && primengTable.isSelected(item)\n      }\">\n      <td *ngIf=\"rowExpansionTemplate\" class=\"cps-table-row-chevron-cell\">\n        <div\n          class=\"cps-table-row-chevron\"\n          [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n          <cps-icon\n            icon=\"chevron-down\"\n            size=\"small\"\n            color=\"text-dark\"\n            [pRowToggler]=\"item\">\n          </cps-icon>\n        </div>\n      </td>\n      <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n        <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n      </td>\n      <td *ngIf=\"selectable\">\n        <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n      </td>\n      <ng-container *ngIf=\"bodyTemplate\">\n        <ng-container\n          pTemplate=\"body\"\n          *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n              $implicit: item,\n              rowIndex: rowIndex,\n              columns: columns,\n              rowData: rowData\n            }\n          \">\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!bodyTemplate\">\n        <ng-container *ngIf=\"columns.length > 0\">\n          <td *ngFor=\"let col of columns\">\n            {{ rowData[col[colFieldName]] }}\n          </td>\n        </ng-container>\n      </ng-container>\n      <td *ngIf=\"showRowMenu\" class=\"cps-table-row-menu-cell\">\n        <table-row-menu\n          (editRowBtnClicked)=\"onEditRowClicked(item)\"\n          (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"></table-row-menu>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n    <tr class=\"cps-table-row-expanded-content\">\n      <td colspan=\"100\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            rowExpansionTemplate;\n            context: {\n              $implicit: item\n            }\n          \"></ng-container>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-table-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border: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-dark);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-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-remove-btn{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{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{margin-left:8px;margin-right:4px;cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon .cps-icon{width:22px;height:22px}: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-gridlines .p-datatable-thead>tr>th:last-child{border-width:1px}: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-gridlines .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:white;color:var(--cps-color-text-mild)}: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 0;font-weight:400;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:hover sortalticon{opacity:1}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon{color:var(--cps-color-text-dark)}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon{color:var(--cps-color-text-mild);margin-left:.5rem}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon{color:var(--cps-color-calm)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-sortable-column-icon{width:13px;height:13px}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .p-datatable .p-sortable-column .p-column-title,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{vertical-align:unset}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{border-radius:50%;height:1.125rem;min-width:1.125rem;line-height:1.125rem;color:var(--cps-color-calm);background:#f1eaec;margin-left:.5rem}: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(even){background:#ffffff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:#f8f4f5}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#ffffff;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:#f1ebed!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 .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 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 .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{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 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:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderablerow-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderablerow-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-paginator-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable .p-paginator-bottom{border-width:0 0 1px 0;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}: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 .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:white}: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;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter cps-input .cps-input-container .cps-input-wrap input{line-height:1;border:none;border-bottom:1px solid var(--cps-color-text-lightest);border-radius:0}:host ::ng-deep .p-sortable-column.cps-table-col-filter-menu-open{cursor:default}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep sortalticon{opacity:0}:host ::ng-deep p-sorticon{display:inline-flex;align-items:baseline}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.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:#f8f4f5}.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:#efe4e7}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:#f5eeef}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:#e6d4d9}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i1$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$2.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$2.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: TableUnsortDirective, selector: "[withUnsort]" }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "directive", type: CpsTableColumnSortableDirective, selector: "[cpsColSortable]", inputs: ["cpsColSortable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cps-table', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
@@ -3805,7 +3819,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             // eslint-disable-next-line no-use-before-define
                             deps: [CpsTableComponent]
                         }
-                    ], template: "<p-table\n  #primengTable\n  withUnsort\n  [ngClass]=\"{ 'cps-table-loading': loading }\"\n  [styleClass]=\"styleClass\"\n  [value]=\"data\"\n  [dataKey]=\"dataKey\"\n  [columns]=\"selectedColumns\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [lazy]=\"lazy\"\n  [loading]=\"loading\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [showInitialSortBadge]=\"false\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  [(selection)]=\"selectedRows\"\n  [metaKeySelection]=\"false\"\n  [rowHover]=\"rowHover\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [exportFilename]=\"exportFilename\"\n  [csvSeparator]=\"csvSeparator\"\n  (onPage)=\"onPageChange($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onSort)=\"onSort($event)\"\n  (onRowReorder)=\"onRowReorder($event)\">\n  <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n    <ng-container *ngIf=\"toolbarTemplate\">\n      <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!toolbarTemplate\">\n      <div class=\"cps-table-tbar-left\">\n        <div>{{ toolbarTitle }}</div>\n        <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n          <cps-input\n            prefixIcon=\"search\"\n            [placeholder]=\"globalFilterPlaceholder\"\n            (valueChanged)=\"onFilterGlobal($event)\"\n            [clearable]=\"true\"\n            [hideDetails]=\"true\">\n          </cps-input>\n        </div>\n      </div>\n      <div class=\"cps-table-tbar-right\">\n        <div\n          *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-table-tbar-remove-btn\">\n          <cps-button\n            label=\"Remove\"\n            color=\"prepared\"\n            type=\"borderless\"\n            icon=\"remove\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"removeSelected()\">\n          </cps-button>\n        </div>\n        <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n          <cps-button\n            [label]=\"actionBtnTitle\"\n            color=\"prepared\"\n            type=\"outlined\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickActionBtn()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showColumnsToggle && columns.length > 0\"\n          class=\"cps-table-tbar-coltoggle-btn\">\n          <cps-icon\n            icon=\"columns\"\n            size=\"normal\"\n            color=\"prepared-lighten1\"\n            (click)=\"colToggleMenu.toggle($event)\"></cps-icon>\n          <cps-menu #colToggleMenu [withArrow]=\"false\">\n            <div class=\"cps-table-coltoggle-menu\">\n              <div\n                class=\"cps-table-coltoggle-menu-item select-all-option\"\n                [class.allselected]=\"selectedColumns.length === columns.length\"\n                (click)=\"toggleAllColumns()\">\n                <span class=\"cps-table-coltoggle-menu-item-left\">\n                  <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n                  <span class=\"cps-table-coltoggle-menu-item-label\"\n                    >Show all columns</span\n                  >\n                </span>\n              </div>\n              <div\n                *ngFor=\"let col of columns\"\n                class=\"cps-table-coltoggle-menu-item\"\n                (click)=\"onSelectColumn(col)\"\n                [class.selected]=\"isColumnSelected(col)\">\n                <span class=\"cps-table-coltoggle-menu-item-left\">\n                  <span class=\"cps-table-coltoggle-menu-item-check\"></span>\n                  <span class=\"cps-table-coltoggle-menu-item-label\">{{\n                    col[colHeaderName]\n                  }}</span>\n                </span>\n              </div>\n            </div>\n          </cps-menu>\n        </div>\n        <div *ngIf=\"showExportBtn\" class=\"cps-table-tbar-export-btn\">\n          <cps-icon\n            icon=\"export\"\n            size=\"normal\"\n            color=\"prepared\"\n            (click)=\"exportMenu.toggle($event)\"></cps-icon>\n          <cps-menu\n            #exportMenu\n            [items]=\"exportMenuItems\"\n            [compressed]=\"true\"\n            [withArrow]=\"false\">\n          </cps-menu>\n        </div>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" let-columns>\n    <tr>\n      <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n      <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n      <th style=\"width: 4rem\" *ngIf=\"selectable\">\n        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n      </th>\n      <ng-container *ngIf=\"headerTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            headerTemplate;\n            context: {\n              $implicit: columns,\n            }\n          \"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n        <ng-container *ngIf=\"sortable\">\n          <th *ngFor=\"let col of columns\" [cpsColSortable]=\"col[colFieldName]\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n        <ng-container *ngIf=\"!sortable\">\n          <th *ngFor=\"let col of columns\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n      </ng-container>\n      <th\n        style=\"width: 2rem\"\n        class=\"cps-table-row-menu-cell\"\n        *ngIf=\"showRowMenu\"></th>\n    </tr>\n  </ng-template>\n\n  <ng-template\n    pTemplate=\"body\"\n    let-rowData\n    let-columns=\"columns\"\n    let-item\n    let-rowIndex=\"rowIndex\"\n    let-expanded=\"expanded\">\n    <tr\n      [pReorderableRow]=\"rowIndex\"\n      [ngClass]=\"{\n        'cps-table-row-selected': selectable && primengTable.isSelected(item)\n      }\">\n      <td *ngIf=\"rowExpansionTemplate\" class=\"cps-table-row-chevron-cell\">\n        <div\n          class=\"cps-table-row-chevron\"\n          [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n          <cps-icon\n            icon=\"chevron-down\"\n            size=\"small\"\n            color=\"text-dark\"\n            [pRowToggler]=\"item\">\n          </cps-icon>\n        </div>\n      </td>\n      <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n        <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n      </td>\n      <td *ngIf=\"selectable\">\n        <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n      </td>\n      <ng-container *ngIf=\"bodyTemplate\">\n        <ng-container\n          pTemplate=\"body\"\n          *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n              $implicit: item,\n              rowIndex: rowIndex,\n              columns: columns,\n              rowData: rowData\n            }\n          \">\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!bodyTemplate\">\n        <ng-container *ngIf=\"columns.length > 0\">\n          <td *ngFor=\"let col of columns\">\n            {{ rowData[col[colFieldName]] }}\n          </td>\n        </ng-container>\n      </ng-container>\n      <td *ngIf=\"showRowMenu\" class=\"cps-table-row-menu-cell\">\n        <table-row-menu\n          (editRowBtnClicked)=\"onEditRowClicked(item)\"\n          (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"></table-row-menu>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n    <tr class=\"cps-table-row-expanded-content\">\n      <td colspan=\"100\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            rowExpansionTemplate;\n            context: {\n              $implicit: item\n            }\n          \"></ng-container>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td colspan=\"100\" class=\"cps-table-empty-message-td\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border: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-dark);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:18px}: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-remove-btn{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{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{margin-left:8px;margin-right:4px;cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon .cps-icon{width:22px;height:22px}: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-gridlines .p-datatable-thead>tr>th:last-child{border-width:1px}: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-gridlines .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:white;color:var(--cps-color-text-mild)}: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 0;font-weight:400;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:hover sortalticon{opacity:1}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon{color:var(--cps-color-text-dark)}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon{color:var(--cps-color-text-mild);margin-left:.5rem}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon{color:var(--cps-color-calm)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-sortable-column-icon{width:13px;height:13px}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .p-datatable .p-sortable-column .p-column-title,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{vertical-align:unset}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{border-radius:50%;height:1.125rem;min-width:1.125rem;line-height:1.125rem;color:var(--cps-color-calm);background:#f1eaec;margin-left:.5rem}: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(even){background:#ffffff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:#f8f4f5}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#ffffff;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:#f1ebed!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 .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 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 .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{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 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:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderablerow-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderablerow-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-paginator-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable .p-paginator-bottom{border-width:0 0 1px 0;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}: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 .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600}: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;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter cps-input .cps-input-container .cps-input-wrap input{line-height:1;border:none;border-bottom:1px solid var(--cps-color-text-lightest);border-radius:0}:host ::ng-deep .p-sortable-column.cps-table-col-filter-menu-open{cursor:default}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep sortalticon{opacity:0}:host ::ng-deep p-sorticon{display:inline-flex;align-items:baseline}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.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:#f8f4f5}.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:#efe4e7}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:#f5eeef}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:#e6d4d9}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
+                    ], template: "<p-table\n  #primengTable\n  withUnsort\n  [ngClass]=\"{ 'cps-table-loading': loading }\"\n  [styleClass]=\"styleClass\"\n  [value]=\"data\"\n  [dataKey]=\"dataKey\"\n  [columns]=\"selectedColumns\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [lazy]=\"lazy\"\n  [loading]=\"loading\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [showInitialSortBadge]=\"false\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  [(selection)]=\"selectedRows\"\n  [metaKeySelection]=\"false\"\n  [rowHover]=\"rowHover\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [exportFilename]=\"exportFilename\"\n  [csvSeparator]=\"csvSeparator\"\n  (onPage)=\"onPageChange($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onSort)=\"onSort($event)\"\n  (onRowReorder)=\"onRowReorder($event)\">\n  <ng-template pTemplate=\"caption\" *ngIf=\"hasToolbar\">\n    <ng-container *ngIf=\"toolbarTemplate\">\n      <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"!toolbarTemplate\">\n      <div class=\"cps-table-tbar-left\">\n        <div>{{ toolbarTitle }}</div>\n        <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n          <cps-input\n            prefixIcon=\"search\"\n            [placeholder]=\"globalFilterPlaceholder\"\n            (valueChanged)=\"onFilterGlobal($event)\"\n            [clearable]=\"true\"\n            [hideDetails]=\"true\">\n          </cps-input>\n        </div>\n      </div>\n      <div class=\"cps-table-tbar-right\">\n        <div\n          *ngIf=\"showRemoveBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-table-tbar-remove-btn\">\n          <cps-button\n            label=\"Remove\"\n            color=\"prepared\"\n            type=\"borderless\"\n            icon=\"remove\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"removeSelected()\">\n          </cps-button>\n        </div>\n        <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n          <cps-button\n            [label]=\"actionBtnTitle\"\n            color=\"prepared\"\n            type=\"outlined\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickActionBtn()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showColumnsToggle && columns.length > 0\"\n          class=\"cps-table-tbar-coltoggle-btn\">\n          <cps-icon\n            icon=\"columns\"\n            size=\"normal\"\n            color=\"prepared-lighten1\"\n            (click)=\"colToggleMenu.toggle($event)\"></cps-icon>\n          <cps-menu #colToggleMenu [withArrow]=\"false\">\n            <div class=\"cps-table-coltoggle-menu\">\n              <div\n                class=\"cps-table-coltoggle-menu-item select-all-option\"\n                [class.allselected]=\"selectedColumns.length === columns.length\"\n                (click)=\"toggleAllColumns()\">\n                <span class=\"cps-table-coltoggle-menu-item-left\">\n                  <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n                  <span class=\"cps-table-coltoggle-menu-item-label\"\n                    >Show all columns</span\n                  >\n                </span>\n              </div>\n              <div\n                *ngFor=\"let col of columns\"\n                class=\"cps-table-coltoggle-menu-item\"\n                (click)=\"onSelectColumn(col)\"\n                [class.selected]=\"isColumnSelected(col)\">\n                <span class=\"cps-table-coltoggle-menu-item-left\">\n                  <span class=\"cps-table-coltoggle-menu-item-check\"></span>\n                  <span class=\"cps-table-coltoggle-menu-item-label\">{{\n                    col[colHeaderName]\n                  }}</span>\n                </span>\n              </div>\n            </div>\n          </cps-menu>\n        </div>\n        <div *ngIf=\"showExportBtn\" class=\"cps-table-tbar-export-btn\">\n          <cps-icon\n            icon=\"export\"\n            size=\"normal\"\n            color=\"prepared\"\n            (click)=\"exportMenu.toggle($event)\"></cps-icon>\n          <cps-menu\n            #exportMenu\n            [items]=\"exportMenuItems\"\n            [compressed]=\"true\"\n            [withArrow]=\"false\">\n          </cps-menu>\n        </div>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n    <ng-container\n      *ngTemplateOutlet=\"\n      nestedHeaderTemplate;\n        context: {\n          $implicit: columns,\n        }\n      \"></ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n    <tr>\n      <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n      <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n      <th style=\"width: 4rem\" *ngIf=\"selectable\">\n        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n      </th>\n      <ng-container *ngIf=\"headerTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            headerTemplate;\n            context: {\n              $implicit: columns,\n            }\n          \"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n        <ng-container *ngIf=\"sortable\">\n          <th *ngFor=\"let col of columns\" [cpsColSortable]=\"col[colFieldName]\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n        <ng-container *ngIf=\"!sortable\">\n          <th *ngFor=\"let col of columns\">\n            {{ col[colHeaderName] }}\n          </th>\n        </ng-container>\n      </ng-container>\n      <th\n        style=\"width: 2rem\"\n        class=\"cps-table-row-menu-cell\"\n        *ngIf=\"showRowMenu\"></th>\n    </tr>\n  </ng-template>\n\n  <ng-template\n    pTemplate=\"body\"\n    let-rowData\n    let-columns=\"columns\"\n    let-item\n    let-rowIndex=\"rowIndex\"\n    let-expanded=\"expanded\">\n    <tr\n      [pReorderableRow]=\"rowIndex\"\n      [ngClass]=\"{\n        'cps-table-row-selected': selectable && primengTable.isSelected(item)\n      }\">\n      <td *ngIf=\"rowExpansionTemplate\" class=\"cps-table-row-chevron-cell\">\n        <div\n          class=\"cps-table-row-chevron\"\n          [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n          <cps-icon\n            icon=\"chevron-down\"\n            size=\"small\"\n            color=\"text-dark\"\n            [pRowToggler]=\"item\">\n          </cps-icon>\n        </div>\n      </td>\n      <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n        <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n      </td>\n      <td *ngIf=\"selectable\">\n        <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n      </td>\n      <ng-container *ngIf=\"bodyTemplate\">\n        <ng-container\n          pTemplate=\"body\"\n          *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n              $implicit: item,\n              rowIndex: rowIndex,\n              columns: columns,\n              rowData: rowData\n            }\n          \">\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!bodyTemplate\">\n        <ng-container *ngIf=\"columns.length > 0\">\n          <td *ngFor=\"let col of columns\">\n            {{ rowData[col[colFieldName]] }}\n          </td>\n        </ng-container>\n      </ng-container>\n      <td *ngIf=\"showRowMenu\" class=\"cps-table-row-menu-cell\">\n        <table-row-menu\n          (editRowBtnClicked)=\"onEditRowClicked(item)\"\n          (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"></table-row-menu>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n    <tr class=\"cps-table-row-expanded-content\">\n      <td colspan=\"100\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            rowExpansionTemplate;\n            context: {\n              $implicit: item\n            }\n          \"></ng-container>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-table-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border: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-dark);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-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-remove-btn{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{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{margin-left:8px;margin-right:4px;cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon .cps-icon{width:22px;height:22px}: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-gridlines .p-datatable-thead>tr>th:last-child{border-width:1px}: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-gridlines .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover{background:white;color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:white;color:var(--cps-color-text-mild)}: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 0;font-weight:400;color:var(--cps-color-text-mild);background:white;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:hover sortalticon{opacity:1}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon{color:var(--cps-color-text-dark)}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon{color:var(--cps-color-text-mild);margin-left:.5rem}:host ::ng-deep .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon{color:var(--cps-color-calm)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-sortable-column-icon{width:13px;height:13px}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .p-datatable .p-sortable-column .p-column-title,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-icon,:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{vertical-align:unset}:host ::ng-deep .p-datatable .p-sortable-column .p-sortable-column-badge{border-radius:50%;height:1.125rem;min-width:1.125rem;line-height:1.125rem;color:var(--cps-color-calm);background:#f1eaec;margin-left:.5rem}: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(even){background:#ffffff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:#f8f4f5}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#ffffff;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:#f1ebed!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 .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 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 .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{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 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:#ffffff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderablerow-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderablerow-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-paginator-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable .p-paginator-bottom{border-width:0 0 1px 0;border-radius:0}:host ::ng-deep .p-paginator{background:white;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px}: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 .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover{background:#f8f4f5}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:#f1eaec}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:white}: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;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-loading-overlay{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-loading-overlay{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-loading-overlay{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter cps-input .cps-input-container .cps-input-wrap input{line-height:1;border:none;border-bottom:1px solid var(--cps-color-text-lightest);border-radius:0}:host ::ng-deep .p-sortable-column.cps-table-col-filter-menu-open{cursor:default}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep sortalticon{opacity:0}:host ::ng-deep p-sorticon{display:inline-flex;align-items:baseline}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:white}.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:#f8f4f5}.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:#efe4e7}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:#f5eeef}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:#e6d4d9}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -3840,14 +3854,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], showRowMenu: [{
                 type: Input
-            }], loading: [{
-                type: Input
             }], reorderableRows: [{
                 type: Input
             }], showColumnsToggle: [{
                 type: Input
             }], sortable: [{
                 type: Input
+            }], loading: [{
+                type: Input
             }], scrollable: [{
                 type: Input
             }], scrollHeight: [{
@@ -3866,6 +3880,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], totalRecords: [{
                 type: Input
+            }], emptyBodyHeight: [{
+                type: Input
             }], lazy: [{
                 type: Input
             }], lazyLoadOnInit: [{
@@ -3894,12 +3910,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Output
             }], editRowBtnClicked: [{
                 type: Output
+            }], rowsRemoved: [{
+                type: Output
             }], pageChanged: [{
                 type: Output
             }], sorted: [{
                 type: Output
             }], rowsReordered: [{
                 type: Output
+            }], columnsSelected: [{
+                type: Output
             }], customSortFunction: [{
                 type: Output
             }], toolbarTemplate: [{
@@ -3908,6 +3928,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }], headerTemplate: [{
                 type: ContentChild,
                 args: ['header', { static: false }]
+            }], nestedHeaderTemplate: [{
+                type: ContentChild,
+                args: ['nestedHeader', { static: false }]
             }], bodyTemplate: [{
                 type: ContentChild,
                 args: ['body', { static: false }]
@@ -4293,7 +4316,7 @@ class CpsButtonToggleComponent {
     setDisabledState(disabled) { }
 }
 CpsButtonToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonToggleComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-CpsButtonToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], ngImport: i0, template: "<div class=\"cps-btn-toggle\">\n  <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n    <span>{{ label }}</span>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-btn-toggle-label-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  </div>\n  <div class=\"cps-btn-toggle-content\">\n    <ng-container *ngFor=\"let option of options\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          optionContainerTemplate;\n          context: {\n            option: option,\n            tooltip: option.tooltip\n          }\n        \"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #optionContainerTemplate let-option=\"option\" let-tooltip=\"tooltip\">\n  <label\n    class=\"cps-btn-toggle-content-option\"\n    *ngIf=\"tooltip\"\n    [cpsTooltip]=\"option.tooltip\"\n    tooltipCloseDelay=\"0\"\n    tooltipPosition=\"bottom\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </label>\n  <label class=\"cps-btn-toggle-content-option\" *ngIf=\"!tooltip\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </label>\n</ng-template>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n  <input\n    class=\"cps-btn-toggle-content-option-input\"\n    [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n    [disabled]=\"option.disabled || disabled\"\n    [value]=\"option.value\"\n    [checked]=\"\n      option.value | checkOptionSelected : value : multiple : true : ''\n    \"\n    (change)=\"updateValueEvent($event)\" />\n  <span class=\"cps-btn-toggle-content-option-content\">\n    <span>{{ option.label }}</span>\n  </span>\n</ng-template>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:inline-flex}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:8px}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;width:max-content;align-items:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-silver);border-right:0;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:#f8f4f5}:host .cps-btn-toggle-content-option-content:active{background:#f1eaec}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-silver)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass"] }] });
+CpsButtonToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], ngImport: i0, template: "<div class=\"cps-btn-toggle\">\n  <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n    <span>{{ label }}</span>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-btn-toggle-label-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  </div>\n  <div class=\"cps-btn-toggle-content\">\n    <ng-container *ngFor=\"let option of options\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          optionContainerTemplate;\n          context: {\n            option: option,\n            tooltip: option.tooltip\n          }\n        \"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #optionContainerTemplate let-option=\"option\" let-tooltip=\"tooltip\">\n  <label\n    class=\"cps-btn-toggle-content-option\"\n    *ngIf=\"tooltip\"\n    [cpsTooltip]=\"option.tooltip\"\n    tooltipCloseDelay=\"0\"\n    tooltipPosition=\"bottom\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </label>\n  <label class=\"cps-btn-toggle-content-option\" *ngIf=\"!tooltip\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </label>\n</ng-template>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n  <input\n    class=\"cps-btn-toggle-content-option-input\"\n    [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n    [disabled]=\"option.disabled || disabled\"\n    [value]=\"option.value\"\n    [checked]=\"\n      option.value | checkOptionSelected : value : multiple : true : ''\n    \"\n    (change)=\"updateValueEvent($event)\" />\n  <span class=\"cps-btn-toggle-content-option-content\">\n    <span>{{ option.label }}</span>\n  </span>\n</ng-template>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:inline-flex}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:8px}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;width:max-content;align-items:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-silver);border-right:0;font-weight:400;font-size:16px;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:#f8f4f5}:host .cps-btn-toggle-content-option-content:active{background:#f1eaec}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-silver)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonToggleComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
@@ -4301,7 +4324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         CheckOptionSelectedPipe,
                         CpsInfoCircleComponent,
                         CpsTooltipDirective
-                    ], providers: [CheckOptionSelectedPipe], selector: 'cps-button-toggle', template: "<div class=\"cps-btn-toggle\">\n  <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n    <span>{{ label }}</span>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-btn-toggle-label-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  </div>\n  <div class=\"cps-btn-toggle-content\">\n    <ng-container *ngFor=\"let option of options\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          optionContainerTemplate;\n          context: {\n            option: option,\n            tooltip: option.tooltip\n          }\n        \"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #optionContainerTemplate let-option=\"option\" let-tooltip=\"tooltip\">\n  <label\n    class=\"cps-btn-toggle-content-option\"\n    *ngIf=\"tooltip\"\n    [cpsTooltip]=\"option.tooltip\"\n    tooltipCloseDelay=\"0\"\n    tooltipPosition=\"bottom\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </label>\n  <label class=\"cps-btn-toggle-content-option\" *ngIf=\"!tooltip\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </label>\n</ng-template>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n  <input\n    class=\"cps-btn-toggle-content-option-input\"\n    [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n    [disabled]=\"option.disabled || disabled\"\n    [value]=\"option.value\"\n    [checked]=\"\n      option.value | checkOptionSelected : value : multiple : true : ''\n    \"\n    (change)=\"updateValueEvent($event)\" />\n  <span class=\"cps-btn-toggle-content-option-content\">\n    <span>{{ option.label }}</span>\n  </span>\n</ng-template>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:inline-flex}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:8px}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;width:max-content;align-items:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-silver);border-right:0;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:#f8f4f5}:host .cps-btn-toggle-content-option-content:active{background:#f1eaec}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-silver)}\n"] }]
+                    ], providers: [CheckOptionSelectedPipe], selector: 'cps-button-toggle', template: "<div class=\"cps-btn-toggle\">\n  <div class=\"cps-btn-toggle-label\" *ngIf=\"label\">\n    <span>{{ label }}</span>\n    <cps-info-circle\n      *ngIf=\"infoTooltip\"\n      class=\"cps-btn-toggle-label-info-circle\"\n      size=\"xsmall\"\n      [tooltipPosition]=\"infoTooltipPosition\"\n      [tooltipContentClass]=\"infoTooltipClass\"\n      [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n      [tooltipPersistent]=\"infoTooltipPersistent\"\n      [tooltipText]=\"infoTooltip\">\n    </cps-info-circle>\n  </div>\n  <div class=\"cps-btn-toggle-content\">\n    <ng-container *ngFor=\"let option of options\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          optionContainerTemplate;\n          context: {\n            option: option,\n            tooltip: option.tooltip\n          }\n        \"></ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #optionContainerTemplate let-option=\"option\" let-tooltip=\"tooltip\">\n  <label\n    class=\"cps-btn-toggle-content-option\"\n    *ngIf=\"tooltip\"\n    [cpsTooltip]=\"option.tooltip\"\n    tooltipCloseDelay=\"0\"\n    tooltipPosition=\"bottom\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </label>\n  <label class=\"cps-btn-toggle-content-option\" *ngIf=\"!tooltip\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </label>\n</ng-template>\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n  <input\n    class=\"cps-btn-toggle-content-option-input\"\n    [type]=\"!multiple && mandatory ? 'radio' : 'checkbox'\"\n    [disabled]=\"option.disabled || disabled\"\n    [value]=\"option.value\"\n    [checked]=\"\n      option.value | checkOptionSelected : value : multiple : true : ''\n    \"\n    (change)=\"updateValueEvent($event)\" />\n  <span class=\"cps-btn-toggle-content-option-content\">\n    <span>{{ option.label }}</span>\n  </span>\n</ng-template>\n", styles: [":host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:inline-flex}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:8px}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}:host .cps-btn-toggle-content{display:flex}:host .cps-btn-toggle-content-option-input{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-calm);z-index:1;color:#fff}:host .cps-btn-toggle-content-option-input:checked+.cps-btn-toggle-content-option-content:hover{background-image:linear-gradient(hsla(0,0%,100%,.1) 0 0)}:host .cps-btn-toggle-content-option-input:disabled+.cps-btn-toggle-content-option-content{pointer-events:none;background-color:#f7f7f7;color:var(--cps-color-text-light)}:host .cps-btn-toggle-content-option-input:disabled:checked+.cps-btn-toggle-content-option-content{background-color:var(--cps-color-line-mid);color:var(--cps-color-text-mild)}:host .cps-btn-toggle-content-option-content{height:36px;display:flex;width:max-content;align-items:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-silver);border-right:0;font-weight:400;font-size:16px;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:#f8f4f5}:host .cps-btn-toggle-content-option-content:active{background:#f1eaec}:host .cps-btn-toggle-content-option:first-child .cps-btn-toggle-content-option-content{border-radius:4px 0 0 4px}:host .cps-btn-toggle-content-option:last-child .cps-btn-toggle-content-option-content{border-radius:0 4px 4px 0;border-right:.0625em solid var(--cps-color-silver)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -4684,6 +4707,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }] } });
 
+class CpsTableHeaderSelectableDirective {
+    constructor(elementRef, viewContainerRef) {
+        this.elementRef = elementRef;
+        this.viewContainerRef = viewContainerRef;
+        this.checkboxCompRef =
+            this.viewContainerRef.createComponent(TableHeaderCheckbox);
+    }
+    ngOnInit() {
+        this.elementRef.nativeElement.appendChild(this.checkboxCompRef.location.nativeElement);
+    }
+    ngOnDestroy() {
+        this.checkboxCompRef.destroy();
+        this.viewContainerRef.clear();
+    }
+}
+CpsTableHeaderSelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableHeaderSelectableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+CpsTableHeaderSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTableHeaderSelectableDirective, isStandalone: true, selector: "[cpsHdrSelectable]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableHeaderSelectableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[cpsHdrSelectable]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; } });
+
 class CpsTagComponent {
     set value(value) {
         this._value = value;
@@ -5075,6 +5123,7 @@ class CpsTabComponent {
     constructor() {
         this.label = '';
         this.icon = '';
+        this.disabled = false;
         this.tooltipText = '';
         this.tooltipContentClass = 'cps-tooltip-content';
         this.tooltipMaxWidth = '100%';
@@ -5083,7 +5132,7 @@ class CpsTabComponent {
     }
 }
 CpsTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CpsTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTabComponent, isStandalone: true, selector: "cps-tab", inputs: { label: "label", icon: "icon", tooltipText: "tooltipText", tooltipContentClass: "tooltipContentClass", tooltipMaxWidth: "tooltipMaxWidth", tooltipPersistent: "tooltipPersistent" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+CpsTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTabComponent, isStandalone: true, selector: "cps-tab", inputs: { label: "label", icon: "icon", disabled: "disabled", tooltipText: "tooltipText", tooltipContentClass: "tooltipContentClass", tooltipMaxWidth: "tooltipMaxWidth", tooltipPersistent: "tooltipPersistent" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTabComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule], selector: 'cps-tab', template: "<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n" }]
@@ -5091,6 +5140,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], icon: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }], tooltipText: [{
                 type: Input
             }], tooltipContentClass: [{
@@ -5111,17 +5162,38 @@ class CpsTabGroupComponent {
         this.selectedIndex = 0;
         this.isSubTabs = false; // applies an alternative styling to tabs
         this.animationType = 'slide';
-        this.initAllTabsContent = false;
-        this.animationState = 'slideLeft';
+        this.tabsBackground = 'inherit';
         this.beforeTabChanged = new EventEmitter();
         this.afterTabChanged = new EventEmitter();
+        this.backBtnVisible = false;
+        this.forwardBtnVisible = false;
+        this.animationState = 'slideLeft';
+        this.windowResize$ = Subscription.EMPTY;
+        this.listScroll$ = Subscription.EMPTY;
+    }
+    ngOnInit() {
+        this.tabsBackground = getCSSColor(this.tabsBackground);
+        this.windowResize$ = fromEvent(window, 'resize')
+            .pipe(debounceTime(50), distinctUntilChanged())
+            .subscribe(() => this.onResize());
     }
     ngAfterContentInit() {
         this.selectTab(this.selectedIndex);
     }
     ngAfterViewInit() {
+        this._updateNavBtnsState();
+        this.listScroll$ = fromEvent(this.tabsList.nativeElement, 'scroll')
+            .pipe(debounceTime(50), distinctUntilChanged())
+            .subscribe((event) => this.onScroll(event));
         this.cdRef.detectChanges();
     }
+    ngOnDestroy() {
+        this.windowResize$?.unsubscribe();
+        this.listScroll$?.unsubscribe();
+    }
+    get selectedTab() {
+        return this.tabs.find((t) => t.active);
+    }
     selectTab(newSelectedIndex) {
         const _tabs = this.tabs.toArray();
         const currentSelectedTab = _tabs && _tabs[this.selectedIndex];
@@ -5154,12 +5226,49 @@ class CpsTabGroupComponent {
             }, 100);
         }
     }
-    get selectedTab() {
-        return this.tabs.find((t) => t.active);
+    onScroll(event) {
+        this._updateNavBtnsState();
+        event.preventDefault();
+    }
+    onResize() {
+        this._updateNavBtnsState();
+    }
+    navBackward() {
+        const content = this.tabsList.nativeElement;
+        const width = this._getWidth(content) - this._getVisibleButtonWidths();
+        const pos = content.scrollLeft - width;
+        content.scrollLeft = pos <= 0 ? 0 : pos;
+    }
+    navForward() {
+        const content = this.tabsList.nativeElement;
+        const width = this._getWidth(content) - this._getVisibleButtonWidths();
+        const pos = content.scrollLeft + width;
+        const lastPos = content.scrollWidth - width;
+        content.scrollLeft = pos >= lastPos ? lastPos : pos;
+    }
+    _updateNavBtnsState() {
+        const content = this.tabsList.nativeElement;
+        const { scrollLeft, scrollWidth } = content;
+        const width = this._getWidth(content);
+        this.backBtnVisible = scrollLeft === 0;
+        this.forwardBtnVisible = Math.abs(scrollLeft - scrollWidth + width) < 2;
+    }
+    _getVisibleButtonWidths() {
+        return [this.backBtn?.nativeElement, this.forwardBtn?.nativeElement].reduce((acc, el) => (el ? acc + this._getWidth(el) : acc), 0);
+    }
+    _getWidth(el) {
+        let width = el.offsetWidth;
+        const style = getComputedStyle(el);
+        width -=
+            parseFloat(style.paddingLeft) +
+                parseFloat(style.paddingRight) +
+                parseFloat(style.borderLeftWidth) +
+                parseFloat(style.borderRightWidth);
+        return width;
     }
 }
 CpsTabGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTabGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CpsTabGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTabGroupComponent, isStandalone: true, selector: "cps-tab-group", inputs: { selectedIndex: "selectedIndex", isSubTabs: "isSubTabs", animationType: "animationType", initAllTabsContent: "initAllTabsContent" }, outputs: { beforeTabChanged: "beforeTabChanged", afterTabChanged: "afterTabChanged" }, queries: [{ propertyName: "tabs", predicate: CpsTabComponent }], ngImport: i0, template: "<ul class=\"cps-tabs\" [ngClass]=\"{ 'cps-tabs-subtabs': isSubTabs }\">\n  <ng-container *ngFor=\"let tab of tabs; let tabIndex = index\">\n    <li\n      *ngIf=\"tab.tooltipText\"\n      class=\"cps-tab\"\n      (click)=\"selectTab(tabIndex)\"\n      [ngClass]=\"{ active: tab.active }\"\n      [cpsTooltip]=\"tab.tooltipText\"\n      tooltipOpenDelay=\"1000\"\n      tooltipCloseDelay=\"0\"\n      tooltipPosition=\"bottom\"\n      [tooltipMaxWidth]=\"tab.tooltipMaxWidth\"\n      [tooltipPersistent]=\"tab.tooltipPersistent\"\n      [tooltipContentClass]=\"tab.tooltipContentClass\">\n      <cps-icon *ngIf=\"tab.icon\" class=\"cps-tab-icon\" [icon]=\"tab.icon\">\n      </cps-icon>\n      <a class=\"cps-tab-link\">{{ tab.label }}</a>\n    </li>\n    <li\n      *ngIf=\"!tab.tooltipText\"\n      class=\"cps-tab\"\n      (click)=\"selectTab(tabIndex)\"\n      [ngClass]=\"{ active: tab.active }\">\n      <cps-icon *ngIf=\"tab.icon\" class=\"cps-tab-icon\" [icon]=\"tab.icon\">\n      </cps-icon>\n      <a class=\"cps-tab-link\">{{ tab.label }}</a>\n    </li>\n  </ng-container>\n</ul>\n<div\n  class=\"cps-tab-content\"\n  [ngClass]=\"{ 'cps-tab-content-subtabs': isSubTabs }\">\n  <ng-container *ngFor=\"let tab of tabs\">\n    <div\n      [@slideInOut]=\"animationState\"\n      *ngIf=\"tab.active && !initAllTabsContent && animationType === 'slide'\">\n      <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n    </div>\n    <div\n      [@fadeInOut]=\"animationState\"\n      *ngIf=\"tab.active && !initAllTabsContent && animationType === 'fade'\">\n      <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n    </div>\n    <div\n      *ngIf=\"initAllTabsContent && animationType === 'slide'\"\n      [@slideInOut]=\"animationState\"\n      [ngStyle]=\"{ display: tab.active ? null : 'none' }\">\n      <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n    </div>\n    <div\n      *ngIf=\"initAllTabsContent && animationType === 'fade'\"\n      [@fadeInOut]=\"animationState\"\n      [ngStyle]=\"{ display: tab.active ? null : 'none' }\">\n      <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n", styles: [":host .cps-tab-content{position:relative;min-height:100px;padding:10px}:host .cps-tabs{display:flex;list-style:none;padding:0;margin:0}:host .cps-tabs .cps-tab{display:inline-flex;align-items:center;justify-content:center;min-width:150px;padding:0 24px;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:500;font-size:15px;line-height:20px;color:var(--cps-color-text-dark);opacity:1;cursor:pointer;border-bottom:3px solid transparent}:host .cps-tabs .cps-tab.active{color:var(--cps-color-calm)}:host .cps-tabs .cps-tab-link{text-decoration:none;padding:10px;color:inherit;transition:border-bottom-color .3s}:host .cps-tabs:not(.cps-tabs-subtabs){border-bottom:1px solid rgba(0,0,0,.12)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tab.active{color:var(--cps-color-calm);border-bottom:3px solid var(--cps-color-surprise)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tab:hover:not(.active){border-bottom:3px solid var(--cps-color-line-light)}:host .cps-tabs.cps-tabs-subtabs .cps-tab{height:33px;background-color:#d7d7d759}:host .cps-tabs.cps-tabs-subtabs .cps-tab.active{background-color:#fff}:host .cps-tabs.cps-tabs-subtabs .cps-tab:hover{color:var(--cps-color-calm)}:host .cps-tab-content.cps-tab-content-subtabs{background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass"] }], animations: [
+CpsTabGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTabGroupComponent, isStandalone: true, selector: "cps-tab-group", inputs: { selectedIndex: "selectedIndex", isSubTabs: "isSubTabs", animationType: "animationType", tabsBackground: "tabsBackground" }, outputs: { beforeTabChanged: "beforeTabChanged", afterTabChanged: "afterTabChanged" }, queries: [{ propertyName: "tabs", predicate: CpsTabComponent }], viewQueries: [{ propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "backBtn", first: true, predicate: ["backBtn"], descendants: true }, { propertyName: "forwardBtn", first: true, predicate: ["forwardBtn"], descendants: true }], ngImport: i0, template: "<div\n  class=\"cps-tabs\"\n  [ngClass]=\"{ 'cps-tabs-subtabs': isSubTabs }\"\n  [ngStyle]=\"{ 'background-color': tabsBackground }\">\n  <div\n    class=\"nav-btn nav-btn-back\"\n    *ngIf=\"!backBtnVisible\"\n    #backBtn\n    (click)=\"navBackward()\">\n    <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n  </div>\n  <ul #tabsList class=\"cps-tabs-list\">\n    <ng-container *ngFor=\"let tab of tabs; let tabIndex = index\">\n      <li\n        *ngIf=\"tab.tooltipText\"\n        class=\"cps-tab\"\n        (click)=\"!tab.disabled ? selectTab(tabIndex) : ''\"\n        [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\"\n        [cpsTooltip]=\"tab.tooltipText\"\n        tooltipOpenDelay=\"1000\"\n        tooltipCloseDelay=\"0\"\n        tooltipPosition=\"bottom\"\n        [tooltipMaxWidth]=\"tab.tooltipMaxWidth\"\n        [tooltipPersistent]=\"tab.tooltipPersistent\"\n        [tooltipContentClass]=\"tab.tooltipContentClass\">\n        <cps-icon *ngIf=\"tab.icon\" class=\"cps-tab-icon\" [icon]=\"tab.icon\">\n        </cps-icon>\n        <a class=\"cps-tab-link\">{{ tab.label }}</a>\n      </li>\n      <li\n        *ngIf=\"!tab.tooltipText\"\n        class=\"cps-tab\"\n        (click)=\"!tab.disabled ? selectTab(tabIndex) : ''\"\n        [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\">\n        <cps-icon *ngIf=\"tab.icon\" class=\"cps-tab-icon\" [icon]=\"tab.icon\">\n        </cps-icon>\n        <a class=\"cps-tab-link\">{{ tab.label }}</a>\n      </li>\n    </ng-container>\n  </ul>\n  <div\n    class=\"nav-btn nav-btn-forward\"\n    *ngIf=\"!forwardBtnVisible\"\n    #forwardBtn\n    (click)=\"navForward()\">\n    <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n  </div>\n</div>\n<div\n  class=\"cps-tab-content\"\n  [ngClass]=\"{ 'cps-tab-content-subtabs': isSubTabs }\">\n  <ng-container *ngFor=\"let tab of tabs\">\n    <div\n      [@slideInOut]=\"animationState\"\n      *ngIf=\"tab.active && animationType === 'slide'\">\n      <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n    </div>\n    <div\n      [@fadeInOut]=\"animationState\"\n      *ngIf=\"tab.active && animationType === 'fade'\">\n      <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n", styles: [":host{background-color:inherit}:host .cps-tabs{display:flex;position:relative}:host .cps-tabs .nav-btn{display:flex;justify-content:center;align-items:center;width:32px;cursor:pointer;position:absolute;height:100%;background-color:inherit}:host .cps-tabs .nav-btn:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-tabs .nav-btn-back{left:0;box-shadow:2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-back cps-icon{transform:rotate(90deg)}:host .cps-tabs .nav-btn-forward{right:0;box-shadow:-2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-forward cps-icon{transform:rotate(270deg)}:host .cps-tabs .cps-tabs-list{display:flex;list-style:none;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;overscroll-behavior:contain auto;-ms-overflow-style:none;scrollbar-width:none}:host .cps-tabs .cps-tabs-list .cps-tab{display:inline-flex;align-items:center;justify-content:center;min-width:150px;padding:0 24px;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:500;font-size:15px;line-height:20px;color:var(--cps-color-text-dark);opacity:1;cursor:pointer;border-bottom:3px solid transparent;transition:border-bottom .2s}:host .cps-tabs .cps-tabs-list .cps-tab.active:not(.disabled){color:var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab.disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-link{text-decoration:none;padding:10px;color:inherit}:host .cps-tabs .cps-tabs-list::-webkit-scrollbar{display:none}:host .cps-tabs:not(.cps-tabs-subtabs){border-bottom:1px solid rgba(0,0,0,.12)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active:not(.disabled){border-bottom:3px solid var(--cps-color-surprise)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active.disabled{border-bottom:3px solid var(--cps-color-line-dark)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:hover:not(:active,.active,.disabled){border-bottom:3px solid var(--cps-color-line-light)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:active:not(.disabled){border-bottom:3px solid var(--cps-color-line-mid)}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab{height:33px;background-color:#d7d7d759}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab.active{background-color:#fff}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:hover:not(.disabled){color:var(--cps-color-calm)}:host .cps-tab-content{position:relative;min-height:100px;padding:10px}:host .cps-tab-content.cps-tab-content-subtabs{background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass"] }], animations: [
         trigger('slideInOut', [
             state('slideLeft', style({ transform: 'translateX(0)' })),
             state('slideRight', style({ transform: 'translateX(0)' })),
@@ -5215,22 +5324,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                                 animate('0ms ease-out', style({ opacity: 0 }))
                             ])
                         ])
-                    ], template: "<ul class=\"cps-tabs\" [ngClass]=\"{ 'cps-tabs-subtabs': isSubTabs }\">\n  <ng-container *ngFor=\"let tab of tabs; let tabIndex = index\">\n    <li\n      *ngIf=\"tab.tooltipText\"\n      class=\"cps-tab\"\n      (click)=\"selectTab(tabIndex)\"\n      [ngClass]=\"{ active: tab.active }\"\n      [cpsTooltip]=\"tab.tooltipText\"\n      tooltipOpenDelay=\"1000\"\n      tooltipCloseDelay=\"0\"\n      tooltipPosition=\"bottom\"\n      [tooltipMaxWidth]=\"tab.tooltipMaxWidth\"\n      [tooltipPersistent]=\"tab.tooltipPersistent\"\n      [tooltipContentClass]=\"tab.tooltipContentClass\">\n      <cps-icon *ngIf=\"tab.icon\" class=\"cps-tab-icon\" [icon]=\"tab.icon\">\n      </cps-icon>\n      <a class=\"cps-tab-link\">{{ tab.label }}</a>\n    </li>\n    <li\n      *ngIf=\"!tab.tooltipText\"\n      class=\"cps-tab\"\n      (click)=\"selectTab(tabIndex)\"\n      [ngClass]=\"{ active: tab.active }\">\n      <cps-icon *ngIf=\"tab.icon\" class=\"cps-tab-icon\" [icon]=\"tab.icon\">\n      </cps-icon>\n      <a class=\"cps-tab-link\">{{ tab.label }}</a>\n    </li>\n  </ng-container>\n</ul>\n<div\n  class=\"cps-tab-content\"\n  [ngClass]=\"{ 'cps-tab-content-subtabs': isSubTabs }\">\n  <ng-container *ngFor=\"let tab of tabs\">\n    <div\n      [@slideInOut]=\"animationState\"\n      *ngIf=\"tab.active && !initAllTabsContent && animationType === 'slide'\">\n      <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n    </div>\n    <div\n      [@fadeInOut]=\"animationState\"\n      *ngIf=\"tab.active && !initAllTabsContent && animationType === 'fade'\">\n      <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n    </div>\n    <div\n      *ngIf=\"initAllTabsContent && animationType === 'slide'\"\n      [@slideInOut]=\"animationState\"\n      [ngStyle]=\"{ display: tab.active ? null : 'none' }\">\n      <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n    </div>\n    <div\n      *ngIf=\"initAllTabsContent && animationType === 'fade'\"\n      [@fadeInOut]=\"animationState\"\n      [ngStyle]=\"{ display: tab.active ? null : 'none' }\">\n      <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n", styles: [":host .cps-tab-content{position:relative;min-height:100px;padding:10px}:host .cps-tabs{display:flex;list-style:none;padding:0;margin:0}:host .cps-tabs .cps-tab{display:inline-flex;align-items:center;justify-content:center;min-width:150px;padding:0 24px;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:500;font-size:15px;line-height:20px;color:var(--cps-color-text-dark);opacity:1;cursor:pointer;border-bottom:3px solid transparent}:host .cps-tabs .cps-tab.active{color:var(--cps-color-calm)}:host .cps-tabs .cps-tab-link{text-decoration:none;padding:10px;color:inherit;transition:border-bottom-color .3s}:host .cps-tabs:not(.cps-tabs-subtabs){border-bottom:1px solid rgba(0,0,0,.12)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tab.active{color:var(--cps-color-calm);border-bottom:3px solid var(--cps-color-surprise)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tab:hover:not(.active){border-bottom:3px solid var(--cps-color-line-light)}:host .cps-tabs.cps-tabs-subtabs .cps-tab{height:33px;background-color:#d7d7d759}:host .cps-tabs.cps-tabs-subtabs .cps-tab.active{background-color:#fff}:host .cps-tabs.cps-tabs-subtabs .cps-tab:hover{color:var(--cps-color-calm)}:host .cps-tab-content.cps-tab-content-subtabs{background-color:#fff}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { tabs: [{
-                type: ContentChildren,
-                args: [CpsTabComponent]
-            }], selectedIndex: [{
+                    ], template: "<div\n  class=\"cps-tabs\"\n  [ngClass]=\"{ 'cps-tabs-subtabs': isSubTabs }\"\n  [ngStyle]=\"{ 'background-color': tabsBackground }\">\n  <div\n    class=\"nav-btn nav-btn-back\"\n    *ngIf=\"!backBtnVisible\"\n    #backBtn\n    (click)=\"navBackward()\">\n    <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n  </div>\n  <ul #tabsList class=\"cps-tabs-list\">\n    <ng-container *ngFor=\"let tab of tabs; let tabIndex = index\">\n      <li\n        *ngIf=\"tab.tooltipText\"\n        class=\"cps-tab\"\n        (click)=\"!tab.disabled ? selectTab(tabIndex) : ''\"\n        [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\"\n        [cpsTooltip]=\"tab.tooltipText\"\n        tooltipOpenDelay=\"1000\"\n        tooltipCloseDelay=\"0\"\n        tooltipPosition=\"bottom\"\n        [tooltipMaxWidth]=\"tab.tooltipMaxWidth\"\n        [tooltipPersistent]=\"tab.tooltipPersistent\"\n        [tooltipContentClass]=\"tab.tooltipContentClass\">\n        <cps-icon *ngIf=\"tab.icon\" class=\"cps-tab-icon\" [icon]=\"tab.icon\">\n        </cps-icon>\n        <a class=\"cps-tab-link\">{{ tab.label }}</a>\n      </li>\n      <li\n        *ngIf=\"!tab.tooltipText\"\n        class=\"cps-tab\"\n        (click)=\"!tab.disabled ? selectTab(tabIndex) : ''\"\n        [ngClass]=\"{ active: tab.active, disabled: tab.disabled }\">\n        <cps-icon *ngIf=\"tab.icon\" class=\"cps-tab-icon\" [icon]=\"tab.icon\">\n        </cps-icon>\n        <a class=\"cps-tab-link\">{{ tab.label }}</a>\n      </li>\n    </ng-container>\n  </ul>\n  <div\n    class=\"nav-btn nav-btn-forward\"\n    *ngIf=\"!forwardBtnVisible\"\n    #forwardBtn\n    (click)=\"navForward()\">\n    <cps-icon icon=\"chevron-down\" color=\"text-dark\"></cps-icon>\n  </div>\n</div>\n<div\n  class=\"cps-tab-content\"\n  [ngClass]=\"{ 'cps-tab-content-subtabs': isSubTabs }\">\n  <ng-container *ngFor=\"let tab of tabs\">\n    <div\n      [@slideInOut]=\"animationState\"\n      *ngIf=\"tab.active && animationType === 'slide'\">\n      <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n    </div>\n    <div\n      [@fadeInOut]=\"animationState\"\n      *ngIf=\"tab.active && animationType === 'fade'\">\n      <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n", styles: [":host{background-color:inherit}:host .cps-tabs{display:flex;position:relative}:host .cps-tabs .nav-btn{display:flex;justify-content:center;align-items:center;width:32px;cursor:pointer;position:absolute;height:100%;background-color:inherit}:host .cps-tabs .nav-btn:hover ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-tabs .nav-btn-back{left:0;box-shadow:2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-back cps-icon{transform:rotate(90deg)}:host .cps-tabs .nav-btn-forward{right:0;box-shadow:-2px 0 2px -1px #0003}:host .cps-tabs .nav-btn-forward cps-icon{transform:rotate(270deg)}:host .cps-tabs .cps-tabs-list{display:flex;list-style:none;padding:0;margin:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;overscroll-behavior:contain auto;-ms-overflow-style:none;scrollbar-width:none}:host .cps-tabs .cps-tabs-list .cps-tab{display:inline-flex;align-items:center;justify-content:center;min-width:150px;padding:0 24px;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:500;font-size:15px;line-height:20px;color:var(--cps-color-text-dark);opacity:1;cursor:pointer;border-bottom:3px solid transparent;transition:border-bottom .2s}:host .cps-tabs .cps-tabs-list .cps-tab.active:not(.disabled){color:var(--cps-color-calm)}:host .cps-tabs .cps-tabs-list .cps-tab.disabled{cursor:default;color:var(--cps-color-text-light)}:host .cps-tabs .cps-tabs-list .cps-tab .cps-tab-link{text-decoration:none;padding:10px;color:inherit}:host .cps-tabs .cps-tabs-list::-webkit-scrollbar{display:none}:host .cps-tabs:not(.cps-tabs-subtabs){border-bottom:1px solid rgba(0,0,0,.12)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active:not(.disabled){border-bottom:3px solid var(--cps-color-surprise)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab.active.disabled{border-bottom:3px solid var(--cps-color-line-dark)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:hover:not(:active,.active,.disabled){border-bottom:3px solid var(--cps-color-line-light)}:host .cps-tabs:not(.cps-tabs-subtabs) .cps-tabs-list .cps-tab:active:not(.disabled){border-bottom:3px solid var(--cps-color-line-mid)}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab{height:33px;background-color:#d7d7d759}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab.active{background-color:#fff}:host .cps-tabs.cps-tabs-subtabs .cps-tabs-list .cps-tab:hover:not(.disabled){color:var(--cps-color-calm)}:host .cps-tab-content{position:relative;min-height:100px;padding:10px}:host .cps-tab-content.cps-tab-content-subtabs{background-color:#fff}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedIndex: [{
                 type: Input
             }], isSubTabs: [{
                 type: Input
             }], animationType: [{
                 type: Input
-            }], initAllTabsContent: [{
+            }], tabsBackground: [{
                 type: Input
             }], beforeTabChanged: [{
                 type: Output
             }], afterTabChanged: [{
                 type: Output
+            }], tabsList: [{
+                type: ViewChild,
+                args: ['tabsList']
+            }], backBtn: [{
+                type: ViewChild,
+                args: ['backBtn']
+            }], forwardBtn: [{
+                type: ViewChild,
+                args: ['forwardBtn']
+            }], tabs: [{
+                type: ContentChildren,
+                args: [CpsTabComponent]
             }] } });
 
 /*
@@ -5241,5 +5359,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsExpansionPanelComponent, CpsIconComponent, CpsInfoCircleComponent, CpsInputComponent, CpsLoaderComponent, CpsMenuComponent, CpsPaginatorComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTabComponent, CpsTabGroupComponent, CpsTableColumnFilterDirective, CpsTableColumnSortableDirective, CpsTableComponent, CpsTagComponent, CpsTextareaComponent, CpsTooltipDirective, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory };
+export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsExpansionPanelComponent, CpsIconComponent, CpsInfoCircleComponent, CpsInputComponent, CpsLoaderComponent, CpsMenuComponent, CpsPaginatorComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTabComponent, CpsTabGroupComponent, CpsTableColumnFilterDirective, CpsTableColumnSortableDirective, CpsTableComponent, CpsTableHeaderSelectableDirective, CpsTagComponent, CpsTextareaComponent, CpsTooltipDirective, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory };
 //# sourceMappingURL=cps-ui-kit.mjs.map