cps-ui-kit 0.46.0 → 0.47.0

package/fesm2020/cps-ui-kit.mjs

@@ -1,7 +1,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, HostBinding, Host, PLATFORM_ID, ChangeDetectionStrategy, ViewEncapsulation, Inject, ContentChild } from '@angular/core';
+import { Component, Input, Directive, HostListener, EventEmitter, Self, Optional, Output, ViewChild, Pipe, HostBinding, PLATFORM_ID, ChangeDetectionStrategy, ViewEncapsulation, Inject, Host, ContentChild } from '@angular/core';
 import { Subscription } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -9,18 +9,18 @@ import { isEqual, find } from 'lodash-es';
 import * as i3 from 'primeng/virtualscroller';
 import { VirtualScrollerModule } from 'primeng/virtualscroller';
 import * as i1$1 from 'primeng/api';
-import { SharedModule } from 'primeng/api';
+import { SharedModule, FilterOperator, FilterMatchMode } from 'primeng/api';
 import * as i3$1 from 'primeng/tree';
 import { TreeModule } from 'primeng/tree';
-import * as i3$2 from 'primeng/table';
-import { TableService, Table, TableModule, SortableColumn, SortIcon } from 'primeng/table';
+import * as i1$2 from 'primeng/table';
+import { SortableColumn, SortIcon, TableService, Table, TableModule } from 'primeng/table';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
 import { ZIndexUtils } from 'primeng/utils';
-import * as i1$2 from 'primeng/paginator';
-import { PaginatorModule } from 'primeng/paginator';
 import * as i2$1 from 'primeng/calendar';
 import { CalendarModule } from 'primeng/calendar';
+import * as i1$3 from 'primeng/paginator';
+import { PaginatorModule } from 'primeng/paginator';
 
 const convertSize = (size) => {
     const res = String(size).trim();
@@ -144,6 +144,7 @@ const iconNames = [
     'eye',
     'filter',
     'filter_2',
+    'filter-funnel',
     'follow',
     'glossary',
     'graph',
@@ -2898,88 +2899,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Output
             }] } });
 
