cps-ui-kit 0.24.0 → 0.26.0

package/fesm2015/cps-ui-kit.mjs

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, Self, Optional, Output, ViewChild, Directive, HostListener, Pipe, HostBinding } from '@angular/core';
+import { Component, Input, EventEmitter, Self, Optional, Output, ViewChild, Directive, HostListener, Pipe, HostBinding, Host, ContentChild } from '@angular/core';
 import { Subscription } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -11,9 +11,34 @@ import { VirtualScrollerModule } from 'primeng/virtualscroller';
 import * as i4 from 'primeng/api';
 import * as i3$1 from 'primeng/tree';
 import { TreeModule } from 'primeng/tree';
+import { __rest } from 'tslib';
+import * as i1$1 from 'primeng/table';
+import { TableService, Table, TableModule, SortableColumn, SortIcon } from 'primeng/table';
 import * as i2$1 from 'primeng/calendar';
 import { CalendarModule } from 'primeng/calendar';
 
+const convertSize = (size) => {
+    const res = String(size).trim();
+    if (!res) {
+        return '';
+    }
+    if (/^\d+(\.\d+)?$/i.test(res)) {
+        return res + 'px';
+    }
+    if (/^\d+(\.\d+)?(px|rem|em|%)$/i.test(res)) {
+        return res;
+    }
+    throw new Error(`Invalid size value: ${size}`);
+};
+const parseSize = (size) => {
+    const match = size.match(/^(\d+(?:\.\d+)?)(px|rem|em|%)$/);
+    if (!match)
+        throw new Error(`Invalid size value: ${size}`);
+    const value = parseFloat(match[1]);
+    const unit = match[2];
+    return { value, unit };
+};
+
 const isSameDomain = (styleSheet) => {
     if (!styleSheet.href) {
         return true;
@@ -71,28 +96,6 @@ const getTextColor = (backgroundColor) => {
     }
 };
 
-const convertSize = (size) => {
-    const res = String(size).trim();
-    if (!res) {
-        return '';
-    }
-    if (/^\d+(\.\d+)?$/i.test(res)) {
-        return res + 'px';
-    }
-    if (/^\d+(\.\d+)?(px|rem|em|%)$/i.test(res)) {
-        return res;
-    }
-    throw new Error(`Invalid size value: ${size}`);
-};
-const parseSize = (size) => {
-    const match = size.match(/^(\d+(?:\.\d+)?)(px|rem|em|%)$/);
-    if (!match)
-        throw new Error(`Invalid size value: ${size}`);
-    const value = parseFloat(match[1]);
-    const unit = match[2];
-    return { value, unit };
-};
-
 const iconNames = [
     'access',
     'access-denied',
@@ -2560,6 +2563,279 @@ 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) => {
+            var _a;
+            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 (((_a = pTable._multiSortMeta) === null || _a === void 0 ? void 0 : _a.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$1.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$1.Table, decorators: [{
+                        type: Host
+                    }, {
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }];
+    } });
+
+function tableFactory(tableComponent) {
+    return tableComponent.primengTable;
+}
+class CpsTableComponent {
+    // eslint-disable-next-line no-useless-constructor
+    constructor(cdRef) {
+        this.cdRef = cdRef;
+        this.headers = [];
+        this.data = [];
+        this.columns = []; // combines both headers and data
+        this.striped = true;
+        this.bordered = true;
+        this.size = 'normal';
+        this.selectable = true;
+        this.emptyMessage = 'No data';
+        this.hasToolbar = true;
+        this.toolbarSize = 'normal';
+        this.toolbarTitle = '';
+        this.sortMode = 'multiple';
+        this.customSort = false;
+        this.rowHover = true;
+        this.scrollable = true;
+        this.virtualScroll = false; // works only if scrollable is true
+        // @Input() draggableRows = false; TODO
+        // @Input() columnsToggle = false; TODO
+        // @Input() export = false; TODO
+        /* @Input() */ this.resizableColumns = false; // TODO
+        /* @Input() */ this.reorderableColumns = false; // TODO
+        // TODO CpsTableColumnFilterDirective (type date, text, boolean, range, categories, numeric)
+        this.selectionChanged = new EventEmitter();
+        /**
+         * A function to implement custom sorting. customSort must be true.
+         * @param {any} any - sort meta.
+         * @group Emits
+         */
+        this.customSortFunction = new EventEmitter();
+        this.styleClass = '';
+        this.selectedRows = [];
+        this.virtualScrollItemSize = 0;
+    }
+    ngOnInit() {
+        if (!this.scrollable)
+            this.virtualScroll = false;
+        switch (this.size) {
+            case 'small':
+                this.styleClass = 'p-datatable-sm';
+                break;
+            case 'large':
+                this.styleClass = 'p-datatable-lg';
+                break;
+        }
+        switch (this.toolbarSize) {
+            case 'small':
+                this.styleClass += ' cps-tbar-small';
+                break;
+            case 'normal':
+                this.styleClass += ' cps-tbar-normal';
+                break;
+        }
+        if (this.striped) {
+            this.styleClass += ' p-datatable-striped';
+        }
+        if (this.bordered) {
+            this.styleClass += ' p-datatable-gridlines';
+        }
+    }
+    ngAfterViewInit() {
+        var _a, _b, _c, _d, _e;
+        this.virtualScrollItemSize =
+            ((_e = (_d = (_c = (_b = (_a = this.primengTable) === null || _a === void 0 ? void 0 : _a.el) === null || _b === void 0 ? void 0 : _b.nativeElement) === null || _c === void 0 ? void 0 : _c.querySelector('.p-datatable-tbody')) === null || _d === void 0 ? void 0 : _d.querySelector('tr')) === null || _e === void 0 ? void 0 : _e.clientHeight) || 0;
+        this.cdRef.detectChanges();
+    }
+    onSelectionChanged(selection) {
+        this.selectionChanged.emit(
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        selection.map((_a) => {
+            var { _defaultSortOrder } = _a, rest = __rest(_a, ["_defaultSortOrder"]);
+            return rest;
+        }));
+    }
+    onSortFunction(event) {
+        this.customSortFunction.emit(event);
+    }
+}
+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: { headers: "headers", data: "data", columns: "columns", striped: "striped", bordered: "bordered", size: "size", selectable: "selectable", emptyMessage: "emptyMessage", hasToolbar: "hasToolbar", toolbarSize: "toolbarSize", toolbarTitle: "toolbarTitle", sortMode: "sortMode", customSort: "customSort", rowHover: "rowHover", scrollable: "scrollable", virtualScroll: "virtualScroll" }, outputs: { selectionChanged: "selectionChanged", customSortFunction: "customSortFunction" }, providers: [
+        TableService,
+        {
+            provide: Table,
+            useFactory: tableFactory,
+            // 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 }], viewQueries: [{ propertyName: "primengTable", first: true, predicate: ["primengTable"], descendants: true, static: true }], ngImport: i0, template: "<p-table\n  #primengTable\n  withUnsort\n  [styleClass]=\"styleClass\"\n  [value]=\"data\"\n  [columns]=\"columns\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  [resizableColumns]=\"resizableColumns\"\n  [reorderableColumns]=\"reorderableColumns\"\n  [scrollable]=\"scrollable\"\n  scrollHeight=\"flex\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n  [(selection)]=\"selectedRows\"\n  [metaKeySelection]=\"false\"\n  [rowHover]=\"rowHover\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  (sortFunction)=\"onSortFunction($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      {{ toolbarTitle }}\n    </ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" let-columns>\n    <tr>\n      <th style=\"width: 4rem\" *ngIf=\"selectable\">\n        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n      </th>\n      <ng-container *ngIf=\"headerTemplate\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!headerTemplate\">\n        <th *ngFor=\"let h of headers\">{{ h }}</th>\n      </ng-container>\n    </tr>\n  </ng-template>\n\n  <ng-template pTemplate=\"body\" let-item let-rowIndex=\"rowIndex\">\n    <tr>\n      <td *ngIf=\"selectable\">\n        <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n      </td>\n      <ng-container\n        pTemplate=\"body\"\n        *ngTemplateOutlet=\"\n          bodyTemplate;\n          context: { $implicit: item, rowIndex: rowIndex }\n        \"></ng-container>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td colspan=\"4\">{{ emptyMessage }}</td>\n    </tr>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component,:host ::ng-deep .p-component *{box-sizing:border-box}:host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-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 .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-wrapper{display:inline-flex}: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.143rem;min-width:1.143rem;line-height:1.143rem;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):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-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}\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: "ngmodule", type: TableModule }, { kind: "component", type: i1$1.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: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i1$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: TableUnsortDirective, selector: "[withUnsort]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CpsTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cps-table', standalone: true, imports: [CommonModule, TableModule, TableUnsortDirective], providers: [
+                        TableService,
+                        {
+                            provide: Table,
+                            useFactory: tableFactory,
+                            // eslint-disable-next-line no-use-before-define
+                            deps: [CpsTableComponent]
+                        }
+                    ], template: "<p-table\n  #primengTable\n  withUnsort\n  [styleClass]=\"styleClass\"\n  [value]=\"data\"\n  [columns]=\"columns\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  [resizableColumns]=\"resizableColumns\"\n  [reorderableColumns]=\"reorderableColumns\"\n  [scrollable]=\"scrollable\"\n  scrollHeight=\"flex\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{ numToleratedItems: 3 }\"\n  [(selection)]=\"selectedRows\"\n  [metaKeySelection]=\"false\"\n  [rowHover]=\"rowHover\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  (sortFunction)=\"onSortFunction($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      {{ toolbarTitle }}\n    </ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" let-columns>\n    <tr>\n      <th style=\"width: 4rem\" *ngIf=\"selectable\">\n        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n      </th>\n      <ng-container *ngIf=\"headerTemplate\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!headerTemplate\">\n        <th *ngFor=\"let h of headers\">{{ h }}</th>\n      </ng-container>\n    </tr>\n  </ng-template>\n\n  <ng-template pTemplate=\"body\" let-item let-rowIndex=\"rowIndex\">\n    <tr>\n      <td *ngIf=\"selectable\">\n        <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n      </td>\n      <ng-container\n        pTemplate=\"body\"\n        *ngTemplateOutlet=\"\n          bodyTemplate;\n          context: { $implicit: item, rowIndex: rowIndex }\n        \"></ng-container>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td colspan=\"4\">{{ emptyMessage }}</td>\n    </tr>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component,:host ::ng-deep .p-component *{box-sizing:border-box}:host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-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 .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-wrapper{display:inline-flex}: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.143rem;min-width:1.143rem;line-height:1.143rem;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):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-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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { headers: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], striped: [{
+                type: Input
+            }], bordered: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], emptyMessage: [{
+                type: Input
+            }], hasToolbar: [{
+                type: Input
+            }], toolbarSize: [{
+                type: Input
+            }], toolbarTitle: [{
+                type: Input
+            }], sortMode: [{
+                type: Input
+            }], customSort: [{
+                type: Input
+            }], rowHover: [{
+                type: Input
+            }], scrollable: [{
+                type: Input
+            }], virtualScroll: [{
+                type: Input
+            }], selectionChanged: [{
+                type: Output
+            }], customSortFunction: [{
+                type: Output
+            }], toolbarTemplate: [{
+                type: ContentChild,
+                args: ['toolbar', { static: false }]
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: ['header', { static: false }]
+            }], bodyTemplate: [{
+                type: ContentChild,
+                args: ['body', { static: false }]
+            }], primengTable: [{
+                type: ViewChild,
+                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: i1$1.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$1.Table }]; }, propDecorators: { field: [{
+                type: Input,
+                args: ['cpsColSortable']
+            }] } });
+
 class CpsTagComponent {
     set value(value) {
         this._value = value;
@@ -3273,5 +3549,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, CpsInputComponent, CpsLoaderComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTagComponent, CpsTextareaComponent, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames };
+export { CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsDatepickerComponent, CpsExpansionPanelComponent, CpsIconComponent, CpsInputComponent, CpsLoaderComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsSelectComponent, CpsTableColumnSortableDirective, CpsTableComponent, CpsTagComponent, CpsTextareaComponent, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory };
 //# sourceMappingURL=cps-ui-kit.mjs.map