cps-ui-kit 17.28.0 → 17.29.0

package/fesm2022/cps-ui-kit.mjs

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, Inject, Input, Directive, HostListener, EventEmitter, Self, Optional, Output, ViewChild, Pipe, PLATFORM_ID, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, InjectionToken, Host, ContentChild, ViewChildren, RendererStyleFlags2, TemplateRef, ContentChildren, input, computed, createComponent, createEnvironmentInjector, Injectable, SkipSelf } from '@angular/core';
+import { Component, Inject, Input, Directive, HostListener, EventEmitter, Self, Optional, Output, ViewChild, Pipe, PLATFORM_ID, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, InjectionToken, Host, ViewChildren, ContentChild, RendererStyleFlags2, TemplateRef, ContentChildren, input, computed, createComponent, createEnvironmentInjector, Injectable, SkipSelf } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule, Validators, ReactiveFormsModule } from '@angular/forms';
 import { isEqual, cloneDeep } from 'lodash-es';
@@ -19,7 +19,7 @@ import * as i3$1 from 'primeng/tree';
 import { TreeModule } from 'primeng/tree';
 import { Subject, takeUntil, debounceTime, distinctUntilChanged, fromEvent, Subscription, take, catchError, of } from 'rxjs';
 import * as i1$3 from 'primeng/table';
-import { SortableColumn, TableService, Table, TableModule, TableHeaderCheckbox, TableCheckbox } from 'primeng/table';
+import { SortableColumn, Table, TableService, TableModule, TableHeaderCheckbox, TableCheckbox } from 'primeng/table';
 import * as i2$1 from 'primeng/treetable';
 import { TTSortableColumn, TTHeaderCheckbox, TTCheckbox, TreeTableToggler, TreeTableService, TreeTable, TreeTableModule } from 'primeng/treetable';
 import * as i2$2 from 'primeng/calendar';
@@ -5456,2278 +5456,2343 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                     type: Optional
                 }] }] });
 
-// import jsPDF from 'jspdf';
-// import 'jspdf-autotable';
-function tableFactory(tableComponent) {
-    return tableComponent.primengTable;
-}
+/* eslint-disable no-unused-vars */
 /**
- * CpsTableComponent displays data in tabular format.
+ * CpsColumnFilterMatchMode is used to define how the filter value should be matched.
+ * @group Enums
+ */
+var CpsColumnFilterMatchMode;
+(function (CpsColumnFilterMatchMode) {
+    CpsColumnFilterMatchMode["STARTS_WITH"] = "startsWith";
+    CpsColumnFilterMatchMode["CONTAINS"] = "contains";
+    CpsColumnFilterMatchMode["NOT_CONTAINS"] = "notContains";
+    CpsColumnFilterMatchMode["ENDS_WITH"] = "endsWith";
+    CpsColumnFilterMatchMode["EQUALS"] = "equals";
+    CpsColumnFilterMatchMode["NOT_EQUALS"] = "notEquals";
+    CpsColumnFilterMatchMode["IN"] = "in";
+    CpsColumnFilterMatchMode["LESS_THAN"] = "lt";
+    CpsColumnFilterMatchMode["LESS_THAN_OR_EQUAL_TO"] = "lte";
+    CpsColumnFilterMatchMode["GREATER_THAN"] = "gt";
+    CpsColumnFilterMatchMode["GREATER_THAN_OR_EQUAL_TO"] = "gte";
+    CpsColumnFilterMatchMode["BETWEEN"] = "between";
+    CpsColumnFilterMatchMode["IS"] = "is";
+    CpsColumnFilterMatchMode["IS_NOT"] = "isNot";
+    CpsColumnFilterMatchMode["BEFORE"] = "before";
+    CpsColumnFilterMatchMode["AFTER"] = "after";
+    CpsColumnFilterMatchMode["DATE_IS"] = "dateIs";
+    CpsColumnFilterMatchMode["DATE_IS_NOT"] = "dateIsNot";
+    CpsColumnFilterMatchMode["DATE_BEFORE"] = "dateBefore";
+    CpsColumnFilterMatchMode["DATE_AFTER"] = "dateAfter";
+})(CpsColumnFilterMatchMode || (CpsColumnFilterMatchMode = {}));
+
+/**
+ * CpsDatepickerComponent is an input component to provide date input.
  * @group Components
  */