-class TableUnsortDirective {
-    constructor(pTable) {
-        this.pTable = pTable;
-        this.defaultSortOrderInitialized = false;
-        pTable.tableService.valueSource$.subscribe((val) => {
-            if (val != null && val.length > 0 && !this.defaultSortOrderInitialized) {
-                let i = 0;
-                val.forEach((v) => {
-                    v._defaultSortOrder = i++;
-                });
-                this.defaultSortOrderInitialized = true;
-            }
-        });
-        pTable.sort = (event) => {
-            if (pTable.sortMode === 'single') {
-                if (pTable.sortField === event.field && pTable.sortOrder === -1) {
-                    event.field = '_defaultSortOrder';
-                }
-                pTable._sortOrder =
-                    pTable.sortField === event.field
-                        ? pTable.sortOrder * -1
-                        : pTable.defaultSortOrder;
-                pTable._sortField = event.field;
-                pTable.sortSingle();
-            }
-            if (pTable.sortMode === 'multiple') {
-                let resetIndex = false;
-                const sortMeta = pTable.getSortMeta(event.field);
-                if (sortMeta) {
-                    for (let i = 0; i < pTable._multiSortMeta.length; i++) {
-                        if (pTable._multiSortMeta[i].field === sortMeta.field) {
-                            pTable._multiSortMeta.splice(i, 1);
-                        }
-                    }
-                    if (sortMeta.order === 1) {
-                        sortMeta.order = sortMeta.order * -1;
-                        pTable.multiSortMeta.push(sortMeta);
-                    }
-                    if (pTable._multiSortMeta?.length === 0) {
-                        pTable.multiSortMeta.push({
-                            field: '_defaultSortOrder',
-                            order: pTable.defaultSortOrder
-                        });
-                        resetIndex = true;
-                    }
-                }
-                else {
-                    if (!pTable.multiSortMeta) {
-                        pTable._multiSortMeta = [];
-                    }
-                    pTable.multiSortMeta.push({
-                        field: event.field,
-                        order: pTable.defaultSortOrder
-                    });
-                }
-                pTable.sortMultiple();
-                if (resetIndex)
-                    pTable._multiSortMeta = [];
-            }
-            if (pTable.isStateful()) {
-                pTable.saveState();
-            }
-            pTable.anchorRowIndex = 0;
-        };
-    }
-}
-TableUnsortDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableUnsortDirective, deps: [{ token: i3$2.Table, host: true, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-TableUnsortDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: TableUnsortDirective, isStandalone: true, selector: "[withUnsort]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableUnsortDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: '[withUnsort]'
-                }]
-        }], ctorParameters: function () { return [{ type: i3$2.Table, decorators: [{
-                    type: Host
-                }, {
-                    type: Self
-                }, {
-                    type: Optional
-                }] }]; } });
-
 class CpsMenuComponent {
     // eslint-disable-next-line no-useless-constructor
     constructor(document, platformId, el, renderer, cd, zone, config, overlayService) {
@@ -3017,7 +2936,7 @@ class CpsMenuComponent {
         if (this.overlayVisible) {
             if (this.hasTargetChanged(event, target)) {
                 this.destroyCallback = () => {
-                    this.show(null, target || event.currentTarget || event.target);
+                    this.show(null, target || event?.currentTarget || event?.target);
                 };
             }
             this.hide();
@@ -3031,7 +2950,7 @@ class CpsMenuComponent {
         if (this.isOverlayAnimationInProgress) {
             return;
         }
-        this.target = target || event.currentTarget || event.target;
+        this.target = target || event?.currentTarget || event?.target;
         this.overlayVisible = true;
         this.render = true;
         this.cd.markForCheck();
@@ -3051,6 +2970,34 @@ class CpsMenuComponent {
         }
         this.hide();
     }
+    bindDocumentKeydownListener() {
+        if (DomHandler.isTouchDevice())
+            return;
+        if (isPlatformBrowser(this.platformId)) {
+            if (!this.documentKeydownListener && this.dismissable) {
+                this.zone.runOutsideAngular(() => {
+                    const documentTarget = this.el
+                        ? this.el.nativeElement.ownerDocument
+                        : this.document;
+                    this.documentKeydownListener = this.renderer.listen(documentTarget, 'keydown', (event) => {
+                        // escape
+                        if (event.keyCode === 27) {
+                            this.zone.run(() => {
+                                if (this.overlayVisible)
+                                    this.hide();
+                            });
+                        }
+                    });
+                });
+            }
+        }
+    }
+    unbindDocumentKeydownListener() {
+        if (this.documentKeydownListener) {
+            this.documentKeydownListener();
+            this.documentKeydownListener = null;
+        }
+    }
     bindDocumentClickListener() {
         if (isPlatformBrowser(this.platformId)) {
             if (!this.documentClickListener && this.dismissable) {
@@ -3093,8 +3040,8 @@ class CpsMenuComponent {
         this.selfClick = true;
     }
     hasTargetChanged(event, target) {
-        return (this.target != null &&
-            this.target !== (target || event.currentTarget || event.target));
+        return (this.target &&
+            this.target !== (target || event?.currentTarget || event?.target));
     }
     appendContainer() {
         this.renderer.appendChild(this.document.body, this.container);
@@ -3144,6 +3091,7 @@ class CpsMenuComponent {
             this.appendContainer();
             this.align();
             this.bindDocumentClickListener();
+            this.bindDocumentKeydownListener();
             this.bindDocumentResizeListener();
             this.bindScrollListener();
             if (this.focusOnShow) {
@@ -3233,6 +3181,7 @@ class CpsMenuComponent {
             this.target = null;
         }
         this.unbindDocumentClickListener();
+        this.unbindDocumentKeydownListener();
         this.unbindDocumentResizeListener();
         this.unbindScrollListener();
     }
@@ -3379,6 +3328,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Output
             }] } });
 
+class CpsTableColumnSortableDirective extends SortableColumn {
+    constructor(elementRef, viewContainerRef, dt) {
+        super(dt);
+        this.elementRef = elementRef;
+        this.viewContainerRef = viewContainerRef;
+        this.dt = dt;
+        this.field = '';
+        this.sortIconRef = this.viewContainerRef.createComponent(SortIcon);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.sortIconRef.setInput('field', this.field);
+        this.elementRef.nativeElement.appendChild(this.sortIconRef.location.nativeElement);
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.sortIconRef.destroy();
+        this.viewContainerRef.clear();
+    }
+    onClick(event) {
+        if (!this.elementRef?.nativeElement?.classList?.contains('cps-table-col-filter-menu-open')) {
+            super.onClick(event);
+        }
+    }
+}
+CpsTableColumnSortableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableColumnSortableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$2.Table }], target: i0.ɵɵFactoryTarget.Directive });
+CpsTableColumnSortableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTableColumnSortableDirective, isStandalone: true, selector: "[cpsColSortable]", inputs: { field: ["cpsColSortable", "field"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableColumnSortableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[cpsColSortable]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1$2.Table }]; }, propDecorators: { field: [{
+                type: Input,
+                args: ['cpsColSortable']
+            }] } });
+
+class TableUnsortDirective {
+    constructor(pTable) {
+        this.pTable = pTable;
+        this.defaultSortOrderInitialized = false;
+        pTable.tableService.valueSource$.subscribe((val) => {
+            if (val != null && val.length > 0 && !this.defaultSortOrderInitialized) {
+                let i = 0;
+                val.forEach((v) => {
+                    v._defaultSortOrder = i++;
+                });
+                this.defaultSortOrderInitialized = true;
+            }
+        });
+        pTable.sort = (event) => {
+            if (pTable.sortMode === 'single') {
+                if (pTable.sortField === event.field && pTable.sortOrder === -1) {
+                    event.field = '_defaultSortOrder';
+                }
+                pTable._sortOrder =
+                    pTable.sortField === event.field
+                        ? pTable.sortOrder * -1
+                        : pTable.defaultSortOrder;
+                pTable._sortField = event.field;
+                pTable.sortSingle();
+            }
+            if (pTable.sortMode === 'multiple') {
+                let resetIndex = false;
+                const sortMeta = pTable.getSortMeta(event.field);
+                if (sortMeta) {
+                    for (let i = 0; i < pTable._multiSortMeta.length; i++) {
+                        if (pTable._multiSortMeta[i].field === sortMeta.field) {
+                            pTable._multiSortMeta.splice(i, 1);
+                        }
+                    }
+                    if (sortMeta.order === 1) {
+                        sortMeta.order = sortMeta.order * -1;
+                        pTable.multiSortMeta.push(sortMeta);
+                    }
+                    if (pTable._multiSortMeta?.length === 0) {
+                        pTable.multiSortMeta.push({
+                            field: '_defaultSortOrder',
+                            order: pTable.defaultSortOrder
+                        });
+                        resetIndex = true;
+                    }
+                }
+                else {
+                    if (!pTable.multiSortMeta) {
+                        pTable._multiSortMeta = [];
+                    }
+                    pTable.multiSortMeta.push({
+                        field: event.field,
+                        order: pTable.defaultSortOrder
+                    });
+                }
+                pTable.sortMultiple();
+                if (resetIndex)
+                    pTable._multiSortMeta = [];
+            }
+            if (pTable.isStateful()) {
+                pTable.saveState();
+            }
+            pTable.anchorRowIndex = 0;
+        };
+    }
+}
+TableUnsortDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableUnsortDirective, deps: [{ token: i1$2.Table, host: true, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+TableUnsortDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: TableUnsortDirective, isStandalone: true, selector: "[withUnsort]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableUnsortDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[withUnsort]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.Table, decorators: [{
+                    type: Host
+                }, {
+                    type: Self
+                }, {
+                    type: Optional
+                }] }]; } });
+
 // import jsPDF from 'jspdf';
 // import 'jspdf-autotable';
 function tableFactory(tableComponent) {
@@ -3400,7 +3469,7 @@ class CpsTableComponent {
         this.hasToolbar = true;
         this.toolbarSize = 'normal';
         this.toolbarTitle = '';
-        this.sortMode = 'multiple';
+        this.sortMode = 'single';
         this.customSort = false;
         this.rowHover = true;
         this.dataKey = ''; // field, that uniquely identifies a record in data (needed for expandable rows)
@@ -3408,6 +3477,7 @@ class CpsTableComponent {
         this.loading = false;
         this.reorderableRows = false;
         this.showColumnsToggle = false;
+        this.sortable = false; // makes all sortable if columns are provided
         this.scrollable = true;
         this.scrollHeight = '';
         this.virtualScroll = false; // works only if scrollable is true
@@ -3428,7 +3498,6 @@ class CpsTableComponent {
         this.showExportBtn = false;
         this.exportFilename = 'download';
         this.csvSeparator = ',';
-        // TODO CpsTableColumnFilterDirective (type date, text, boolean, range, categories, numeric)
         this.selectionChanged = new EventEmitter();
         this.actionBtnClicked = new EventEmitter();
         this.editRowBtnClicked = new EventEmitter();
@@ -3634,7 +3703,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", 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", 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: [
         TableService,
         {
             provide: Table,
@@ -3642,7 +3711,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  [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\">\n        <ng-container *ngIf=\"columns.length > 0\">\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      </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-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 filtericon{pointer-events:none}:host ::ng-deep filtericon .p-icon{width:13px;height:13px}:host ::ng-deep p-columnfilter{margin-left:4px}:host ::ng-deep .p-column-filter-menu-button:hover{color:var(--cps-color-text-dark);border-color:transparent}:host ::ng-deep .p-column-filter-menu-button.p-column-filter-menu-button-open,:host ::ng-deep .p-column-filter-menu-button.p-column-filter-menu-button-open:hover{background:transparent;color:var(--cps-color-text-dark)}:host ::ng-deep .p-column-filter-menu-button,:host ::ng-deep .p-column-filter-clear-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative}:host ::ng-deep .p-column-filter-menu-button:focus{outline:0 none;outline-offset:0;box-shadow:none}: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.top-open .cps-select-options{bottom:33px!important}: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-left-content .cps-table-paginator-itms-per-page .cps-select-options-option{font-size: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}.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}\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: i3$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: i3$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i3$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i3$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i3$2.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i3$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"] }, { 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", "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"], outputs: ["menuShown", "menuHidden"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], 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      </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.top-open .cps-select-options{bottom:33px!important}: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-left-content .cps-table-paginator-itms-per-page .cps-select-options-option{font-size: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}\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"] }, { 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", "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"], outputs: ["menuShown", "menuHidden"] }, { 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: [
@@ -3656,7 +3725,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         CpsIconComponent,
                         CpsMenuComponent,
                         CpsLoaderComponent,
-                        TableRowMenuComponent
+                        TableRowMenuComponent,
+                        CpsTableColumnSortableDirective
                     ], providers: [
                         TableService,
                         {
@@ -3665,7 +3735,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  [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\">\n        <ng-container *ngIf=\"columns.length > 0\">\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      </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-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 filtericon{pointer-events:none}:host ::ng-deep filtericon .p-icon{width:13px;height:13px}:host ::ng-deep p-columnfilter{margin-left:4px}:host ::ng-deep .p-column-filter-menu-button:hover{color:var(--cps-color-text-dark);border-color:transparent}:host ::ng-deep .p-column-filter-menu-button.p-column-filter-menu-button-open,:host ::ng-deep .p-column-filter-menu-button.p-column-filter-menu-button-open:hover{background:transparent;color:var(--cps-color-text-dark)}:host ::ng-deep .p-column-filter-menu-button,:host ::ng-deep .p-column-filter-clear-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative}:host ::ng-deep .p-column-filter-menu-button:focus{outline:0 none;outline-offset:0;box-shadow:none}: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.top-open .cps-select-options{bottom:33px!important}: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-left-content .cps-table-paginator-itms-per-page .cps-select-options-option{font-size: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}.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}\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\" 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      </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.top-open .cps-select-options{bottom:33px!important}: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-left-content .cps-table-paginator-itms-per-page .cps-select-options-option{font-size: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}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -3706,6 +3776,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], showColumnsToggle: [{
                 type: Input
+            }], sortable: [{
+                type: Input
             }], scrollable: [{
                 type: Input
             }], scrollHeight: [{
@@ -3777,254 +3849,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['primengTable', { static: true }]
             }] } });
 
-class CpsTableColumnSortableDirective extends SortableColumn {
-    constructor(elementRef, viewContainerRef, dt) {
-        super(dt);
-        this.elementRef = elementRef;
-        this.viewContainerRef = viewContainerRef;
-        this.dt = dt;
-        this.field = '';
-        this.sortIconRef = this.viewContainerRef.createComponent(SortIcon);
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.sortIconRef.setInput('field', this.field);
-        this.elementRef.nativeElement.firstChild.after(this.sortIconRef.location.nativeElement);
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.sortIconRef.destroy();
-        this.viewContainerRef.clear();
-    }
-}
-CpsTableColumnSortableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableColumnSortableDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i3$2.Table }], target: i0.ɵɵFactoryTarget.Directive });
-CpsTableColumnSortableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTableColumnSortableDirective, isStandalone: true, selector: "[cpsColSortable]", inputs: { field: ["cpsColSortable", "field"] }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableColumnSortableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: '[cpsColSortable]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i3$2.Table }]; }, propDecorators: { field: [{
-                type: Input,
-                args: ['cpsColSortable']
-            }] } });
-
-class CpsTagComponent {
+class CpsDatepickerComponent {
     set value(value) {
         this._value = value;
-        this.onChange(value);
-    }
-    get value() {
-        return this._value;
-    }
-    constructor(_control) {
-        this._control = _control;
-        this.type = 'custom'; // higher precedence over color
-        this.label = '';
-        this.color = '';
-        this.disabled = false;
-        this.selectable = false;
-        this.valueChanged = new EventEmitter();
-        this.classesList = [];
-        this.tagColor = '';
-        this._value = false;
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.onChange = (event) => { };
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.onTouched = () => { };
-        if (this._control) {
-            this._control.valueAccessor = this;
-        }
-    }
-    ngOnChanges() {
-        this.setClasses();
-    }
-    setClasses() {
-        this.classesList = ['cps-tag'];
-        if (this.selectable) {
-            this.classesList.push('cps-tag--selectable');
-        }
-        if (this.disabled) {
-            this.classesList.push('cps-tag--disabled');
-        }
-        switch (this.type) {
-            case 'security': {
-                this.classesList.push('cps-tag--security');
-                break;
-            }
-            case 'classification': {
-                this.classesList.push('cps-tag--classification');
-                break;
-            }
-            default:
-                if (this.color)
-                    this.tagColor = getCSSColor(this.color);
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    writeValue(value) {
-        this.value = value;
-    }
-    toggleSelected() {
-        if (this.disabled || !this.selectable)
-            return;
-        this._updateValue(!this.value);
-    }
-    _updateValue(value) {
-        this.writeValue(value);
-        this.onChange(value);
-        this.valueChanged.emit(value);
-    }
-}
-CpsTagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTagComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-CpsTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTagComponent, isStandalone: true, selector: "cps-tag", inputs: { type: "type", label: "label", color: "color", disabled: "disabled", selectable: "selectable", value: "value" }, outputs: { valueChanged: "valueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div\n  [ngClass]=\"classesList\"\n  [class.unselected]=\"!value && selectable\"\n  [ngStyle]=\"{ 'border-color': tagColor || 'none' }\"\n  (click)=\"toggleSelected()\">\n  <p>{{ label }}</p>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .cps-tag{min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .cps-tag.cps-tag--security{border-color:var(--cps-color-warn)}:host .cps-tag.cps-tag--classification{border-color:var(--cps-color-info)}:host .cps-tag.cps-tag--selectable{cursor:pointer}:host .cps-tag.cps-tag--selectable:not(:active):not(:disabled){box-shadow:1px 3px 4px #0000001a}:host .cps-tag.cps-tag--disabled{pointer-events:none;border-color:var(--cps-color-line-dark)!important}:host .cps-tag.cps-tag--disabled p{color:var(--cps-color-text-light)}:host .cps-tag.unselected{border-color:var(--cps-color-text-light)!important}:host .cps-tag p{margin:0;font-size:11px;color:var(--cps-color-text-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTagComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, imports: [CommonModule], selector: 'cps-tag', template: "<div\n  [ngClass]=\"classesList\"\n  [class.unselected]=\"!value && selectable\"\n  [ngStyle]=\"{ 'border-color': tagColor || 'none' }\"\n  (click)=\"toggleSelected()\">\n  <p>{{ label }}</p>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .cps-tag{min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .cps-tag.cps-tag--security{border-color:var(--cps-color-warn)}:host .cps-tag.cps-tag--classification{border-color:var(--cps-color-info)}:host .cps-tag.cps-tag--selectable{cursor:pointer}:host .cps-tag.cps-tag--selectable:not(:active):not(:disabled){box-shadow:1px 3px 4px #0000001a}:host .cps-tag.cps-tag--disabled{pointer-events:none;border-color:var(--cps-color-line-dark)!important}:host .cps-tag.cps-tag--disabled p{color:var(--cps-color-text-light)}:host .cps-tag.unselected{border-color:var(--cps-color-text-light)!important}:host .cps-tag p{margin:0;font-size:11px;color:var(--cps-color-text-dark)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
-                    type: Self
-                }, {
-                    type: Optional
-                }] }]; }, propDecorators: { type: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], selectable: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], valueChanged: [{
-                type: Output
-            }] } });
-
-class CpsPaginatorComponent {
-    constructor() {
-        this.first = 0;
-        this.rows = 0;
-        this.totalRecords = 0;
-        this.rowsPerPageOptions = [];
-        this.alwaysShow = true;
-        this.backgroundColor = 'transparent';
-        this.pageChanged = new EventEmitter();
-        this.rowOptions = [];
-    }
-    ngOnInit() {
-        this.backgroundColor = getCSSColor(this.backgroundColor);
-        if (this.rowsPerPageOptions.length < 1)
-            this.rowsPerPageOptions = [5, 10, 25, 50];
-        if (!this.rows)
-            this.rows = this.rowsPerPageOptions[0];
-        else {
-            if (!this.rowsPerPageOptions.includes(this.rows)) {
-                throw new Error('rowsPerPageOptions must include rows');
-            }
-        }
-        this.rowOptions = this.rowsPerPageOptions.map((v) => ({
-            label: '' + v,
-            value: v
-        }));
-    }
-    onPageChange(event) {
-        this.first = event.first;
-        this.rows = event.rows;
-        this.pageChanged.emit(event);
-    }
-}
-CpsPaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CpsPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsPaginatorComponent, isStandalone: true, selector: "cps-paginator", inputs: { first: "first", rows: "rows", totalRecords: "totalRecords", rowsPerPageOptions: "rowsPerPageOptions", alwaysShow: "alwaysShow", backgroundColor: "backgroundColor" }, outputs: { pageChanged: "pageChanged" }, ngImport: i0, template: "<p-paginator\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [style]=\"{ background: backgroundColor }\"\n  [totalRecords]=\"totalRecords\"\n  [showFirstLastIcon]=\"true\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShow]=\"alwaysShow\"\n  [templateLeft]=\"itemsPerPageTemplate\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n  <div class=\"cps-paginator-itms-per-page\">\n    <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n    <cps-select\n      [options]=\"rowOptions\"\n      [hideDetails]=\"true\"\n      [(ngModel)]=\"rows\"\n      (valueChanged)=\"first = 0\"\n      [returnObject]=\"false\"></cps-select>\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-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-paginator-itms-per-page .cps-select.top-open .cps-select-options{bottom:33px!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-options-option{font-size: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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$2.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "templateLeft", "templateRight", "dropdownAppendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "showPageLinks", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { 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: "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", "value"], outputs: ["valueChanged"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsPaginatorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cps-paginator', standalone: true, imports: [CommonModule, PaginatorModule, CpsSelectComponent], template: "<p-paginator\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [style]=\"{ background: backgroundColor }\"\n  [totalRecords]=\"totalRecords\"\n  [showFirstLastIcon]=\"true\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShow]=\"alwaysShow\"\n  [templateLeft]=\"itemsPerPageTemplate\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n  <div class=\"cps-paginator-itms-per-page\">\n    <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n    <cps-select\n      [options]=\"rowOptions\"\n      [hideDetails]=\"true\"\n      [(ngModel)]=\"rows\"\n      (valueChanged)=\"first = 0\"\n      [returnObject]=\"false\"></cps-select>\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-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-paginator-itms-per-page .cps-select.top-open .cps-select-options{bottom:33px!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-options-option{font-size: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}\n"] }]
-        }], propDecorators: { first: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], totalRecords: [{
-                type: Input
-            }], rowsPerPageOptions: [{
-                type: Input
-            }], alwaysShow: [{
-                type: Input
-            }], backgroundColor: [{
-                type: Input
-            }], pageChanged: [{
-                type: Output
-            }] } });
-
-class CpsExpansionPanelComponent {
-    constructor() {
-        this.headerTitle = '';
-        this.backgroundColor = 'transparent';
-        this.showChevron = true;
-        this.isExpanded = false;
-        this.disabled = false;
-        this.bordered = true;
-        this.borderRadius = '4px';
-        this.width = '100%';
-        this.prefixIcon = '';
-        this.afterCollapse = new EventEmitter();
-        this.afterExpand = new EventEmitter();
-    }
-    ngOnInit() {
-        this.backgroundColor = getCSSColor(this.backgroundColor);
-        this.borderRadius = convertSize(this.borderRadius);
-        this.width = convertSize(this.width);
-    }
-    toggleExpansion() {
-        if (!this.disabled) {
-            this.isExpanded = !this.isExpanded;
-            if (this.isExpanded) {
-                this.afterExpand.emit();
-            }
-            if (!this.isExpanded) {
-                this.afterCollapse.emit();
-            }
-        }
-    }
-}
-CpsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CpsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsExpansionPanelComponent, isStandalone: true, selector: "cps-expansion-panel", inputs: { headerTitle: "headerTitle", backgroundColor: "backgroundColor", showChevron: "showChevron", isExpanded: "isExpanded", disabled: "disabled", bordered: "bordered", borderRadius: "borderRadius", width: "width", prefixIcon: "prefixIcon" }, outputs: { afterCollapse: "afterCollapse", afterExpand: "afterExpand" }, ngImport: i0, template: "<div\n  class=\"cps-expansion-panel\"\n  [class.expanded]=\"isExpanded\"\n  [class.bordered]=\"bordered\"\n  [ngStyle]=\"{\n    'background-color': backgroundColor,\n    'border-radius': borderRadius,\n    width: width\n  }\">\n  <div\n    class=\"cps-expansion-panel-header\"\n    [ngClass]=\"{ disabled: disabled }\"\n    [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n    (click)=\"toggleExpansion()\">\n    <span class=\"cps-expansion-panel-prefix-icon\" *ngIf=\"prefixIcon\">\n      <cps-icon\n        [icon]=\"prefixIcon\"\n        size=\"small\"\n        [color]=\"disabled ? 'text-mild' : 'text-dark'\">\n      </cps-icon>\n    </span>\n    <div class=\"cps-expansion-panel-title\">{{ headerTitle }}</div>\n    <span class=\"cps-expansion-panel-chevron\" *ngIf=\"showChevron && !disabled\">\n      <cps-icon icon=\"chevron-down\" size=\"small\" color=\"text-dark\"> </cps-icon>\n    </span>\n  </div>\n  <div class=\"cps-expansion-panel-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-expansion-panel{overflow:hidden;font-family:Source Sans Pro,sans-serif;line-height:20px;color:var(--cps-color-text-dark)}:host .cps-expansion-panel.bordered{border:1px solid var(--cps-color-text-lightest)}:host .cps-expansion-panel-header{display:flex;align-items:center;padding:10px 16px;font-size:16px;justify-content:space-between;-webkit-user-select:none;user-select:none}:host .cps-expansion-panel-header:hover{background-color:#f8f4f5}:host .cps-expansion-panel-header:active{background-color:#f1eaec}:host .cps-expansion-panel-header.disabled{pointer-events:none;color:var(--cps-color-text-mild)}:host .cps-expansion-panel-prefix-icon{display:flex;align-items:center;margin-right:12px;margin-bottom:2px}:host .cps-expansion-panel-prefix-icon cps-icon ::ng-deep .cps-icon{width:18px;height:18px}:host .cps-expansion-panel-title{flex:1 0 auto;display:inline-flex}:host .cps-expansion-panel-chevron{width:16px;display:flex;align-items:center;transition-duration:.2s;margin-left:6px}:host .cps-expansion-panel-content{max-height:0;overflow:hidden;display:none;padding:16px;transition:max-height .3s ease;color:var(--cps-color-text-dark);font-size:16px}:host .cps-expansion-panel.expanded.bordered .cps-expansion-panel-header{border-bottom:1px solid var(--cps-color-text-lightest)}:host .cps-expansion-panel.expanded .cps-expansion-panel-content{overflow:auto;padding:16px;max-height:500px;display:block}:host .cps-expansion-panel.expanded .cps-expansion-panel-chevron{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsExpansionPanelComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, imports: [CommonModule, CpsIconComponent], selector: 'cps-expansion-panel', template: "<div\n  class=\"cps-expansion-panel\"\n  [class.expanded]=\"isExpanded\"\n  [class.bordered]=\"bordered\"\n  [ngStyle]=\"{\n    'background-color': backgroundColor,\n    'border-radius': borderRadius,\n    width: width\n  }\">\n  <div\n    class=\"cps-expansion-panel-header\"\n    [ngClass]=\"{ disabled: disabled }\"\n    [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n    (click)=\"toggleExpansion()\">\n    <span class=\"cps-expansion-panel-prefix-icon\" *ngIf=\"prefixIcon\">\n      <cps-icon\n        [icon]=\"prefixIcon\"\n        size=\"small\"\n        [color]=\"disabled ? 'text-mild' : 'text-dark'\">\n      </cps-icon>\n    </span>\n    <div class=\"cps-expansion-panel-title\">{{ headerTitle }}</div>\n    <span class=\"cps-expansion-panel-chevron\" *ngIf=\"showChevron && !disabled\">\n      <cps-icon icon=\"chevron-down\" size=\"small\" color=\"text-dark\"> </cps-icon>\n    </span>\n  </div>\n  <div class=\"cps-expansion-panel-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-expansion-panel{overflow:hidden;font-family:Source Sans Pro,sans-serif;line-height:20px;color:var(--cps-color-text-dark)}:host .cps-expansion-panel.bordered{border:1px solid var(--cps-color-text-lightest)}:host .cps-expansion-panel-header{display:flex;align-items:center;padding:10px 16px;font-size:16px;justify-content:space-between;-webkit-user-select:none;user-select:none}:host .cps-expansion-panel-header:hover{background-color:#f8f4f5}:host .cps-expansion-panel-header:active{background-color:#f1eaec}:host .cps-expansion-panel-header.disabled{pointer-events:none;color:var(--cps-color-text-mild)}:host .cps-expansion-panel-prefix-icon{display:flex;align-items:center;margin-right:12px;margin-bottom:2px}:host .cps-expansion-panel-prefix-icon cps-icon ::ng-deep .cps-icon{width:18px;height:18px}:host .cps-expansion-panel-title{flex:1 0 auto;display:inline-flex}:host .cps-expansion-panel-chevron{width:16px;display:flex;align-items:center;transition-duration:.2s;margin-left:6px}:host .cps-expansion-panel-content{max-height:0;overflow:hidden;display:none;padding:16px;transition:max-height .3s ease;color:var(--cps-color-text-dark);font-size:16px}:host .cps-expansion-panel.expanded.bordered .cps-expansion-panel-header{border-bottom:1px solid var(--cps-color-text-lightest)}:host .cps-expansion-panel.expanded .cps-expansion-panel-content{overflow:auto;padding:16px;max-height:500px;display:block}:host .cps-expansion-panel.expanded .cps-expansion-panel-chevron{transform:rotate(180deg)}\n"] }]
-        }], propDecorators: { headerTitle: [{
-                type: Input
-            }], backgroundColor: [{
-                type: Input
-            }], showChevron: [{
-                type: Input
-            }], isExpanded: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], bordered: [{
-                type: Input
-            }], borderRadius: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], prefixIcon: [{
-                type: Input
-            }], afterCollapse: [{
-                type: Output
-            }], afterExpand: [{
-                type: Output
-            }] } });
-
-class CpsDatepickerComponent {
-    set value(value) {
-        this._value = value;
-        this.stringDate = this._dateToString(value);
+        this.stringDate = this._dateToString(value);
         this.onChange(value);
     }
     get value() {
@@ -4037,7 +3865,7 @@ class CpsDatepickerComponent {
         this.width = '100%';
         this.placeholder = 'MM/DD/YYYY';
         this.hint = '';
-        this.clearable = true;
+        this.clearable = false;
         this.hideDetails = false;
         this.persistentClear = false;
         this.showTodayButton = true;
@@ -4175,6 +4003,9 @@ class CpsDatepickerComponent {
     onSelectCalendarDate(dateVal) {
         this.toggleCalendar(false);
         this._dateToString(dateVal);
+        this.writeValue(dateVal);
+        this.onChange(dateVal);
+        this.valueChanged.emit(dateVal);
     }
     onInputBlur() {
         if (this.isOpened)
@@ -4284,7 +4115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: ['datepickerContainer']
             }] } });
 
-class CpsTextareaComponent {
+class CpsButtonToggleComponent {
     set value(value) {
         this._value = value;
         this.onChange(value);
@@ -4292,34 +4123,20 @@ class CpsTextareaComponent {
     get value() {
         return this._value;
     }
-    constructor(_control, _elementRef) {
+    constructor(_control) {
         this._control = _control;
-        this._elementRef = _elementRef;
         this.label = '';
-        this.placeholder = 'Please enter';
-        this.rows = 5;
-        this.cols = 20;
-        this.autofocus = false;
-        this.hint = '';
+        this.options = [];
+        this.multiple = false;
         this.disabled = false;
-        this.width = '100%';
-        this.clearable = false;
-        this.hideDetails = false;
-        this.persistentClear = false;
-        this.error = '';
-        this.resizable = 'vertical';
+        this.mandatory = true; // at least one of the options is mandatory
         this.infoTooltip = '';
         this.infoTooltipClass = 'cps-tooltip-content';
         this.infoTooltipMaxWidth = '100%';
         this.infoTooltipPersistent = false;
         this.infoTooltipPosition = 'top';
+        this._value = undefined;
         this.valueChanged = new EventEmitter();
-        this.focused = new EventEmitter();
-        this.prefixIconClicked = new EventEmitter();
-        this.blurred = new EventEmitter();
-        this._statusChangesSubscription = new Subscription();
-        this._value = '';
-        this.cvtWidth = '';
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = (event) => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -4329,24 +4146,712 @@ class CpsTextareaComponent {
         }
     }
     ngOnInit() {
-        this.cvtWidth = convertSize(this.width);
-        this._statusChangesSubscription = this._control?.statusChanges?.subscribe(() => {
-            this._checkErrors();
-        });
+        if (this.multiple && !this._value) {
+            this._value = [];
+        }
     }
-    ngOnDestroy() {
-        this._statusChangesSubscription?.unsubscribe();
+    registerOnChange(fn) {
+        this.onChange = fn;
     }
-    _checkErrors() {
-        if (!this._control)
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    updateValueEvent(event) {
+        if (this.disabled)
             return;
-        const errors = this._control?.errors;
-        if (!this._control?.control?.touched || !errors) {
-            this.error = '';
+        const check = event?.target?.checked || false;
+        if (this.mandatory && this.multiple && !check && this.value.length < 2) {
+            event.target.checked = true;
             return;
         }
-        if ('required' in errors) {
-            this.error = 'Field is required';
+        const val = event?.target?.value || undefined;
+        if (this.multiple) {
+            let res = [];
+            if (!check) {
+                res = this.value.filter((v) => !isEqual(v, val));
+            }
+            else {
+                this.options.forEach((o) => {
+                    if (this.value.some((v) => isEqual(v, o.value)) ||
+                        isEqual(val, o.value)) {
+                        res.push(o.value);
+                    }
+                });
+            }
+            this._updateValue(res);
+        }
+        else {
+            if (this.mandatory) {
+                this._updateValue(val); // radio
+            }
+            else {
+                this._updateValue(check ? val : undefined);
+            }
+        }
+    }
+    _updateValue(value) {
+        this.writeValue(value);
+        this.onChange(value);
+        this.valueChanged.emit(value);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonToggleComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        CommonModule,
+                        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"] }]
+        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }]; }, propDecorators: { label: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], mandatory: [{
+                type: Input
+            }], infoTooltip: [{
+                type: Input
+            }], infoTooltipClass: [{
+                type: Input
+            }], infoTooltipMaxWidth: [{
+                type: Input
+            }], infoTooltipPersistent: [{
+                type: Input
+            }], infoTooltipPosition: [{
+                type: Input
+            }], _value: [{
+                type: Input,
+                args: ['value']
+            }], valueChanged: [{
+                type: Output
+            }] } });
+
+class TableColumnFilterConstraintComponent {
+    // eslint-disable-next-line no-useless-constructor
+    constructor(dt) {
+        this.dt = dt;
+        this.categoryOptions = [];
+        this.placeholder = '';
+        this.hasApplyButton = true;
+        this.booleanOptions = [
+            { label: 'True', value: 'true' },
+            { label: 'False', value: 'false' }
+        ];
+        this.categories = [];
+    }
+    ngOnInit() {
+        if (this.type === 'category') {
+            if (this.categoryOptions.length > 0) {
+                this.categories = this.categoryOptions.map((o) => ({
+                    label: o,
+                    value: o
+                }));
+            }
+            else {
+                this.categories =
+                    Array.from(new Set(this.dt.value?.map((v) => v[this.field]) || []))?.map((c) => ({
+                        label: c,
+                        value: c
+                    })) || [];
+            }
+        }
+    }
+    onValueChange(value) {
+        this.filterConstraint.value = value;
+        if (value === '' || !this.hasApplyButton) {
+            this.dt._filter();
+        }
+    }
+    onInputEnterKeyDown(event) {
+        this.dt._filter();
+        event.preventDefault();
+    }
+}
+TableColumnFilterConstraintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterConstraintComponent, deps: [{ token: i1$2.Table }], target: i0.ɵɵFactoryTarget.Component });
+TableColumnFilterConstraintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableColumnFilterConstraintComponent, isStandalone: true, selector: "table-column-filter-constraint", inputs: { type: "type", field: "field", filterConstraint: "filterConstraint", categoryOptions: "categoryOptions", placeholder: "placeholder", hasApplyButton: "hasApplyButton" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n  <cps-input\n    *ngSwitchCase=\"'text'\"\n    [placeholder]=\"placeholder\"\n    [hideDetails]=\"true\"\n    (keydown.enter)=\"onInputEnterKeyDown($event)\"\n    [value]=\"filterConstraint?.value\"\n    (valueChanged)=\"onValueChange($event)\"\n    type=\"text\"></cps-input>\n\n  <cps-input\n    *ngSwitchCase=\"'number'\"\n    [hideDetails]=\"true\"\n    [placeholder]=\"placeholder\"\n    (keydown.enter)=\"onInputEnterKeyDown($event)\"\n    [value]=\"filterConstraint?.value\"\n    (valueChanged)=\"onValueChange($event)\"\n    type=\"number\"></cps-input>\n\n  <cps-button-toggle\n    *ngSwitchCase=\"'boolean'\"\n    [options]=\"booleanOptions\"\n    [value]=\"filterConstraint?.value\"\n    (valueChanged)=\"onValueChange($event)\"\n    [mandatory]=\"false\">\n  </cps-button-toggle>\n\n  <cps-datepicker\n    *ngSwitchCase=\"'date'\"\n    [openOnInputFocus]=\"true\"\n    [hideDetails]=\"true\"\n    [placeholder]=\"placeholder\"\n    [value]=\"filterConstraint?.value\"\n    (keydown.enter)=\"onInputEnterKeyDown($event)\"\n    (valueChanged)=\"onValueChange($event)\">\n  </cps-datepicker>\n\n  <cps-autocomplete\n    *ngSwitchCase=\"'category'\"\n    [placeholder]=\"placeholder\"\n    [options]=\"categories\"\n    [hideDetails]=\"true\"\n    [clearable]=\"true\"\n    [value]=\"filterConstraint?.value\"\n    (valueChanged)=\"onValueChange($event)\"\n    [returnObject]=\"false\"\n    [multiple]=\"true\"></cps-autocomplete>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }, { kind: "component", type: CpsDatepickerComponent, selector: "cps-datepicker", inputs: ["label", "disabled", "width", "placeholder", "hint", "clearable", "hideDetails", "persistentClear", "showTodayButton", "openOnInputFocus", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "minDate", "maxDate", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "options", "multiple", "disabled", "mandatory", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "emptyMessage", "virtualScroll", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterConstraintComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'table-column-filter-constraint', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        CpsInputComponent,
+                        CpsDatepickerComponent,
+                        CpsButtonToggleComponent,
+                        CpsAutocompleteComponent
+                    ], template: "<ng-container [ngSwitch]=\"type\">\n  <cps-input\n    *ngSwitchCase=\"'text'\"\n    [placeholder]=\"placeholder\"\n    [hideDetails]=\"true\"\n    (keydown.enter)=\"onInputEnterKeyDown($event)\"\n    [value]=\"filterConstraint?.value\"\n    (valueChanged)=\"onValueChange($event)\"\n    type=\"text\"></cps-input>\n\n  <cps-input\n    *ngSwitchCase=\"'number'\"\n    [hideDetails]=\"true\"\n    [placeholder]=\"placeholder\"\n    (keydown.enter)=\"onInputEnterKeyDown($event)\"\n    [value]=\"filterConstraint?.value\"\n    (valueChanged)=\"onValueChange($event)\"\n    type=\"number\"></cps-input>\n\n  <cps-button-toggle\n    *ngSwitchCase=\"'boolean'\"\n    [options]=\"booleanOptions\"\n    [value]=\"filterConstraint?.value\"\n    (valueChanged)=\"onValueChange($event)\"\n    [mandatory]=\"false\">\n  </cps-button-toggle>\n\n  <cps-datepicker\n    *ngSwitchCase=\"'date'\"\n    [openOnInputFocus]=\"true\"\n    [hideDetails]=\"true\"\n    [placeholder]=\"placeholder\"\n    [value]=\"filterConstraint?.value\"\n    (keydown.enter)=\"onInputEnterKeyDown($event)\"\n    (valueChanged)=\"onValueChange($event)\">\n  </cps-datepicker>\n\n  <cps-autocomplete\n    *ngSwitchCase=\"'category'\"\n    [placeholder]=\"placeholder\"\n    [options]=\"categories\"\n    [hideDetails]=\"true\"\n    [clearable]=\"true\"\n    [value]=\"filterConstraint?.value\"\n    (valueChanged)=\"onValueChange($event)\"\n    [returnObject]=\"false\"\n    [multiple]=\"true\"></cps-autocomplete>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$2.Table }]; }, propDecorators: { type: [{
+                type: Input
+            }], field: [{
+                type: Input
+            }], filterConstraint: [{
+                type: Input
+            }], categoryOptions: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], hasApplyButton: [{
+                type: Input
+            }] } });
+
+class TableColumnFilterComponent {
+    // eslint-disable-next-line no-useless-constructor
+    constructor(elementRef, dt) {
+        this.elementRef = elementRef;
+        this.dt = dt;
+        this.type = 'text';
+        this.showClearButton = true;
+        this.showApplyButton = true;
+        this.hideOnClear = false;
+        this.maxConstraints = 2;
+        this.categoryOptions = [];
+        this.placeholder = '';
+        this.operator = FilterOperator.AND;
+        this.showMatchModes = true;
+        this.showOperator = true;
+        this.operatorOptions = [
+            { label: 'Match All', value: FilterOperator.AND, info: 'AND' },
+            { label: 'Match Any', value: FilterOperator.OR, info: 'OR' }
+        ];
+        this.matchModeLabels = {
+            startsWith: 'Starts with',
+            contains: 'Contains',
+            notContains: 'Does not contain',
+            endsWith: 'Ends with',
+            equals: 'Equals',
+            notEquals: 'Does not equal',
+            lt: 'Less than',
+            lte: 'Less than or equal to',
+            gt: 'Greater than',
+            gte: 'Greater than or equal to',
+            dateIs: 'Date is',
+            dateIsNot: 'Date is not',
+            dateBefore: 'Date is before',
+            dateAfter: 'Date is after'
+        };
+        this.filterMatchModeOptions = {
+            text: [
+                FilterMatchMode.STARTS_WITH,
+                FilterMatchMode.CONTAINS,
+                FilterMatchMode.NOT_CONTAINS,
+                FilterMatchMode.ENDS_WITH,
+                FilterMatchMode.EQUALS,
+                FilterMatchMode.NOT_EQUALS
+            ],
+            number: [
+                FilterMatchMode.EQUALS,
+                FilterMatchMode.NOT_EQUALS,
+                FilterMatchMode.LESS_THAN,
+                FilterMatchMode.LESS_THAN_OR_EQUAL_TO,
+                FilterMatchMode.GREATER_THAN,
+                FilterMatchMode.GREATER_THAN_OR_EQUAL_TO
+            ],
+            date: [
+                FilterMatchMode.DATE_IS,
+                FilterMatchMode.DATE_IS_NOT,
+                FilterMatchMode.DATE_BEFORE,
+                FilterMatchMode.DATE_AFTER
+            ]
+        };
+    }
+    ngOnInit() {
+        if (!this.dt.filters[this.field]) {
+            this.initFieldFilterConstraint();
+        }
+        if (this.maxConstraints > 1 && this.type !== 'category') {
+            this.showApplyButton = true;
+        }
+        if (this.type === 'boolean') {
+            this.showApplyButton = false;
+        }
+        this.matchModes = this.filterMatchModeOptions[this.type]?.map((key) => {
+            return { label: this.matchModeLabels[key], value: key };
+        });
+    }
+    initFieldFilterConstraint() {
+        const defaultMatchMode = this.getDefaultMatchMode();
+        this.dt.filters[this.field] = [
+            {
+                value: null,
+                matchMode: defaultMatchMode,
+                operator: this.operator
+            }
+        ];
+    }
+    onMenuMatchModeChange(value, filterMeta) {
+        filterMeta.matchMode = value;
+        if (!this.showApplyButton) {
+            this.dt._filter();
+        }
+    }
+    addConstraint() {
+        this.dt.filters[this.field].push({
+            value: null,
+            matchMode: this.getDefaultMatchMode(),
+            operator: this.getDefaultOperator()
+        });
+    }
+    removeConstraint(filterMeta) {
+        this.dt.filters[this.field] = (this.dt.filters[this.field]).filter((meta) => meta !== filterMeta);
+        this.dt._filter();
+    }
+    onOperatorChange(value) {
+        this.dt.filters[this.field].forEach((filterMeta) => {
+            filterMeta.operator = value;
+            this.operator = value;
+        });
+        if (!this.showApplyButton) {
+            this.dt._filter();
+        }
+    }
+    getDefaultMatchMode() {
+        if (this.type === 'text')
+            return FilterMatchMode.STARTS_WITH;
+        else if (this.type === 'number')
+            return FilterMatchMode.EQUALS;
+        else if (this.type === 'date')
+            return FilterMatchMode.DATE_IS;
+        else if (this.type === 'category')
+            return FilterMatchMode.IN;
+        else
+            return FilterMatchMode.CONTAINS;
+    }
+    getDefaultOperator() {
+        return this.dt.filters
+            ? this.dt.filters[this.field][0]
+                .operator
+            : this.operator;
+    }
+    get fieldConstraints() {
+        return this.dt.filters
+            ? this.dt.filters[this.field]
+            : null;
+    }
+    get showRemoveIcon() {
+        return this.fieldConstraints ? this.fieldConstraints.length > 1 : false;
+    }
+    get isShowOperator() {
+        return (this.showOperator &&
+            this.maxConstraints > 1 &&
+            !['boolean', 'category'].includes(this.type));
+    }
+    get isShowAddConstraint() {
+        return (!['boolean', 'category'].includes(this.type) &&
+            this.fieldConstraints &&
+            this.fieldConstraints.length < this.maxConstraints);
+    }
+    hasFilter() {
+        const fieldFilter = this.dt.filters[this.field];
+        if (fieldFilter) {
+            if (Array.isArray(fieldFilter))
+                return !this.dt.isFilterBlank(fieldFilter[0].value);
+            else
+                return !this.dt.isFilterBlank(fieldFilter.value);
+        }
+        return false;
+    }
+    hide() {
+        this.columnFilterMenu.hide();
+    }
+    clearFilter() {
+        this.initFieldFilterConstraint();
+        this.dt._filter();
+        if (this.hideOnClear)
+            this.hide();
+    }
+    applyFilter() {
+        this.dt._filter();
+        this.hide();
+    }
+    onMenuShown() {
+        const parent = this.elementRef?.nativeElement?.parentElement;
+        const className = 'cps-table-col-filter-menu-open';
+        parent.classList.add(className);
+    }
+    onMenuHidden() {
+        const parent = this.elementRef?.nativeElement?.parentElement;
+        const className = 'cps-table-col-filter-menu-open';
+        parent.classList.remove(className);
+    }
+}
+TableColumnFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.Table }], target: i0.ɵɵFactoryTarget.Component });
+TableColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableColumnFilterComponent, isStandalone: true, selector: "table-column-filter", inputs: { field: "field", type: "type", showClearButton: "showClearButton", showApplyButton: "showApplyButton", hideOnClear: "hideOnClear", maxConstraints: "maxConstraints", categoryOptions: "categoryOptions", placeholder: "placeholder" }, viewQueries: [{ propertyName: "columnFilterMenu", first: true, predicate: ["columnFilterMenu"], descendants: true }], ngImport: i0, template: "<div class=\"cps-table-col-filter\">\n  <cps-menu\n    #columnFilterMenu\n    [withArrow]=\"false\"\n    (menuShown)=\"onMenuShown()\"\n    (menuHidden)=\"onMenuHidden()\">\n    <div class=\"cps-table-col-filter-menu-content\">\n      <div\n        class=\"cps-table-col-filter-menu-content-operator\"\n        *ngIf=\"isShowOperator\">\n        <cps-select\n          [hideDetails]=\"true\"\n          [disabled]=\"!fieldConstraints || fieldConstraints.length < 2\"\n          [returnObject]=\"false\"\n          [options]=\"operatorOptions\"\n          [ngModel]=\"operator\"\n          (valueChanged)=\"onOperatorChange($event)\"></cps-select>\n      </div>\n      <div class=\"cps-table-col-filter-menu-content-constraints\">\n        <div\n          *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\"\n          class=\"cps-table-col-filter-menu-content-constraint\">\n          <cps-select\n            *ngIf=\"showMatchModes && matchModes\"\n            class=\"cps-table-col-filter-match-mode-select\"\n            [hideDetails]=\"true\"\n            [returnObject]=\"false\"\n            [options]=\"matchModes\"\n            [ngModel]=\"fieldConstraint.matchMode\"\n            (valueChanged)=\"\n              onMenuMatchModeChange($event, fieldConstraint)\n            \"></cps-select>\n          <table-column-filter-constraint\n            [type]=\"type\"\n            [field]=\"field\"\n            [categoryOptions]=\"categoryOptions\"\n            [filterConstraint]=\"fieldConstraint\"\n            [hasApplyButton]=\"showApplyButton\"\n            [placeholder]=\"placeholder\">\n          </table-column-filter-constraint>\n          <div\n            class=\"cps-table-col-filter-remove-rule-btn\"\n            *ngIf=\"showRemoveIcon\">\n            <cps-button\n              type=\"borderless\"\n              width=\"100%\"\n              size=\"small\"\n              color=\"prepared\"\n              icon=\"delete\"\n              (clicked)=\"removeConstraint(fieldConstraint)\"\n              label=\"Remove condition\">\n            </cps-button>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"cps-table-col-filter-add-rule-btn\"\n        *ngIf=\"isShowAddConstraint\">\n        <cps-button\n          label=\"Add condition\"\n          type=\"borderless\"\n          width=\"100%\"\n          size=\"small\"\n          color=\"surprise\"\n          icon=\"add\"\n          (clicked)=\"addConstraint()\">\n        </cps-button>\n      </div>\n      <div class=\"cps-table-col-filter-buttonbar\">\n        <cps-button\n          *ngIf=\"showClearButton\"\n          (clicked)=\"clearFilter()\"\n          type=\"borderless\"\n          color=\"prepared\"\n          size=\"small\"\n          label=\"Clear\"></cps-button>\n        <cps-button\n          *ngIf=\"showApplyButton\"\n          (clicked)=\"applyFilter()\"\n          color=\"prepared\"\n          size=\"small\"\n          label=\"Apply\"></cps-button>\n      </div>\n    </div>\n  </cps-menu>\n  <cps-icon\n    icon=\"filter-funnel\"\n    size=\"13\"\n    (click)=\"columnFilterMenu.toggle($event)\"\n    class=\"cps-table-col-filter-menu-button\"\n    [ngClass]=\"{\n      'cps-table-col-filter-menu-button-active': hasFilter()\n    }\"\n    >>\n  </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:12px;padding-right:4px}:host .cps-table-col-filter .cps-table-col-filter-menu-button:not(.cps-table-col-filter-menu-button-active):hover{color:var(--cps-color-text-dark)}:host .cps-table-col-filter .cps-table-col-filter-menu-button-active{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content{padding-bottom:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-operator{padding:12px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint{border-bottom:1px solid var(--cps-color-line-mid);padding:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint .cps-table-col-filter-match-mode-select{margin-bottom:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint:last-child{border-bottom:none}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-remove-rule-btn{padding-top:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-add-rule-btn{padding:8px 12px}.cps-table-col-filter-menu-content .cps-table-col-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "containerClass"], outputs: ["menuShown", "menuHidden"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: TableColumnFilterConstraintComponent, selector: "table-column-filter-constraint", inputs: ["type", "field", "filterConstraint", "categoryOptions", "placeholder", "hasApplyButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumnFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'table-column-filter', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        CpsButtonComponent,
+                        CpsMenuComponent,
+                        CpsIconComponent,
+                        CpsSelectComponent,
+                        TableColumnFilterConstraintComponent
+                    ], template: "<div class=\"cps-table-col-filter\">\n  <cps-menu\n    #columnFilterMenu\n    [withArrow]=\"false\"\n    (menuShown)=\"onMenuShown()\"\n    (menuHidden)=\"onMenuHidden()\">\n    <div class=\"cps-table-col-filter-menu-content\">\n      <div\n        class=\"cps-table-col-filter-menu-content-operator\"\n        *ngIf=\"isShowOperator\">\n        <cps-select\n          [hideDetails]=\"true\"\n          [disabled]=\"!fieldConstraints || fieldConstraints.length < 2\"\n          [returnObject]=\"false\"\n          [options]=\"operatorOptions\"\n          [ngModel]=\"operator\"\n          (valueChanged)=\"onOperatorChange($event)\"></cps-select>\n      </div>\n      <div class=\"cps-table-col-filter-menu-content-constraints\">\n        <div\n          *ngFor=\"let fieldConstraint of fieldConstraints; let i = index\"\n          class=\"cps-table-col-filter-menu-content-constraint\">\n          <cps-select\n            *ngIf=\"showMatchModes && matchModes\"\n            class=\"cps-table-col-filter-match-mode-select\"\n            [hideDetails]=\"true\"\n            [returnObject]=\"false\"\n            [options]=\"matchModes\"\n            [ngModel]=\"fieldConstraint.matchMode\"\n            (valueChanged)=\"\n              onMenuMatchModeChange($event, fieldConstraint)\n            \"></cps-select>\n          <table-column-filter-constraint\n            [type]=\"type\"\n            [field]=\"field\"\n            [categoryOptions]=\"categoryOptions\"\n            [filterConstraint]=\"fieldConstraint\"\n            [hasApplyButton]=\"showApplyButton\"\n            [placeholder]=\"placeholder\">\n          </table-column-filter-constraint>\n          <div\n            class=\"cps-table-col-filter-remove-rule-btn\"\n            *ngIf=\"showRemoveIcon\">\n            <cps-button\n              type=\"borderless\"\n              width=\"100%\"\n              size=\"small\"\n              color=\"prepared\"\n              icon=\"delete\"\n              (clicked)=\"removeConstraint(fieldConstraint)\"\n              label=\"Remove condition\">\n            </cps-button>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"cps-table-col-filter-add-rule-btn\"\n        *ngIf=\"isShowAddConstraint\">\n        <cps-button\n          label=\"Add condition\"\n          type=\"borderless\"\n          width=\"100%\"\n          size=\"small\"\n          color=\"surprise\"\n          icon=\"add\"\n          (clicked)=\"addConstraint()\">\n        </cps-button>\n      </div>\n      <div class=\"cps-table-col-filter-buttonbar\">\n        <cps-button\n          *ngIf=\"showClearButton\"\n          (clicked)=\"clearFilter()\"\n          type=\"borderless\"\n          color=\"prepared\"\n          size=\"small\"\n          label=\"Clear\"></cps-button>\n        <cps-button\n          *ngIf=\"showApplyButton\"\n          (clicked)=\"applyFilter()\"\n          color=\"prepared\"\n          size=\"small\"\n          label=\"Apply\"></cps-button>\n      </div>\n    </div>\n  </cps-menu>\n  <cps-icon\n    icon=\"filter-funnel\"\n    size=\"13\"\n    (click)=\"columnFilterMenu.toggle($event)\"\n    class=\"cps-table-col-filter-menu-button\"\n    [ngClass]=\"{\n      'cps-table-col-filter-menu-button-active': hasFilter()\n    }\"\n    >>\n  </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:12px;padding-right:4px}:host .cps-table-col-filter .cps-table-col-filter-menu-button:not(.cps-table-col-filter-menu-button-active):hover{color:var(--cps-color-text-dark)}:host .cps-table-col-filter .cps-table-col-filter-menu-button-active{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content{padding-bottom:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-operator{padding:12px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint{border-bottom:1px solid var(--cps-color-line-mid);padding:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint .cps-table-col-filter-match-mode-select{margin-bottom:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint:last-child{border-bottom:none}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-remove-rule-btn{padding-top:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-add-rule-btn{padding:8px 12px}.cps-table-col-filter-menu-content .cps-table-col-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.Table }]; }, propDecorators: { field: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], showClearButton: [{
+                type: Input
+            }], showApplyButton: [{
+                type: Input
+            }], hideOnClear: [{
+                type: Input
+            }], maxConstraints: [{
+                type: Input
+            }], categoryOptions: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], columnFilterMenu: [{
+                type: ViewChild,
+                args: ['columnFilterMenu']
+            }] } });
+
+class CpsTableColumnFilterDirective {
+    constructor(elementRef, viewContainerRef) {
+        this.elementRef = elementRef;
+        this.viewContainerRef = viewContainerRef;
+        this.filterType = 'text';
+        this.filterShowClearButton = true;
+        this.filterShowApplyButton = true;
+        this.filterHideOnClear = false;
+        this.filterMaxConstraints = 2;
+        this.filterCategoryOptions = [];
+        this.filterPlaceholder = '';
+        this.filterCompRef = this.viewContainerRef.createComponent(TableColumnFilterComponent);
+    }
+    ngOnInit() {
+        this.filterCompRef.setInput('field', this.field);
+        this.filterCompRef.setInput('type', this.filterType);
+        this.filterCompRef.setInput('showClearButton', this.filterShowClearButton);
+        this.filterCompRef.setInput('showApplyButton', this.filterShowApplyButton);
+        this.filterCompRef.setInput('hideOnClear', this.filterHideOnClear);
+        this.filterCompRef.setInput('maxConstraints', this.filterMaxConstraints);
+        this.filterCompRef.setInput('categoryOptions', this.filterCategoryOptions);
+        this.filterCompRef.setInput('placeholder', this.filterPlaceholder);
+        this.elementRef.nativeElement.firstChild.after(this.filterCompRef.location.nativeElement);
+    }
+    ngOnDestroy() {
+        this.filterCompRef.destroy();
+        this.viewContainerRef.clear();
+    }
+}
+CpsTableColumnFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableColumnFilterDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+CpsTableColumnFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: CpsTableColumnFilterDirective, isStandalone: true, selector: "[cpsColFilter]", inputs: { field: ["cpsColFilter", "field"], filterType: "filterType", filterShowClearButton: "filterShowClearButton", filterShowApplyButton: "filterShowApplyButton", filterHideOnClear: "filterHideOnClear", filterMaxConstraints: "filterMaxConstraints", filterCategoryOptions: "filterCategoryOptions", filterPlaceholder: "filterPlaceholder" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableColumnFilterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[cpsColFilter]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { field: [{
+                type: Input,
+                args: ['cpsColFilter']
+            }], filterType: [{
+                type: Input
+            }], filterShowClearButton: [{
+                type: Input
+            }], filterShowApplyButton: [{
+                type: Input
+            }], filterHideOnClear: [{
+                type: Input
+            }], filterMaxConstraints: [{
+                type: Input
+            }], filterCategoryOptions: [{
+                type: Input
+            }], filterPlaceholder: [{
+                type: Input
+            }] } });
+
+class CpsTagComponent {
+    set value(value) {
+        this._value = value;
+        this.onChange(value);
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(_control) {
+        this._control = _control;
+        this.type = 'custom'; // higher precedence over color
+        this.label = '';
+        this.color = '';
+        this.disabled = false;
+        this.selectable = false;
+        this.valueChanged = new EventEmitter();
+        this.classesList = [];
+        this.tagColor = '';
+        this._value = false;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = (event) => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouched = () => { };
+        if (this._control) {
+            this._control.valueAccessor = this;
+        }
+    }
+    ngOnChanges() {
+        this.setClasses();
+    }
+    setClasses() {
+        this.classesList = ['cps-tag'];
+        if (this.selectable) {
+            this.classesList.push('cps-tag--selectable');
+        }
+        if (this.disabled) {
+            this.classesList.push('cps-tag--disabled');
+        }
+        switch (this.type) {
+            case 'security': {
+                this.classesList.push('cps-tag--security');
+                break;
+            }
+            case 'classification': {
+                this.classesList.push('cps-tag--classification');
+                break;
+            }
+            default:
+                if (this.color)
+                    this.tagColor = getCSSColor(this.color);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    toggleSelected() {
+        if (this.disabled || !this.selectable)
+            return;
+        this._updateValue(!this.value);
+    }
+    _updateValue(value) {
+        this.writeValue(value);
+        this.onChange(value);
+        this.valueChanged.emit(value);
+    }
+}
+CpsTagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTagComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+CpsTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsTagComponent, isStandalone: true, selector: "cps-tag", inputs: { type: "type", label: "label", color: "color", disabled: "disabled", selectable: "selectable", value: "value" }, outputs: { valueChanged: "valueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div\n  [ngClass]=\"classesList\"\n  [class.unselected]=\"!value && selectable\"\n  [ngStyle]=\"{ 'border-color': tagColor || 'none' }\"\n  (click)=\"toggleSelected()\">\n  <p>{{ label }}</p>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .cps-tag{min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .cps-tag.cps-tag--security{border-color:var(--cps-color-warn)}:host .cps-tag.cps-tag--classification{border-color:var(--cps-color-info)}:host .cps-tag.cps-tag--selectable{cursor:pointer}:host .cps-tag.cps-tag--selectable:not(:active):not(:disabled){box-shadow:1px 3px 4px #0000001a}:host .cps-tag.cps-tag--disabled{pointer-events:none;border-color:var(--cps-color-line-dark)!important}:host .cps-tag.cps-tag--disabled p{color:var(--cps-color-text-light)}:host .cps-tag.unselected{border-color:var(--cps-color-text-light)!important}:host .cps-tag p{margin:0;font-size:11px;color:var(--cps-color-text-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTagComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule], selector: 'cps-tag', template: "<div\n  [ngClass]=\"classesList\"\n  [class.unselected]=\"!value && selectable\"\n  [ngStyle]=\"{ 'border-color': tagColor || 'none' }\"\n  (click)=\"toggleSelected()\">\n  <p>{{ label }}</p>\n</div>\n", styles: [":host{width:-moz-fit-content;width:fit-content;display:inline-block;-webkit-user-select:none;user-select:none}:host .cps-tag{min-height:25px;align-items:center;padding:0 10px;background-color:#fff;display:inline-flex;cursor:default;border:solid 1px;border-left:solid 4px}:host .cps-tag.cps-tag--security{border-color:var(--cps-color-warn)}:host .cps-tag.cps-tag--classification{border-color:var(--cps-color-info)}:host .cps-tag.cps-tag--selectable{cursor:pointer}:host .cps-tag.cps-tag--selectable:not(:active):not(:disabled){box-shadow:1px 3px 4px #0000001a}:host .cps-tag.cps-tag--disabled{pointer-events:none;border-color:var(--cps-color-line-dark)!important}:host .cps-tag.cps-tag--disabled p{color:var(--cps-color-text-light)}:host .cps-tag.unselected{border-color:var(--cps-color-text-light)!important}:host .cps-tag p{margin:0;font-size:11px;color:var(--cps-color-text-dark)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }]; }, propDecorators: { type: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChanged: [{
+                type: Output
+            }] } });
+
+class CpsPaginatorComponent {
+    constructor() {
+        this.first = 0;
+        this.rows = 0;
+        this.totalRecords = 0;
+        this.rowsPerPageOptions = [];
+        this.alwaysShow = true;
+        this.backgroundColor = 'transparent';
+        this.pageChanged = new EventEmitter();
+        this.rowOptions = [];
+    }
+    ngOnInit() {
+        this.backgroundColor = getCSSColor(this.backgroundColor);
+        if (this.rowsPerPageOptions.length < 1)
+            this.rowsPerPageOptions = [5, 10, 25, 50];
+        if (!this.rows)
+            this.rows = this.rowsPerPageOptions[0];
+        else {
+            if (!this.rowsPerPageOptions.includes(this.rows)) {
+                throw new Error('rowsPerPageOptions must include rows');
+            }
+        }
+        this.rowOptions = this.rowsPerPageOptions.map((v) => ({
+            label: '' + v,
+            value: v
+        }));
+    }
+    onPageChange(event) {
+        this.first = event.first;
+        this.rows = event.rows;
+        this.pageChanged.emit(event);
+    }
+}
+CpsPaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CpsPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsPaginatorComponent, isStandalone: true, selector: "cps-paginator", inputs: { first: "first", rows: "rows", totalRecords: "totalRecords", rowsPerPageOptions: "rowsPerPageOptions", alwaysShow: "alwaysShow", backgroundColor: "backgroundColor" }, outputs: { pageChanged: "pageChanged" }, ngImport: i0, template: "<p-paginator\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [style]=\"{ background: backgroundColor }\"\n  [totalRecords]=\"totalRecords\"\n  [showFirstLastIcon]=\"true\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShow]=\"alwaysShow\"\n  [templateLeft]=\"itemsPerPageTemplate\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n  <div class=\"cps-paginator-itms-per-page\">\n    <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n    <cps-select\n      [options]=\"rowOptions\"\n      [hideDetails]=\"true\"\n      [(ngModel)]=\"rows\"\n      (valueChanged)=\"first = 0\"\n      [returnObject]=\"false\"></cps-select>\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-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-paginator-itms-per-page .cps-select.top-open .cps-select-options{bottom:33px!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-options-option{font-size: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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$3.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "templateLeft", "templateRight", "dropdownAppendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "showPageLinks", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { 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: "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", "value"], outputs: ["valueChanged"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsPaginatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cps-paginator', standalone: true, imports: [CommonModule, PaginatorModule, CpsSelectComponent], template: "<p-paginator\n  (onPageChange)=\"onPageChange($event)\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [style]=\"{ background: backgroundColor }\"\n  [totalRecords]=\"totalRecords\"\n  [showFirstLastIcon]=\"true\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShow]=\"alwaysShow\"\n  [templateLeft]=\"itemsPerPageTemplate\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\">\n</p-paginator>\n\n<ng-template #itemsPerPageTemplate>\n  <div class=\"cps-paginator-itms-per-page\">\n    <span class=\"cps-paginator-items-per-page-title\">Items per page: </span>\n    <cps-select\n      [options]=\"rowOptions\"\n      [hideDetails]=\"true\"\n      [(ngModel)]=\"rows\"\n      (valueChanged)=\"first = 0\"\n      [returnObject]=\"false\"></cps-select>\n  </div>\n</ng-template>\n", styles: [":host ::ng-deep .p-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:.5rem 1rem}:host ::ng-deep .p-paginator-left-content{margin-right:auto}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-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-paginator-itms-per-page .cps-select.top-open .cps-select-options{bottom:33px!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator-left-content .cps-paginator-itms-per-page .cps-select-options-option{font-size: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}\n"] }]
+        }], propDecorators: { first: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], totalRecords: [{
+                type: Input
+            }], rowsPerPageOptions: [{
+                type: Input
+            }], alwaysShow: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], pageChanged: [{
+                type: Output
+            }] } });
+
+class CpsExpansionPanelComponent {
+    constructor() {
+        this.headerTitle = '';
+        this.backgroundColor = 'transparent';
+        this.showChevron = true;
+        this.isExpanded = false;
+        this.disabled = false;
+        this.bordered = true;
+        this.borderRadius = '4px';
+        this.width = '100%';
+        this.prefixIcon = '';
+        this.afterCollapse = new EventEmitter();
+        this.afterExpand = new EventEmitter();
+    }
+    ngOnInit() {
+        this.backgroundColor = getCSSColor(this.backgroundColor);
+        this.borderRadius = convertSize(this.borderRadius);
+        this.width = convertSize(this.width);
+    }
+    toggleExpansion() {
+        if (!this.disabled) {
+            this.isExpanded = !this.isExpanded;
+            if (this.isExpanded) {
+                this.afterExpand.emit();
+            }
+            if (!this.isExpanded) {
+                this.afterCollapse.emit();
+            }
+        }
+    }
+}
+CpsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CpsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CpsExpansionPanelComponent, isStandalone: true, selector: "cps-expansion-panel", inputs: { headerTitle: "headerTitle", backgroundColor: "backgroundColor", showChevron: "showChevron", isExpanded: "isExpanded", disabled: "disabled", bordered: "bordered", borderRadius: "borderRadius", width: "width", prefixIcon: "prefixIcon" }, outputs: { afterCollapse: "afterCollapse", afterExpand: "afterExpand" }, ngImport: i0, template: "<div\n  class=\"cps-expansion-panel\"\n  [class.expanded]=\"isExpanded\"\n  [class.bordered]=\"bordered\"\n  [ngStyle]=\"{\n    'background-color': backgroundColor,\n    'border-radius': borderRadius,\n    width: width\n  }\">\n  <div\n    class=\"cps-expansion-panel-header\"\n    [ngClass]=\"{ disabled: disabled }\"\n    [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n    (click)=\"toggleExpansion()\">\n    <span class=\"cps-expansion-panel-prefix-icon\" *ngIf=\"prefixIcon\">\n      <cps-icon\n        [icon]=\"prefixIcon\"\n        size=\"small\"\n        [color]=\"disabled ? 'text-mild' : 'text-dark'\">\n      </cps-icon>\n    </span>\n    <div class=\"cps-expansion-panel-title\">{{ headerTitle }}</div>\n    <span class=\"cps-expansion-panel-chevron\" *ngIf=\"showChevron && !disabled\">\n      <cps-icon icon=\"chevron-down\" size=\"small\" color=\"text-dark\"> </cps-icon>\n    </span>\n  </div>\n  <div class=\"cps-expansion-panel-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-expansion-panel{overflow:hidden;font-family:Source Sans Pro,sans-serif;line-height:20px;color:var(--cps-color-text-dark)}:host .cps-expansion-panel.bordered{border:1px solid var(--cps-color-text-lightest)}:host .cps-expansion-panel-header{display:flex;align-items:center;padding:10px 16px;font-size:16px;justify-content:space-between;-webkit-user-select:none;user-select:none}:host .cps-expansion-panel-header:hover{background-color:#f8f4f5}:host .cps-expansion-panel-header:active{background-color:#f1eaec}:host .cps-expansion-panel-header.disabled{pointer-events:none;color:var(--cps-color-text-mild)}:host .cps-expansion-panel-prefix-icon{display:flex;align-items:center;margin-right:12px;margin-bottom:2px}:host .cps-expansion-panel-prefix-icon cps-icon ::ng-deep .cps-icon{width:18px;height:18px}:host .cps-expansion-panel-title{flex:1 0 auto;display:inline-flex}:host .cps-expansion-panel-chevron{width:16px;display:flex;align-items:center;transition-duration:.2s;margin-left:6px}:host .cps-expansion-panel-content{max-height:0;overflow:hidden;display:none;padding:16px;transition:max-height .3s ease;color:var(--cps-color-text-dark);font-size:16px}:host .cps-expansion-panel.expanded.bordered .cps-expansion-panel-header{border-bottom:1px solid var(--cps-color-text-lightest)}:host .cps-expansion-panel.expanded .cps-expansion-panel-content{overflow:auto;padding:16px;max-height:500px;display:block}:host .cps-expansion-panel.expanded .cps-expansion-panel-chevron{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsExpansionPanelComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, CpsIconComponent], selector: 'cps-expansion-panel', template: "<div\n  class=\"cps-expansion-panel\"\n  [class.expanded]=\"isExpanded\"\n  [class.bordered]=\"bordered\"\n  [ngStyle]=\"{\n    'background-color': backgroundColor,\n    'border-radius': borderRadius,\n    width: width\n  }\">\n  <div\n    class=\"cps-expansion-panel-header\"\n    [ngClass]=\"{ disabled: disabled }\"\n    [style.cursor]=\"disabled ? 'default' : 'pointer'\"\n    (click)=\"toggleExpansion()\">\n    <span class=\"cps-expansion-panel-prefix-icon\" *ngIf=\"prefixIcon\">\n      <cps-icon\n        [icon]=\"prefixIcon\"\n        size=\"small\"\n        [color]=\"disabled ? 'text-mild' : 'text-dark'\">\n      </cps-icon>\n    </span>\n    <div class=\"cps-expansion-panel-title\">{{ headerTitle }}</div>\n    <span class=\"cps-expansion-panel-chevron\" *ngIf=\"showChevron && !disabled\">\n      <cps-icon icon=\"chevron-down\" size=\"small\" color=\"text-dark\"> </cps-icon>\n    </span>\n  </div>\n  <div class=\"cps-expansion-panel-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .cps-expansion-panel{overflow:hidden;font-family:Source Sans Pro,sans-serif;line-height:20px;color:var(--cps-color-text-dark)}:host .cps-expansion-panel.bordered{border:1px solid var(--cps-color-text-lightest)}:host .cps-expansion-panel-header{display:flex;align-items:center;padding:10px 16px;font-size:16px;justify-content:space-between;-webkit-user-select:none;user-select:none}:host .cps-expansion-panel-header:hover{background-color:#f8f4f5}:host .cps-expansion-panel-header:active{background-color:#f1eaec}:host .cps-expansion-panel-header.disabled{pointer-events:none;color:var(--cps-color-text-mild)}:host .cps-expansion-panel-prefix-icon{display:flex;align-items:center;margin-right:12px;margin-bottom:2px}:host .cps-expansion-panel-prefix-icon cps-icon ::ng-deep .cps-icon{width:18px;height:18px}:host .cps-expansion-panel-title{flex:1 0 auto;display:inline-flex}:host .cps-expansion-panel-chevron{width:16px;display:flex;align-items:center;transition-duration:.2s;margin-left:6px}:host .cps-expansion-panel-content{max-height:0;overflow:hidden;display:none;padding:16px;transition:max-height .3s ease;color:var(--cps-color-text-dark);font-size:16px}:host .cps-expansion-panel.expanded.bordered .cps-expansion-panel-header{border-bottom:1px solid var(--cps-color-text-lightest)}:host .cps-expansion-panel.expanded .cps-expansion-panel-content{overflow:auto;padding:16px;max-height:500px;display:block}:host .cps-expansion-panel.expanded .cps-expansion-panel-chevron{transform:rotate(180deg)}\n"] }]
+        }], propDecorators: { headerTitle: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], showChevron: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], bordered: [{
+                type: Input
+            }], borderRadius: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], prefixIcon: [{
+                type: Input
+            }], afterCollapse: [{
+                type: Output
+            }], afterExpand: [{
+                type: Output
+            }] } });
+
+class CpsTextareaComponent {
+    set value(value) {
+        this._value = value;
+        this.onChange(value);
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(_control, _elementRef) {
+        this._control = _control;
+        this._elementRef = _elementRef;
+        this.label = '';
+        this.placeholder = 'Please enter';
+        this.rows = 5;
+        this.cols = 20;
+        this.autofocus = false;
+        this.hint = '';
+        this.disabled = false;
+        this.width = '100%';
+        this.clearable = false;
+        this.hideDetails = false;
+        this.persistentClear = false;
+        this.error = '';
+        this.resizable = 'vertical';
+        this.infoTooltip = '';
+        this.infoTooltipClass = 'cps-tooltip-content';
+        this.infoTooltipMaxWidth = '100%';
+        this.infoTooltipPersistent = false;
+        this.infoTooltipPosition = 'top';
+        this.valueChanged = new EventEmitter();
+        this.focused = new EventEmitter();
+        this.prefixIconClicked = new EventEmitter();
+        this.blurred = new EventEmitter();
+        this._statusChangesSubscription = new Subscription();
+        this._value = '';
+        this.cvtWidth = '';
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onChange = (event) => { };
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.onTouched = () => { };
+        if (this._control) {
+            this._control.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        this.cvtWidth = convertSize(this.width);
+        this._statusChangesSubscription = this._control?.statusChanges?.subscribe(() => {
+            this._checkErrors();
+        });
+    }
+    ngOnDestroy() {
+        this._statusChangesSubscription?.unsubscribe();
+    }
+    _checkErrors() {
+        if (!this._control)
+            return;
+        const errors = this._control?.errors;
+        if (!this._control?.control?.touched || !errors) {
+            this.error = '';
+            return;
+        }
+        if ('required' in errors) {
+            this.error = 'Field is required';
             return;
         }
         if ('minlength' in errors) {
@@ -4460,132 +4965,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Output
             }] } });
 