-class CpsTableComponent {
+class CpsDatepickerComponent {
     /**
-     * An array of objects to display.
-     * @default []
+     * Value of the datepicker.
+     * @default null
      * @group Props
      */
-    set data(value) {
-        this._data = [...value];
+    set value(value) {
+        this._value = value;
+        this.stringDate = this._dateToString(value);
+        this.onChange(value);
     }
-    get data() {
-        return this._data;
+    get value() {
+        return this._value;
     }
-    // eslint-disable-next-line no-useless-constructor
-    constructor(cdRef, document) {
-        this.cdRef = cdRef;
-        this.document = document;
-        /**
-         * An array of objects to represent dynamic columns.
-         * @group Props
-         */
-        this.columns = [];
-        /**
-         * A key used to retrieve the header from columns.
-         * @group Props
-         */
-        this.colHeaderName = 'header';
-        /**
-         * A key used to retrieve the field from columns.
-         * @group Props
-         */
-        this.colFieldName = 'field';
-        /**
-         * Determines whether the table should have alternating stripes.
-         * @group Props
-         */
-        this.striped = true;
-        /**
-         * Determines whether the table should have borders.
-         * @group Props
-         */
-        this.bordered = true;
-        /**
-         * Size of table cells, it can be "small", "normal" or "large".
-         * @group Props
-         */
-        this.size = 'normal';
-        /**
-         * Determines whether the table should have row selection.
-         * @group Props
-         */
-        this.selectable = false;
-        /**
-         * Determines whether the table should have rows highlighting on hover.
-         * @group Props
-         */
-        this.rowHover = true;
-        /**
-         * Field, that uniquely identifies a record in data (needed for expandable rows).
-         * @group Props
-         */
-        this.dataKey = '';
-        /**
-         * Determines whether the table should show row menus.
-         * @group Props
-         */
-        this.showRowMenu = false;
-        /**
-         * Determines whether the 'Remove' button should be displayed in the row menu.
-         * Note: This setting only takes effect if 'showRowMenu' is true.
-         * @group Props
-         */
-        this.showRowRemoveButton = true;
-        /**
-         * Determines whether the 'Edit' button should be displayed in the row menu.
-         * Note: This setting only takes effect if 'showRowMenu' is true.
-         * @group Props
-         */
-        this.showRowEditButton = true;
-        /**
-         * Determines whether the table should have re-orderable rows.
-         * @group Props
-         */
-        this.reorderableRows = false;
-        /**
-         * When enabled, a loader component is displayed.
-         * @group Props
-         */
-        this.loading = false;
-        /**
-         * Inline style of the table.
-         * @group Props
-         */
-        this.tableStyle = undefined;
-        /**
-         * Style class of the table.
-         * @group Props
-         */
-        this.tableStyleClass = '';
-        /**
-         * Makes all columns sortable if columns prop is provided.
-         * @group Props
-         */
-        this.sortable = false;
-        /**
-         * Determines whether sorting works on single column or on multiple columns.
-         * @group Props
-         */
-        this.sortMode = 'single';
-        /**
-         * Determines whether to use the default sorting or a custom one using sortFunction.
-         * @group Props
-         */
-        this.customSort = false;
-        /**
-         * Determines whether the table has a toolbar.
-         * @group Props
-         */
-        this.hasToolbar = true;
-        /**
-         * Toolbar size, it can be "small" or "normal".
-         * @group Props
-         */
-        this.toolbarSize = 'normal';
-        /**
-         * Toolbar title.
-         * @group Props
-         */
-        this.toolbarTitle = '';
-        /**
-         * Toolbar icon name.
-         * @group Props
-         */
-        this.toolbarIcon = '';
-        /**
-         * Toolbar icon color.
-         * @group Props
-         */
-        this.toolbarIconColor = '';
-        /**
-         * Makes table scrollable.
-         * @group Props
-         */
-        this.scrollable = true;
+    constructor(_control) {
+        this._control = _control;
         /**
-         * Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size.
+         * Label of the datepicker element.
          * @group Props
          */
-        this.scrollHeight = '';
+        this.label = '';
         /**
-         * Determines whether only the elements within scrollable area should be added into the DOM. Works only if scrollable prop is true.
+         * Determines whether datepicker is disabled.
          * @group Props
          */
-        this.virtualScroll = false;
+        this.disabled = false;
         /**
-         * Determines how many additional elements to add to the DOM outside of the view.
+         * Width of the datepicker of type number denoting pixels or string.
          * @group Props
          */
-        this.numToleratedItems = 10;
+        this.width = '100%';
         /**
-         * Determines whether the table should have paginator.
+         * Placeholder text.
          * @group Props
          */
-        this.paginator = false;
+        this.placeholder = 'MM/DD/YYYY';
         /**
-         * Determines whether to show paginator even if there is only one page.
+         * Bottom hint text for the input field.
          * @group Props
          */
-        this.alwaysShowPaginator = true;
+        this.hint = '';
         /**
-         * Array of integer values to display inside rows per page dropdown of paginator.
+         * When enabled, a clear icon is displayed to clear the value.
          * @group Props
          */
-        this.rowsPerPageOptions = [];
+        this.clearable = false;
         /**
-         * Index of the first row to be displayed.
+         * Hides hint and validation errors.
          * @group Props
          */
-        this.first = 0;
+        this.hideDetails = false;
         /**
-         * Number of rows to display per page.
+         * Determines whether the component should have persistent clear icon.
          * @group Props
          */
-        this.rows = 0;
+        this.persistentClear = false;
         /**
-         * Determines whether to reset page on rows change.
+         * Determines whether to show button to be able to select today's date.
          * @group Props
          */
-        this.resetPageOnRowsChange = false;
+        this.showTodayButton = true;
         /**
-         * Determines whether to reset page on table data sorting.
+         * Determines whether the datepicker dropdown should open on input focus.
          * @group Props
          */
-        this.resetPageOnSort = true;
+        this.openOnInputFocus = false;
         /**
-         * Number of total records.
+         * When it is not an empty string, an info icon is displayed to show text for more info.
          * @group Props
          */
-        this.totalRecords = 0;
+        this.infoTooltip = '';
         /**
-         * Text to display when there is no data.
+         * InfoTooltip class for styling.
          * @group Props
          */
-        this.emptyMessage = 'No data';
+        this.infoTooltipClass = 'cps-tooltip-content';
         /**
-         * Height of table's body when there is no data, of type number denoting pixels or string.
+         * Size of infoTooltip, of type number denoting pixels or string.
          * @group Props
          */
-        this.emptyBodyHeight = '';
+        this.infoTooltipMaxWidth = '100%';
         /**
-         * Defines if data is loaded and interacted with in lazy manner.
+         * Determines whether the infoTooltip is persistent.
          * @group Props
          */
-        this.lazy = false;
+        this.infoTooltipPersistent = false;
         /**
-         * Determines whether to call lazy loading on initialization.
+         * Position of infoTooltip, it can be "top", "bottom", "left" or "right".
          * @group Props
          */
-        this.lazyLoadOnInit = true;
+        this.infoTooltipPosition = 'top';
         /**
-         * Determines whether to show global filter in the toolbar.
+         * Styling appearance of datepicker input, it can be 'outlined', 'underlined' or 'borderless.
          * @group Props
          */
-        this.showGlobalFilter = false;
+        this.appearance = 'outlined';
         /**
-         * Global filter placeholder.
-         * @group Props
+         * Callback to invoke on value change.
+         * @param {Date | null} value - value change.
+         * @group Emits
          */
-        this.globalFilterPlaceholder = 'Search';
-        /**
-         * An array of fields to use in global filtering.
-         * @group Props
-         */
-        this.globalFilterFields = [];
-        /**
-         * Determines whether to clear global filter on data loading.
-         * @group Props
-         */
-        this.clearGlobalFilterOnLoading = false;
-        /**
-         * Determines whether to show remove button in the toolbar when rows are selected.
-         * @group Props
-         */
-        this.showRemoveBtnOnSelect = true;
-        /**
-         * Determines whether removeBtnOnSelect is disabled.
-         * @group Props
-         */
-        this.removeBtnOnSelectDisabled = false;
-        /**
-         * Determines whether to show additional button in the toolbar when rows are selected.
-         * @group Props
-         */
-        this.showAdditionalBtnOnSelect = false;
-        /**
-         * AdditionalBtnOnSelect title.
-         * @group Props
-         */
-        this.additionalBtnOnSelectTitle = 'Select action';
-        /**
-         * AdditionalBtnOnSelect icon.
-         * @group Props
-         */
-        this.additionalBtnOnSelectIcon = '';
-        /**
-         * Determines whether additionalBtnOnSelect is disabled.
-         * @group Props
-         */
-        this.additionalBtnOnSelectDisabled = false;
-        /**
-         * Determines whether to show action button in the toolbar.
-         * @group Props
-         */
-        this.showActionBtn = false;
-        /**
-         * Action button title.
-         * @group Props
-         */
-        this.actionBtnTitle = 'Action';
-        /**
-         * Action button icon.
-         * @group Props
-         */
-        this.actionBtnIcon = '';
-        /**
-         * Determines whether actionBtn is disabled.
-         * @group Props
-         */
-        this.actionBtnDisabled = false;
-        /**
-         * Determines whether to show export button in the toolbar.
-         * @group Props
-         */
-        this.showExportBtn = false;
-        /**
-         * Determines whether exportBtn is disabled.
-         * @group Props
-         */
-        this.exportBtnDisabled = false;
-        /**
-         * Name of the exported file.
-         * @group Props
-         */
-        this.exportFilename = 'download';
-        /**
-         * Character to use as the csv separator.
-         * @group Props
-         */
-        this.csvSeparator = ',';
-        /**
-         * Determines whether to show data reload button in the toolbar.
-         * @group Props
-         */
-        this.showDataReloadBtn = false;
-        /**
-         * Determines whether dataReloadBtn is disabled.
-         * @group Props
-         */
-        this.dataReloadBtnDisabled = false;
-        /**
-         * Determines whether the table should show columnsToggle menu, where you can choose which columns to be displayed. If external body template is provided, use columnsSelected event emitter.
-         * @group Props
-         */
-        this.showColumnsToggleBtn = false;
-        /**
-         * Determines whether columnsToggle button is disabled.
-         * @group Props
-         */
-        this.columnsToggleBtnDisabled = false;
-        /**
-         * Array of initial columns to show in the table. If not provided, all columns are initially visible.
-         * @group Props
-         */
-        this.initialColumns = [];
-        /**
-         * Callback to invoke on selection changed. Returns selected rows.
-         * @param {any[]} any[] - selected rows.
-         * @group Emits
-         */
-        this.rowsSelected = new EventEmitter();
-        /**
-         * Callback to invoke on selection changed. Returns selected rows indexes.
-         * @param {number[]} number[] - selected rows indexes.
-         * @group Emits
-         */
-        this.selectedRowIndexes = new EventEmitter();
-        /**
-         * Callback to invoke when action button is clicked.
-         * @param {void} void - action button clicked.
-         * @group Emits
-         */
-        this.actionBtnClicked = new EventEmitter();
-        /**
-         * Callback to invoke when edit-row button is clicked.
-         * @param {{row: any, index: number}} {row: any, index: number} - edit-row button clicked.
-         * @group Emits
-         */
-        this.editRowBtnClicked = new EventEmitter();
-        /**
-         * Callback to invoke on rows removal. Returns rows.
-         * @param {any[]} any[] - array of rows to remove.
-         * @group Emits
-         */
-        this.rowsToRemove = new EventEmitter();
-        /**
-         * Callback to invoke on rows removal. Returns rows indexes.
-         * @param {number[]} number[] - array of indexes of rows to remove.
-         * @group Emits
-         */
-        this.rowIndexesToRemove = new EventEmitter();
-        /**
-         * Callback to invoke on page changed.
-         * @param {any} any - page changed.
-         * @group Emits
-         */
-        this.pageChanged = new EventEmitter();
-        /**
-         * Callback to invoke when data is sorted.
-         * @param {any} any - sort meta.
-         * @group Emits
-         */
-        this.sorted = new EventEmitter();
-        /**
-         * Callback to invoke when data is filtered.
-         * @param {any} any - custom filtering event.
-         * @group Emits
-         */
-        this.filtered = new EventEmitter();
-        /**
-         * Callback to invoke when rows are reordered.
-         * @param {any} any - rows reordered.
-         * @group Emits
-         */
-        this.rowsReordered = new EventEmitter();
-        /**
-         * Callback to invoke on columns selection.
-         * @param {object} object - selected column.
-         * @group Emits
-         */
-        this.columnsSelected = new EventEmitter();
-        /**
-         * Callback to invoke when paging, sorting or filtering happens in lazy mode.
-         * @param {any} any - custom lazy loading event.
-         * @group Emits
-         */
-        this.lazyLoaded = new EventEmitter();
-        /**
-         * Callback to invoke when data-reload button is clicked.
-         * @param {any} any - button clicked.
-         * @group Emits
-         */
-        this.dataReloadBtnClicked = new EventEmitter();
-        /**
-         * Callback to invoke when additional button on select is clicked.
-         * @param {any[]} any[] - selected data.
-         * @group Emits
-         */
-        this.additionalBtnOnSelectClicked = new EventEmitter();
-        /**
-         * A function to implement custom sorting. customSort must be true.
-         * @param {any} any - sort meta.
-         * @group Emits
-         */
-        this.customSortFunction = new EventEmitter();
-        this._data = [];
-        this.selectedRows = [];
-        this.virtualScrollItemSize = 0;
-        this.rowOptions = [];
-        this.selectedColumns = [];
-        this.exportMenuItems = [
-            {
-                title: 'CSV',
-                icon: 'csv',
-                action: () => {
-                    this.exportTable('csv');
-                }
-            },
-            {
-                title: 'XLSX',
-                icon: 'xls',
-                action: () => {
-                    this.exportTable('xlsx');
-                }
-            }
-            // {
-            //   title: 'PDF',
-            //   icon: 'pdf',
-            //   action: () => {
-            //     this.exportTable('pdf');
-            //   }
-            // }
-        ];
-    }
-    ngOnInit() {
-        this.emptyBodyHeight = convertSize(this.emptyBodyHeight);
-        if (!this.scrollable)
-            this.virtualScroll = false;
-        if (this.showAdditionalBtnOnSelect)
-            this.showRemoveBtnOnSelect = false;
-        if (this.paginator) {
-            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
-            }));
-        }
-        if (this.showGlobalFilter &&
-            this.globalFilterFields?.length < 1 &&
-            this.data?.length > 0) {
-            this.globalFilterFields = Object.keys(this.data[0]);
-        }
-        this.selectedColumns =
-            this.initialColumns.length > 0 ? this.initialColumns : this.columns;
-    }
-    get styleClass() {
-        const classesList = [];
-        switch (this.size) {
-            case 'small':
-                classesList.push('p-datatable-sm');
-                break;
-            case 'large':
-                classesList.push('p-datatable-lg');
-                break;
-        }
-        if (this.hasToolbar) {
-            switch (this.toolbarSize) {
-                case 'small':
-                    classesList.push('cps-tbar-small');
-                    break;
-                case 'normal':
-                    classesList.push('cps-tbar-normal');
-                    break;
-            }
-        }
-        if (this.striped) {
-            classesList.push('p-datatable-striped');
-        }
-        if (this.bordered) {
-            classesList.push('p-datatable-gridlines');
-        }
-        return classesList.join(' ');
-    }
-    ngAfterViewChecked() {
-        if (!this.virtualScroll || this.virtualScrollItemSize)
-            return;
-        this.virtualScrollItemSize =
-            this.primengTable?.el?.nativeElement
-                ?.querySelector('.p-datatable-tbody')
-                ?.querySelector('tr')?.clientHeight || 0;
-        this.cdRef.detectChanges();
-    }
-    ngOnChanges(changes) {
-        if (this.loading) {
-            this.clearSelection();
-            if (this.clearGlobalFilterOnLoading)
-                this.clearGlobalFilter();
-        }
-        if (changes?.data) {
-            this.resetSortingState();
-            this.selectedRows = this.selectedRows.filter((sr) => this.data.includes(sr));
+        this.valueChanged = new EventEmitter();
+        this.stringDate = '';
+        this.isOpened = false;
+        this.error = '';
+        this.cvtWidth = '';
+        this._value = null;
+        // 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;
         }
     }
-    resetSortingState() {
-        this.tUnsortDirective?.resetDefaultSortOrder();
-    }
-    clearSelection() {
-        this.selectedRows = [];
-    }
-    clearGlobalFilter() {
-        this.globalFilterComp?.clear();
-    }
-    onSelectionChanged(selection) {
-        this.rowsSelected.emit(selection);
-        const indexes = this._getIndexes(selection);
-        this.selectedRowIndexes.emit(indexes);
-    }
-    onSortFunction(event) {
-        this.customSortFunction.emit(event);
-    }
-    onFilterGlobal(value) {
-        this.primengTable.filterGlobal(value, 'contains');
+    ngOnInit() {
+        this.cvtWidth = convertSize(this.width);
+        this._statusChangesSubscription = this._control?.statusChanges?.subscribe(() => {
+            this._checkErrors();
+        });
     }
-    removeSelected() {
-        this.rowsToRemove.emit(this.selectedRows);
-        const indexes = this._getIndexes(this.selectedRows);
-        this.rowIndexesToRemove.emit(indexes);
+    ngOnDestroy() {
+        this._statusChangesSubscription?.unsubscribe();
     }
-    onClickAdditionalBtnOnSelect() {
-        this.additionalBtnOnSelectClicked.emit(this.selectedRows);
+    registerOnChange(fn) {
+        this.onChange = fn;
     }
-    onClickActionBtn() {
-        this.actionBtnClicked.emit();
+    registerOnTouched(fn) {
+        this.onTouched = fn;
     }
-    onRowsPerPageChanged() {
-        if (this.resetPageOnRowsChange) {
-            this.primengTable.first = 0;
+    onInputValueChanged(val) {
+        this.stringDate = val;
+        if (!val) {
+            this._updateValue(null);
+            return;
         }
-        this.changePage(this.getPage());
+        const dt = this._stringToDate(val);
+        if (dt)
+            this._updateValue(dt);
     }
-    getPageCount() {
-        return Math.ceil(this.primengTable.totalRecords / this.rows);
+    writeValue(value) {
+        this.value = value;
     }
-    getPage() {
-        return this.primengTable.first
-            ? Math.floor(this.primengTable.first / this.rows)
-            : 0;
+    _updateValue(value) {
+        if (this.value === value)
+            return;
+        this.writeValue(value);
+        this.onChange(value);
+        this.valueChanged.emit(value);
     }
-    changePage(p) {
-        const pc = Math.ceil(this.getPageCount());
-        if (p >= 0 && p < pc) {
-            this.first = this.rows * p;
-            this.primengTable.onPageChange({ first: this.first, rows: this.rows });
+    _updateValueFromInputString() {
+        if (!this.stringDate) {
+            this._updateValue(null);
+        }
+        else {
+            this._updateValue(this._stringToDate(this.stringDate));
         }
     }
-    onPageChange(event) {
-        this.first = event.first;
-        this.rows = event.rows;
-        const state = {
-            page: this.getPage(),
-            first: this.first,
-            rows: this.rows,
-            pageCount: Math.ceil(this.getPageCount())
-        };
-        this.pageChanged.emit(state);
-    }
-    toggleAllColumns() {
-        this.selectedColumns =
-            this.selectedColumns.length < this.columns.length ? this.columns : [];
-        this.columnsSelected.emit(this.selectedColumns);
-    }
-    isColumnSelected(col) {
-        return this.selectedColumns.some((item) => isEqual(item, col));
+    _checkDateFormat(dateString) {
+        if (!/^\d\d\/\d\d\/\d\d\d\d$/.test(dateString)) {
+            return false;
+        }
+        const parts = dateString.split('/').map((p) => parseInt(p, 10));
+        parts[0] -= 1;
+        const d = new Date(parts[2], parts[0], parts[1]);
+        return (d.getMonth() === parts[0] &&
+            d.getDate() === parts[1] &&
+            d.getFullYear() === parts[2]);
     }
-    onSelectColumn(col) {
-        let res = [];
-        if (this.isColumnSelected(col)) {
-            res = this.selectedColumns.filter((v) => !isEqual(v, col));
+    _checkDateInRange(date, minDate, maxDate) {
+        if (!minDate && !maxDate)
+            return true;
+        if (minDate && maxDate) {
+            return (date.getTime() >= minDate.getTime() &&
+                date.getTime() <= maxDate.getTime());
         }
-        else {
-            this.columns.forEach((o) => {
-                if (this.selectedColumns.some((v) => isEqual(v, o)) ||
-                    isEqual(col, o)) {
-                    res.push(o);
-                }
-            });
+        if (minDate) {
+            return date.getTime() >= minDate.getTime();
         }
-        this.selectedColumns = res;
-        this.columnsSelected.emit(this.selectedColumns);
-    }
-    onEditRowClicked(row) {
-        const [index] = this._getIndexes([row]);
-        this.editRowBtnClicked.emit({ row, index });
+        return date.getTime() <= maxDate.getTime();
     }
-    onRemoveRowClicked(item) {
-        this.rowsToRemove.emit([item]);
-        const indexes = this._getIndexes([item]);
-        this.rowIndexesToRemove.emit(indexes);
+    _dateToString(dateVal) {
+        if (!dateVal)
+            return '';
+        let month = '' + (dateVal.getMonth() + 1);
+        if (month.length < 2)
+            month = '0' + month;
+        let day = '' + dateVal.getDate();
+        if (day.length < 2)
+            day = '0' + day;
+        const year = dateVal.getFullYear();
+        return `${month}/${day}/${year}`;
     }
-    onSort(event) {
-        this.sorted.emit(event);
+    _stringToDate(dateString) {
+        if (!this._checkDateFormat(dateString))
+            return null;
+        const [month, day, year] = dateString.split('/');
+        const dt = new Date(`${year}-${month}-${day}`);
+        const inRange = this._checkDateInRange(dt, this.minDate, this.maxDate);
+        return inRange ? dt : null;
     }
-    onFilter(event) {
-        this.filtered.emit(event);
+    _checkErrors() {
+        if (this.stringDate && !this._stringToDate(this.stringDate)) {
+            this.error = 'Date is invalid';
+            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;
+        }
+        const errArr = Object.values(errors);
+        if (errArr.length < 1) {
+            this.error = '';
+            return;
+        }
+        const message = errArr.find((msg) => typeof msg === 'string');
+        this.error = message || 'Unknown error';
     }
-    onRowReorder(event) {
-        this.rowsReordered.emit(event);
+    onClearCalendarDate() {
+        this.onSelectCalendarDate(null);
     }
-    onLazyLoaded(event) {
-        this.lazyLoaded.emit(event);
+    onSelectCalendarDate(dateVal) {
+        this.toggleCalendar(false);
+        this.writeValue(dateVal);
+        this.onChange(dateVal);
+        this.valueChanged.emit(dateVal);
     }
-    onReloadData() {
-        if (this.dataReloadBtnDisabled)
+    onInputBlur() {
+        if (this.isOpened)
             return;
-        this.dataReloadBtnClicked.emit();
+        this._updateValueFromInputString();
+        this._checkErrors();
     }
-    onExportData(event) {
-        if (this.exportBtnDisabled)
-            return;
-        this.exportMenu?.toggle(event);
+    onInputFocus() {
+        this._control?.control?.markAsTouched();
+        if (this.openOnInputFocus)
+            this.toggleCalendar(true);
     }
-    onColumnsToggle(event) {
-        if (this.columnsToggleBtnDisabled)
+    onInputEnterClicked() {
+        if (!this.isOpened)
             return;
-        this.colToggleMenu?.toggle(event);
-    }
-    _getIndexes(rows) {
-        let indexes = rows.map((row) => this.primengTable.value.indexOf(row));
-        const indexesMap = this.tUnsortDirective?.sortIndices;
-        if (indexesMap && indexesMap.length > 0) {
-            indexes = indexes.map((i) => indexesMap.indexOf(i));
-        }
-        return indexes;
-    }
-    exportTable(format) {
-        if (this.columns.length < 1)
-            throw new Error('Columns must be defined!');
-        if (this.selectedColumns.length < 1)
-            throw new Error('Nothing to export!');
-        switch (format) {
-            case 'csv':
-                this.primengTable.exportCSV();
-                break;
-            case 'xlsx':
-                this.exportXLSX();
-                break;
-            // case 'pdf':
-            //   this.exportPDF();
-            //   break;
-        }
-    }
-    exportXLSX() {
-        import('xlsx').then((xlsx) => {
-            const sheetData = [
-                this.selectedColumns.map((c) => c[this.colHeaderName]),
-                ...this.primengTable.value.map((item) => this.selectedColumns.map((c) => item[c[this.colFieldName]]))
-            ];
-            const worksheet = xlsx.utils.json_to_sheet(sheetData, {
-                skipHeader: true
-            });
-            const workbook = {
-                Sheets: { [this.exportFilename]: worksheet },
-                SheetNames: [this.exportFilename]
-            };
-            const xlsxBuffer = xlsx.write(workbook, {
-                bookType: 'xlsx',
-                type: 'array'
-            });
-            const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
-            const blob = new Blob([xlsxBuffer], {
-                type: EXCEL_TYPE
-            });
-            const downloadLink = this.document.createElement('a');
-            downloadLink.href = URL.createObjectURL(blob);
-            downloadLink.download = `${this.exportFilename}.xlsx`;
-            downloadLink.click();
-        });
+        this._control?.control?.markAsTouched();
+        this._updateValueFromInputString();
+        this._checkErrors();
+        this.toggleCalendar(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsTableComponent, isStandalone: true, selector: "cps-table", inputs: { columns: "columns", colHeaderName: "colHeaderName", colFieldName: "colFieldName", striped: "striped", bordered: "bordered", size: "size", selectable: "selectable", rowHover: "rowHover", dataKey: "dataKey", showRowMenu: "showRowMenu", showRowRemoveButton: "showRowRemoveButton", showRowEditButton: "showRowEditButton", reorderableRows: "reorderableRows", loading: "loading", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", sortable: "sortable", sortMode: "sortMode", customSort: "customSort", hasToolbar: "hasToolbar", toolbarSize: "toolbarSize", toolbarTitle: "toolbarTitle", toolbarIcon: "toolbarIcon", toolbarIconColor: "toolbarIconColor", scrollable: "scrollable", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", paginator: "paginator", alwaysShowPaginator: "alwaysShowPaginator", rowsPerPageOptions: "rowsPerPageOptions", first: "first", rows: "rows", resetPageOnRowsChange: "resetPageOnRowsChange", resetPageOnSort: "resetPageOnSort", totalRecords: "totalRecords", emptyMessage: "emptyMessage", emptyBodyHeight: "emptyBodyHeight", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", showGlobalFilter: "showGlobalFilter", globalFilterPlaceholder: "globalFilterPlaceholder", globalFilterFields: "globalFilterFields", clearGlobalFilterOnLoading: "clearGlobalFilterOnLoading", showRemoveBtnOnSelect: "showRemoveBtnOnSelect", removeBtnOnSelectDisabled: "removeBtnOnSelectDisabled", showAdditionalBtnOnSelect: "showAdditionalBtnOnSelect", additionalBtnOnSelectTitle: "additionalBtnOnSelectTitle", additionalBtnOnSelectIcon: "additionalBtnOnSelectIcon", additionalBtnOnSelectDisabled: "additionalBtnOnSelectDisabled", showActionBtn: "showActionBtn", actionBtnTitle: "actionBtnTitle", actionBtnIcon: "actionBtnIcon", actionBtnDisabled: "actionBtnDisabled", showExportBtn: "showExportBtn", exportBtnDisabled: "exportBtnDisabled", exportFilename: "exportFilename", csvSeparator: "csvSeparator", showDataReloadBtn: "showDataReloadBtn", dataReloadBtnDisabled: "dataReloadBtnDisabled", showColumnsToggleBtn: "showColumnsToggleBtn", columnsToggleBtnDisabled: "columnsToggleBtnDisabled", initialColumns: "initialColumns", data: "data" }, outputs: { rowsSelected: "rowsSelected", selectedRowIndexes: "selectedRowIndexes", actionBtnClicked: "actionBtnClicked", editRowBtnClicked: "editRowBtnClicked", rowsToRemove: "rowsToRemove", rowIndexesToRemove: "rowIndexesToRemove", pageChanged: "pageChanged", sorted: "sorted", filtered: "filtered", rowsReordered: "rowsReordered", columnsSelected: "columnsSelected", lazyLoaded: "lazyLoaded", dataReloadBtnClicked: "dataReloadBtnClicked", additionalBtnOnSelectClicked: "additionalBtnOnSelectClicked", 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: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }, { propertyName: "rowExpansionTemplate", first: true, predicate: ["rowexpansion"], descendants: true }], viewQueries: [{ propertyName: "primengTable", first: true, predicate: ["primengTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "exportMenu", first: true, predicate: ["exportMenu"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }, { propertyName: "tUnsortDirective", first: true, predicate: ["tUnsortDirective"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-table\n  #primengTable\n  #tUnsortDirective=\"tWithUnsort\"\n  tWithUnsort\n  [ngClass]=\"{ 'cps-table-loading': loading }\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [value]=\"data\"\n  [dataKey]=\"dataKey\"\n  [columns]=\"selectedColumns\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [showInitialSortBadge]=\"false\"\n  [loading]=\"loading\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [lazy]=\"lazy\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  [(selection)]=\"selectedRows\"\n  [metaKeySelection]=\"false\"\n  [rowHover]=\"rowHover\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [exportFilename]=\"exportFilename\"\n  [csvSeparator]=\"csvSeparator\"\n  (onPage)=\"onPageChange($event)\"\n  (onLazyLoad)=\"onLazyLoaded($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onSort)=\"onSort($event)\"\n  (onFilter)=\"onFilter($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 *ngIf=\"toolbarIcon\" class=\"cps-table-tbar-icon\">\n          <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n        </div>\n        <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n        <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n          <cps-input\n            #globalFilterComp\n            prefixIcon=\"search\"\n            [placeholder]=\"globalFilterPlaceholder\"\n            (valueChanged)=\"onFilterGlobal($event)\"\n            [clearable]=\"true\"\n            [disabled]=\"loading\"\n            [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\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-btn-on-select\">\n          <cps-button\n            label=\"Remove\"\n            [disabled]=\"removeBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            icon=\"remove\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"removeSelected()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-table-tbar-btn-on-select\">\n          <cps-button\n            [label]=\"additionalBtnOnSelectTitle\"\n            [disabled]=\"additionalBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            [icon]=\"additionalBtnOnSelectIcon\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickAdditionalBtnOnSelect()\">\n          </cps-button>\n        </div>\n        <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n          <cps-button\n            [label]=\"actionBtnTitle\"\n            [disabled]=\"actionBtnDisabled\"\n            color=\"prepared\"\n            type=\"outlined\"\n            [icon]=\"actionBtnIcon\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickActionBtn()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n          class=\"cps-table-tbar-coltoggle-btn\"\n          [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n          <cps-icon\n            icon=\"columns\"\n            size=\"normal\"\n            [color]=\"\n              columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n            \"\n            (click)=\"onColumnsToggle($event)\"></cps-icon>\n          <cps-menu #colToggleMenu [withArrow]=\"false\">\n            <div class=\"cps-table-coltoggle-menu\">\n              <div\n                class=\"cps-table-coltoggle-menu-item select-all-option\"\n                [class.allselected]=\"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\n          *ngIf=\"showExportBtn\"\n          class=\"cps-table-tbar-export-btn\"\n          [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n          <cps-icon\n            icon=\"export\"\n            size=\"20\"\n            [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n            (click)=\"onExportData($event)\"></cps-icon>\n          <cps-menu\n            #exportMenu\n            [items]=\"exportMenuItems\"\n            [compressed]=\"true\"\n            [withArrow]=\"false\">\n          </cps-menu>\n        </div>\n        <div\n          *ngIf=\"showDataReloadBtn\"\n          class=\"cps-table-tbar-reload-btn\"\n          [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n          <cps-icon\n            icon=\"refresh\"\n            size=\"18\"\n            [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n            (click)=\"onReloadData()\">\n          </cps-icon>\n        </div>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n    <ng-container\n      *ngTemplateOutlet=\"\n        nestedHeaderTemplate;\n        context: {\n          $implicit: columns\n        }\n      \"></ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n    <tr>\n      <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n      <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n      <th style=\"width: 4rem\" *ngIf=\"selectable\">\n        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n      </th>\n      <ng-container *ngIf=\"headerTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            headerTemplate;\n            context: {\n              $implicit: columns\n            }\n          \"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n        <ng-container *ngIf=\"sortable\">\n          <th *ngFor=\"let col of columns\" [cpsTColSortable]=\"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 && (showRowRemoveButton || showRowEditButton)\"></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          *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\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n        class=\"cps-table-row-menu-cell\">\n        <table-row-menu\n          (editRowBtnClicked)=\"onEditRowClicked(item)\"\n          (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"\n          [showRowRemoveButton]=\"showRowRemoveButton\"\n          [showRowEditButton]=\"showRowEditButton\">\n        </table-row-menu>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n    <tr class=\"cps-table-row-expanded-content\">\n      <td colspan=\"100\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            rowExpansionTemplate;\n            context: {\n              $implicit: item\n            }\n          \"></ng-container>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-table-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-title{cursor:default}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-datatable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(2n){background:#fff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody .cps-table-row-expanded-content td{border-left:4px solid var(--cps-color-surprise)!important}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#fff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#fff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-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-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-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;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-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:var(--cps-color-highlight-hover);border-color:unset}: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:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-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:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:#fff}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-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 .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "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", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$3.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i1$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$3.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$3.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: TableUnsortDirective, selector: "[tWithUnsort]", exportAs: ["tWithUnsort"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", inputs: ["showRowRemoveButton", "showRowEditButton"], outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "directive", type: CpsTableColumnSortableDirective, selector: "[cpsTColSortable]", inputs: ["cpsTColSortable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cps-table', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        FormsModule,
-                        CommonModule,
-                        TableModule,
-                        TableUnsortDirective,
-                        CpsInputComponent,
-                        CpsButtonComponent,
-                        CpsSelectComponent,
-                        CpsIconComponent,
-                        CpsMenuComponent,
-                        CpsLoaderComponent,
-                        TableRowMenuComponent,
-                        CpsTableColumnSortableDirective
-                    ], providers: [
-                        TableService,
-                        {
-                            provide: Table,
-                            useFactory: tableFactory,
-                            // eslint-disable-next-line no-use-before-define
-                            deps: [CpsTableComponent]
-                        }
-                    ], template: "<p-table\n  #primengTable\n  #tUnsortDirective=\"tWithUnsort\"\n  tWithUnsort\n  [ngClass]=\"{ 'cps-table-loading': loading }\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [value]=\"data\"\n  [dataKey]=\"dataKey\"\n  [columns]=\"selectedColumns\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [showInitialSortBadge]=\"false\"\n  [loading]=\"loading\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [lazy]=\"lazy\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  [(selection)]=\"selectedRows\"\n  [metaKeySelection]=\"false\"\n  [rowHover]=\"rowHover\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [exportFilename]=\"exportFilename\"\n  [csvSeparator]=\"csvSeparator\"\n  (onPage)=\"onPageChange($event)\"\n  (onLazyLoad)=\"onLazyLoaded($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onSort)=\"onSort($event)\"\n  (onFilter)=\"onFilter($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 *ngIf=\"toolbarIcon\" class=\"cps-table-tbar-icon\">\n          <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n        </div>\n        <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n        <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n          <cps-input\n            #globalFilterComp\n            prefixIcon=\"search\"\n            [placeholder]=\"globalFilterPlaceholder\"\n            (valueChanged)=\"onFilterGlobal($event)\"\n            [clearable]=\"true\"\n            [disabled]=\"loading\"\n            [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\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-btn-on-select\">\n          <cps-button\n            label=\"Remove\"\n            [disabled]=\"removeBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            icon=\"remove\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"removeSelected()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-table-tbar-btn-on-select\">\n          <cps-button\n            [label]=\"additionalBtnOnSelectTitle\"\n            [disabled]=\"additionalBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            [icon]=\"additionalBtnOnSelectIcon\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickAdditionalBtnOnSelect()\">\n          </cps-button>\n        </div>\n        <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n          <cps-button\n            [label]=\"actionBtnTitle\"\n            [disabled]=\"actionBtnDisabled\"\n            color=\"prepared\"\n            type=\"outlined\"\n            [icon]=\"actionBtnIcon\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickActionBtn()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n          class=\"cps-table-tbar-coltoggle-btn\"\n          [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n          <cps-icon\n            icon=\"columns\"\n            size=\"normal\"\n            [color]=\"\n              columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n            \"\n            (click)=\"onColumnsToggle($event)\"></cps-icon>\n          <cps-menu #colToggleMenu [withArrow]=\"false\">\n            <div class=\"cps-table-coltoggle-menu\">\n              <div\n                class=\"cps-table-coltoggle-menu-item select-all-option\"\n                [class.allselected]=\"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\n          *ngIf=\"showExportBtn\"\n          class=\"cps-table-tbar-export-btn\"\n          [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n          <cps-icon\n            icon=\"export\"\n            size=\"20\"\n            [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n            (click)=\"onExportData($event)\"></cps-icon>\n          <cps-menu\n            #exportMenu\n            [items]=\"exportMenuItems\"\n            [compressed]=\"true\"\n            [withArrow]=\"false\">\n          </cps-menu>\n        </div>\n        <div\n          *ngIf=\"showDataReloadBtn\"\n          class=\"cps-table-tbar-reload-btn\"\n          [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n          <cps-icon\n            icon=\"refresh\"\n            size=\"18\"\n            [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n            (click)=\"onReloadData()\">\n          </cps-icon>\n        </div>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n    <ng-container\n      *ngTemplateOutlet=\"\n        nestedHeaderTemplate;\n        context: {\n          $implicit: columns\n        }\n      \"></ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n    <tr>\n      <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n      <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n      <th style=\"width: 4rem\" *ngIf=\"selectable\">\n        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n      </th>\n      <ng-container *ngIf=\"headerTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            headerTemplate;\n            context: {\n              $implicit: columns\n            }\n          \"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n        <ng-container *ngIf=\"sortable\">\n          <th *ngFor=\"let col of columns\" [cpsTColSortable]=\"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 && (showRowRemoveButton || showRowEditButton)\"></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          *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\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n        class=\"cps-table-row-menu-cell\">\n        <table-row-menu\n          (editRowBtnClicked)=\"onEditRowClicked(item)\"\n          (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"\n          [showRowRemoveButton]=\"showRowRemoveButton\"\n          [showRowEditButton]=\"showRowEditButton\">\n        </table-row-menu>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n    <tr class=\"cps-table-row-expanded-content\">\n      <td colspan=\"100\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            rowExpansionTemplate;\n            context: {\n              $implicit: item\n            }\n          \"></ng-container>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-table-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-title{cursor:default}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-datatable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(2n){background:#fff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody .cps-table-row-expanded-content td{border-left:4px solid var(--cps-color-surprise)!important}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#fff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#fff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-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-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-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;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-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:var(--cps-color-highlight-hover);border-color:unset}: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:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-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:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:#fff}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-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 .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { columns: [{
-                type: Input
-            }], colHeaderName: [{
-                type: Input
-            }], colFieldName: [{
-                type: Input
-            }], striped: [{
-                type: Input
-            }], bordered: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], selectable: [{
-                type: Input
-            }], rowHover: [{
-                type: Input
-            }], dataKey: [{
-                type: Input
-            }], showRowMenu: [{
-                type: Input
-            }], showRowRemoveButton: [{
-                type: Input
-            }], showRowEditButton: [{
-                type: Input
-            }], reorderableRows: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], tableStyle: [{
-                type: Input
-            }], tableStyleClass: [{
-                type: Input
-            }], sortable: [{
-                type: Input
-            }], sortMode: [{
-                type: Input
-            }], customSort: [{
-                type: Input
-            }], hasToolbar: [{
-                type: Input
-            }], toolbarSize: [{
-                type: Input
-            }], toolbarTitle: [{
-                type: Input
-            }], toolbarIcon: [{
-                type: Input
-            }], toolbarIconColor: [{
-                type: Input
-            }], scrollable: [{
-                type: Input
-            }], scrollHeight: [{
-                type: Input
-            }], virtualScroll: [{
-                type: Input
-            }], numToleratedItems: [{
-                type: Input
-            }], paginator: [{
-                type: Input
-            }], alwaysShowPaginator: [{
-                type: Input
-            }], rowsPerPageOptions: [{
-                type: Input
-            }], first: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], resetPageOnRowsChange: [{
+    onClickCalendarIcon() {
+        if (this.disabled)
+            return;
+        if (this.isOpened)
+            this._updateValueFromInputString();
+        this.toggleCalendar();
+    }
+    onBeforeCalendarHidden() {
+        if (this.disabled || !this.isOpened)
+            return;
+        this._updateValueFromInputString();
+        this.toggleCalendar(false);
+    }
+    onInputClear() {
+        if (this.isOpened)
+            this.focusInput();
+    }
+    onCalendarContentClick() {
+        if (this.isOpened)
+            this.focusInput();
+    }
+    focusInput() {
+        this.datepickerInput.focus();
+    }
+    toggleCalendar(show) {
+        if (this.disabled || this.isOpened === show)
+            return;
+        const target = this.datepickerInput.elementRef.nativeElement.querySelector('.cps-input-wrap');
+        if (typeof show === 'boolean') {
+            if (show) {
+                this.calendarMenu.show({
+                    target
+                });
+            }
+            else {
+                this.calendarMenu.hide();
+            }
+        }
+        else {
+            this.calendarMenu.toggle({
+                target
+            });
+        }
+        this.isOpened = this.calendarMenu.isVisible();
+        if (!this.isOpened) {
+            this._control?.control?.markAsTouched();
+            this._checkErrors();
+        }
+        else {
+            this.focusInput();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsDatepickerComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsDatepickerComponent, isStandalone: true, selector: "cps-datepicker", inputs: { label: "label", disabled: "disabled", width: "width", placeholder: "placeholder", hint: "hint", clearable: "clearable", hideDetails: "hideDetails", persistentClear: "persistentClear", showTodayButton: "showTodayButton", openOnInputFocus: "openOnInputFocus", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", minDate: "minDate", maxDate: "maxDate", value: "value" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["datepickerInput"], descendants: true }, { propertyName: "calendarMenu", first: true, predicate: ["calendarMenu"], descendants: true }], ngImport: i0, template: "<div\n  class=\"cps-datepicker\"\n  [ngStyle]=\"{ width: cvtWidth }\"\n  [class.focused]=\"isOpened\">\n  <cps-input\n    #datepickerInput\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    prefixIcon=\"datepicker\"\n    [placeholder]=\"placeholder\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\n    (valueChanged)=\"onInputValueChanged($event)\"\n    [clearable]=\"clearable\"\n    (blurred)=\"onInputBlur()\"\n    (cleared)=\"onInputClear()\"\n    (enterClicked)=\"onInputEnterClicked()\"\n    [width]=\"width\"\n    [hint]=\"hint\"\n    [hideDetails]=\"hideDetails\"\n    [infoTooltip]=\"infoTooltip\"\n    [infoTooltipClass]=\"infoTooltipClass\"\n    [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n    [infoTooltipPersistent]=\"infoTooltipPersistent\"\n    [persistentClear]=\"persistentClear\"\n    [appearance]=\"appearance\"\n    [error]=\"error\"></cps-input>\n  <cps-menu\n    #calendarMenu\n    [withArrow]=\"false\"\n    (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n    (contentClicked)=\"onCalendarContentClick()\"\n    [focusOnShow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    containerClass=\"cps-datepicker-calendar-menu\">\n    <div class=\"cps-datepicker-calendar\">\n      <p-calendar\n        [(ngModel)]=\"value\"\n        [showIcon]=\"true\"\n        [showButtonBar]=\"showTodayButton\"\n        [inline]=\"true\"\n        (onSelect)=\"onSelectCalendarDate($event)\"\n        (onClearClick)=\"onClearCalendarDate()\"\n        [showOtherMonths]=\"false\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\">\n      </p-calendar>\n    </div>\n  </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep input{border:1px solid var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#fff;color:var(--cps-color-text-darkest);border:1px solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#fff;font-weight:600;margin:0;border-bottom:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-lightest);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-prepared)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}.cps-datepicker-calendar ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::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:1rem;font-family:Source Sans Pro,sans-serif;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-button:active{background-color:var(--cps-color-highlight-selected)}.cps-datepicker-calendar ::ng-deep .p-button .p-button-label{font-weight:700}.cps-datepicker-calendar ::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}\n"], dependencies: [{ kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$2.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        CpsInputComponent,
+                        CalendarModule,
+                        CommonModule,
+                        FormsModule,
+                        CpsMenuComponent
+                    ], selector: 'cps-datepicker', template: "<div\n  class=\"cps-datepicker\"\n  [ngStyle]=\"{ width: cvtWidth }\"\n  [class.focused]=\"isOpened\">\n  <cps-input\n    #datepickerInput\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    prefixIcon=\"datepicker\"\n    [placeholder]=\"placeholder\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\n    (valueChanged)=\"onInputValueChanged($event)\"\n    [clearable]=\"clearable\"\n    (blurred)=\"onInputBlur()\"\n    (cleared)=\"onInputClear()\"\n    (enterClicked)=\"onInputEnterClicked()\"\n    [width]=\"width\"\n    [hint]=\"hint\"\n    [hideDetails]=\"hideDetails\"\n    [infoTooltip]=\"infoTooltip\"\n    [infoTooltipClass]=\"infoTooltipClass\"\n    [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n    [infoTooltipPersistent]=\"infoTooltipPersistent\"\n    [persistentClear]=\"persistentClear\"\n    [appearance]=\"appearance\"\n    [error]=\"error\"></cps-input>\n  <cps-menu\n    #calendarMenu\n    [withArrow]=\"false\"\n    (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n    (contentClicked)=\"onCalendarContentClick()\"\n    [focusOnShow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    containerClass=\"cps-datepicker-calendar-menu\">\n    <div class=\"cps-datepicker-calendar\">\n      <p-calendar\n        [(ngModel)]=\"value\"\n        [showIcon]=\"true\"\n        [showButtonBar]=\"showTodayButton\"\n        [inline]=\"true\"\n        (onSelect)=\"onSelectCalendarDate($event)\"\n        (onClearClick)=\"onClearCalendarDate()\"\n        [showOtherMonths]=\"false\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\">\n      </p-calendar>\n    </div>\n  </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep input{border:1px solid var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#fff;color:var(--cps-color-text-darkest);border:1px solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#fff;font-weight:600;margin:0;border-bottom:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-lightest);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-prepared)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}.cps-datepicker-calendar ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::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:1rem;font-family:Source Sans Pro,sans-serif;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-button:active{background-color:var(--cps-color-highlight-selected)}.cps-datepicker-calendar ::ng-deep .p-button .p-button-label{font-weight:700}.cps-datepicker-calendar ::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}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }], propDecorators: { label: [{
                 type: Input
-            }], resetPageOnSort: [{
+            }], disabled: [{
                 type: Input
-            }], totalRecords: [{
+            }], width: [{
                 type: Input
-            }], emptyMessage: [{
+            }], placeholder: [{
                 type: Input
-            }], emptyBodyHeight: [{
+            }], hint: [{
                 type: Input
-            }], lazy: [{
+            }], clearable: [{
                 type: Input
-            }], lazyLoadOnInit: [{
+            }], hideDetails: [{
                 type: Input
-            }], showGlobalFilter: [{
+            }], persistentClear: [{
                 type: Input
-            }], globalFilterPlaceholder: [{
+            }], showTodayButton: [{
                 type: Input
-            }], globalFilterFields: [{
+            }], openOnInputFocus: [{
                 type: Input
-            }], clearGlobalFilterOnLoading: [{
+            }], infoTooltip: [{
                 type: Input
-            }], showRemoveBtnOnSelect: [{
+            }], infoTooltipClass: [{
                 type: Input
-            }], removeBtnOnSelectDisabled: [{
+            }], infoTooltipMaxWidth: [{
                 type: Input
-            }], showAdditionalBtnOnSelect: [{
+            }], infoTooltipPersistent: [{
                 type: Input
-            }], additionalBtnOnSelectTitle: [{
+            }], infoTooltipPosition: [{
                 type: Input
-            }], additionalBtnOnSelectIcon: [{
+            }], appearance: [{
                 type: Input
-            }], additionalBtnOnSelectDisabled: [{
+            }], minDate: [{
                 type: Input
-            }], showActionBtn: [{
+            }], maxDate: [{
                 type: Input
-            }], actionBtnTitle: [{
+            }], value: [{
                 type: Input
-            }], actionBtnIcon: [{
+            }], valueChanged: [{
+                type: Output
+            }], datepickerInput: [{
+                type: ViewChild,
+                args: ['datepickerInput']
+            }], calendarMenu: [{
+                type: ViewChild,
+                args: ['calendarMenu']
+            }] } });
+
+/**
+ * CpsButtonToggleComponent is used to select values using buttons.
+ * @group Components
+ */
+class CpsButtonToggleComponent {
+    set value(value) {
+        this._value = value;
+        this.onChange(value);
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(_control, document, renderer) {
+        this._control = _control;
+        this.document = document;
+        this.renderer = renderer;
+        /**
+         * Label of the toggle buttons.
+         * @group Props
+         */
+        this.label = '';
+        /**
+         * An array of options.
+         * @group Props
+         */
+        this.options = [];
+        /**
+         * Specifies if multiple values can be selected.
+         * @group Props
+         */
+        this.multiple = false;
+        /**
+         * Specifies that the component should be disabled.
+         * @group Props
+         */
+        this.disabled = false;
+        /**
+         * Determines whether at least one of the options is mandatory.
+         * @group Props
+         */
+        this.mandatory = true;
+        /**
+         * Determines whether all buttons should have equal widths.
+         * @group Props
+         */
+        this.equalWidths = true;
+        /**
+         * Position of the option tooltip, can be 'top', 'bottom', 'left' or 'right'.
+         * @group Props
+         */
+        this.optionTooltipPosition = 'bottom';
+        /**
+         * When it is not an empty string, an info icon is displayed to show text for more info.
+         * @group Props
+         */
+        this.infoTooltip = '';
+        /**
+         * Info tooltip class for styling.
+         * @group Props
+         */
+        this.infoTooltipClass = 'cps-tooltip-content';
+        /**
+         * Size of infoTooltip, of type number denoting pixels or string.
+         * @group Props
+         */
+        this.infoTooltipMaxWidth = '100%';
+        /**
+         * Determines whether the infoTooltip is persistent.
+         * @group Props
+         */
+        this.infoTooltipPersistent = false;
+        /**
+         * Position of infoTooltip, it can be 'top', 'bottom', 'left' or 'right'.
+         * @group Props
+         */
+        this.infoTooltipPosition = 'top';
+        /**
+         * Value of the component.
+         * @group Props
+         */
+        this._value = undefined;
+        /**
+         * Callback to invoke on value change.
+         * @param {any} any - value changed.
+         * @group Emits
+         */
+        this.valueChanged = new EventEmitter();
+        this.largestButtonWidth = 0;
+        // 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 = [];
+        }
+        this._setEqualWidths();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    updateValueEvent(event, val) {
+        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;
+        }
+        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);
+    }
+    _setEqualWidths() {
+        if (!this.equalWidths)
+            return;
+        const hiddenSpan = this.renderer.createElement('span');
+        this.renderer.setStyle(hiddenSpan, 'visibility', 'hidden');
+        this.renderer.setStyle(hiddenSpan, 'position', 'absolute');
+        this.renderer.setStyle(hiddenSpan, 'left', '-9999px');
+        this.renderer.setStyle(hiddenSpan, 'font-size', '16px');
+        this.renderer.setStyle(hiddenSpan, 'letter-spacing', '0.05em');
+        this.renderer.setStyle(hiddenSpan, 'font-family', '"Source Sans Pro", sans-serif');
+        this.renderer.appendChild(this.document.body, hiddenSpan);
+        this.largestButtonWidth = 0;
+        this.options.forEach((opt) => {
+            const text = this.renderer.createText(opt.label || '');
+            this.renderer.appendChild(hiddenSpan, text);
+            let width = hiddenSpan.offsetWidth || 0;
+            width += 26;
+            if (opt.icon) {
+                width += 16;
+                if (opt.label)
+                    width += 8;
+            }
+            if (width > this.largestButtonWidth) {
+                this.largestButtonWidth = width;
+            }
+            this.renderer.removeChild(hiddenSpan, text);
+        });
+        this.renderer.removeChild(this.document.body, hiddenSpan);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setDisabledState(disabled) { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsButtonToggleComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", equalWidths: "equalWidths", optionTooltipPosition: "optionTooltipPosition", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], 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]=\"optionTooltipPosition\">\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, option.value)\" />\n  <span\n    class=\"cps-btn-toggle-content-option-content\"\n    [ngStyle]=\"{\n      'min-width': largestButtonWidth ? largestButtonWidth + 'px' : 'none'\n    }\">\n    <cps-icon\n      *ngIf=\"option.icon\"\n      [ngClass]=\"{ 'me-2': !!option.label }\"\n      [icon]=\"option.icon\">\n    </cps-icon>\n    <span *ngIf=\"option.label\">{{ 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;font-weight:700;font-size:16px;font-family:Source Sans Pro,sans-serif;cursor:default}: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(#ffffff1a 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:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-text-lightest);border-right:0;font-weight:400;font-size:16px;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:var(--cps-color-highlight-hover)}:host .cps-btn-toggle-content-option-content:active{background:var(--cps-color-highlight-active)}: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-text-lightest)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsButtonToggleComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        CommonModule,
+                        CheckOptionSelectedPipe,
+                        CpsInfoCircleComponent,
+                        CpsIconComponent,
+                        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]=\"optionTooltipPosition\">\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, option.value)\" />\n  <span\n    class=\"cps-btn-toggle-content-option-content\"\n    [ngStyle]=\"{\n      'min-width': largestButtonWidth ? largestButtonWidth + 'px' : 'none'\n    }\">\n    <cps-icon\n      *ngIf=\"option.icon\"\n      [ngClass]=\"{ 'me-2': !!option.label }\"\n      [icon]=\"option.icon\">\n    </cps-icon>\n    <span *ngIf=\"option.label\">{{ 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;font-weight:700;font-size:16px;font-family:Source Sans Pro,sans-serif;cursor:default}: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(#ffffff1a 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:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-text-lightest);border-right:0;font-weight:400;font-size:16px;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:var(--cps-color-highlight-hover)}:host .cps-btn-toggle-content-option-content:active{background:var(--cps-color-highlight-active)}: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-text-lightest)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.Renderer2 }], propDecorators: { label: [{
                 type: Input
-            }], actionBtnDisabled: [{
+            }], options: [{
                 type: Input
-            }], showExportBtn: [{
+            }], multiple: [{
                 type: Input
-            }], exportBtnDisabled: [{
+            }], disabled: [{
                 type: Input
-            }], exportFilename: [{
+            }], mandatory: [{
                 type: Input
-            }], csvSeparator: [{
+            }], equalWidths: [{
                 type: Input
-            }], showDataReloadBtn: [{
+            }], optionTooltipPosition: [{
                 type: Input
-            }], dataReloadBtnDisabled: [{
+            }], infoTooltip: [{
                 type: Input
-            }], showColumnsToggleBtn: [{
+            }], infoTooltipClass: [{
                 type: Input
-            }], columnsToggleBtnDisabled: [{
+            }], infoTooltipMaxWidth: [{
                 type: Input
-            }], initialColumns: [{
+            }], infoTooltipPersistent: [{
                 type: Input
-            }], data: [{
+            }], infoTooltipPosition: [{
                 type: Input
-            }], rowsSelected: [{
-                type: Output
-            }], selectedRowIndexes: [{
-                type: Output
-            }], actionBtnClicked: [{
-                type: Output
-            }], editRowBtnClicked: [{
-                type: Output
-            }], rowsToRemove: [{
-                type: Output
-            }], rowIndexesToRemove: [{
-                type: Output
-            }], pageChanged: [{
-                type: Output
-            }], sorted: [{
-                type: Output
-            }], filtered: [{
-                type: Output
-            }], rowsReordered: [{
-                type: Output
-            }], columnsSelected: [{
-                type: Output
-            }], lazyLoaded: [{
-                type: Output
-            }], dataReloadBtnClicked: [{
-                type: Output
-            }], additionalBtnOnSelectClicked: [{
-                type: Output
-            }], customSortFunction: [{
+            }], _value: [{
+                type: Input,
+                args: ['value']
+            }], valueChanged: [{
                 type: Output
-            }], toolbarTemplate: [{
-                type: ContentChild,
-                args: ['toolbar', { static: false }]
-            }], headerTemplate: [{
-                type: ContentChild,
-                args: ['header', { static: false }]
-            }], nestedHeaderTemplate: [{
-                type: ContentChild,
-                args: ['nestedHeader', { static: false }]
-            }], bodyTemplate: [{
-                type: ContentChild,
-                args: ['body', { static: false }]
-            }], rowExpansionTemplate: [{
-                type: ContentChild,
-                args: ['rowexpansion', { static: false }]
-            }], primengTable: [{
-                type: ViewChild,
-                args: ['primengTable', { static: true }]
-            }], globalFilterComp: [{
-                type: ViewChild,
-                args: ['globalFilterComp']
-            }], exportMenu: [{
-                type: ViewChild,
-                args: ['exportMenu']
-            }], colToggleMenu: [{
-                type: ViewChild,
-                args: ['colToggleMenu']
-            }], tUnsortDirective: [{
+            }] } });
+
+/**
+ * TableColumnFilterConstraintComponent is an internal filtering constraint component in table and treetable.
+ */
+class TableColumnFilterConstraintComponent {
+    get isCategoryDropdownOpened() {
+        return this.categoryAutocompleteComponent?.isOpened || false;
+    }
+    constructor(dt, tt) {
+        this.dt = dt;
+        this.tt = tt;
+        /**
+         * Type of filter constraint.
+         * @group Props
+         */
+        this.type = 'text';
+        /**
+         * An array of category options.
+         * @group Props
+         */
+        this.categoryOptions = [];
+        /**
+         * Determines whether to show category filter as button toggles.
+         * @group Props
+         */
+        this.asButtonToggle = false;
+        /**
+         * Single selection for category filter.
+         * @group Props
+         */
+        this.singleSelection = false;
+        /**
+         * Placeholder for input field.
+         * @group Props
+         */
+        this.placeholder = '';
+        /**
+         * Determines whether the filter should have an apply button.
+         * @group Props
+         */
+        this.hasApplyButton = true;
+        this.booleanOptions = [
+            { label: 'True', value: 'true' },
+            { label: 'False', value: 'false' }
+        ];
+        this.categories = [];
+        this._tableInstance = dt || tt;
+    }
+    ngOnChanges() {
+        this._updateCategories();
+    }
+    _updateCategories() {
+        if (this.type !== 'category')
+            return;
+        if (this.categoryOptions.length > 0) {
+            if (typeof this.categoryOptions[0] === 'string') {
+                this.categories = this.categoryOptions.map((o) => ({
+                    label: o,
+                    value: o
+                }));
+            }
+            else {
+                this.categories = this
+                    .categoryOptions;
+            }
+        }
+        else {
+            let cats = [];
+            if (this._tableInstance instanceof Table) {
+                cats =
+                    this._tableInstance.value?.map((v) => v[this.field]) || [];
+            }
+            else {
+                const fillCats = (nodes) => {
+                    nodes?.forEach((v) => {
+                        cats.push(v.data[this.field]);
+                        fillCats(v.children);
+                    });
+                };
+                fillCats(this._tableInstance.value);
+            }
+            this.categories =
+                Array.from(new Set(cats))?.map((c) => ({
+                    label: c,
+                    value: c
+                })) || [];
+        }
+    }
+    onValueChange(value) {
+        this.filterConstraint.value = value;
+        if (this._tableInstance.isFilterBlank(value) || !this.hasApplyButton) {
+            this._tableInstance._filter();
+        }
+    }
+    onEnterKeyDown(event) {
+        this._tableInstance._filter();
+        event.preventDefault();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableColumnFilterConstraintComponent, deps: [{ token: i1$3.Table, optional: true }, { token: i2$1.TreeTable, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TableColumnFilterConstraintComponent, isStandalone: true, selector: "table-column-filter-constraint", inputs: { type: "type", field: "field", filterConstraint: "filterConstraint", categoryOptions: "categoryOptions", asButtonToggle: "asButtonToggle", singleSelection: "singleSelection", placeholder: "placeholder", hasApplyButton: "hasApplyButton" }, viewQueries: [{ propertyName: "categoryAutocompleteComponent", first: true, predicate: ["categoryAutocompleteComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n  <cps-input\n    *ngSwitchCase=\"'text'\"\n    [placeholder]=\"placeholder\"\n    [hideDetails]=\"true\"\n    (keydown.enter)=\"onEnterKeyDown($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)=\"onEnterKeyDown($event)\"\n    [value]=\"filterConstraint?.value\"\n    (valueChanged)=\"onValueChange($event)\"\n    type=\"number\"></cps-input>\n\n  <div\n    class=\"cps-table-col-filter-constraint-btn-toggles\"\n    *ngSwitchCase=\"'boolean'\">\n    <cps-button-toggle\n      [options]=\"booleanOptions\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      [mandatory]=\"false\">\n    </cps-button-toggle>\n  </div>\n\n  <cps-datepicker\n    *ngSwitchCase=\"'date'\"\n    [openOnInputFocus]=\"true\"\n    [hideDetails]=\"true\"\n    [placeholder]=\"placeholder\"\n    [value]=\"filterConstraint?.value\"\n    (keydown.enter)=\"onEnterKeyDown($event)\"\n    (valueChanged)=\"onValueChange($event)\">\n  </cps-datepicker>\n\n  <ng-container *ngSwitchCase=\"'category'\">\n    <cps-autocomplete\n      #categoryAutocompleteComponent\n      *ngIf=\"!asButtonToggle\"\n      class=\"cps-table-col-filter-category-autocomplete\"\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]=\"!singleSelection\">\n    </cps-autocomplete>\n    <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n      <cps-button-toggle\n        *ngIf=\"asButtonToggle\"\n        [options]=\"categories\"\n        [value]=\"filterConstraint?.value\"\n        (valueChanged)=\"onValueChange($event)\"\n        [mandatory]=\"false\"\n        [multiple]=\"!singleSelection\">\n      </cps-button-toggle>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host .cps-table-col-filter-constraint-btn-toggles{display:flex;justify-content:center}:host .cps-table-col-filter-category-autocomplete{min-width:200px;max-width:400px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsDatepickerComponent, selector: "cps-datepicker", inputs: ["label", "disabled", "width", "placeholder", "hint", "clearable", "hideDetails", "persistentClear", "showTodayButton", "openOnInputFocus", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "minDate", "maxDate", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", 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)=\"onEnterKeyDown($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)=\"onEnterKeyDown($event)\"\n    [value]=\"filterConstraint?.value\"\n    (valueChanged)=\"onValueChange($event)\"\n    type=\"number\"></cps-input>\n\n  <div\n    class=\"cps-table-col-filter-constraint-btn-toggles\"\n    *ngSwitchCase=\"'boolean'\">\n    <cps-button-toggle\n      [options]=\"booleanOptions\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      [mandatory]=\"false\">\n    </cps-button-toggle>\n  </div>\n\n  <cps-datepicker\n    *ngSwitchCase=\"'date'\"\n    [openOnInputFocus]=\"true\"\n    [hideDetails]=\"true\"\n    [placeholder]=\"placeholder\"\n    [value]=\"filterConstraint?.value\"\n    (keydown.enter)=\"onEnterKeyDown($event)\"\n    (valueChanged)=\"onValueChange($event)\">\n  </cps-datepicker>\n\n  <ng-container *ngSwitchCase=\"'category'\">\n    <cps-autocomplete\n      #categoryAutocompleteComponent\n      *ngIf=\"!asButtonToggle\"\n      class=\"cps-table-col-filter-category-autocomplete\"\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]=\"!singleSelection\">\n    </cps-autocomplete>\n    <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n      <cps-button-toggle\n        *ngIf=\"asButtonToggle\"\n        [options]=\"categories\"\n        [value]=\"filterConstraint?.value\"\n        (valueChanged)=\"onValueChange($event)\"\n        [mandatory]=\"false\"\n        [multiple]=\"!singleSelection\">\n      </cps-button-toggle>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host .cps-table-col-filter-constraint-btn-toggles{display:flex;justify-content:center}:host .cps-table-col-filter-category-autocomplete{min-width:200px;max-width:400px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.Table, decorators: [{
+                    type: Optional
+                }] }, { type: i2$1.TreeTable, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { type: [{
+                type: Input
+            }], field: [{
+                type: Input
+            }], filterConstraint: [{
+                type: Input
+            }], categoryOptions: [{
+                type: Input
+            }], asButtonToggle: [{
+                type: Input
+            }], singleSelection: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], hasApplyButton: [{
+                type: Input
+            }], categoryAutocompleteComponent: [{
                 type: ViewChild,
-                args: ['tUnsortDirective']
+                args: ['categoryAutocompleteComponent']
             }] } });
 
-/* eslint-disable no-unused-vars */
-/**
- * CpsColumnFilterMatchMode is used to define how the filter value should be matched.
- * @group Enums
- */
-var CpsColumnFilterMatchMode;
-(function (CpsColumnFilterMatchMode) {
-    CpsColumnFilterMatchMode["STARTS_WITH"] = "startsWith";
-    CpsColumnFilterMatchMode["CONTAINS"] = "contains";
-    CpsColumnFilterMatchMode["NOT_CONTAINS"] = "notContains";
-    CpsColumnFilterMatchMode["ENDS_WITH"] = "endsWith";
-    CpsColumnFilterMatchMode["EQUALS"] = "equals";
-    CpsColumnFilterMatchMode["NOT_EQUALS"] = "notEquals";
-    CpsColumnFilterMatchMode["IN"] = "in";
-    CpsColumnFilterMatchMode["LESS_THAN"] = "lt";
-    CpsColumnFilterMatchMode["LESS_THAN_OR_EQUAL_TO"] = "lte";
-    CpsColumnFilterMatchMode["GREATER_THAN"] = "gt";
-    CpsColumnFilterMatchMode["GREATER_THAN_OR_EQUAL_TO"] = "gte";
-    CpsColumnFilterMatchMode["BETWEEN"] = "between";
-    CpsColumnFilterMatchMode["IS"] = "is";
-    CpsColumnFilterMatchMode["IS_NOT"] = "isNot";
-    CpsColumnFilterMatchMode["BEFORE"] = "before";
-    CpsColumnFilterMatchMode["AFTER"] = "after";
-    CpsColumnFilterMatchMode["DATE_IS"] = "dateIs";
-    CpsColumnFilterMatchMode["DATE_IS_NOT"] = "dateIsNot";
-    CpsColumnFilterMatchMode["DATE_BEFORE"] = "dateBefore";
-    CpsColumnFilterMatchMode["DATE_AFTER"] = "dateAfter";
-})(CpsColumnFilterMatchMode || (CpsColumnFilterMatchMode = {}));
-
 /**
- * CpsDatepickerComponent is an input component to provide date input.
- * @group Components
+ * TableColumnFilterComponent is an internal filter component in table and treetable.
  */
-class CpsDatepickerComponent {
-    /**
-     * Value of the datepicker.
-     * @default null
-     * @group Props
-     */
-    set value(value) {
-        this._value = value;
-        this.stringDate = this._dateToString(value);
-        this.onChange(value);
-    }
-    get value() {
-        return this._value;
+class TableColumnFilterComponent {
+    get isCategoryDropdownOpened() {
+        if (this.type !== 'category')
+            return false;
+        return this.constraintCompList?.first?.isCategoryDropdownOpened || false;
     }
-    constructor(_control) {
-        this._control = _control;
-        /**
-         * Label of the datepicker element.
-         * @group Props
-         */
-        this.label = '';
+    constructor(elementRef, dt, tt) {
+        this.elementRef = elementRef;
+        this.dt = dt;
+        this.tt = tt;
         /**
-         * Determines whether datepicker is disabled.
+         * Type of filter in table, it can be of type "number", "boolean", "text", "date" or "category".
          * @group Props
          */
-        this.disabled = false;
+        this.type = 'text';
         /**
-         * Width of the datepicker of type number denoting pixels or string.
+         * Determines whether the filter menu should be persistent.
          * @group Props
          */
-        this.width = '100%';
+        this.persistent = false;
         /**
-         * Placeholder text.
+         * Determines whether the filter should have clear button.
          * @group Props
          */
-        this.placeholder = 'MM/DD/YYYY';
+        this.showClearButton = true;
         /**
-         * Bottom hint text for the input field.
+         * Determines whether the filter should have apply button.
          * @group Props
          */
-        this.hint = '';
+        this.showApplyButton = true;
         /**
-         * When enabled, a clear icon is displayed to clear the value.
+         * Determines whether the filter should have close button.
          * @group Props
          */
-        this.clearable = false;
+        this.showCloseButton = false;
         /**
-         * Hides hint and validation errors.
+         * Determines whether the filter should have match modes.
          * @group Props
          */
-        this.hideDetails = false;
+        this.showMatchModes = true;
         /**
-         * Determines whether the component should have persistent clear icon.
+         * Match modes for filter.
          * @group Props
          */
-        this.persistentClear = false;
+        this.matchModes = [];
         /**
-         * Determines whether to show button to be able to select today's date.
+         * Determines whether the filter should have operator.
          * @group Props
          */
-        this.showTodayButton = true;
+        this.showOperator = true;
         /**
-         * Determines whether the datepicker dropdown should open on input focus.
+         * Maximum number of constraints.
          * @group Props
          */
-        this.openOnInputFocus = false;
+        this.maxConstraints = 2;
         /**
-         * When it is not an empty string, an info icon is displayed to show text for more info.
+         * Title of the filter.
          * @group Props
          */
-        this.infoTooltip = '';
+        this.headerTitle = '';
         /**
-         * InfoTooltip class for styling.
+         * Determines whether the filter should hide on clear.
          * @group Props
          */
-        this.infoTooltipClass = 'cps-tooltip-content';
+        this.hideOnClear = false;
         /**
-         * Size of infoTooltip, of type number denoting pixels or string.
+         * Options for category filter.
          * @group Props
          */
-        this.infoTooltipMaxWidth = '100%';
+        this.categoryOptions = [];
         /**
-         * Determines whether the infoTooltip is persistent.
+         * Determines whether to show category filter as button toggles.
          * @group Props
          */
-        this.infoTooltipPersistent = false;
+        this.asButtonToggle = false;
         /**
-         * Position of infoTooltip, it can be "top", "bottom", "left" or "right".
+         * Single selection for category filter.
          * @group Props
          */
-        this.infoTooltipPosition = 'top';
+        this.singleSelection = false;
         /**
-         * Styling appearance of datepicker input, it can be 'outlined', 'underlined' or 'borderless.
+         * Placeholder for filter constraints.
          * @group Props
          */
-        this.appearance = 'outlined';
-        /**
-         * Callback to invoke on value change.
-         * @param {Date | null} value - value change.
-         * @group Emits
-         */
-        this.valueChanged = new EventEmitter();
-        this.stringDate = '';
-        this.isOpened = false;
-        this.error = '';
-        this.cvtWidth = '';
-        this._value = null;
-        // 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;
-        }
+        this.placeholder = '';
+        this.operator = FilterOperator.AND;
+        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: [
+                CpsColumnFilterMatchMode.STARTS_WITH,
+                CpsColumnFilterMatchMode.CONTAINS,
+                CpsColumnFilterMatchMode.NOT_CONTAINS,
+                CpsColumnFilterMatchMode.ENDS_WITH,
+                CpsColumnFilterMatchMode.EQUALS,
+                CpsColumnFilterMatchMode.NOT_EQUALS
+            ],
+            number: [
+                CpsColumnFilterMatchMode.EQUALS,
+                CpsColumnFilterMatchMode.NOT_EQUALS,
+                CpsColumnFilterMatchMode.LESS_THAN,
+                CpsColumnFilterMatchMode.LESS_THAN_OR_EQUAL_TO,
+                CpsColumnFilterMatchMode.GREATER_THAN,
+                CpsColumnFilterMatchMode.GREATER_THAN_OR_EQUAL_TO
+            ],
+            date: [
+                CpsColumnFilterMatchMode.DATE_IS,
+                CpsColumnFilterMatchMode.DATE_IS_NOT,
+                CpsColumnFilterMatchMode.DATE_BEFORE,
+                CpsColumnFilterMatchMode.DATE_AFTER
+            ]
+        };
+        this.isFilterApplied = false;
+        this._tableInstance = dt || tt;
     }
     ngOnInit() {
-        this.cvtWidth = convertSize(this.width);
-        this._statusChangesSubscription = this._control?.statusChanges?.subscribe(() => {
-            this._checkErrors();
+        if (this.matchModes.length > 0) {
+            this.filterMatchModeOptions[this.type] = this.matchModes;
+        }
+        this._onFilterSub = this._tableInstance?.onFilter?.subscribe((value) => this._updateFilterApplied(value));
+        if (!this._tableInstance.filters[this.field]) {
+            this._initFieldFilterConstraint();
+        }
+        if (this.maxConstraints > 1 && this.type !== 'category') {
+            this.showApplyButton = true;
+        }
+        if (this.type === 'boolean') {
+            this.showApplyButton = false;
+        }
+        this.currentMatchModes = this.filterMatchModeOptions[this.type]?.map((key) => {
+            return { label: this.matchModeLabels[key], value: key };
         });
     }
     ngOnDestroy() {
-        this._statusChangesSubscription?.unsubscribe();
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    onInputValueChanged(val) {
-        this.stringDate = val;
-        if (!val) {
-            this._updateValue(null);
-            return;
-        }
-        const dt = this._stringToDate(val);
-        if (dt)
-            this._updateValue(dt);
-    }
-    writeValue(value) {
-        this.value = value;
+        this._onFilterSub?.unsubscribe();
     }
-    _updateValue(value) {
-        if (this.value === value)
-            return;
-        this.writeValue(value);
-        this.onChange(value);
-        this.valueChanged.emit(value);
+    _updateFilterApplied(value) {
+        const fieldFilter = value.filters[this.field];
+        if (fieldFilter) {
+            if (Array.isArray(fieldFilter)) {
+                this.isFilterApplied = fieldFilter.some((meta) => !this._tableInstance.isFilterBlank(meta.value));
+            }
+            else {
+                this.isFilterApplied = !this._tableInstance.isFilterBlank(fieldFilter.value);
+            }
+        }
+        else {
+            this.isFilterApplied = false;
+        }
     }
-    _updateValueFromInputString() {
-        if (!this.stringDate) {
-            this._updateValue(null);
+    _initFieldFilterConstraint() {
+        const defaultMatchMode = this._getDefaultMatchMode();
+        if (this._tableInstance instanceof Table) {
+            this._tableInstance.filters[this.field] = [
+                {
+                    value: null,
+                    matchMode: defaultMatchMode,
+                    operator: this.operator
+                }
+            ];
         }
         else {
-            this._updateValue(this._stringToDate(this.stringDate));
+            this._tableInstance.filters[this.field] = {
+                value: null,
+                matchMode: defaultMatchMode
+            };
         }
     }
-    _checkDateFormat(dateString) {
-        if (!/^\d\d\/\d\d\/\d\d\d\d$/.test(dateString)) {
-            return false;
+    _getDefaultMatchMode() {
+        const getMatchMode = (val) => {
+            if (this.type in this.filterMatchModeOptions) {
+                return this.filterMatchModeOptions[this.type].includes(val)
+                    ? val
+                    : this.filterMatchModeOptions[this.type][0];
+            }
+            else {
+                return val;
+            }
+        };
+        switch (this.type) {
+            case 'text':
+                return getMatchMode(CpsColumnFilterMatchMode.STARTS_WITH);
+            case 'number':
+                return getMatchMode(CpsColumnFilterMatchMode.EQUALS);
+            case 'date':
+                return getMatchMode(CpsColumnFilterMatchMode.DATE_IS);
+            case 'category':
+                return this.singleSelection
+                    ? CpsColumnFilterMatchMode.IS
+                    : CpsColumnFilterMatchMode.IN;
+            default:
+                return getMatchMode(CpsColumnFilterMatchMode.CONTAINS);
         }
-        const parts = dateString.split('/').map((p) => parseInt(p, 10));
-        parts[0] -= 1;
-        const d = new Date(parts[2], parts[0], parts[1]);
-        return (d.getMonth() === parts[0] &&
-            d.getDate() === parts[1] &&
-            d.getFullYear() === parts[2]);
     }
-    _checkDateInRange(date, minDate, maxDate) {
-        if (!minDate && !maxDate)
-            return true;
-        if (minDate && maxDate) {
-            return (date.getTime() >= minDate.getTime() &&
-                date.getTime() <= maxDate.getTime());
+    _getDefaultOperator() {
+        return this._tableInstance.filters
+            ? (this._tableInstance.filters[this.field])[0].operator
+            : this.operator;
+    }
+    _updateSortIconColor(color) {
+        const unsortedUp = this.elementRef?.nativeElement?.parentElement?.querySelector('.sort-unsorted-arrow-up');
+        if (unsortedUp) {
+            unsortedUp.style.borderBottomColor = color;
         }
-        if (minDate) {
-            return date.getTime() >= minDate.getTime();
+        const unsortedDown = this.elementRef?.nativeElement?.parentElement?.querySelector('.sort-unsorted-arrow-down');
+        if (unsortedDown) {
+            unsortedDown.style.borderTopColor = color;
         }
-        return date.getTime() <= maxDate.getTime();
-    }
-    _dateToString(dateVal) {
-        if (!dateVal)
-            return '';
-        let month = '' + (dateVal.getMonth() + 1);
-        if (month.length < 2)
-            month = '0' + month;
-        let day = '' + dateVal.getDate();
-        if (day.length < 2)
-            day = '0' + day;
-        const year = dateVal.getFullYear();
-        return `${month}/${day}/${year}`;
     }
-    _stringToDate(dateString) {
-        if (!this._checkDateFormat(dateString))
-            return null;
-        const [month, day, year] = dateString.split('/');
-        const dt = new Date(`${year}-${month}-${day}`);
-        const inRange = this._checkDateInRange(dt, this.minDate, this.maxDate);
-        return inRange ? dt : null;
+    onCloseClick() {
+        this.hide();
     }
-    _checkErrors() {
-        if (this.stringDate && !this._stringToDate(this.stringDate)) {
-            this.error = 'Date is invalid';
-            return;
+    onMenuMatchModeChange(value, filterMeta) {
+        filterMeta.matchMode = value;
+        if (!this.showApplyButton) {
+            this._tableInstance._filter();
         }
-        const errors = this._control?.errors;
-        if (!this._control?.control?.touched || !errors) {
-            this.error = '';
-            return;
+    }
+    addConstraint() {
+        this._tableInstance.filters[this.field].push({
+            value: null,
+            matchMode: this._getDefaultMatchMode(),
+            operator: this._getDefaultOperator()
+        });
+    }
+    removeConstraint(filterMeta) {
+        this._tableInstance.filters[this.field] = (this._tableInstance.filters[this.field]).filter((meta) => meta !== filterMeta);
+        this._tableInstance._filter();
+    }
+    onOperatorChange(value) {
+        this._tableInstance.filters[this.field].forEach((filterMeta) => {
+            filterMeta.operator = value;
+            this.operator = value;
+        });
+        if (!this.showApplyButton) {
+            this._tableInstance._filter();
         }
-        if ('required' in errors) {
-            this.error = 'Field is required';
-            return;
+    }
+    get fieldConstraints() {
+        if (this._tableInstance instanceof Table) {
+            return this._tableInstance.filters
+                ? this._tableInstance.filters[this.field]
+                : null;
         }
-        const errArr = Object.values(errors);
-        if (errArr.length < 1) {
-            this.error = '';
-            return;
+        else {
+            return this._tableInstance.filters
+                ? [this._tableInstance.filters[this.field]]
+                : null;
         }
-        const message = errArr.find((msg) => typeof msg === 'string');
-        this.error = message || 'Unknown error';
     }
-    onClearCalendarDate() {
-        this.onSelectCalendarDate(null);
+    get showRemoveIcon() {
+        return this.fieldConstraints ? this.fieldConstraints.length > 1 : false;
     }
-    onSelectCalendarDate(dateVal) {
-        this.toggleCalendar(false);
-        this.writeValue(dateVal);
-        this.onChange(dateVal);
-        this.valueChanged.emit(dateVal);
+    get isShowOperator() {
+        return (this.showOperator &&
+            this.maxConstraints > 1 &&
+            !['boolean', 'category'].includes(this.type));
     }
-    onInputBlur() {
-        if (this.isOpened)
-            return;
-        this._updateValueFromInputString();
-        this._checkErrors();
+    get isShowAddConstraint() {
+        return (!['boolean', 'category'].includes(this.type) &&
+            this.fieldConstraints &&
+            this.fieldConstraints.length < this.maxConstraints);
     }
-    onInputFocus() {
-        this._control?.control?.markAsTouched();
-        if (this.openOnInputFocus)
-            this.toggleCalendar(true);
+    hide() {
+        this.columnFilterMenu.hide();
     }
-    onInputEnterClicked() {
-        if (!this.isOpened)
-            return;
-        this._control?.control?.markAsTouched();
-        this._updateValueFromInputString();
-        this._checkErrors();
-        this.toggleCalendar(false);
+    clearFilter() {
+        this._initFieldFilterConstraint();
+        this._tableInstance._filter();
+        if (this.hideOnClear)
+            this.hide();
     }
-    onClickCalendarIcon() {
-        if (this.disabled)
-            return;
-        if (this.isOpened)
-            this._updateValueFromInputString();
-        this.toggleCalendar();
+    clearFilterValues() {
+        this._initFieldFilterConstraint();
+        this.isFilterApplied = false;
     }
-    onBeforeCalendarHidden() {
-        if (this.disabled || !this.isOpened)
-            return;
-        this._updateValueFromInputString();
-        this.toggleCalendar(false);
+    applyFilter() {
+        this._tableInstance._filter();
+        this.hide();
     }
-    onInputClear() {
-        if (this.isOpened)
-            this.focusInput();
+    onMenuShown() {
+        const parent = this.elementRef?.nativeElement?.parentElement;
+        const className = 'cps-table-col-filter-menu-open';
+        parent.classList.add(className);
     }
-    onCalendarContentClick() {
-        if (this.isOpened)
-            this.focusInput();
+    onBeforeMenuHidden() {
+        if (!this.isFilterApplied)
+            this._initFieldFilterConstraint();
     }
-    focusInput() {
-        this.datepickerInput.focus();
+    onMenuHidden() {
+        const parent = this.elementRef?.nativeElement?.parentElement;
+        const className = 'cps-table-col-filter-menu-open';
+        parent.classList.remove(className);
     }
-    toggleCalendar(show) {
-        if (this.disabled || this.isOpened === show)
-            return;
-        const target = this.datepickerInput.elementRef.nativeElement.querySelector('.cps-input-wrap');
-        if (typeof show === 'boolean') {
-            if (show) {
-                this.calendarMenu.show({
-                    target
-                });
-            }
-            else {
-                this.calendarMenu.hide();
-            }
-        }
-        else {
-            this.calendarMenu.toggle({
-                target
-            });
-        }
-        this.isOpened = this.calendarMenu.isVisible();
-        if (!this.isOpened) {
-            this._control?.control?.markAsTouched();
-            this._checkErrors();
-        }
-        else {
-            this.focusInput();
-        }
+    onClick(event) {
+        event.stopPropagation();
+    }
+    onMouseOver() {
+        this._updateSortIconColor('var(--cps-color-line-dark)');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsDatepickerComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsDatepickerComponent, isStandalone: true, selector: "cps-datepicker", inputs: { label: "label", disabled: "disabled", width: "width", placeholder: "placeholder", hint: "hint", clearable: "clearable", hideDetails: "hideDetails", persistentClear: "persistentClear", showTodayButton: "showTodayButton", openOnInputFocus: "openOnInputFocus", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", minDate: "minDate", maxDate: "maxDate", value: "value" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["datepickerInput"], descendants: true }, { propertyName: "calendarMenu", first: true, predicate: ["calendarMenu"], descendants: true }], ngImport: i0, template: "<div\n  class=\"cps-datepicker\"\n  [ngStyle]=\"{ width: cvtWidth }\"\n  [class.focused]=\"isOpened\">\n  <cps-input\n    #datepickerInput\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    prefixIcon=\"datepicker\"\n    [placeholder]=\"placeholder\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\n    (valueChanged)=\"onInputValueChanged($event)\"\n    [clearable]=\"clearable\"\n    (blurred)=\"onInputBlur()\"\n    (cleared)=\"onInputClear()\"\n    (enterClicked)=\"onInputEnterClicked()\"\n    [width]=\"width\"\n    [hint]=\"hint\"\n    [hideDetails]=\"hideDetails\"\n    [infoTooltip]=\"infoTooltip\"\n    [infoTooltipClass]=\"infoTooltipClass\"\n    [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n    [infoTooltipPersistent]=\"infoTooltipPersistent\"\n    [persistentClear]=\"persistentClear\"\n    [appearance]=\"appearance\"\n    [error]=\"error\"></cps-input>\n  <cps-menu\n    #calendarMenu\n    [withArrow]=\"false\"\n    (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n    (contentClicked)=\"onCalendarContentClick()\"\n    [focusOnShow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    containerClass=\"cps-datepicker-calendar-menu\">\n    <div class=\"cps-datepicker-calendar\">\n      <p-calendar\n        [(ngModel)]=\"value\"\n        [showIcon]=\"true\"\n        [showButtonBar]=\"showTodayButton\"\n        [inline]=\"true\"\n        (onSelect)=\"onSelectCalendarDate($event)\"\n        (onClearClick)=\"onClearCalendarDate()\"\n        [showOtherMonths]=\"false\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\">\n      </p-calendar>\n    </div>\n  </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep input{border:1px solid var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#fff;color:var(--cps-color-text-darkest);border:1px solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#fff;font-weight:600;margin:0;border-bottom:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-lightest);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-prepared)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}.cps-datepicker-calendar ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::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:1rem;font-family:Source Sans Pro,sans-serif;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-button:active{background-color:var(--cps-color-highlight-selected)}.cps-datepicker-calendar ::ng-deep .p-button .p-button-label{font-weight:700}.cps-datepicker-calendar ::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}\n"], dependencies: [{ kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$2.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }] }); }
+    onMouseLeave() {
+        this._updateSortIconColor('');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableColumnFilterComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.Table, optional: true }, { token: i2$1.TreeTable, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TableColumnFilterComponent, isStandalone: true, selector: "table-column-filter", inputs: { field: "field", type: "type", persistent: "persistent", showClearButton: "showClearButton", showApplyButton: "showApplyButton", showCloseButton: "showCloseButton", showMatchModes: "showMatchModes", matchModes: "matchModes", showOperator: "showOperator", maxConstraints: "maxConstraints", headerTitle: "headerTitle", hideOnClear: "hideOnClear", categoryOptions: "categoryOptions", asButtonToggle: "asButtonToggle", singleSelection: "singleSelection", placeholder: "placeholder" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseOver()", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "columnFilterMenu", first: true, predicate: ["columnFilterMenu"], descendants: true }, { propertyName: "constraintCompList", predicate: ["constraintComponent"], descendants: true }], ngImport: i0, template: "<div class=\"cps-table-col-filter\">\n  <cps-menu\n    #columnFilterMenu\n    [withArrow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    [persistent]=\"persistent || (showApplyButton && isCategoryDropdownOpened)\"\n    (menuShown)=\"onMenuShown()\"\n    (menuHidden)=\"onMenuHidden()\"\n    (beforeMenuHidden)=\"onBeforeMenuHidden()\">\n    <div class=\"cps-table-col-filter-menu-content\">\n      <div\n        class=\"cps-table-col-filter-menu-content-header\"\n        *ngIf=\"showCloseButton || headerTitle\">\n        <span class=\"cps-table-col-filter-menu-content-header-title\">\n          {{ headerTitle }}\n        </span>\n        <cps-icon\n          *ngIf=\"showCloseButton\"\n          icon=\"close-x\"\n          (click)=\"onCloseClick()\"></cps-icon>\n      </div>\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 && currentMatchModes\"\n            class=\"cps-table-col-filter-match-mode-select\"\n            [hideDetails]=\"true\"\n            [returnObject]=\"false\"\n            [options]=\"currentMatchModes\"\n            [ngModel]=\"fieldConstraint.matchMode\"\n            (valueChanged)=\"\n              onMenuMatchModeChange($event, fieldConstraint)\n            \"></cps-select>\n          <table-column-filter-constraint\n            #constraintComponent\n            [type]=\"type\"\n            [field]=\"field\"\n            [asButtonToggle]=\"asButtonToggle\"\n            [singleSelection]=\"singleSelection\"\n            [categoryOptions]=\"categoryOptions\"\n            [filterConstraint]=\"fieldConstraint\"\n            [hasApplyButton]=\"showApplyButton\"\n            [placeholder]=\"placeholder\">\n          </table-column-filter-constraint>\n          <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]=\"isFilterApplied ? 'filter-funnel-filled' : 'filter-funnel'\"\n    size=\"13\"\n    (click)=\"columnFilterMenu.toggle($event)\"\n    class=\"cps-table-col-filter-menu-button\"\n    [ngClass]=\"{\n      'cps-table-col-filter-menu-button-active': isFilterApplied\n    }\"\n    >>\n  </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:8px;padding-right:4px}:host .cps-table-col-filter .cps-table-col-filter-menu-button:not(.cps-table-col-filter-menu-button-active):hover{color:var(--cps-color-text-dark)}:host .cps-table-col-filter .cps-table-col-filter-menu-button-active{color:var(--cps-color-calm-lighten1)}.cps-table-col-filter-menu-content{padding-bottom:12px;min-width:200px;max-height:500px;overflow:auto}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header{min-height:32px;padding:8px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light);display:flex;justify-content:space-between;align-items:center}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header-title{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-darkest);max-width:390px;cursor:default}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon{margin-left:8px;cursor:pointer}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon:hover{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-operator{padding:12px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint{border-bottom:1px solid var(--cps-color-line-mid);padding:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint .cps-table-col-filter-match-mode-select{margin-bottom:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint:last-child{border-bottom:none}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-remove-rule-btn{padding-top:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-add-rule-btn{padding:8px 12px}.cps-table-col-filter-menu-content .cps-table-col-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "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", "borderRadius", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: TableColumnFilterConstraintComponent, selector: "table-column-filter-constraint", inputs: ["type", "field", "filterConstraint", "categoryOptions", "asButtonToggle", "singleSelection", "placeholder", "hasApplyButton"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableColumnFilterComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [
-                        CpsInputComponent,
-                        CalendarModule,
+            args: [{ selector: 'table-column-filter', standalone: true, imports: [
                         CommonModule,
                         FormsModule,
-                        CpsMenuComponent
-                    ], selector: 'cps-datepicker', template: "<div\n  class=\"cps-datepicker\"\n  [ngStyle]=\"{ width: cvtWidth }\"\n  [class.focused]=\"isOpened\">\n  <cps-input\n    #datepickerInput\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    prefixIcon=\"datepicker\"\n    [placeholder]=\"placeholder\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\n    (valueChanged)=\"onInputValueChanged($event)\"\n    [clearable]=\"clearable\"\n    (blurred)=\"onInputBlur()\"\n    (cleared)=\"onInputClear()\"\n    (enterClicked)=\"onInputEnterClicked()\"\n    [width]=\"width\"\n    [hint]=\"hint\"\n    [hideDetails]=\"hideDetails\"\n    [infoTooltip]=\"infoTooltip\"\n    [infoTooltipClass]=\"infoTooltipClass\"\n    [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n    [infoTooltipPersistent]=\"infoTooltipPersistent\"\n    [persistentClear]=\"persistentClear\"\n    [appearance]=\"appearance\"\n    [error]=\"error\"></cps-input>\n  <cps-menu\n    #calendarMenu\n    [withArrow]=\"false\"\n    (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n    (contentClicked)=\"onCalendarContentClick()\"\n    [focusOnShow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    containerClass=\"cps-datepicker-calendar-menu\">\n    <div class=\"cps-datepicker-calendar\">\n      <p-calendar\n        [(ngModel)]=\"value\"\n        [showIcon]=\"true\"\n        [showButtonBar]=\"showTodayButton\"\n        [inline]=\"true\"\n        (onSelect)=\"onSelectCalendarDate($event)\"\n        (onClearClick)=\"onClearCalendarDate()\"\n        [showOtherMonths]=\"false\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\">\n      </p-calendar>\n    </div>\n  </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep input{border:1px solid var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#fff;color:var(--cps-color-text-darkest);border:1px solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#fff;font-weight:600;margin:0;border-bottom:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-lightest);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-prepared)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:1px solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{color:var(--cps-color-text-light)}.cps-datepicker-calendar ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::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:1rem;font-family:Source Sans Pro,sans-serif;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:6px}.cps-datepicker-calendar ::ng-deep .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-button:active{background-color:var(--cps-color-highlight-selected)}.cps-datepicker-calendar ::ng-deep .p-button .p-button-label{font-weight:700}.cps-datepicker-calendar ::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}\n"] }]
-        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
-                    type: Self
-                }, {
+                        CpsButtonComponent,
+                        CpsMenuComponent,
+                        CpsIconComponent,
+                        CpsSelectComponent,
+                        TableColumnFilterConstraintComponent
+                    ], template: "<div class=\"cps-table-col-filter\">\n  <cps-menu\n    #columnFilterMenu\n    [withArrow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    [persistent]=\"persistent || (showApplyButton && isCategoryDropdownOpened)\"\n    (menuShown)=\"onMenuShown()\"\n    (menuHidden)=\"onMenuHidden()\"\n    (beforeMenuHidden)=\"onBeforeMenuHidden()\">\n    <div class=\"cps-table-col-filter-menu-content\">\n      <div\n        class=\"cps-table-col-filter-menu-content-header\"\n        *ngIf=\"showCloseButton || headerTitle\">\n        <span class=\"cps-table-col-filter-menu-content-header-title\">\n          {{ headerTitle }}\n        </span>\n        <cps-icon\n          *ngIf=\"showCloseButton\"\n          icon=\"close-x\"\n          (click)=\"onCloseClick()\"></cps-icon>\n      </div>\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 && currentMatchModes\"\n            class=\"cps-table-col-filter-match-mode-select\"\n            [hideDetails]=\"true\"\n            [returnObject]=\"false\"\n            [options]=\"currentMatchModes\"\n            [ngModel]=\"fieldConstraint.matchMode\"\n            (valueChanged)=\"\n              onMenuMatchModeChange($event, fieldConstraint)\n            \"></cps-select>\n          <table-column-filter-constraint\n            #constraintComponent\n            [type]=\"type\"\n            [field]=\"field\"\n            [asButtonToggle]=\"asButtonToggle\"\n            [singleSelection]=\"singleSelection\"\n            [categoryOptions]=\"categoryOptions\"\n            [filterConstraint]=\"fieldConstraint\"\n            [hasApplyButton]=\"showApplyButton\"\n            [placeholder]=\"placeholder\">\n          </table-column-filter-constraint>\n          <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]=\"isFilterApplied ? 'filter-funnel-filled' : 'filter-funnel'\"\n    size=\"13\"\n    (click)=\"columnFilterMenu.toggle($event)\"\n    class=\"cps-table-col-filter-menu-button\"\n    [ngClass]=\"{\n      'cps-table-col-filter-menu-button-active': isFilterApplied\n    }\"\n    >>\n  </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:8px;padding-right:4px}:host .cps-table-col-filter .cps-table-col-filter-menu-button:not(.cps-table-col-filter-menu-button-active):hover{color:var(--cps-color-text-dark)}:host .cps-table-col-filter .cps-table-col-filter-menu-button-active{color:var(--cps-color-calm-lighten1)}.cps-table-col-filter-menu-content{padding-bottom:12px;min-width:200px;max-height:500px;overflow:auto}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header{min-height:32px;padding:8px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light);display:flex;justify-content:space-between;align-items:center}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header-title{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-darkest);max-width:390px;cursor:default}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon{margin-left:8px;cursor:pointer}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon:hover{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-operator{padding:12px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint{border-bottom:1px solid var(--cps-color-line-mid);padding:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint .cps-table-col-filter-match-mode-select{margin-bottom:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint:last-child{border-bottom:none}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-remove-rule-btn{padding-top:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-add-rule-btn{padding:8px 12px}.cps-table-col-filter-menu-content .cps-table-col-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$3.Table, decorators: [{
                     type: Optional
-                }] }], propDecorators: { label: [{
+                }] }, { type: i2$1.TreeTable, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { field: [{
                 type: Input
-            }], disabled: [{
+            }], type: [{
                 type: Input
-            }], width: [{
+            }], persistent: [{
                 type: Input
-            }], placeholder: [{
+            }], showClearButton: [{
                 type: Input
-            }], hint: [{
+            }], showApplyButton: [{
                 type: Input
-            }], clearable: [{
+            }], showCloseButton: [{
                 type: Input
-            }], hideDetails: [{
+            }], showMatchModes: [{
                 type: Input
-            }], persistentClear: [{
+            }], matchModes: [{
                 type: Input
-            }], showTodayButton: [{
+            }], showOperator: [{
                 type: Input
-            }], openOnInputFocus: [{
+            }], maxConstraints: [{
                 type: Input
-            }], infoTooltip: [{
+            }], headerTitle: [{
                 type: Input
-            }], infoTooltipClass: [{
+            }], hideOnClear: [{
                 type: Input
-            }], infoTooltipMaxWidth: [{
+            }], categoryOptions: [{
                 type: Input
-            }], infoTooltipPersistent: [{
+            }], asButtonToggle: [{
                 type: Input
-            }], infoTooltipPosition: [{
+            }], singleSelection: [{
                 type: Input
-            }], appearance: [{
+            }], placeholder: [{
                 type: Input
-            }], minDate: [{
+            }], constraintCompList: [{
+                type: ViewChildren,
+                args: ['constraintComponent']
+            }], columnFilterMenu: [{
+                type: ViewChild,
+                args: ['columnFilterMenu']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onMouseOver: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+/**
+ * CpsTableColumnFilterDirective is a filtering directive used to filter single or multiple columns in table.
+ * @group Directives
+ */
+class CpsTableColumnFilterDirective {
+    constructor(elementRef, viewContainerRef) {
+        this.elementRef = elementRef;
+        this.viewContainerRef = viewContainerRef;
+        /**
+         * Type of a filter in table, it can be of type "number", "boolean", "text", "date" or "category".
+         * @group Props
+         */
+        this.filterType = 'text';
+        /**
+         * Determines whether the filter menu should be persistent.
+         * @group Props
+         */
+        this.filterPersistent = false;
+        /**
+         * Determines whether the filter should have clear button.
+         * @group Props
+         */
+        this.filterShowClearButton = true;
+        /**
+         * Determines whether the filter should have apply button.
+         * @group Props
+         */
+        this.filterShowApplyButton = true;
+        /**
+         * Determines whether the filter should have close button.
+         * @group Props
+         */
+        this.filterShowCloseButton = false;
+        /**
+         * Determines whether the filter should have match modes.
+         * @group Props
+         */
+        this.filterShowMatchModes = true;
+        /**
+         * Match modes for filter.
+         * @group Props
+         */
+        this.filterMatchModes = [];
+        /**
+         * Determines whether the filter should have operator.
+         * @group Props
+         */
+        this.filterShowOperator = true;
+        /**
+         * Maximum number of constraints.
+         * @group Props
+         */
+        this.filterMaxConstraints = 2;
+        /**
+         * Title of the filter.
+         * @group Props
+         */
+        this.filterHeaderTitle = '';
+        /**
+         * Determines whether the filter should hide on clear.
+         * @group Props
+         */
+        this.filterHideOnClear = false;
+        /**
+         * Options for category filter.
+         * @group Props
+         */
+        this.filterCategoryOptions = [];
+        /**
+         * Determines whether to show category filter as button toggles.
+         * @group Props
+         */
+        this.filterAsButtonToggle = false;
+        /**
+         * Single selection for category filter.
+         * @group Props
+         */
+        this.filterSingleSelection = false;
+        /**
+         * Placeholder for filter constraints.
+         * @group Props
+         */
+        this.filterPlaceholder = '';
+        this.filterCompRef = this.viewContainerRef.createComponent(TableColumnFilterComponent);
+    }
+    ngOnInit() {
+        this.elementRef.nativeElement.firstChild.after(this.filterCompRef.location.nativeElement);
+    }
+    ngOnChanges() {
+        this.filterCompRef.setInput('field', this.field);
+        this.filterCompRef.setInput('type', this.filterType);
+        this.filterCompRef.setInput('persistent', this.filterPersistent);
+        this.filterCompRef.setInput('showClearButton', this.filterShowClearButton);
+        this.filterCompRef.setInput('showApplyButton', this.filterShowApplyButton);
+        this.filterCompRef.setInput('showCloseButton', this.filterShowCloseButton);
+        this.filterCompRef.setInput('showMatchModes', this.filterShowMatchModes);
+        this.filterCompRef.setInput('matchModes', this.filterMatchModes);
+        this.filterCompRef.setInput('showOperator', this.filterShowOperator);
+        this.filterCompRef.setInput('maxConstraints', this.filterMaxConstraints);
+        this.filterCompRef.setInput('headerTitle', this.filterHeaderTitle);
+        this.filterCompRef.setInput('hideOnClear', this.filterHideOnClear);
+        this.filterCompRef.setInput('categoryOptions', this.filterCategoryOptions);
+        this.filterCompRef.setInput('asButtonToggle', this.filterAsButtonToggle);
+        this.filterCompRef.setInput('singleSelection', this.filterSingleSelection);
+        this.filterCompRef.setInput('placeholder', this.filterPlaceholder || this._getDefaultPlaceholder());
+    }
+    _getDefaultPlaceholder() {
+        switch (this.filterType) {
+            case 'text':
+                return 'Please enter';
+            case 'number':
+                return 'Enter value';
+            case 'date':
+                return 'Select date';
+            case 'category':
+                return 'Please select';
+            default:
+                return '';
+        }
+    }
+    hideFilter() {
+        this.filterCompRef?.instance?.hide();
+    }
+    clearFilter() {
+        this.filterCompRef?.instance?.clearFilter();
+    }
+    clearFilterValues() {
+        this.filterCompRef?.instance?.clearFilterValues();
+    }
+    ngOnDestroy() {
+        this.filterCompRef.destroy();
+        this.viewContainerRef.clear();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTableColumnFilterDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: CpsTableColumnFilterDirective, isStandalone: true, selector: "[cpsTColFilter]", inputs: { field: ["cpsTColFilter", "field"], filterType: "filterType", filterPersistent: "filterPersistent", filterShowClearButton: "filterShowClearButton", filterShowApplyButton: "filterShowApplyButton", filterShowCloseButton: "filterShowCloseButton", filterShowMatchModes: "filterShowMatchModes", filterMatchModes: "filterMatchModes", filterShowOperator: "filterShowOperator", filterMaxConstraints: "filterMaxConstraints", filterHeaderTitle: "filterHeaderTitle", filterHideOnClear: "filterHideOnClear", filterCategoryOptions: "filterCategoryOptions", filterAsButtonToggle: "filterAsButtonToggle", filterSingleSelection: "filterSingleSelection", filterPlaceholder: "filterPlaceholder" }, exportAs: ["cpsTColFilter"], usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTableColumnFilterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[cpsTColFilter]',
+                    exportAs: 'cpsTColFilter'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { field: [{
+                type: Input,
+                args: ['cpsTColFilter']
+            }], filterType: [{
                 type: Input
-            }], maxDate: [{
+            }], filterPersistent: [{
                 type: Input
-            }], value: [{
+            }], filterShowClearButton: [{
+                type: Input
+            }], filterShowApplyButton: [{
+                type: Input
+            }], filterShowCloseButton: [{
+                type: Input
+            }], filterShowMatchModes: [{
+                type: Input
+            }], filterMatchModes: [{
+                type: Input
+            }], filterShowOperator: [{
+                type: Input
+            }], filterMaxConstraints: [{
+                type: Input
+            }], filterHeaderTitle: [{
+                type: Input
+            }], filterHideOnClear: [{
+                type: Input
+            }], filterCategoryOptions: [{
+                type: Input
+            }], filterAsButtonToggle: [{
+                type: Input
+            }], filterSingleSelection: [{
+                type: Input
+            }], filterPlaceholder: [{
                 type: Input
-            }], valueChanged: [{
-                type: Output
-            }], datepickerInput: [{
-                type: ViewChild,
-                args: ['datepickerInput']
-            }], calendarMenu: [{
-                type: ViewChild,
-                args: ['calendarMenu']
             }] } });
 
+class CpsDetectFilterTypePipe {
+    transform(data, column) {
+        if (data.every((item) => typeof item[column] === 'boolean')) {
+            return 'boolean';
+        }
+        else if (data.every((item) => typeof item[column] === 'number')) {
+            return 'number';
+        }
+        else if (data.every((item) => item[column] instanceof Date)) {
+            return 'date';
+        }
+        else if (data.reduce((acc, item) => acc.add(item[column]), new Set()).size < 6) {
+            return 'category';
+        }
+        return 'text';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsDetectFilterTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: CpsDetectFilterTypePipe, isStandalone: true, name: "cpsDetectFilterType" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsDetectFilterTypePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'cpsDetectFilterType',
+                    standalone: true
+                }]
+        }] });
+
+// import jsPDF from 'jspdf';
+// import 'jspdf-autotable';
+function tableFactory(tableComponent) {
+    return tableComponent.primengTable;
+}
 /**
- * CpsButtonToggleComponent is used to select values using buttons.
+ * CpsTableComponent displays data in tabular format.
  * @group Components
  */
-class CpsButtonToggleComponent {
-    set value(value) {
-        this._value = value;
-        this.onChange(value);
+class CpsTableComponent {
+    /**
+     * An array of objects to display.
+     * @default []
+     * @group Props
+     */
+    set data(value) {
+        this._data = [...value];
     }
-    get value() {
-        return this._value;
+    get data() {
+        return this._data;
     }
-    constructor(_control, document, renderer) {
-        this._control = _control;
+    // eslint-disable-next-line no-useless-constructor
+    constructor(cdRef, document) {
+        this.cdRef = cdRef;
         this.document = document;
-        this.renderer = renderer;
         /**
-         * Label of the toggle buttons.
+         * An array of objects to represent dynamic columns.
          * @group Props
          */
-        this.label = '';
+        this.columns = [];
         /**
-         * An array of options.
+         * A key used to retrieve the header from columns.
          * @group Props
          */
-        this.options = [];
+        this.colHeaderName = 'header';
         /**
-         * Specifies if multiple values can be selected.
+         * A key used to retrieve the field from columns.
          * @group Props
          */
-        this.multiple = false;
+        this.colFieldName = 'field';
         /**
-         * Specifies that the component should be disabled.
+         * A key used to retrieve the filter type from columns.
          * @group Props
          */
-        this.disabled = false;
+        this.colFilterTypeName = 'filterType';
         /**
-         * Determines whether at least one of the options is mandatory.
+         * A key used to retrieve the date format from columns.
          * @group Props
          */
-        this.mandatory = true;
+        this.colDateFormatName = 'dateFormat';
         /**
-         * Determines whether all buttons should have equal widths.
+         * Determines whether the table should have alternating stripes.
          * @group Props
          */
-        this.equalWidths = true;
+        this.striped = true;
         /**
-         * Position of the option tooltip, can be 'top', 'bottom', 'left' or 'right'.
+         * Determines whether the table should have borders.
          * @group Props
          */
-        this.optionTooltipPosition = 'bottom';
+        this.bordered = true;
         /**
-         * When it is not an empty string, an info icon is displayed to show text for more info.
+         * Size of table cells, it can be "small", "normal" or "large".
          * @group Props
          */
-        this.infoTooltip = '';
+        this.size = 'normal';
         /**
-         * Info tooltip class for styling.
+         * Determines whether the table should have row selection.
          * @group Props
          */
-        this.infoTooltipClass = 'cps-tooltip-content';
+        this.selectable = false;
         /**
-         * Size of infoTooltip, of type number denoting pixels or string.
+         * Determines whether the table should have rows highlighting on hover.
          * @group Props
          */
-        this.infoTooltipMaxWidth = '100%';
+        this.rowHover = true;
         /**
-         * Determines whether the infoTooltip is persistent.
+         * Field, that uniquely identifies a record in data (needed for expandable rows).
          * @group Props
          */
-        this.infoTooltipPersistent = false;
+        this.dataKey = '';
         /**
-         * Position of infoTooltip, it can be 'top', 'bottom', 'left' or 'right'.
+         * Determines whether the table should show row menus.
          * @group Props
          */
-        this.infoTooltipPosition = 'top';
+        this.showRowMenu = false;
         /**
-         * Value of the component.
+         * Determines whether the 'Remove' button should be displayed in the row menu.
+         * Note: This setting only takes effect if 'showRowMenu' is true.
          * @group Props
          */
-        this._value = undefined;
+        this.showRowRemoveButton = true;
         /**
-         * Callback to invoke on value change.
-         * @param {any} any - value changed.
-         * @group Emits
+         * Determines whether the 'Edit' button should be displayed in the row menu.
+         * Note: This setting only takes effect if 'showRowMenu' is true.
+         * @group Props
          */
-        this.valueChanged = new EventEmitter();
-        this.largestButtonWidth = 0;
-        // 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 = [];
-        }
-        this._setEqualWidths();
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    writeValue(value) {
-        this.value = value;
-    }
-    updateValueEvent(event, val) {
-        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;
-        }
-        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);
-    }
-    _setEqualWidths() {
-        if (!this.equalWidths)
-            return;
-        const hiddenSpan = this.renderer.createElement('span');
-        this.renderer.setStyle(hiddenSpan, 'visibility', 'hidden');
-        this.renderer.setStyle(hiddenSpan, 'position', 'absolute');
-        this.renderer.setStyle(hiddenSpan, 'left', '-9999px');
-        this.renderer.setStyle(hiddenSpan, 'font-size', '16px');
-        this.renderer.setStyle(hiddenSpan, 'letter-spacing', '0.05em');
-        this.renderer.setStyle(hiddenSpan, 'font-family', '"Source Sans Pro", sans-serif');
-        this.renderer.appendChild(this.document.body, hiddenSpan);
-        this.largestButtonWidth = 0;
-        this.options.forEach((opt) => {
-            const text = this.renderer.createText(opt.label || '');
-            this.renderer.appendChild(hiddenSpan, text);
-            let width = hiddenSpan.offsetWidth || 0;
-            width += 26;
-            if (opt.icon) {
-                width += 16;
-                if (opt.label)
-                    width += 8;
-            }
-            if (width > this.largestButtonWidth) {
-                this.largestButtonWidth = width;
-            }
-            this.renderer.removeChild(hiddenSpan, text);
-        });
-        this.renderer.removeChild(this.document.body, hiddenSpan);
-    }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    setDisabledState(disabled) { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsButtonToggleComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", equalWidths: "equalWidths", optionTooltipPosition: "optionTooltipPosition", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], 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]=\"optionTooltipPosition\">\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, option.value)\" />\n  <span\n    class=\"cps-btn-toggle-content-option-content\"\n    [ngStyle]=\"{\n      'min-width': largestButtonWidth ? largestButtonWidth + 'px' : 'none'\n    }\">\n    <cps-icon\n      *ngIf=\"option.icon\"\n      [ngClass]=\"{ 'me-2': !!option.label }\"\n      [icon]=\"option.icon\">\n    </cps-icon>\n    <span *ngIf=\"option.label\">{{ 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;font-weight:700;font-size:16px;font-family:Source Sans Pro,sans-serif;cursor:default}: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(#ffffff1a 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:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-text-lightest);border-right:0;font-weight:400;font-size:16px;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:var(--cps-color-highlight-hover)}:host .cps-btn-toggle-content-option-content:active{background:var(--cps-color-highlight-active)}: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-text-lightest)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsButtonToggleComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, imports: [
-                        CommonModule,
-                        CheckOptionSelectedPipe,
-                        CpsInfoCircleComponent,
-                        CpsIconComponent,
-                        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]=\"optionTooltipPosition\">\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, option.value)\" />\n  <span\n    class=\"cps-btn-toggle-content-option-content\"\n    [ngStyle]=\"{\n      'min-width': largestButtonWidth ? largestButtonWidth + 'px' : 'none'\n    }\">\n    <cps-icon\n      *ngIf=\"option.icon\"\n      [ngClass]=\"{ 'me-2': !!option.label }\"\n      [icon]=\"option.icon\">\n    </cps-icon>\n    <span *ngIf=\"option.label\">{{ 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;font-weight:700;font-size:16px;font-family:Source Sans Pro,sans-serif;cursor:default}: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(#ffffff1a 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:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:#fff;padding:.375em .75em;position:relative;border:.0625em solid var(--cps-color-text-lightest);border-right:0;font-weight:400;font-size:16px;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);text-align:center;transition:background-color .2s ease;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-btn-toggle-content-option-content:hover{background:var(--cps-color-highlight-hover)}:host .cps-btn-toggle-content-option-content:active{background:var(--cps-color-highlight-active)}: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-text-lightest)}\n"] }]
-        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
-                    type: Self
-                }, {
-                    type: Optional
-                }] }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.Renderer2 }], propDecorators: { label: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], mandatory: [{
-                type: Input
-            }], equalWidths: [{
-                type: Input
-            }], optionTooltipPosition: [{
-                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
-            }] } });
-
-/**
- * TableColumnFilterConstraintComponent is an internal filtering constraint component in table and treetable.
- */
-class TableColumnFilterConstraintComponent {
-    get isCategoryDropdownOpened() {
-        return this.categoryAutocompleteComponent?.isOpened || false;
-    }
-    constructor(dt, tt) {
-        this.dt = dt;
-        this.tt = tt;
+        this.showRowEditButton = true;
         /**
-         * Type of filter constraint.
+         * Determines whether the table should have re-orderable rows.
          * @group Props
          */
-        this.type = 'text';
+        this.reorderableRows = false;
         /**
-         * An array of category options.
+         * When enabled, a loader component is displayed.
          * @group Props
          */
-        this.categoryOptions = [];
+        this.loading = false;
         /**
-         * Determines whether to show category filter as button toggles.
+         * Inline style of the table.
          * @group Props
          */
-        this.asButtonToggle = false;
+        this.tableStyle = undefined;
         /**
-         * Single selection for category filter.
+         * Style class of the table.
          * @group Props
          */
-        this.singleSelection = false;
+        this.tableStyleClass = '';
         /**
-         * Placeholder for input field.
+         * Makes all columns sortable if columns prop is provided.
          * @group Props
          */
-        this.placeholder = '';
+        this.sortable = false;
         /**
-         * Determines whether the filter should have an apply button.
+         * Enable filtering on all columns.
          * @group Props
          */
-        this.hasApplyButton = true;
-        this.booleanOptions = [
-            { label: 'True', value: 'true' },
-            { label: 'False', value: 'false' }
-        ];
-        this.categories = [];
-        this._tableInstance = dt || tt;
-    }
-    ngOnChanges() {
-        this._updateCategories();
-    }
-    _updateCategories() {
-        if (this.type !== 'category')
-            return;
-        if (this.categoryOptions.length > 0) {
-            if (typeof this.categoryOptions[0] === 'string') {
-                this.categories = this.categoryOptions.map((o) => ({
-                    label: o,
-                    value: o
-                }));
-            }
-            else {
-                this.categories = this
-                    .categoryOptions;
-            }
-        }
-        else {
-            let cats = [];
-            if (this._tableInstance instanceof Table) {
-                cats =
-                    this._tableInstance.value?.map((v) => v[this.field]) || [];
-            }
-            else {
-                const fillCats = (nodes) => {
-                    nodes?.forEach((v) => {
-                        cats.push(v.data[this.field]);
-                        fillCats(v.children);
-                    });
-                };
-                fillCats(this._tableInstance.value);
-            }
-            this.categories =
-                Array.from(new Set(cats))?.map((c) => ({
-                    label: c,
-                    value: c
-                })) || [];
-        }
-    }
-    onValueChange(value) {
-        this.filterConstraint.value = value;
-        if (this._tableInstance.isFilterBlank(value) || !this.hasApplyButton) {
-            this._tableInstance._filter();
-        }
-    }
-    onEnterKeyDown(event) {
-        this._tableInstance._filter();
-        event.preventDefault();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableColumnFilterConstraintComponent, deps: [{ token: i1$3.Table, optional: true }, { token: i2$1.TreeTable, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TableColumnFilterConstraintComponent, isStandalone: true, selector: "table-column-filter-constraint", inputs: { type: "type", field: "field", filterConstraint: "filterConstraint", categoryOptions: "categoryOptions", asButtonToggle: "asButtonToggle", singleSelection: "singleSelection", placeholder: "placeholder", hasApplyButton: "hasApplyButton" }, viewQueries: [{ propertyName: "categoryAutocompleteComponent", first: true, predicate: ["categoryAutocompleteComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n  <cps-input\n    *ngSwitchCase=\"'text'\"\n    [placeholder]=\"placeholder\"\n    [hideDetails]=\"true\"\n    (keydown.enter)=\"onEnterKeyDown($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)=\"onEnterKeyDown($event)\"\n    [value]=\"filterConstraint?.value\"\n    (valueChanged)=\"onValueChange($event)\"\n    type=\"number\"></cps-input>\n\n  <div\n    class=\"cps-table-col-filter-constraint-btn-toggles\"\n    *ngSwitchCase=\"'boolean'\">\n    <cps-button-toggle\n      [options]=\"booleanOptions\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      [mandatory]=\"false\">\n    </cps-button-toggle>\n  </div>\n\n  <cps-datepicker\n    *ngSwitchCase=\"'date'\"\n    [openOnInputFocus]=\"true\"\n    [hideDetails]=\"true\"\n    [placeholder]=\"placeholder\"\n    [value]=\"filterConstraint?.value\"\n    (keydown.enter)=\"onEnterKeyDown($event)\"\n    (valueChanged)=\"onValueChange($event)\">\n  </cps-datepicker>\n\n  <ng-container *ngSwitchCase=\"'category'\">\n    <cps-autocomplete\n      #categoryAutocompleteComponent\n      *ngIf=\"!asButtonToggle\"\n      class=\"cps-table-col-filter-category-autocomplete\"\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]=\"!singleSelection\">\n    </cps-autocomplete>\n    <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n      <cps-button-toggle\n        *ngIf=\"asButtonToggle\"\n        [options]=\"categories\"\n        [value]=\"filterConstraint?.value\"\n        (valueChanged)=\"onValueChange($event)\"\n        [mandatory]=\"false\"\n        [multiple]=\"!singleSelection\">\n      </cps-button-toggle>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host .cps-table-col-filter-constraint-btn-toggles{display:flex;justify-content:center}:host .cps-table-col-filter-category-autocomplete{min-width:200px;max-width:400px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsDatepickerComponent, selector: "cps-datepicker", inputs: ["label", "disabled", "width", "placeholder", "hint", "clearable", "hideDetails", "persistentClear", "showTodayButton", "openOnInputFocus", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "minDate", "maxDate", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", 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)=\"onEnterKeyDown($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)=\"onEnterKeyDown($event)\"\n    [value]=\"filterConstraint?.value\"\n    (valueChanged)=\"onValueChange($event)\"\n    type=\"number\"></cps-input>\n\n  <div\n    class=\"cps-table-col-filter-constraint-btn-toggles\"\n    *ngSwitchCase=\"'boolean'\">\n    <cps-button-toggle\n      [options]=\"booleanOptions\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      [mandatory]=\"false\">\n    </cps-button-toggle>\n  </div>\n\n  <cps-datepicker\n    *ngSwitchCase=\"'date'\"\n    [openOnInputFocus]=\"true\"\n    [hideDetails]=\"true\"\n    [placeholder]=\"placeholder\"\n    [value]=\"filterConstraint?.value\"\n    (keydown.enter)=\"onEnterKeyDown($event)\"\n    (valueChanged)=\"onValueChange($event)\">\n  </cps-datepicker>\n\n  <ng-container *ngSwitchCase=\"'category'\">\n    <cps-autocomplete\n      #categoryAutocompleteComponent\n      *ngIf=\"!asButtonToggle\"\n      class=\"cps-table-col-filter-category-autocomplete\"\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]=\"!singleSelection\">\n    </cps-autocomplete>\n    <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n      <cps-button-toggle\n        *ngIf=\"asButtonToggle\"\n        [options]=\"categories\"\n        [value]=\"filterConstraint?.value\"\n        (valueChanged)=\"onValueChange($event)\"\n        [mandatory]=\"false\"\n        [multiple]=\"!singleSelection\">\n      </cps-button-toggle>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host .cps-table-col-filter-constraint-btn-toggles{display:flex;justify-content:center}:host .cps-table-col-filter-category-autocomplete{min-width:200px;max-width:400px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.Table, decorators: [{
-                    type: Optional
-                }] }, { type: i2$1.TreeTable, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { type: [{
-                type: Input
-            }], field: [{
-                type: Input
-            }], filterConstraint: [{
-                type: Input
-            }], categoryOptions: [{
-                type: Input
-            }], asButtonToggle: [{
-                type: Input
-            }], singleSelection: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], hasApplyButton: [{
-                type: Input
-            }], categoryAutocompleteComponent: [{
-                type: ViewChild,
-                args: ['categoryAutocompleteComponent']
-            }] } });
-
-/**
- * TableColumnFilterComponent is an internal filter component in table and treetable.
- */
-class TableColumnFilterComponent {
-    get isCategoryDropdownOpened() {
-        if (this.type !== 'category')
-            return false;
-        return this.constraintCompList?.first?.isCategoryDropdownOpened || false;
-    }
-    constructor(elementRef, dt, tt) {
-        this.elementRef = elementRef;
-        this.dt = dt;
-        this.tt = tt;
+        this.filterableByColumns = false;
+        /**
+         * If true, automatically detects filter type based on values, otherwise sets 'text' filter type for all columns.
+         * Note: This setting only takes effect if 'filterableByColumns' is true.
+         * @group Props
+         */
+        this.autoColumnFilterType = true;
+        /**
+         * Determines whether sorting works on single column or on multiple columns.
+         * @group Props
+         */
+        this.sortMode = 'single';
+        /**
+         * Determines whether to use the default sorting or a custom one using sortFunction.
+         * @group Props
+         */
+        this.customSort = false;
+        /**
+         * Determines whether the table has a toolbar.
+         * @group Props
+         */
+        this.hasToolbar = true;
+        /**
+         * Toolbar size, it can be "small" or "normal".
+         * @group Props
+         */
+        this.toolbarSize = 'normal';
+        /**
+         * Toolbar title.
+         * @group Props
+         */
+        this.toolbarTitle = '';
+        /**
+         * Toolbar icon name.
+         * @group Props
+         */
+        this.toolbarIcon = '';
+        /**
+         * Toolbar icon color.
+         * @group Props
+         */
+        this.toolbarIconColor = '';
+        /**
+         * Makes table scrollable.
+         * @group Props
+         */
+        this.scrollable = true;
+        /**
+         * Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size.
+         * @group Props
+         */
+        this.scrollHeight = '';
+        /**
+         * Determines whether only the elements within scrollable area should be added into the DOM. Works only if scrollable prop is true.
+         * @group Props
+         */
+        this.virtualScroll = false;
+        /**
+         * Determines how many additional elements to add to the DOM outside of the view.
+         * @group Props
+         */
+        this.numToleratedItems = 10;
+        /**
+         * Determines whether the table should have paginator.
+         * @group Props
+         */
+        this.paginator = false;
+        /**
+         * Determines whether to show paginator even if there is only one page.
+         * @group Props
+         */
+        this.alwaysShowPaginator = true;
+        /**
+         * Array of integer values to display inside rows per page dropdown of paginator.
+         * @group Props
+         */
+        this.rowsPerPageOptions = [];
+        /**
+         * Index of the first row to be displayed.
+         * @group Props
+         */
+        this.first = 0;
+        /**
+         * Number of rows to display per page.
+         * @group Props
+         */
+        this.rows = 0;
+        /**
+         * Determines whether to reset page on rows change.
+         * @group Props
+         */
+        this.resetPageOnRowsChange = false;
+        /**
+         * Determines whether to reset page on table data sorting.
+         * @group Props
+         */
+        this.resetPageOnSort = true;
+        /**
+         * Number of total records.
+         * @group Props
+         */
+        this.totalRecords = 0;
+        /**
+         * Text to display when there is no data.
+         * @group Props
+         */
+        this.emptyMessage = 'No data';
+        /**
+         * Height of table's body when there is no data, of type number denoting pixels or string.
+         * @group Props
+         */
+        this.emptyBodyHeight = '';
+        /**
+         * Defines if data is loaded and interacted with in lazy manner.
+         * @group Props
+         */
+        this.lazy = false;
+        /**
+         * Determines whether to call lazy loading on initialization.
+         * @group Props
+         */
+        this.lazyLoadOnInit = true;
+        /**
+         * Determines whether to show global filter in the toolbar.
+         * @group Props
+         */
+        this.showGlobalFilter = false;
+        /**
+         * Global filter placeholder.
+         * @group Props
+         */
+        this.globalFilterPlaceholder = 'Search';
         /**
-         * Type of filter in table, it can be of type "number", "boolean", "text", "date" or "category".
+         * An array of fields to use in global filtering.
          * @group Props
          */
-        this.type = 'text';
+        this.globalFilterFields = [];
         /**
-         * Determines whether the filter menu should be persistent.
+         * Determines whether to clear global filter on data loading.
          * @group Props
          */
-        this.persistent = false;
+        this.clearGlobalFilterOnLoading = false;
         /**
-         * Determines whether the filter should have clear button.
+         * Determines whether to show remove button in the toolbar when rows are selected.
          * @group Props
          */
-        this.showClearButton = true;
+        this.showRemoveBtnOnSelect = true;
         /**
-         * Determines whether the filter should have apply button.
+         * Determines whether removeBtnOnSelect is disabled.
          * @group Props
          */
-        this.showApplyButton = true;
+        this.removeBtnOnSelectDisabled = false;
         /**
-         * Determines whether the filter should have close button.
+         * Determines whether to show additional button in the toolbar when rows are selected.
          * @group Props
          */
-        this.showCloseButton = false;
+        this.showAdditionalBtnOnSelect = false;
         /**
-         * Determines whether the filter should have match modes.
+         * AdditionalBtnOnSelect title.
          * @group Props
          */
-        this.showMatchModes = true;
+        this.additionalBtnOnSelectTitle = 'Select action';
         /**
-         * Match modes for filter.
+         * AdditionalBtnOnSelect icon.
          * @group Props
          */
-        this.matchModes = [];
+        this.additionalBtnOnSelectIcon = '';
         /**
-         * Determines whether the filter should have operator.
+         * Determines whether additionalBtnOnSelect is disabled.
          * @group Props
          */
-        this.showOperator = true;
+        this.additionalBtnOnSelectDisabled = false;
         /**
-         * Maximum number of constraints.
+         * Determines whether to show action button in the toolbar.
          * @group Props
          */
-        this.maxConstraints = 2;
+        this.showActionBtn = false;
         /**
-         * Title of the filter.
+         * Action button title.
          * @group Props
          */
-        this.headerTitle = '';
+        this.actionBtnTitle = 'Action';
         /**
-         * Determines whether the filter should hide on clear.
+         * Action button icon.
          * @group Props
          */
-        this.hideOnClear = false;
+        this.actionBtnIcon = '';
         /**
-         * Options for category filter.
+         * Determines whether actionBtn is disabled.
          * @group Props
          */
-        this.categoryOptions = [];
+        this.actionBtnDisabled = false;
         /**
-         * Determines whether to show category filter as button toggles.
+         * Determines whether to show export button in the toolbar.
          * @group Props
          */
-        this.asButtonToggle = false;
+        this.showExportBtn = false;
         /**
-         * Single selection for category filter.
+         * Determines whether exportBtn is disabled.
          * @group Props
          */
-        this.singleSelection = false;
+        this.exportBtnDisabled = false;
         /**
-         * Placeholder for filter constraints.
+         * Name of the exported file.
          * @group Props
          */
-        this.placeholder = '';
-        this.operator = FilterOperator.AND;
-        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: [
-                CpsColumnFilterMatchMode.STARTS_WITH,
-                CpsColumnFilterMatchMode.CONTAINS,
-                CpsColumnFilterMatchMode.NOT_CONTAINS,
-                CpsColumnFilterMatchMode.ENDS_WITH,
-                CpsColumnFilterMatchMode.EQUALS,
-                CpsColumnFilterMatchMode.NOT_EQUALS
-            ],
-            number: [
-                CpsColumnFilterMatchMode.EQUALS,
-                CpsColumnFilterMatchMode.NOT_EQUALS,
-                CpsColumnFilterMatchMode.LESS_THAN,
-                CpsColumnFilterMatchMode.LESS_THAN_OR_EQUAL_TO,
-                CpsColumnFilterMatchMode.GREATER_THAN,
-                CpsColumnFilterMatchMode.GREATER_THAN_OR_EQUAL_TO
-            ],
-            date: [
-                CpsColumnFilterMatchMode.DATE_IS,
-                CpsColumnFilterMatchMode.DATE_IS_NOT,
-                CpsColumnFilterMatchMode.DATE_BEFORE,
-                CpsColumnFilterMatchMode.DATE_AFTER
-            ]
-        };
-        this.isFilterApplied = false;
-        this._tableInstance = dt || tt;
+        this.exportFilename = 'download';
+        /**
+         * Character to use as the csv separator.
+         * @group Props
+         */
+        this.csvSeparator = ',';
+        /**
+         * Determines whether to show data reload button in the toolbar.
+         * @group Props
+         */
+        this.showDataReloadBtn = false;
+        /**
+         * Determines whether dataReloadBtn is disabled.
+         * @group Props
+         */
+        this.dataReloadBtnDisabled = false;
+        /**
+         * Determines whether the table should show columnsToggle menu, where you can choose which columns to be displayed. If external body template is provided, use columnsSelected event emitter.
+         * @group Props
+         */
+        this.showColumnsToggleBtn = false;
+        /**
+         * Determines whether columnsToggle button is disabled.
+         * @group Props
+         */
+        this.columnsToggleBtnDisabled = false;
+        /**
+         * Array of initial columns to show in the table. If not provided, all columns are initially visible.
+         * @group Props
+         */
+        this.initialColumns = [];
+        /**
+         * If set to true, row data are rendered using innerHTML.
+         * @group Props
+         */
+        this.renderDataAsHTML = false;
+        /**
+         * Callback to invoke on selection changed. Returns selected rows.
+         * @param {any[]} any[] - selected rows.
+         * @group Emits
+         */
+        this.rowsSelected = new EventEmitter();
+        /**
+         * Callback to invoke on selection changed. Returns selected rows indexes.
+         * @param {number[]} number[] - selected rows indexes.
+         * @group Emits
+         */
+        this.selectedRowIndexes = new EventEmitter();
+        /**
+         * Callback to invoke when action button is clicked.
+         * @param {void} void - action button clicked.
+         * @group Emits
+         */
+        this.actionBtnClicked = new EventEmitter();
+        /**
+         * Callback to invoke when edit-row button is clicked.
+         * @param {{row: any, index: number}} {row: any, index: number} - edit-row button clicked.
+         * @group Emits
+         */
+        this.editRowBtnClicked = new EventEmitter();
+        /**
+         * Callback to invoke on rows removal. Returns rows.
+         * @param {any[]} any[] - array of rows to remove.
+         * @group Emits
+         */
+        this.rowsToRemove = new EventEmitter();
+        /**
+         * Callback to invoke on rows removal. Returns rows indexes.
+         * @param {number[]} number[] - array of indexes of rows to remove.
+         * @group Emits
+         */
+        this.rowIndexesToRemove = new EventEmitter();
+        /**
+         * Callback to invoke on page changed.
+         * @param {any} any - page changed.
+         * @group Emits
+         */
+        this.pageChanged = new EventEmitter();
+        /**
+         * Callback to invoke when data is sorted.
+         * @param {any} any - sort meta.
+         * @group Emits
+         */
+        this.sorted = new EventEmitter();
+        /**
+         * Callback to invoke when data is filtered.
+         * @param {any} any - custom filtering event.
+         * @group Emits
+         */
+        this.filtered = new EventEmitter();
+        /**
+         * Callback to invoke when rows are reordered.
+         * @param {any} any - rows reordered.
+         * @group Emits
+         */
+        this.rowsReordered = new EventEmitter();
+        /**
+         * Callback to invoke on columns selection.
+         * @param {object} object - selected column.
+         * @group Emits
+         */
+        this.columnsSelected = new EventEmitter();
+        /**
+         * Callback to invoke when paging, sorting or filtering happens in lazy mode.
+         * @param {any} any - custom lazy loading event.
+         * @group Emits
+         */
+        this.lazyLoaded = new EventEmitter();
+        /**
+         * Callback to invoke when data-reload button is clicked.
+         * @param {any} any - button clicked.
+         * @group Emits
+         */
+        this.dataReloadBtnClicked = new EventEmitter();
+        /**
+         * Callback to invoke when additional button on select is clicked.
+         * @param {any[]} any[] - selected data.
+         * @group Emits
+         */
+        this.additionalBtnOnSelectClicked = new EventEmitter();
+        /**
+         * A function to implement custom sorting. customSort must be true.
+         * @param {any} any - sort meta.
+         * @group Emits
+         */
+        this.customSortFunction = new EventEmitter();
+        this._data = [];
+        this.selectedRows = [];
+        this.virtualScrollItemSize = 0;
+        this.rowOptions = [];
+        this.selectedColumns = [];
+        this.exportMenuItems = [
+            {
+                title: 'CSV',
+                icon: 'csv',
+                action: () => {
+                    this.exportTable('csv');
+                }
+            },
+            {
+                title: 'XLSX',
+                icon: 'xls',
+                action: () => {
+                    this.exportTable('xlsx');
+                }
+            }
+            // {
+            //   title: 'PDF',
+            //   icon: 'pdf',
+            //   action: () => {
+            //     this.exportTable('pdf');
+            //   }
+            // }
+        ];
     }
     ngOnInit() {
-        if (this.matchModes.length > 0) {
-            this.filterMatchModeOptions[this.type] = this.matchModes;
-        }
-        this._onFilterSub = this._tableInstance?.onFilter?.subscribe((value) => this._updateFilterApplied(value));
-        if (!this._tableInstance.filters[this.field]) {
-            this._initFieldFilterConstraint();
-        }
-        if (this.maxConstraints > 1 && this.type !== 'category') {
-            this.showApplyButton = true;
-        }
-        if (this.type === 'boolean') {
-            this.showApplyButton = false;
-        }
-        this.currentMatchModes = this.filterMatchModeOptions[this.type]?.map((key) => {
-            return { label: this.matchModeLabels[key], value: key };
-        });
-    }
-    ngOnDestroy() {
-        this._onFilterSub?.unsubscribe();
-    }
-    _updateFilterApplied(value) {
-        const fieldFilter = value.filters[this.field];
-        if (fieldFilter) {
-            if (Array.isArray(fieldFilter)) {
-                this.isFilterApplied = fieldFilter.some((meta) => !this._tableInstance.isFilterBlank(meta.value));
-            }
+        this.emptyBodyHeight = convertSize(this.emptyBodyHeight);
+        if (!this.scrollable)
+            this.virtualScroll = false;
+        if (this.showAdditionalBtnOnSelect)
+            this.showRemoveBtnOnSelect = false;
+        if (this.paginator) {
+            if (this.rowsPerPageOptions.length < 1)
+                this.rowsPerPageOptions = [5, 10, 25, 50];
+            if (!this.rows)
+                this.rows = this.rowsPerPageOptions[0];
             else {
-                this.isFilterApplied = !this._tableInstance.isFilterBlank(fieldFilter.value);
+                if (!this.rowsPerPageOptions.includes(this.rows)) {
+                    throw new Error('rowsPerPageOptions must include rows');
+                }
             }
+            this.rowOptions = this.rowsPerPageOptions.map((v) => ({
+                label: '' + v,
+                value: v
+            }));
         }
-        else {
-            this.isFilterApplied = false;
+        if (this.showGlobalFilter &&
+            this.globalFilterFields?.length < 1 &&
+            this.data?.length > 0) {
+            this.globalFilterFields = Object.keys(this.data[0]);
         }
+        this.selectedColumns =
+            this.initialColumns.length > 0 ? this.initialColumns : this.columns;
     }
-    _initFieldFilterConstraint() {
-        const defaultMatchMode = this._getDefaultMatchMode();
-        if (this._tableInstance instanceof Table) {
-            this._tableInstance.filters[this.field] = [
-                {
-                    value: null,
-                    matchMode: defaultMatchMode,
-                    operator: this.operator
-                }
-            ];
-        }
-        else {
-            this._tableInstance.filters[this.field] = {
-                value: null,
-                matchMode: defaultMatchMode
-            };
+    get styleClass() {
+        const classesList = [];
+        switch (this.size) {
+            case 'small':
+                classesList.push('p-datatable-sm');
+                break;
+            case 'large':
+                classesList.push('p-datatable-lg');
+                break;
         }
-    }
-    _getDefaultMatchMode() {
-        const getMatchMode = (val) => {
-            if (this.type in this.filterMatchModeOptions) {
-                return this.filterMatchModeOptions[this.type].includes(val)
-                    ? val
-                    : this.filterMatchModeOptions[this.type][0];
-            }
-            else {
-                return val;
+        if (this.hasToolbar) {
+            switch (this.toolbarSize) {
+                case 'small':
+                    classesList.push('cps-tbar-small');
+                    break;
+                case 'normal':
+                    classesList.push('cps-tbar-normal');
+                    break;
             }
-        };
-        switch (this.type) {
-            case 'text':
-                return getMatchMode(CpsColumnFilterMatchMode.STARTS_WITH);
-            case 'number':
-                return getMatchMode(CpsColumnFilterMatchMode.EQUALS);
-            case 'date':
-                return getMatchMode(CpsColumnFilterMatchMode.DATE_IS);
-            case 'category':
-                return this.singleSelection
-                    ? CpsColumnFilterMatchMode.IS
-                    : CpsColumnFilterMatchMode.IN;
-            default:
-                return getMatchMode(CpsColumnFilterMatchMode.CONTAINS);
         }
+        if (this.striped) {
+            classesList.push('p-datatable-striped');
+        }
+        if (this.bordered) {
+            classesList.push('p-datatable-gridlines');
+        }
+        return classesList.join(' ');
     }
-    _getDefaultOperator() {
-        return this._tableInstance.filters
-            ? (this._tableInstance.filters[this.field])[0].operator
-            : this.operator;
+    ngAfterViewChecked() {
+        if (!this.virtualScroll || this.virtualScrollItemSize)
+            return;
+        this.virtualScrollItemSize =
+            this.primengTable?.el?.nativeElement
+                ?.querySelector('.p-datatable-tbody')
+                ?.querySelector('tr')?.clientHeight || 0;
+        this.cdRef.detectChanges();
     }
-    _updateSortIconColor(color) {
-        const unsortedUp = this.elementRef?.nativeElement?.parentElement?.querySelector('.sort-unsorted-arrow-up');
-        if (unsortedUp) {
-            unsortedUp.style.borderBottomColor = color;
+    ngOnChanges(changes) {
+        if (this.loading) {
+            this.clearSelection();
+            if (this.clearGlobalFilterOnLoading)
+                this.clearGlobalFilter();
         }
-        const unsortedDown = this.elementRef?.nativeElement?.parentElement?.querySelector('.sort-unsorted-arrow-down');
-        if (unsortedDown) {
-            unsortedDown.style.borderTopColor = color;
+        if (changes?.data) {
+            this.resetSortingState();
+            this.selectedRows = this.selectedRows.filter((sr) => this.data.includes(sr));
         }
     }
-    onCloseClick() {
-        this.hide();
+    resetSortingState() {
+        this.tUnsortDirective?.resetDefaultSortOrder();
     }
-    onMenuMatchModeChange(value, filterMeta) {
-        filterMeta.matchMode = value;
-        if (!this.showApplyButton) {
-            this._tableInstance._filter();
+    clearSelection() {
+        this.selectedRows = [];
+    }
+    clearGlobalFilter() {
+        this.globalFilterComp?.clear();
+    }
+    onSelectionChanged(selection) {
+        this.rowsSelected.emit(selection);
+        const indexes = this._getIndexes(selection);
+        this.selectedRowIndexes.emit(indexes);
+    }
+    onSortFunction(event) {
+        this.customSortFunction.emit(event);
+    }
+    onFilterGlobal(value) {
+        this.primengTable.filterGlobal(value, 'contains');
+    }
+    removeSelected() {
+        this.rowsToRemove.emit(this.selectedRows);
+        const indexes = this._getIndexes(this.selectedRows);
+        this.rowIndexesToRemove.emit(indexes);
+    }
+    onClickAdditionalBtnOnSelect() {
+        this.additionalBtnOnSelectClicked.emit(this.selectedRows);
+    }
+    onClickActionBtn() {
+        this.actionBtnClicked.emit();
+    }
+    onRowsPerPageChanged() {
+        if (this.resetPageOnRowsChange) {
+            this.primengTable.first = 0;
         }
+        this.changePage(this.getPage());
     }
-    addConstraint() {
-        this._tableInstance.filters[this.field].push({
-            value: null,
-            matchMode: this._getDefaultMatchMode(),
-            operator: this._getDefaultOperator()
-        });
+    getPageCount() {
+        return Math.ceil(this.primengTable.totalRecords / this.rows);
     }
-    removeConstraint(filterMeta) {
-        this._tableInstance.filters[this.field] = (this._tableInstance.filters[this.field]).filter((meta) => meta !== filterMeta);
-        this._tableInstance._filter();
+    getPage() {
+        return this.primengTable.first
+            ? Math.floor(this.primengTable.first / this.rows)
+            : 0;
     }
-    onOperatorChange(value) {
-        this._tableInstance.filters[this.field].forEach((filterMeta) => {
-            filterMeta.operator = value;
-            this.operator = value;
-        });
-        if (!this.showApplyButton) {
-            this._tableInstance._filter();
+    changePage(p) {
+        const pc = Math.ceil(this.getPageCount());
+        if (p >= 0 && p < pc) {
+            this.first = this.rows * p;
+            this.primengTable.onPageChange({ first: this.first, rows: this.rows });
         }
     }
-    get fieldConstraints() {
-        if (this._tableInstance instanceof Table) {
-            return this._tableInstance.filters
-                ? this._tableInstance.filters[this.field]
-                : null;
+    onPageChange(event) {
+        this.first = event.first;
+        this.rows = event.rows;
+        const state = {
+            page: this.getPage(),
+            first: this.first,
+            rows: this.rows,
+            pageCount: Math.ceil(this.getPageCount())
+        };
+        this.pageChanged.emit(state);
+    }
+    toggleAllColumns() {
+        this.selectedColumns =
+            this.selectedColumns.length < this.columns.length ? this.columns : [];
+        this.columnsSelected.emit(this.selectedColumns);
+    }
+    isColumnSelected(col) {
+        return this.selectedColumns.some((item) => isEqual(item, col));
+    }
+    onSelectColumn(col) {
+        let res = [];
+        if (this.isColumnSelected(col)) {
+            res = this.selectedColumns.filter((v) => !isEqual(v, col));
         }
         else {
-            return this._tableInstance.filters
-                ? [this._tableInstance.filters[this.field]]
-                : null;
+            this.columns.forEach((o) => {
+                if (this.selectedColumns.some((v) => isEqual(v, o)) ||
+                    isEqual(col, o)) {
+                    res.push(o);
+                }
+            });
         }
+        this.selectedColumns = res;
+        this.columnsSelected.emit(this.selectedColumns);
     }
-    get showRemoveIcon() {
-        return this.fieldConstraints ? this.fieldConstraints.length > 1 : false;
-    }
-    get isShowOperator() {
-        return (this.showOperator &&
-            this.maxConstraints > 1 &&
-            !['boolean', 'category'].includes(this.type));
+    onEditRowClicked(row) {
+        const [index] = this._getIndexes([row]);
+        this.editRowBtnClicked.emit({ row, index });
     }
-    get isShowAddConstraint() {
-        return (!['boolean', 'category'].includes(this.type) &&
-            this.fieldConstraints &&
-            this.fieldConstraints.length < this.maxConstraints);
+    onRemoveRowClicked(item) {
+        this.rowsToRemove.emit([item]);
+        const indexes = this._getIndexes([item]);
+        this.rowIndexesToRemove.emit(indexes);
     }
-    hide() {
-        this.columnFilterMenu.hide();
+    onSort(event) {
+        this.sorted.emit(event);
     }
-    clearFilter() {
-        this._initFieldFilterConstraint();
-        this._tableInstance._filter();
-        if (this.hideOnClear)
-            this.hide();
+    onFilter(event) {
+        this.filtered.emit(event);
     }
-    clearFilterValues() {
-        this._initFieldFilterConstraint();
-        this.isFilterApplied = false;
+    onRowReorder(event) {
+        this.rowsReordered.emit(event);
     }
-    applyFilter() {
-        this._tableInstance._filter();
-        this.hide();
+    onLazyLoaded(event) {
+        this.lazyLoaded.emit(event);
     }
-    onMenuShown() {
-        const parent = this.elementRef?.nativeElement?.parentElement;
-        const className = 'cps-table-col-filter-menu-open';
-        parent.classList.add(className);
+    onReloadData() {
+        if (this.dataReloadBtnDisabled)
+            return;
+        this.dataReloadBtnClicked.emit();
     }
-    onBeforeMenuHidden() {
-        if (!this.isFilterApplied)
-            this._initFieldFilterConstraint();
+    onExportData(event) {
+        if (this.exportBtnDisabled)
+            return;
+        this.exportMenu?.toggle(event);
     }
-    onMenuHidden() {
-        const parent = this.elementRef?.nativeElement?.parentElement;
-        const className = 'cps-table-col-filter-menu-open';
-        parent.classList.remove(className);
+    onColumnsToggle(event) {
+        if (this.columnsToggleBtnDisabled)
+            return;
+        this.colToggleMenu?.toggle(event);
     }
-    onClick(event) {
-        event.stopPropagation();
+    _getIndexes(rows) {
+        let indexes = rows.map((row) => this.primengTable.value.indexOf(row));
+        const indexesMap = this.tUnsortDirective?.sortIndices;
+        if (indexesMap && indexesMap.length > 0) {
+            indexes = indexes.map((i) => indexesMap.indexOf(i));
+        }
+        return indexes;
     }
-    onMouseOver() {
-        this._updateSortIconColor('var(--cps-color-line-dark)');
+    exportTable(format) {
+        if (this.columns.length < 1)
+            throw new Error('Columns must be defined!');
+        if (this.selectedColumns.length < 1)
+            throw new Error('Nothing to export!');
+        switch (format) {
+            case 'csv':
+                this.primengTable.exportCSV();
+                break;
+            case 'xlsx':
+                this.exportXLSX();
+                break;
+            // case 'pdf':
+            //   this.exportPDF();
+            //   break;
+        }
     }
-    onMouseLeave() {
-        this._updateSortIconColor('');
+    exportXLSX() {
+        import('xlsx').then((xlsx) => {
+            const sheetData = [
+                this.selectedColumns.map((c) => c[this.colHeaderName]),
+                ...this.primengTable.value.map((item) => this.selectedColumns.map((c) => item[c[this.colFieldName]]))
+            ];
+            const worksheet = xlsx.utils.json_to_sheet(sheetData, {
+                skipHeader: true
+            });
+            const workbook = {
+                Sheets: { [this.exportFilename]: worksheet },
+                SheetNames: [this.exportFilename]
+            };
+            const xlsxBuffer = xlsx.write(workbook, {
+                bookType: 'xlsx',
+                type: 'array'
+            });
+            const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+            const blob = new Blob([xlsxBuffer], {
+                type: EXCEL_TYPE
+            });
+            const downloadLink = this.document.createElement('a');
+            downloadLink.href = URL.createObjectURL(blob);
+            downloadLink.download = `${this.exportFilename}.xlsx`;
+            downloadLink.click();
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableColumnFilterComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.Table, optional: true }, { token: i2$1.TreeTable, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TableColumnFilterComponent, isStandalone: true, selector: "table-column-filter", inputs: { field: "field", type: "type", persistent: "persistent", showClearButton: "showClearButton", showApplyButton: "showApplyButton", showCloseButton: "showCloseButton", showMatchModes: "showMatchModes", matchModes: "matchModes", showOperator: "showOperator", maxConstraints: "maxConstraints", headerTitle: "headerTitle", hideOnClear: "hideOnClear", categoryOptions: "categoryOptions", asButtonToggle: "asButtonToggle", singleSelection: "singleSelection", placeholder: "placeholder" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseOver()", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "columnFilterMenu", first: true, predicate: ["columnFilterMenu"], descendants: true }, { propertyName: "constraintCompList", predicate: ["constraintComponent"], descendants: true }], ngImport: i0, template: "<div class=\"cps-table-col-filter\">\n  <cps-menu\n    #columnFilterMenu\n    [withArrow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    [persistent]=\"persistent || (showApplyButton && isCategoryDropdownOpened)\"\n    (menuShown)=\"onMenuShown()\"\n    (menuHidden)=\"onMenuHidden()\"\n    (beforeMenuHidden)=\"onBeforeMenuHidden()\">\n    <div class=\"cps-table-col-filter-menu-content\">\n      <div\n        class=\"cps-table-col-filter-menu-content-header\"\n        *ngIf=\"showCloseButton || headerTitle\">\n        <span class=\"cps-table-col-filter-menu-content-header-title\">\n          {{ headerTitle }}\n        </span>\n        <cps-icon\n          *ngIf=\"showCloseButton\"\n          icon=\"close-x\"\n          (click)=\"onCloseClick()\"></cps-icon>\n      </div>\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 && currentMatchModes\"\n            class=\"cps-table-col-filter-match-mode-select\"\n            [hideDetails]=\"true\"\n            [returnObject]=\"false\"\n            [options]=\"currentMatchModes\"\n            [ngModel]=\"fieldConstraint.matchMode\"\n            (valueChanged)=\"\n              onMenuMatchModeChange($event, fieldConstraint)\n            \"></cps-select>\n          <table-column-filter-constraint\n            #constraintComponent\n            [type]=\"type\"\n            [field]=\"field\"\n            [asButtonToggle]=\"asButtonToggle\"\n            [singleSelection]=\"singleSelection\"\n            [categoryOptions]=\"categoryOptions\"\n            [filterConstraint]=\"fieldConstraint\"\n            [hasApplyButton]=\"showApplyButton\"\n            [placeholder]=\"placeholder\">\n          </table-column-filter-constraint>\n          <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]=\"isFilterApplied ? 'filter-funnel-filled' : 'filter-funnel'\"\n    size=\"13\"\n    (click)=\"columnFilterMenu.toggle($event)\"\n    class=\"cps-table-col-filter-menu-button\"\n    [ngClass]=\"{\n      'cps-table-col-filter-menu-button-active': isFilterApplied\n    }\"\n    >>\n  </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:8px;padding-right:4px}:host .cps-table-col-filter .cps-table-col-filter-menu-button:not(.cps-table-col-filter-menu-button-active):hover{color:var(--cps-color-text-dark)}:host .cps-table-col-filter .cps-table-col-filter-menu-button-active{color:var(--cps-color-calm-lighten1)}.cps-table-col-filter-menu-content{padding-bottom:12px;min-width:200px;max-height:500px;overflow:auto}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header{min-height:32px;padding:8px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light);display:flex;justify-content:space-between;align-items:center}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header-title{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-darkest);max-width:390px;cursor:default}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon{margin-left:8px;cursor:pointer}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon:hover{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-operator{padding:12px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint{border-bottom:1px solid var(--cps-color-line-mid);padding:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint .cps-table-col-filter-match-mode-select{margin-bottom:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint:last-child{border-bottom:none}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-remove-rule-btn{padding-top:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-add-rule-btn{padding:8px 12px}.cps-table-col-filter-menu-content .cps-table-col-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "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", "borderRadius", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: TableColumnFilterConstraintComponent, selector: "table-column-filter-constraint", inputs: ["type", "field", "filterConstraint", "categoryOptions", "asButtonToggle", "singleSelection", "placeholder", "hasApplyButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: CpsTableComponent, isStandalone: true, selector: "cps-table", inputs: { columns: "columns", colHeaderName: "colHeaderName", colFieldName: "colFieldName", colFilterTypeName: "colFilterTypeName", colDateFormatName: "colDateFormatName", striped: "striped", bordered: "bordered", size: "size", selectable: "selectable", rowHover: "rowHover", dataKey: "dataKey", showRowMenu: "showRowMenu", showRowRemoveButton: "showRowRemoveButton", showRowEditButton: "showRowEditButton", reorderableRows: "reorderableRows", loading: "loading", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", sortable: "sortable", filterableByColumns: "filterableByColumns", autoColumnFilterType: "autoColumnFilterType", sortMode: "sortMode", customSort: "customSort", hasToolbar: "hasToolbar", toolbarSize: "toolbarSize", toolbarTitle: "toolbarTitle", toolbarIcon: "toolbarIcon", toolbarIconColor: "toolbarIconColor", scrollable: "scrollable", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", paginator: "paginator", alwaysShowPaginator: "alwaysShowPaginator", rowsPerPageOptions: "rowsPerPageOptions", first: "first", rows: "rows", resetPageOnRowsChange: "resetPageOnRowsChange", resetPageOnSort: "resetPageOnSort", totalRecords: "totalRecords", emptyMessage: "emptyMessage", emptyBodyHeight: "emptyBodyHeight", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", showGlobalFilter: "showGlobalFilter", globalFilterPlaceholder: "globalFilterPlaceholder", globalFilterFields: "globalFilterFields", clearGlobalFilterOnLoading: "clearGlobalFilterOnLoading", showRemoveBtnOnSelect: "showRemoveBtnOnSelect", removeBtnOnSelectDisabled: "removeBtnOnSelectDisabled", showAdditionalBtnOnSelect: "showAdditionalBtnOnSelect", additionalBtnOnSelectTitle: "additionalBtnOnSelectTitle", additionalBtnOnSelectIcon: "additionalBtnOnSelectIcon", additionalBtnOnSelectDisabled: "additionalBtnOnSelectDisabled", showActionBtn: "showActionBtn", actionBtnTitle: "actionBtnTitle", actionBtnIcon: "actionBtnIcon", actionBtnDisabled: "actionBtnDisabled", showExportBtn: "showExportBtn", exportBtnDisabled: "exportBtnDisabled", exportFilename: "exportFilename", csvSeparator: "csvSeparator", showDataReloadBtn: "showDataReloadBtn", dataReloadBtnDisabled: "dataReloadBtnDisabled", showColumnsToggleBtn: "showColumnsToggleBtn", columnsToggleBtnDisabled: "columnsToggleBtnDisabled", initialColumns: "initialColumns", renderDataAsHTML: "renderDataAsHTML", data: "data" }, outputs: { rowsSelected: "rowsSelected", selectedRowIndexes: "selectedRowIndexes", actionBtnClicked: "actionBtnClicked", editRowBtnClicked: "editRowBtnClicked", rowsToRemove: "rowsToRemove", rowIndexesToRemove: "rowIndexesToRemove", pageChanged: "pageChanged", sorted: "sorted", filtered: "filtered", rowsReordered: "rowsReordered", columnsSelected: "columnsSelected", lazyLoaded: "lazyLoaded", dataReloadBtnClicked: "dataReloadBtnClicked", additionalBtnOnSelectClicked: "additionalBtnOnSelectClicked", 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: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }, { propertyName: "rowExpansionTemplate", first: true, predicate: ["rowexpansion"], descendants: true }], viewQueries: [{ propertyName: "primengTable", first: true, predicate: ["primengTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "exportMenu", first: true, predicate: ["exportMenu"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }, { propertyName: "tUnsortDirective", first: true, predicate: ["tUnsortDirective"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-table\n  #primengTable\n  #tUnsortDirective=\"tWithUnsort\"\n  tWithUnsort\n  [ngClass]=\"{ 'cps-table-loading': loading }\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [value]=\"data\"\n  [dataKey]=\"dataKey\"\n  [columns]=\"selectedColumns\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [showInitialSortBadge]=\"false\"\n  [loading]=\"loading\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [lazy]=\"lazy\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  [(selection)]=\"selectedRows\"\n  [metaKeySelection]=\"false\"\n  [rowHover]=\"rowHover\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [exportFilename]=\"exportFilename\"\n  [csvSeparator]=\"csvSeparator\"\n  (onPage)=\"onPageChange($event)\"\n  (onLazyLoad)=\"onLazyLoaded($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onSort)=\"onSort($event)\"\n  (onFilter)=\"onFilter($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 *ngIf=\"toolbarIcon\" class=\"cps-table-tbar-icon\">\n          <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n        </div>\n        <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n        <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n          <cps-input\n            #globalFilterComp\n            prefixIcon=\"search\"\n            [placeholder]=\"globalFilterPlaceholder\"\n            (valueChanged)=\"onFilterGlobal($event)\"\n            [clearable]=\"true\"\n            [disabled]=\"loading\"\n            [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\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-btn-on-select\">\n          <cps-button\n            label=\"Remove\"\n            [disabled]=\"removeBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            icon=\"remove\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"removeSelected()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-table-tbar-btn-on-select\">\n          <cps-button\n            [label]=\"additionalBtnOnSelectTitle\"\n            [disabled]=\"additionalBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            [icon]=\"additionalBtnOnSelectIcon\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickAdditionalBtnOnSelect()\">\n          </cps-button>\n        </div>\n        <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n          <cps-button\n            [label]=\"actionBtnTitle\"\n            [disabled]=\"actionBtnDisabled\"\n            color=\"prepared\"\n            type=\"outlined\"\n            [icon]=\"actionBtnIcon\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickActionBtn()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n          class=\"cps-table-tbar-coltoggle-btn\"\n          [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n          <cps-icon\n            icon=\"columns\"\n            size=\"normal\"\n            [color]=\"\n              columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n            \"\n            (click)=\"onColumnsToggle($event)\"></cps-icon>\n          <cps-menu #colToggleMenu [withArrow]=\"false\">\n            <div class=\"cps-table-coltoggle-menu\">\n              <div\n                class=\"cps-table-coltoggle-menu-item select-all-option\"\n                [class.allselected]=\"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\n          *ngIf=\"showExportBtn\"\n          class=\"cps-table-tbar-export-btn\"\n          [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n          <cps-icon\n            icon=\"export\"\n            size=\"20\"\n            [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n            (click)=\"onExportData($event)\"></cps-icon>\n          <cps-menu\n            #exportMenu\n            [items]=\"exportMenuItems\"\n            [compressed]=\"true\"\n            [withArrow]=\"false\">\n          </cps-menu>\n        </div>\n        <div\n          *ngIf=\"showDataReloadBtn\"\n          class=\"cps-table-tbar-reload-btn\"\n          [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n          <cps-icon\n            icon=\"refresh\"\n            size=\"18\"\n            [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n            (click)=\"onReloadData()\">\n          </cps-icon>\n        </div>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n    <ng-container\n      *ngTemplateOutlet=\"\n        nestedHeaderTemplate;\n        context: {\n          $implicit: columns\n        }\n      \"></ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n    <tr>\n      <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n      <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n      <th style=\"width: 4rem\" *ngIf=\"selectable\">\n        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n      </th>\n      <ng-container *ngIf=\"headerTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            headerTemplate;\n            context: {\n              $implicit: columns\n            }\n          \"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n        <ng-container *ngIf=\"sortable\">\n          @if (filterableByColumns) {\n            <th\n              *ngFor=\"let col of columns\"\n              [cpsTColSortable]=\"col[colFieldName]\"\n              [cpsTColFilter]=\"col[colFieldName]\"\n              [filterType]=\"\n                col[colFilterTypeName] ??\n                (autoColumnFilterType\n                  ? (data | cpsDetectFilterType: col[colFieldName])\n                  : 'text')\n              \">\n              {{ col[colHeaderName] }}\n            </th>\n          } @else {\n            <th\n              *ngFor=\"let col of columns\"\n              [cpsTColSortable]=\"col[colFieldName]\">\n              {{ col[colHeaderName] }}\n            </th>\n          }\n        </ng-container>\n        <ng-container *ngIf=\"!sortable\">\n          @if (filterableByColumns) {\n            <th\n              *ngFor=\"let col of columns\"\n              [cpsTColFilter]=\"col[colFieldName]\"\n              [filterType]=\"\n                col[colFilterTypeName] ??\n                (autoColumnFilterType\n                  ? (data | cpsDetectFilterType: col[colFieldName])\n                  : 'text')\n              \">\n              {{ col[colHeaderName] }}\n            </th>\n          } @else {\n            <th *ngFor=\"let col of columns\">\n              {{ col[colHeaderName] }}\n            </th>\n          }\n        </ng-container>\n      </ng-container>\n      <th\n        style=\"width: 2rem\"\n        class=\"cps-table-row-menu-cell\"\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"></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          *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          @if (renderDataAsHTML) {\n            <td\n              *ngFor=\"let col of columns\"\n              [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n          } @else {\n            <td *ngFor=\"let col of columns\">\n              {{\n                col[colDateFormatName]\n                  ? (rowData[col[colFieldName]] | date: col[colDateFormatName])\n                  : rowData[col[colFieldName]]\n              }}\n            </td>\n          }\n        </ng-container>\n      </ng-container>\n      <td\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n        class=\"cps-table-row-menu-cell\">\n        <table-row-menu\n          (editRowBtnClicked)=\"onEditRowClicked(item)\"\n          (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"\n          [showRowRemoveButton]=\"showRowRemoveButton\"\n          [showRowEditButton]=\"showRowEditButton\">\n        </table-row-menu>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n    <tr class=\"cps-table-row-expanded-content\">\n      <td colspan=\"100\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            rowExpansionTemplate;\n            context: {\n              $implicit: item\n            }\n          \"></ng-container>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-table-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-title{cursor:default}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-datatable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(2n){background:#fff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody .cps-table-row-expanded-content td{border-left:4px solid var(--cps-color-surprise)!important}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#fff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#fff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-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-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-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;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-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:var(--cps-color-highlight-hover);border-color:unset}: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:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-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:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:#fff}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-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 .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "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", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$3.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i1$3.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$3.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$3.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$3.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: TableUnsortDirective, selector: "[tWithUnsort]", exportAs: ["tWithUnsort"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", inputs: ["showRowRemoveButton", "showRowEditButton"], outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "directive", type: CpsTableColumnSortableDirective, selector: "[cpsTColSortable]", inputs: ["cpsTColSortable"] }, { kind: "directive", type: CpsTableColumnFilterDirective, selector: "[cpsTColFilter]", inputs: ["cpsTColFilter", "filterType", "filterPersistent", "filterShowClearButton", "filterShowApplyButton", "filterShowCloseButton", "filterShowMatchModes", "filterMatchModes", "filterShowOperator", "filterMaxConstraints", "filterHeaderTitle", "filterHideOnClear", "filterCategoryOptions", "filterAsButtonToggle", "filterSingleSelection", "filterPlaceholder"], exportAs: ["cpsTColFilter"] }, { kind: "pipe", type: CpsDetectFilterTypePipe, name: "cpsDetectFilterType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableColumnFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'table-column-filter', standalone: true, imports: [
-                        CommonModule,
+            args: [{ selector: 'cps-table', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FormsModule,
+                        CommonModule,
+                        TableModule,
+                        TableUnsortDirective,
+                        CpsInputComponent,
                         CpsButtonComponent,
-                        CpsMenuComponent,
-                        CpsIconComponent,
                         CpsSelectComponent,
-                        TableColumnFilterConstraintComponent
-                    ], template: "<div class=\"cps-table-col-filter\">\n  <cps-menu\n    #columnFilterMenu\n    [withArrow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    [persistent]=\"persistent || (showApplyButton && isCategoryDropdownOpened)\"\n    (menuShown)=\"onMenuShown()\"\n    (menuHidden)=\"onMenuHidden()\"\n    (beforeMenuHidden)=\"onBeforeMenuHidden()\">\n    <div class=\"cps-table-col-filter-menu-content\">\n      <div\n        class=\"cps-table-col-filter-menu-content-header\"\n        *ngIf=\"showCloseButton || headerTitle\">\n        <span class=\"cps-table-col-filter-menu-content-header-title\">\n          {{ headerTitle }}\n        </span>\n        <cps-icon\n          *ngIf=\"showCloseButton\"\n          icon=\"close-x\"\n          (click)=\"onCloseClick()\"></cps-icon>\n      </div>\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 && currentMatchModes\"\n            class=\"cps-table-col-filter-match-mode-select\"\n            [hideDetails]=\"true\"\n            [returnObject]=\"false\"\n            [options]=\"currentMatchModes\"\n            [ngModel]=\"fieldConstraint.matchMode\"\n            (valueChanged)=\"\n              onMenuMatchModeChange($event, fieldConstraint)\n            \"></cps-select>\n          <table-column-filter-constraint\n            #constraintComponent\n            [type]=\"type\"\n            [field]=\"field\"\n            [asButtonToggle]=\"asButtonToggle\"\n            [singleSelection]=\"singleSelection\"\n            [categoryOptions]=\"categoryOptions\"\n            [filterConstraint]=\"fieldConstraint\"\n            [hasApplyButton]=\"showApplyButton\"\n            [placeholder]=\"placeholder\">\n          </table-column-filter-constraint>\n          <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]=\"isFilterApplied ? 'filter-funnel-filled' : 'filter-funnel'\"\n    size=\"13\"\n    (click)=\"columnFilterMenu.toggle($event)\"\n    class=\"cps-table-col-filter-menu-button\"\n    [ngClass]=\"{\n      'cps-table-col-filter-menu-button-active': isFilterApplied\n    }\"\n    >>\n  </cps-icon>\n</div>\n", styles: [":host .cps-table-col-filter{display:inline-flex}:host .cps-table-col-filter .cps-table-col-filter-menu-button{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;overflow:hidden;position:relative;padding-left:8px;padding-right:4px}:host .cps-table-col-filter .cps-table-col-filter-menu-button:not(.cps-table-col-filter-menu-button-active):hover{color:var(--cps-color-text-dark)}:host .cps-table-col-filter .cps-table-col-filter-menu-button-active{color:var(--cps-color-calm-lighten1)}.cps-table-col-filter-menu-content{padding-bottom:12px;min-width:200px;max-height:500px;overflow:auto}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header{min-height:32px;padding:8px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light);display:flex;justify-content:space-between;align-items:center}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header-title{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-darkest);max-width:390px;cursor:default}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon{margin-left:8px;cursor:pointer}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-header cps-icon:hover{color:var(--cps-color-calm)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-operator{padding:12px;border-bottom:1px solid var(--cps-color-line-mid);background:var(--cps-color-bg-light)}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint{border-bottom:1px solid var(--cps-color-line-mid);padding:12px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint .cps-table-col-filter-match-mode-select{margin-bottom:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-menu-content-constraint:last-child{border-bottom:none}.cps-table-col-filter-menu-content .cps-table-col-filter-menu-content-constraints .cps-table-col-filter-remove-rule-btn{padding-top:8px}.cps-table-col-filter-menu-content .cps-table-col-filter-add-rule-btn{padding:8px 12px}.cps-table-col-filter-menu-content .cps-table-col-filter-buttonbar{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 0}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$3.Table, decorators: [{
-                    type: Optional
-                }] }, { type: i2$1.TreeTable, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { field: [{
+                        CpsIconComponent,
+                        CpsMenuComponent,
+                        CpsLoaderComponent,
+                        TableRowMenuComponent,
+                        CpsTableColumnSortableDirective,
+                        CpsTableColumnFilterDirective,
+                        CpsDetectFilterTypePipe
+                    ], providers: [
+                        TableService,
+                        {
+                            provide: Table,
+                            useFactory: tableFactory,
+                            // eslint-disable-next-line no-use-before-define
+                            deps: [CpsTableComponent]
+                        }
+                    ], template: "<p-table\n  #primengTable\n  #tUnsortDirective=\"tWithUnsort\"\n  tWithUnsort\n  [ngClass]=\"{ 'cps-table-loading': loading }\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [value]=\"data\"\n  [dataKey]=\"dataKey\"\n  [columns]=\"selectedColumns\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [showInitialSortBadge]=\"false\"\n  [loading]=\"loading\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [lazy]=\"lazy\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  [(selection)]=\"selectedRows\"\n  [metaKeySelection]=\"false\"\n  [rowHover]=\"rowHover\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [exportFilename]=\"exportFilename\"\n  [csvSeparator]=\"csvSeparator\"\n  (onPage)=\"onPageChange($event)\"\n  (onLazyLoad)=\"onLazyLoaded($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onSort)=\"onSort($event)\"\n  (onFilter)=\"onFilter($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 *ngIf=\"toolbarIcon\" class=\"cps-table-tbar-icon\">\n          <cps-icon [icon]=\"toolbarIcon\" [color]=\"toolbarIconColor\"></cps-icon>\n        </div>\n        <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n        <div *ngIf=\"showGlobalFilter\" class=\"cps-table-tbar-global-filter\">\n          <cps-input\n            #globalFilterComp\n            prefixIcon=\"search\"\n            [placeholder]=\"globalFilterPlaceholder\"\n            (valueChanged)=\"onFilterGlobal($event)\"\n            [clearable]=\"true\"\n            [disabled]=\"loading\"\n            [appearance]=\"toolbarSize === 'small' ? 'underlined' : 'outlined'\"\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-btn-on-select\">\n          <cps-button\n            label=\"Remove\"\n            [disabled]=\"removeBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            icon=\"remove\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"removeSelected()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showAdditionalBtnOnSelect && selectedRows.length > 0\"\n          class=\"cps-table-tbar-btn-on-select\">\n          <cps-button\n            [label]=\"additionalBtnOnSelectTitle\"\n            [disabled]=\"additionalBtnOnSelectDisabled\"\n            color=\"prepared\"\n            type=\"borderless\"\n            [icon]=\"additionalBtnOnSelectIcon\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickAdditionalBtnOnSelect()\">\n          </cps-button>\n        </div>\n        <div *ngIf=\"showActionBtn\" class=\"cps-table-tbar-action-btn\">\n          <cps-button\n            [label]=\"actionBtnTitle\"\n            [disabled]=\"actionBtnDisabled\"\n            color=\"prepared\"\n            type=\"outlined\"\n            [icon]=\"actionBtnIcon\"\n            [size]=\"toolbarSize\"\n            (clicked)=\"onClickActionBtn()\">\n          </cps-button>\n        </div>\n        <div\n          *ngIf=\"showColumnsToggleBtn && columns.length > 0\"\n          class=\"cps-table-tbar-coltoggle-btn\"\n          [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n          <cps-icon\n            icon=\"columns\"\n            size=\"normal\"\n            [color]=\"\n              columnsToggleBtnDisabled ? 'text-lightest' : 'prepared-lighten1'\n            \"\n            (click)=\"onColumnsToggle($event)\"></cps-icon>\n          <cps-menu #colToggleMenu [withArrow]=\"false\">\n            <div class=\"cps-table-coltoggle-menu\">\n              <div\n                class=\"cps-table-coltoggle-menu-item select-all-option\"\n                [class.allselected]=\"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\n          *ngIf=\"showExportBtn\"\n          class=\"cps-table-tbar-export-btn\"\n          [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n          <cps-icon\n            icon=\"export\"\n            size=\"20\"\n            [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n            (click)=\"onExportData($event)\"></cps-icon>\n          <cps-menu\n            #exportMenu\n            [items]=\"exportMenuItems\"\n            [compressed]=\"true\"\n            [withArrow]=\"false\">\n          </cps-menu>\n        </div>\n        <div\n          *ngIf=\"showDataReloadBtn\"\n          class=\"cps-table-tbar-reload-btn\"\n          [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n          <cps-icon\n            icon=\"refresh\"\n            size=\"18\"\n            [color]=\"dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n            (click)=\"onReloadData()\">\n          </cps-icon>\n        </div>\n      </div>\n    </ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"nestedHeaderTemplate\" let-columns>\n    <ng-container\n      *ngTemplateOutlet=\"\n        nestedHeaderTemplate;\n        context: {\n          $implicit: columns\n        }\n      \"></ng-container>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\" *ngIf=\"!nestedHeaderTemplate\" let-columns>\n    <tr>\n      <th style=\"width: 3rem\" *ngIf=\"rowExpansionTemplate\"></th>\n      <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th>\n      <th style=\"width: 4rem\" *ngIf=\"selectable\">\n        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n      </th>\n      <ng-container *ngIf=\"headerTemplate\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            headerTemplate;\n            context: {\n              $implicit: columns\n            }\n          \"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"!headerTemplate && columns.length > 0\">\n        <ng-container *ngIf=\"sortable\">\n          @if (filterableByColumns) {\n            <th\n              *ngFor=\"let col of columns\"\n              [cpsTColSortable]=\"col[colFieldName]\"\n              [cpsTColFilter]=\"col[colFieldName]\"\n              [filterType]=\"\n                col[colFilterTypeName] ??\n                (autoColumnFilterType\n                  ? (data | cpsDetectFilterType: col[colFieldName])\n                  : 'text')\n              \">\n              {{ col[colHeaderName] }}\n            </th>\n          } @else {\n            <th\n              *ngFor=\"let col of columns\"\n              [cpsTColSortable]=\"col[colFieldName]\">\n              {{ col[colHeaderName] }}\n            </th>\n          }\n        </ng-container>\n        <ng-container *ngIf=\"!sortable\">\n          @if (filterableByColumns) {\n            <th\n              *ngFor=\"let col of columns\"\n              [cpsTColFilter]=\"col[colFieldName]\"\n              [filterType]=\"\n                col[colFilterTypeName] ??\n                (autoColumnFilterType\n                  ? (data | cpsDetectFilterType: col[colFieldName])\n                  : 'text')\n              \">\n              {{ col[colHeaderName] }}\n            </th>\n          } @else {\n            <th *ngFor=\"let col of columns\">\n              {{ col[colHeaderName] }}\n            </th>\n          }\n        </ng-container>\n      </ng-container>\n      <th\n        style=\"width: 2rem\"\n        class=\"cps-table-row-menu-cell\"\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"></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          *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          @if (renderDataAsHTML) {\n            <td\n              *ngFor=\"let col of columns\"\n              [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n          } @else {\n            <td *ngFor=\"let col of columns\">\n              {{\n                col[colDateFormatName]\n                  ? (rowData[col[colFieldName]] | date: col[colDateFormatName])\n                  : rowData[col[colFieldName]]\n              }}\n            </td>\n          }\n        </ng-container>\n      </ng-container>\n      <td\n        *ngIf=\"showRowMenu && (showRowRemoveButton || showRowEditButton)\"\n        class=\"cps-table-row-menu-cell\">\n        <table-row-menu\n          (editRowBtnClicked)=\"onEditRowClicked(item)\"\n          (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"\n          [showRowRemoveButton]=\"showRowRemoveButton\"\n          [showRowEditButton]=\"showRowEditButton\">\n        </table-row-menu>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"rowexpansion\" *ngIf=\"rowExpansionTemplate\" let-item>\n    <tr class=\"cps-table-row-expanded-content\">\n      <td colspan=\"100\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            rowExpansionTemplate;\n            context: {\n              $implicit: item\n            }\n          \"></ng-container>\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-table-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-title{cursor:default}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-datatable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(2n){background:#fff}:host ::ng-deep .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody .cps-table-row-expanded-content td{border-left:4px solid var(--cps-color-surprise)!important}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#fff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#fff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox .p-checkbox-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-paginator-bottom{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-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;cursor:default}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-left-content .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-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:var(--cps-color-highlight-hover);border-color:unset}: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:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-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:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-link:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:#fff}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-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 .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:8px;opacity:0}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { columns: [{
                 type: Input
-            }], type: [{
+            }], colHeaderName: [{
                 type: Input
-            }], persistent: [{
+            }], colFieldName: [{
                 type: Input
-            }], showClearButton: [{
+            }], colFilterTypeName: [{
                 type: Input
-            }], showApplyButton: [{
+            }], colDateFormatName: [{
                 type: Input
-            }], showCloseButton: [{
+            }], striped: [{
                 type: Input
-            }], showMatchModes: [{
+            }], bordered: [{
                 type: Input
-            }], matchModes: [{
+            }], size: [{
                 type: Input
-            }], showOperator: [{
+            }], selectable: [{
                 type: Input
-            }], maxConstraints: [{
+            }], rowHover: [{
                 type: Input
-            }], headerTitle: [{
+            }], dataKey: [{
                 type: Input
-            }], hideOnClear: [{
+            }], showRowMenu: [{
                 type: Input
-            }], categoryOptions: [{
+            }], showRowRemoveButton: [{
                 type: Input
-            }], asButtonToggle: [{
+            }], showRowEditButton: [{
+                type: Input
+            }], reorderableRows: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], tableStyle: [{
+                type: Input
+            }], tableStyleClass: [{
+                type: Input
+            }], sortable: [{
+                type: Input
+            }], filterableByColumns: [{
+                type: Input
+            }], autoColumnFilterType: [{
+                type: Input
+            }], sortMode: [{
+                type: Input
+            }], customSort: [{
+                type: Input
+            }], hasToolbar: [{
+                type: Input
+            }], toolbarSize: [{
+                type: Input
+            }], toolbarTitle: [{
+                type: Input
+            }], toolbarIcon: [{
+                type: Input
+            }], toolbarIconColor: [{
+                type: Input
+            }], scrollable: [{
+                type: Input
+            }], scrollHeight: [{
+                type: Input
+            }], virtualScroll: [{
+                type: Input
+            }], numToleratedItems: [{
+                type: Input
+            }], paginator: [{
+                type: Input
+            }], alwaysShowPaginator: [{
+                type: Input
+            }], rowsPerPageOptions: [{
+                type: Input
+            }], first: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], resetPageOnRowsChange: [{
+                type: Input
+            }], resetPageOnSort: [{
+                type: Input
+            }], totalRecords: [{
+                type: Input
+            }], emptyMessage: [{
+                type: Input
+            }], emptyBodyHeight: [{
+                type: Input
+            }], lazy: [{
+                type: Input
+            }], lazyLoadOnInit: [{
+                type: Input
+            }], showGlobalFilter: [{
+                type: Input
+            }], globalFilterPlaceholder: [{
+                type: Input
+            }], globalFilterFields: [{
+                type: Input
+            }], clearGlobalFilterOnLoading: [{
+                type: Input
+            }], showRemoveBtnOnSelect: [{
+                type: Input
+            }], removeBtnOnSelectDisabled: [{
+                type: Input
+            }], showAdditionalBtnOnSelect: [{
+                type: Input
+            }], additionalBtnOnSelectTitle: [{
                 type: Input
-            }], singleSelection: [{
+            }], additionalBtnOnSelectIcon: [{
                 type: Input
-            }], placeholder: [{
+            }], additionalBtnOnSelectDisabled: [{
                 type: Input
-            }], constraintCompList: [{
-                type: ViewChildren,
-                args: ['constraintComponent']
-            }], columnFilterMenu: [{
-                type: ViewChild,
-                args: ['columnFilterMenu']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], onMouseOver: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], onMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }] } });
-
-/**
- * CpsTableColumnFilterDirective is a filtering directive used to filter single or multiple columns in table.
- * @group Directives
- */
-class CpsTableColumnFilterDirective {
-    constructor(elementRef, viewContainerRef) {
-        this.elementRef = elementRef;
-        this.viewContainerRef = viewContainerRef;
-        /**
-         * Type of a filter in table, it can be of type "number", "boolean", "text", "date" or "category".
-         * @group Props
-         */
-        this.filterType = 'text';
-        /**
-         * Determines whether the filter menu should be persistent.
-         * @group Props
-         */
-        this.filterPersistent = false;
-        /**
-         * Determines whether the filter should have clear button.
-         * @group Props
-         */
-        this.filterShowClearButton = true;
-        /**
-         * Determines whether the filter should have apply button.
-         * @group Props
-         */
-        this.filterShowApplyButton = true;
-        /**
-         * Determines whether the filter should have close button.
-         * @group Props
-         */
-        this.filterShowCloseButton = false;
-        /**
-         * Determines whether the filter should have match modes.
-         * @group Props
-         */
-        this.filterShowMatchModes = true;
-        /**
-         * Match modes for filter.
-         * @group Props
-         */
-        this.filterMatchModes = [];
-        /**
-         * Determines whether the filter should have operator.
-         * @group Props
-         */
-        this.filterShowOperator = true;
-        /**
-         * Maximum number of constraints.
-         * @group Props
-         */
-        this.filterMaxConstraints = 2;
-        /**
-         * Title of the filter.
-         * @group Props
-         */
-        this.filterHeaderTitle = '';
-        /**
-         * Determines whether the filter should hide on clear.
-         * @group Props
-         */
-        this.filterHideOnClear = false;
-        /**
-         * Options for category filter.
-         * @group Props
-         */
-        this.filterCategoryOptions = [];
-        /**
-         * Determines whether to show category filter as button toggles.
-         * @group Props
-         */
-        this.filterAsButtonToggle = false;
-        /**
-         * Single selection for category filter.
-         * @group Props
-         */
-        this.filterSingleSelection = false;
-        /**
-         * Placeholder for filter constraints.
-         * @group Props
-         */
-        this.filterPlaceholder = '';
-        this.filterCompRef = this.viewContainerRef.createComponent(TableColumnFilterComponent);
-    }
-    ngOnInit() {
-        this.elementRef.nativeElement.firstChild.after(this.filterCompRef.location.nativeElement);
-    }
-    ngOnChanges() {
-        this.filterCompRef.setInput('field', this.field);
-        this.filterCompRef.setInput('type', this.filterType);
-        this.filterCompRef.setInput('persistent', this.filterPersistent);
-        this.filterCompRef.setInput('showClearButton', this.filterShowClearButton);
-        this.filterCompRef.setInput('showApplyButton', this.filterShowApplyButton);
-        this.filterCompRef.setInput('showCloseButton', this.filterShowCloseButton);
-        this.filterCompRef.setInput('showMatchModes', this.filterShowMatchModes);
-        this.filterCompRef.setInput('matchModes', this.filterMatchModes);
-        this.filterCompRef.setInput('showOperator', this.filterShowOperator);
-        this.filterCompRef.setInput('maxConstraints', this.filterMaxConstraints);
-        this.filterCompRef.setInput('headerTitle', this.filterHeaderTitle);
-        this.filterCompRef.setInput('hideOnClear', this.filterHideOnClear);
-        this.filterCompRef.setInput('categoryOptions', this.filterCategoryOptions);
-        this.filterCompRef.setInput('asButtonToggle', this.filterAsButtonToggle);
-        this.filterCompRef.setInput('singleSelection', this.filterSingleSelection);
-        this.filterCompRef.setInput('placeholder', this.filterPlaceholder || this._getDefaultPlaceholder());
-    }
-    _getDefaultPlaceholder() {
-        switch (this.filterType) {
-            case 'text':
-                return 'Please enter';
-            case 'number':
-                return 'Enter value';
-            case 'date':
-                return 'Select date';
-            case 'category':
-                return 'Please select';
-            default:
-                return '';
-        }
-    }
-    hideFilter() {
-        this.filterCompRef?.instance?.hide();
-    }
-    clearFilter() {
-        this.filterCompRef?.instance?.clearFilter();
-    }
-    clearFilterValues() {
-        this.filterCompRef?.instance?.clearFilterValues();
-    }
-    ngOnDestroy() {
-        this.filterCompRef.destroy();
-        this.viewContainerRef.clear();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTableColumnFilterDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: CpsTableColumnFilterDirective, isStandalone: true, selector: "[cpsTColFilter]", inputs: { field: ["cpsTColFilter", "field"], filterType: "filterType", filterPersistent: "filterPersistent", filterShowClearButton: "filterShowClearButton", filterShowApplyButton: "filterShowApplyButton", filterShowCloseButton: "filterShowCloseButton", filterShowMatchModes: "filterShowMatchModes", filterMatchModes: "filterMatchModes", filterShowOperator: "filterShowOperator", filterMaxConstraints: "filterMaxConstraints", filterHeaderTitle: "filterHeaderTitle", filterHideOnClear: "filterHideOnClear", filterCategoryOptions: "filterCategoryOptions", filterAsButtonToggle: "filterAsButtonToggle", filterSingleSelection: "filterSingleSelection", filterPlaceholder: "filterPlaceholder" }, exportAs: ["cpsTColFilter"], usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CpsTableColumnFilterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: '[cpsTColFilter]',
-                    exportAs: 'cpsTColFilter'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { field: [{
-                type: Input,
-                args: ['cpsTColFilter']
-            }], filterType: [{
+            }], showActionBtn: [{
                 type: Input
-            }], filterPersistent: [{
+            }], actionBtnTitle: [{
                 type: Input
-            }], filterShowClearButton: [{
+            }], actionBtnIcon: [{
                 type: Input
-            }], filterShowApplyButton: [{
+            }], actionBtnDisabled: [{
                 type: Input
-            }], filterShowCloseButton: [{
+            }], showExportBtn: [{
                 type: Input
-            }], filterShowMatchModes: [{
+            }], exportBtnDisabled: [{
                 type: Input
-            }], filterMatchModes: [{
+            }], exportFilename: [{
                 type: Input
-            }], filterShowOperator: [{
+            }], csvSeparator: [{
                 type: Input
-            }], filterMaxConstraints: [{
+            }], showDataReloadBtn: [{
                 type: Input
-            }], filterHeaderTitle: [{
+            }], dataReloadBtnDisabled: [{
                 type: Input
-            }], filterHideOnClear: [{
+            }], showColumnsToggleBtn: [{
                 type: Input
-            }], filterCategoryOptions: [{
+            }], columnsToggleBtnDisabled: [{
                 type: Input
-            }], filterAsButtonToggle: [{
+            }], initialColumns: [{
                 type: Input
-            }], filterSingleSelection: [{
+            }], renderDataAsHTML: [{
                 type: Input
-            }], filterPlaceholder: [{
+            }], data: [{
                 type: Input
+            }], rowsSelected: [{
+                type: Output
+            }], selectedRowIndexes: [{
+                type: Output
+            }], actionBtnClicked: [{
+                type: Output
+            }], editRowBtnClicked: [{
+                type: Output
+            }], rowsToRemove: [{
+                type: Output
+            }], rowIndexesToRemove: [{
+                type: Output
+            }], pageChanged: [{
+                type: Output
+            }], sorted: [{
+                type: Output
+            }], filtered: [{
+                type: Output
+            }], rowsReordered: [{
+                type: Output
+            }], columnsSelected: [{
+                type: Output
+            }], lazyLoaded: [{
+                type: Output
+            }], dataReloadBtnClicked: [{
+                type: Output
+            }], additionalBtnOnSelectClicked: [{
+                type: Output
+            }], customSortFunction: [{
+                type: Output
+            }], toolbarTemplate: [{
+                type: ContentChild,
+                args: ['toolbar', { static: false }]
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: ['header', { static: false }]
+            }], nestedHeaderTemplate: [{
+                type: ContentChild,
+                args: ['nestedHeader', { static: false }]
+            }], bodyTemplate: [{
+                type: ContentChild,
+                args: ['body', { static: false }]
+            }], rowExpansionTemplate: [{
+                type: ContentChild,
+                args: ['rowexpansion', { static: false }]
+            }], primengTable: [{
+                type: ViewChild,
+                args: ['primengTable', { static: true }]
+            }], globalFilterComp: [{
+                type: ViewChild,
+                args: ['globalFilterComp']
+            }], exportMenu: [{
+                type: ViewChild,
+                args: ['exportMenu']
+            }], colToggleMenu: [{
+                type: ViewChild,
+                args: ['colToggleMenu']
+            }], tUnsortDirective: [{
+                type: ViewChild,
+                args: ['tUnsortDirective']
             }] } });
 
 /**
@@ -13879,5 +13944,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CPS_RADIO_GROUP, CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsColumnFilterMatchMode, CpsDatepickerComponent, CpsDialogConfig, CpsDialogRef, CpsDialogService, CpsDividerComponent, CpsExpansionPanelComponent, CpsFileUploadComponent, CpsIconComponent, CpsInfoCircleComponent, CpsInputComponent, CpsLoaderComponent, CpsMenuComponent, CpsMenuHideReason, CpsNotificationAppearance, CpsNotificationPosition, CpsNotificationService, CpsPaginatePipe, CpsPaginatorComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsRadioGroupComponent, CpsSchedulerComponent, CpsSelectComponent, CpsSidebarMenuComponent, CpsSwitchComponent, CpsTabComponent, CpsTabGroupComponent, CpsTableColumnFilterDirective, CpsTableColumnSortableDirective, CpsTableComponent, CpsTableHeaderSelectableDirective, CpsTableRowSelectableDirective, CpsTagComponent, CpsTextareaComponent, CpsTimepickerComponent, CpsTooltipDirective, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, CpsTreeTableColumnFilterDirective, CpsTreeTableColumnSortableDirective, CpsTreeTableComponent, CpsTreeTableHeaderSelectableDirective, CpsTreeTableRowSelectableDirective, CpsTreetableRowTogglerDirective, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory, treeTableFactory };
+export { CPS_RADIO_GROUP, CpsAutocompleteComponent, CpsButtonComponent, CpsButtonToggleComponent, CpsCheckboxComponent, CpsChipComponent, CpsColumnFilterMatchMode, CpsDatepickerComponent, CpsDetectFilterTypePipe, CpsDialogConfig, CpsDialogRef, CpsDialogService, CpsDividerComponent, CpsExpansionPanelComponent, CpsFileUploadComponent, CpsIconComponent, CpsInfoCircleComponent, CpsInputComponent, CpsLoaderComponent, CpsMenuComponent, CpsMenuHideReason, CpsNotificationAppearance, CpsNotificationPosition, CpsNotificationService, CpsPaginatePipe, CpsPaginatorComponent, CpsProgressCircularComponent, CpsProgressLinearComponent, CpsRadioComponent, CpsRadioGroupComponent, CpsSchedulerComponent, CpsSelectComponent, CpsSidebarMenuComponent, CpsSwitchComponent, CpsTabComponent, CpsTabGroupComponent, CpsTableColumnFilterDirective, CpsTableColumnSortableDirective, CpsTableComponent, CpsTableHeaderSelectableDirective, CpsTableRowSelectableDirective, CpsTagComponent, CpsTextareaComponent, CpsTimepickerComponent, CpsTooltipDirective, CpsTreeAutocompleteComponent, CpsTreeSelectComponent, CpsTreeTableColumnFilterDirective, CpsTreeTableColumnSortableDirective, CpsTreeTableComponent, CpsTreeTableHeaderSelectableDirective, CpsTreeTableRowSelectableDirective, CpsTreetableRowTogglerDirective, getCSSColor, getCpsColors, getTextColor, iconNames, tableFactory, treeTableFactory };
 //# sourceMappingURL=cps-ui-kit.mjs.map