-class CpsButtonToggleComponent {
-    set value(value) {
-        this._value = value;
-        this.onChange(value);
-    }
-    get value() {
-        return this._value;
-    }
-    constructor(_control) {
-        this._control = _control;
-        this.label = '';
-        this.options = [];
-        this.multiple = false;
-        this.disabled = false;
-        this.mandatory = true; // at least one of the options is mandatory
-        this.infoTooltip = '';
-        this.infoTooltipClass = 'cps-tooltip-content';
-        this.infoTooltipMaxWidth = '100%';
-        this.infoTooltipPersistent = false;
-        this.infoTooltipPosition = 'top';
-        this._value = undefined;
-        this.valueChanged = new EventEmitter();
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.onChange = (event) => { };
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.onTouched = () => { };
-        if (this._control) {
-            this._control.valueAccessor = this;
-        }
-    }
-    ngOnInit() {
-        if (this.multiple && !this._value) {
-            this._value = [];
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    writeValue(value) {
-        this.value = value;
-    }
-    updateValueEvent(event) {
-        if (this.disabled)
-            return;
-        const check = event?.target?.checked || false;
-        if (this.mandatory && this.multiple && !check && this.value.length < 2) {
-            event.target.checked = true;
-            return;
-        }
-        const val = event?.target?.value || undefined;
-        if (this.multiple) {
-            let res = [];
-            if (!check) {
-                res = this.value.filter((v) => !isEqual(v, val));
-            }
-            else {
-                this.options.forEach((o) => {
-                    if (this.value.some((v) => isEqual(v, o.value)) ||
-                        isEqual(val, o.value)) {
-                        res.push(o.value);
-                    }
-                });
-            }
-            this._updateValue(res);
-        }
-        else {
-            if (this.mandatory) {
-                this._updateValue(val); // radio
-            }
-            else {
-                this._updateValue(check ? val : undefined);
-            }
-        }
-    }
-    _updateValue(value) {
-        this.writeValue(value);
-        this.onChange(value);
-        this.valueChanged.emit(value);
-    }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsButtonToggleComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, imports: [
-                        CommonModule,
-                        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"] }]
-        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
-                    type: Self
-                }, {
-                    type: Optional
-                }] }]; }, propDecorators: { label: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], mandatory: [{
-                type: Input
-            }], infoTooltip: [{
-                type: Input
-            }], infoTooltipClass: [{
-                type: Input
-            }], infoTooltipMaxWidth: [{
-                type: Input
-            }], infoTooltipPersistent: [{
-                type: Input
-            }], infoTooltipPosition: [{
-                type: Input
-            }], _value: [{
-                type: Input,
-                args: ['value']
-            }], valueChanged: [{
-                type: Output
-            }] } });
-
 /*
  * Public API Surface of cps-ui-kit
  */
@@ -4594,5 +4973,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, 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, CpsTableColumnFilterDirective, CpsTableColumnSortableDirective, CpsTableComponent, CpsTagComponent, CpsTextareaComponent, CpsTooltipDirective, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory };
 //# sourceMappingURL=cps-ui-kit.mjs.map