@competer/primeng-table 19.1.9 → 19.2.0

package/fesm2022/competer-primeng-table.mjs

@@ -4,7 +4,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$2 from '@ngx-translate/core';
 import { TranslateService, TranslateDefaultParser, TranslatePipe } from '@ngx-translate/core';
 import { PrimeNG } from 'primeng/config';
-import { EMPTY, merge, Observable, finalize } from 'rxjs';
+import { EMPTY, merge, Observable, finalize, firstValueFrom } from 'rxjs';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i9$1 from '@angular/forms';
@@ -25,12 +25,13 @@ import * as i11$1 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import * as i9 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
+import * as i13 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
-import * as i13 from 'primeng/buttongroup';
+import * as i14 from 'primeng/buttongroup';
 import { ButtonGroupModule } from 'primeng/buttongroup';
-import * as i14 from 'primeng/popover';
+import * as i15 from 'primeng/popover';
 import { PopoverModule } from 'primeng/popover';
-import * as i15 from 'primeng/menu';
+import * as i16 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
 import * as i3 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
@@ -219,6 +220,8 @@ const DEFAULT_TABLE_OPTIONS = {
         },
         checkboxSelector: {
             enabled: false,
+            selectAllEnabled: false,
+            urlSelectAll: undefined,
             header: "Selected",
             positionRight: false,
             width: 150,
@@ -240,6 +243,8 @@ const DEFAULT_TABLE_OPTIONS = {
     },
     globalFilter: {
         enabled: true,
+        minLength: 0,
+        debounceTime: 0,
         maxLength: 20
     },
     predefinedFilters: {},
@@ -301,6 +306,246 @@ function createTableOptions(overrides = {}) {
     return merged;
 }
 
+class TreeTableState {
+    options;
+    expanded = new Set();
+    nodes = new Map();
+    children = new Map();
+    totals = new Map();
+    pages = new Map();
+    entries = new WeakMap();
+    roots = [];
+    allRoots = [];
+    version = 0;
+    pending = new Set();
+    restoredPages = {};
+    visible = [];
+    loading = false;
+    page = 0;
+    pageSize = 10;
+    totalRecords = 0;
+    totalRecordsNotFiltered = 0;
+    constructor(options) {
+        this.options = options;
+        if (!options.keyExpr?.trim() || !options.parentIdExpr?.trim() || !options.column?.trim()) {
+            throw new Error('Tree configuration requires keyExpr, parentIdExpr and column.');
+        }
+        if (!['all', 'onDemand', 'pagedChildren'].includes(this.mode)) {
+            throw new Error('Invalid tree loadMode.');
+        }
+        if (this.mode !== 'all' && !options.hasItemsExpr?.trim()) {
+            throw new Error('Remote tree loading requires hasItemsExpr.');
+        }
+    }
+    get mode() { return this.options.loadMode ?? 'onDemand'; }
+    get rootValue() { return this.options.rootValue === undefined ? 0 : this.options.rootValue; }
+    key(row) {
+        const key = row[this.options.keyExpr];
+        if ((typeof key !== 'string' && typeof key !== 'number') || key === '' ||
+            (typeof key === 'number' && !Number.isFinite(key))) {
+            throw new Error('Tree keys must be non-empty strings or finite numbers.');
+        }
+        return key;
+    }
+    restore(keys = [], pages = {}) {
+        this.expanded.clear();
+        keys.forEach(key => this.expanded.add(key));
+        this.restoredPages = { ...pages };
+    }
+    snapshotPages() {
+        return Object.fromEntries([...this.pages].map(([key, page]) => [JSON.stringify(key), page]));
+    }
+    depth(row) { return this.entries.get(row)?.depth ?? 0; }
+    isMore(row) { return !!this.entries.get(row)?.more; }
+    moreParent(row) { return this.entries.get(row)?.parent; }
+    isExpanded(row) { return this.expanded.has(this.key(row)); }
+    isLoading(row) { return this.pending.has(this.key(row)); }
+    hasChildren(row) {
+        if (this.mode === 'all')
+            return !!this.children.get(this.key(row))?.length;
+        return row[this.options.hasItemsExpr] === true;
+    }
+    cancel() { this.version++; this.loading = false; this.pending.clear(); }
+    async load(page, pageSize, fetch) {
+        const version = ++this.version;
+        this.loading = true;
+        this.pending.clear();
+        this.nodes.clear();
+        this.children.clear();
+        this.totals.clear();
+        this.pages.clear();
+        this.visible = [];
+        this.page = page;
+        this.pageSize = pageSize;
+        try {
+            const response = await fetch({ roots: true, parentId: this.rootValue, loadMode: this.mode, page, pageSize });
+            if (version !== this.version)
+                return false;
+            this.insert(response.data);
+            this.page = response.page;
+            this.totalRecords = response.totalRecords;
+            this.totalRecordsNotFiltered = response.totalRecordsNotFiltered;
+            if (this.mode === 'all') {
+                this.buildAll();
+                this.page = Math.min(Math.max(0, page), Math.max(0, Math.ceil(this.allRoots.length / pageSize) - 1));
+                this.roots = this.allRoots.slice(this.page * pageSize, (this.page + 1) * pageSize);
+            }
+            else {
+                this.roots = response.data.map(row => this.key(row));
+            }
+            response.ancestorKeys?.forEach(key => this.expanded.add(key));
+            const queue = [...this.roots];
+            for (let cursor = 0; cursor < queue.length; cursor++) {
+                const key = queue[cursor];
+                const row = this.nodes.get(key);
+                if (!this.expanded.has(key) || !this.hasChildren(row))
+                    continue;
+                if (this.mode !== 'all') {
+                    await this.fetchChildren(key, 0, fetch, version);
+                    const targetPage = this.restoredPages[JSON.stringify(key)] ?? 0;
+                    while (version === this.version && this.mode === 'pagedChildren' &&
+                        (this.pages.get(key) ?? 0) < targetPage && this.hasMore(key)) {
+                        await this.fetchChildren(key, (this.pages.get(key) ?? 0) + 1, fetch, version);
+                    }
+                }
+                if (version !== this.version)
+                    return false;
+                queue.push(...(this.children.get(key) ?? []));
+            }
+            this.restoredPages = {};
+            this.rebuild();
+            return true;
+        }
+        finally {
+            if (version === this.version)
+                this.loading = false;
+        }
+    }
+    async toggle(row, fetch) {
+        const key = this.key(row);
+        if (this.pending.has(key))
+            return;
+        if (this.expanded.delete(key)) {
+            this.rebuild();
+            return;
+        }
+        this.expanded.add(key);
+        const version = this.version;
+        try {
+            const queue = [key];
+            for (let cursor = 0; cursor < queue.length; cursor++) {
+                const current = queue[cursor];
+                if (this.mode !== 'all' && !this.children.has(current))
+                    await this.fetchChildren(current, 0, fetch, version);
+                if (version !== this.version)
+                    return;
+                for (const child of this.children.get(current) ?? []) {
+                    if (this.expanded.has(child) && this.hasChildren(this.nodes.get(child)))
+                        queue.push(child);
+                }
+            }
+            this.rebuild();
+        }
+        catch (error) {
+            if (version === this.version)
+                this.expanded.delete(key);
+            throw error;
+        }
+    }
+    async loadMore(row, fetch) {
+        const parent = this.moreParent(row);
+        if (parent === undefined || this.pending.has(parent))
+            return;
+        const version = this.version;
+        await this.fetchChildren(parent, (this.pages.get(parent) ?? 0) + 1, fetch, version);
+        if (version === this.version)
+            this.rebuild();
+    }
+    insert(rows) {
+        const keys = new Set();
+        for (const row of rows) {
+            const key = this.key(row);
+            if (keys.has(key) || this.nodes.has(key))
+                throw new Error('Duplicate tree key.');
+            keys.add(key);
+        }
+        for (const row of rows)
+            this.nodes.set(this.key(row), row);
+    }
+    buildAll() {
+        this.allRoots = [];
+        for (const [key, row] of this.nodes) {
+            const parent = row[this.options.parentIdExpr];
+            if (parent === this.rootValue)
+                this.allRoots.push(key);
+            else {
+                if (!this.nodes.has(parent))
+                    throw new Error('Missing tree parent.');
+                const siblings = this.children.get(parent) ?? [];
+                siblings.push(key);
+                this.children.set(parent, siblings);
+            }
+        }
+        const seen = new Set();
+        const queue = [...this.allRoots];
+        for (let cursor = 0; cursor < queue.length; cursor++) {
+            const key = queue[cursor];
+            if (seen.has(key))
+                throw new Error('Tree cycle.');
+            seen.add(key);
+            queue.push(...(this.children.get(key) ?? []));
+        }
+        if (seen.size !== this.nodes.size)
+            throw new Error('Tree cycle.');
+    }
+    async fetchChildren(key, page, fetch, version) {
+        this.pending.add(key);
+        try {
+            const response = await fetch({ roots: false, parentId: key, loadMode: this.mode, page, pageSize: this.pageSize });
+            if (version !== this.version)
+                return;
+            for (const row of response.data) {
+                if (row[this.options.parentIdExpr] !== key)
+                    throw new Error('Unexpected tree parent.');
+            }
+            this.insert(response.data);
+            this.children.set(key, [...(this.children.get(key) ?? []), ...response.data.map(row => this.key(row))]);
+            this.totals.set(key, response.totalRecords);
+            this.pages.set(key, response.page);
+            response.ancestorKeys?.forEach(ancestor => this.expanded.add(ancestor));
+        }
+        finally {
+            if (version === this.version)
+                this.pending.delete(key);
+        }
+    }
+    hasMore(key) {
+        return (this.children.get(key)?.length ?? 0) < (this.totals.get(key) ?? 0);
+    }
+    rebuild() {
+        this.entries = new WeakMap();
+        const result = [];
+        const stack = this.roots.map(key => ({ row: this.nodes.get(key), depth: 0 })).reverse();
+        while (stack.length) {
+            const entry = stack.pop();
+            this.entries.set(entry.row, entry);
+            result.push(entry.row);
+            if (entry.more)
+                continue;
+            const key = this.key(entry.row);
+            if (!this.expanded.has(key))
+                continue;
+            if (this.hasMore(key))
+                stack.push({ row: {}, depth: entry.depth + 1, parent: key, more: true });
+            const children = this.children.get(key) ?? [];
+            for (let index = children.length - 1; index >= 0; index--) {
+                stack.push({ row: this.nodes.get(children[index]), depth: entry.depth + 1, parent: key });
+            }
+        }
+        this.visible = result;
+    }
+}
+
 /**
  * Abstract service for handling HTTP requests for **ECS Primeng table**.
  *
@@ -729,6 +974,9 @@ class ECSPrimengTableService {
         };
         return this.http.handleHttpPostRequest(setListEndpoint, postData);
     }
+    fetchSelectionKeys(endpoint, request) {
+        return this.http.handleHttpPostRequest(endpoint, request);
+    }
     viewGenerateData(dt, globalSearchText, currentPage, currentRowsPerPage, modifyFiltersFn) {
         let colsWidth = this.computeColumnWidths(dt);
         let tableWidth = this.computeTableWidth(dt);
@@ -1451,6 +1699,9 @@ class ECSPrimengTable {
         });
     }
     tableOptions = DEFAULT_TABLE_OPTIONS;
+    treeState;
+    treeQuery;
+    treeStateRestored = false;
     onRowCheckboxChange = new EventEmitter(); // Emitter that returns the column selected and if it was selected or unselected
     onRowSelect = new EventEmitter;
     onRowUnselect = new EventEmitter;
@@ -1462,8 +1713,70 @@ class ECSPrimengTable {
     showExportModal = false;
     showColumnSelector = false;
     selectedRowsCheckbox = []; // An array to keep all the selected rows
+    selectAllLoading = false;
+    selectionQuery;
+    selectionQueryKey = '';
+    matchingSelectionKeys;
     dt; // Get the reference to the object table
     globalSearchText = null; // The text used by the global search
+    appliedGlobalSearchText = null;
+    globalSearchManaged = false;
+    globalSearchTimer;
+    /** The applied query stays separate from text being typed during the debounce. */
+    get effectiveGlobalSearchText() {
+        return this.globalSearchManaged ? this.appliedGlobalSearchText : this.globalSearchText;
+    }
+    cancelGlobalSearch() {
+        if (this.globalSearchTimer !== undefined)
+            clearTimeout(this.globalSearchTimer);
+        this.globalSearchTimer = undefined;
+    }
+    restoreGlobalSearch(value) {
+        this.cancelGlobalSearch();
+        this.globalSearchText = value;
+        this.appliedGlobalSearchText = value || null;
+        this.globalSearchManaged = true;
+    }
+    globalSearchOption(value) {
+        return typeof value === 'number' && Number.isFinite(value) ? Math.max(0, Math.floor(value)) : 0;
+    }
+    onGlobalSearchInput(value) {
+        if (this.destroyed)
+            return;
+        this.cancelGlobalSearch();
+        if (!this.globalSearchManaged)
+            this.appliedGlobalSearchText = this.globalSearchText || null;
+        this.globalSearchManaged = true;
+        this.globalSearchText = value;
+        const minLength = this.globalSearchOption(this.tableOptions.globalFilter?.minLength);
+        const delay = this.globalSearchOption(this.tableOptions.globalFilter?.debounceTime);
+        const trimmed = value.trim();
+        const effective = trimmed.length >= minLength ? (trimmed || null) : null;
+        if (effective === (this.appliedGlobalSearchText?.trim() || null))
+            return;
+        const apply = () => {
+            this.globalSearchTimer = undefined;
+            if (this.destroyed)
+                return;
+            this.appliedGlobalSearchText = effective;
+            this.currentPage = 0;
+            this.dt.first = 0;
+            if (minLength === 0 && delay === 0) {
+                // Keep PrimeNG's existing filtering behavior when the feature is not configured.
+                this.dt.filterGlobal(value, 'contains');
+            }
+            else {
+                // Own the global delay so it is not added to PrimeNG's column-filter delay.
+                this.dt.filters = { ...this.dt.filters, global: { value: effective, matchMode: 'contains' } };
+                this.fetchTableData({ ...this.tableLazyLoadEventInformation, first: 0,
+                    rows: this.currentRowsPerPage, filters: this.dt.filters });
+            }
+        };
+        if (effective === null || delay === 0)
+            apply();
+        else
+            this.globalSearchTimer = setTimeout(apply, delay);
+    }
     tableViewsList = [];
     tableViews_menuItems = [];
     DataType = DataType;
@@ -1496,6 +1809,8 @@ class ECSPrimengTable {
     maxViews = 0;
     ngOnInit() {
         this.i18n.connectPrimeNG();
+        if (this.tableOptions.tree)
+            this.treeState = new TreeTableState(this.tableOptions.tree);
         this.validateStatePersistence();
         this.updateResponsiveViewport();
         this.fetchTableConfiguration();
@@ -1650,7 +1965,9 @@ class ECSPrimengTable {
         }
     }
     ngOnDestroy() {
+        this.cancelGlobalSearch();
         this.destroyed = true;
+        this.treeState?.cancel();
         const options = this.tableOptions.statePersistence;
         const key = options?.key?.trim();
         if (!key || !this.stateScope)
@@ -1669,9 +1986,12 @@ class ECSPrimengTable {
             dataUrl: this.tableOptions.urlTableData ?? '',
             filters,
             multiSortMeta: structuredClone(this.dt.multiSortMeta ?? []),
-            globalSearchText: this.globalSearchText,
+            globalSearchText: this.effectiveGlobalSearchText,
             currentPage: this.currentPage,
-            currentRowsPerPage: this.currentRowsPerPage
+            currentRowsPerPage: this.currentRowsPerPage,
+            treeMode: this.treeState?.mode,
+            treeExpandedKeys: this.treeState ? [...this.treeState.expanded] : undefined,
+            treeChildPages: this.treeState?.snapshotPages()
         });
     }
     restoreNavigationState() {
@@ -1687,7 +2007,7 @@ class ECSPrimengTable {
         if (!state)
             return false;
         if (state.configurationUrl !== this.tableOptions.urlTableConfiguration ||
-            state.dataUrl !== this.tableOptions.urlTableData) {
+            state.dataUrl !== this.tableOptions.urlTableData || state.treeMode !== this.treeState?.mode) {
             this.stateScope.clear(key);
             return false;
         }
@@ -1701,7 +2021,9 @@ class ECSPrimengTable {
             ? state.currentRowsPerPage : this.currentRowsPerPage;
         this.currentPage = this.currentRowsPerPage === state.currentRowsPerPage
             ? Math.max(0, state.currentPage) : 0;
-        this.globalSearchText = state.globalSearchText;
+        this.restoreGlobalSearch(state.globalSearchText);
+        this.treeState?.restore(state.treeExpandedKeys, state.treeChildPages);
+        this.treeStateRestored = !!this.treeState;
         if (this.globalSearchText) {
             filters['global'] = { value: this.globalSearchText, matchMode: 'contains' };
         }
@@ -1920,6 +2242,8 @@ class ECSPrimengTable {
         }
         this.columnSelectionCustomized = true;
         let viewData = viewToLoad.viewData;
+        this.treeState?.restore(viewData.treeExpandedKeys, viewData.treeChildPages);
+        this.treeStateRestored = !!this.treeState;
         this.columnsSelected = viewData.columnsShown
             .map(data => this.columns.find((col) => col.field === data.field))
             .filter((col) => col !== undefined)
@@ -1927,7 +2251,7 @@ class ECSPrimengTable {
         this.tableOptions.columns.shown = this.tableService.orderColumnsWithFrozens(this.columnsCantBeHidden.concat(this.columnsSelected));
         this.currentPage = viewData.currentPage;
         this.currentRowsPerPage = viewData.currentRowsPerPage;
-        this.globalSearchText = viewData.globalSearchText;
+        this.restoreGlobalSearch(viewData.globalSearchText);
         this.tableOptions.isActive = false;
         this.tableLazyLoadEventInformation.multiSortMeta = [...(viewData.multiSortMeta ?? [])];
         this.dt.multiSortMeta = [...(viewData.multiSortMeta ?? [])];
@@ -1952,7 +2276,7 @@ class ECSPrimengTable {
             this.notification.showToast("error", this.i18n.text("NO MORE VIEWS ALLOWED"), this.i18n.text("You have created the maximum number of allowed views for this table"));
             return;
         }
-        let viewData = this.tableService.viewGenerateData(this.dt, this.globalSearchText, this.currentPage, this.currentRowsPerPage, this.modifyFiltersWithoutGlobalAndSelectedRows.bind(this));
+        let viewData = this.generateViewData();
         let newView = {
             lastActive: false,
             viewAlias: viewAlias,
@@ -1997,7 +2321,7 @@ class ECSPrimengTable {
             this.notification.showToast("error", this.i18n.text("Table view not found"), this.i18n.text("The table view to update data from was not found."));
             return;
         }
-        let viewData = this.tableService.viewGenerateData(this.dt, this.globalSearchText, this.currentPage, this.currentRowsPerPage, this.modifyFiltersWithoutGlobalAndSelectedRows.bind(this));
+        let viewData = this.generateViewData();
         this.tableViewsList[index].viewData = viewData;
         this.viewsSave(1);
     }
@@ -2079,13 +2403,42 @@ class ECSPrimengTable {
             pageSize: this.currentRowsPerPage, // Set the number of rows per page
             sort: this.tableLazyLoadEventInformation.multiSortMeta, // Set the sorting information
             filter: filtersWithoutGlobalAndSelectedRows, // Set the filters excluding the global filter
-            globalFilter: this.globalSearchText, // Set the global filter text
+            globalFilter: this.effectiveGlobalSearchText, // Use the applied query, not pending input
             columns: this.tableOptions.columns.shown.map(col => col.field), // Set the columns to show
             dateFormat: this.dateFormat,
             dateTimezone: this.dateTimezone,
             dateCulture: this.dateCulture,
             exportDateFormat: this.exportDateFormat
         };
+        const selectionKey = JSON.stringify({ ...requestData, page: 0, pageSize: 0, sort: null });
+        if (selectionKey !== this.selectionQueryKey)
+            this.matchingSelectionKeys = undefined;
+        this.selectionQueryKey = selectionKey;
+        this.selectionQuery = structuredClone(requestData);
+        if (this.treeState) {
+            const tree = this.treeState;
+            if (!this.treeStateRestored)
+                tree.restore([...tree.expanded], tree.snapshotPages());
+            this.treeStateRestored = false;
+            const structural = [tree.options.keyExpr, tree.options.parentIdExpr, tree.options.hasItemsExpr, 'rowID'];
+            requestData.columns = [...new Set([...requestData.columns, ...structural.filter((field) => !!field)])];
+            this.treeQuery = structuredClone(requestData);
+            const loading = tree.load(this.currentPage, this.currentRowsPerPage, this.treeFetcher(requestData));
+            this.tableOptions.data = [];
+            loading.then(updated => {
+                if (updated && !this.destroyed)
+                    this.syncTreeRows();
+            }).catch(error => {
+                if (!this.destroyed)
+                    this.tableService.handleTableError(error, 'Tree data error');
+            }).finally(() => {
+                if (!this.destroyed) {
+                    this.changeDetector?.markForCheck();
+                    this.onDataEndUpdate.emit();
+                }
+            });
+            return;
+        }
         this.tableService.fetchTableData(this.tableOptions.urlTableData, requestData)
             .pipe(takeUntilDestroyed(this.destroyRef), finalize(() => {
             if (this.destroyed)
@@ -2098,9 +2451,6 @@ class ECSPrimengTable {
         });
     }
     modifyFiltersWithoutGlobalAndSelectedRows(filters, overrideOption = -1) {
-        if (this.globalSearchText === "") { // If the global search text is an empty string
-            this.globalSearchText = null; // Set it to null
-        }
         let filtersWithoutGlobalAndSelectedRows = structuredClone(filters ?? {}); // Create a copy of filters to delete the global.
         if (filtersWithoutGlobalAndSelectedRows.hasOwnProperty('global')) { // If there is an entry with the global filter
             delete filtersWithoutGlobalAndSelectedRows['global']; // Remove the global filter
@@ -2109,9 +2459,12 @@ class ECSPrimengTable {
         return filtersWithoutGlobalAndSelectedRows; // Return the filters without global array
     }
     resetTableView() {
+        this.cancelGlobalSearch();
         const key = this.tableOptions.statePersistence?.key?.trim();
         if (key)
             this.stateScope?.clear(key);
+        this.treeState?.restore();
+        this.treeStateRestored = !!this.treeState;
         this.initialStateApplied = false;
         this.tableViewCurrentSelectedAlias = '';
         this.fetchTableConfiguration(true);
@@ -2181,7 +2534,76 @@ class ECSPrimengTable {
         this.totalRecordsNotFiltered = body.totalRecordsNotFiltered; // Update the total records not filtered
         this.currentPage = body.page; // Update the current page
     }
+    generateViewData() {
+        const view = this.tableService.viewGenerateData(this.dt, this.effectiveGlobalSearchText, this.currentPage, this.currentRowsPerPage, this.modifyFiltersWithoutGlobalAndSelectedRows.bind(this));
+        if (this.treeState) {
+            view.treeExpandedKeys = [...this.treeState.expanded];
+            view.treeChildPages = this.treeState.snapshotPages();
+        }
+        return view;
+    }
+    treeFetcher(query) {
+        return async (request) => {
+            const response = await firstValueFrom(this.tableService.fetchTableData(this.tableOptions.urlTableData, { ...structuredClone(query), ...request }).pipe(takeUntilDestroyed(this.destroyRef)));
+            if (!response.body)
+                throw new Error('Empty tree response.');
+            return response.body;
+        };
+    }
+    syncTreeRows() {
+        const tree = this.treeState;
+        this.tableOptions.data = tree.visible;
+        this.totalRecords = tree.totalRecords;
+        this.totalRecordsNotFiltered = tree.totalRecordsNotFiltered;
+        this.currentPage = tree.page;
+        this.changeDetector?.markForCheck();
+    }
+    async toggleTreeRow(event, row) {
+        event.stopPropagation();
+        if (!this.treeState || !this.treeQuery || this.treeState.loading)
+            return;
+        try {
+            const update = this.treeState.toggle(row, this.treeFetcher(this.treeQuery));
+            this.changeDetector?.markForCheck();
+            await update;
+            if (!this.destroyed)
+                this.syncTreeRows();
+        }
+        catch (error) {
+            if (!this.destroyed)
+                this.tableService.handleTableError(error, 'Tree data error');
+        }
+        finally {
+            if (!this.destroyed) {
+                this.changeDetector?.markForCheck();
+                this.onDataEndUpdate.emit();
+            }
+        }
+    }
+    async loadMoreTreeRows(event, row) {
+        event.stopPropagation();
+        if (!this.treeState || !this.treeQuery || this.treeState.loading)
+            return;
+        try {
+            await this.treeState.loadMore(row, this.treeFetcher(this.treeQuery));
+            if (!this.destroyed)
+                this.syncTreeRows();
+        }
+        catch (error) {
+            if (!this.destroyed)
+                this.tableService.handleTableError(error, 'Tree data error');
+        }
+    }
+    get treeColumn() {
+        const columns = this.tableOptions.columns?.shown ?? [];
+        return columns.find(column => column.field === this.treeState?.options.column)?.field ?? columns[0]?.field;
+    }
+    treePageChange(event) {
+        this.fetchTableData({ ...this.tableLazyLoadEventInformation, first: event.first ?? 0,
+            rows: event.rows ?? this.currentRowsPerPage });
+    }
     clearFilters(dt, force = false, onlyGlobalFilter = false) {
+        this.cancelGlobalSearch();
         let hasToClear = this.hasToClearFilters(dt, this.globalSearchText, force);
         if (hasToClear) {
             if (!onlyGlobalFilter) {
@@ -2205,8 +2627,17 @@ class ECSPrimengTable {
                 });
                 this.dt.filters = filters;
             }
-            this.globalSearchText = null;
-            dt.filterGlobal('', '');
+            this.restoreGlobalSearch(null);
+            if (this.globalSearchOption(this.tableOptions.globalFilter?.minLength) > 0 ||
+                this.globalSearchOption(this.tableOptions.globalFilter?.debounceTime) > 0) {
+                this.currentPage = 0;
+                dt.first = 0;
+                dt.filters = { ...dt.filters, global: { value: null, matchMode: 'contains' } };
+                this.fetchTableData({ ...this.tableLazyLoadEventInformation, first: 0,
+                    rows: this.currentRowsPerPage, filters: dt.filters });
+            }
+            else
+                dt.filterGlobal('', '');
         }
     }
     clearSorts(dt, force = false) {
@@ -2332,9 +2763,62 @@ class ECSPrimengTable {
     isRowCheckboxSelected(rowID) {
         return this.selectedRowsCheckbox.includes(rowID);
     }
+    get allMatchingRowsSelected() {
+        if (!this.matchingSelectionKeys?.length)
+            return false;
+        const selected = new Set(this.selectedRowsCheckbox);
+        return this.matchingSelectionKeys.every(key => selected.has(key));
+    }
+    get matchingRowsPartiallySelected() {
+        if (this.allMatchingRowsSelected)
+            return false;
+        if (!this.matchingSelectionKeys)
+            return this.selectedRowsCheckbox.length > 0;
+        const selected = new Set(this.selectedRowsCheckbox);
+        return this.matchingSelectionKeys.some(key => selected.has(key));
+    }
+    async toggleAllMatchingRows(checked) {
+        const options = this.tableOptions.rows?.checkboxSelector;
+        if (!options?.enabled || !options.selectAllEnabled || !options.urlSelectAll ||
+            !this.selectionQuery || this.selectAllLoading)
+            return;
+        const queryKey = this.selectionQueryKey;
+        this.selectAllLoading = true;
+        try {
+            const response = await firstValueFrom(this.tableService.fetchSelectionKeys(options.urlSelectAll, structuredClone(this.selectionQuery)).pipe(takeUntilDestroyed(this.destroyRef)));
+            if (this.destroyed || queryKey !== this.selectionQueryKey)
+                return;
+            if (!Array.isArray(response.body) || response.body.some(key => typeof key !== 'string' && typeof key !== 'number'))
+                throw new Error('Invalid selection identifiers.');
+            const disabledKeys = new Set((this.tableOptions.data ?? [])
+                .filter(row => !(options.enabledCondition?.(row) ?? true)).map(row => row.rowID));
+            const keys = [...new Set(response.body)].filter(key => !disabledKeys.has(key));
+            this.matchingSelectionKeys = keys;
+            const selected = new Set(this.selectedRowsCheckbox);
+            const changed = keys.filter(key => selected.has(key) !== checked);
+            for (const key of changed) {
+                if (checked)
+                    selected.add(key);
+                else
+                    selected.delete(key);
+            }
+            this.selectedRowsCheckbox = [...selected];
+            for (const rowID of changed)
+                this.onRowCheckboxChange.emit({ rowID, selected: checked });
+        }
+        catch (error) {
+            if (!this.destroyed)
+                this.tableService.handleTableError(error, 'Selection error');
+        }
+        finally {
+            this.selectAllLoading = false;
+            this.changeDetector?.markForCheck();
+        }
+    }
     onRowChekboxChange(event, rowID) {
         if (event.checked) { // Add the selected item
-            this.selectedRowsCheckbox.push(rowID);
+            if (!this.selectedRowsCheckbox.includes(rowID))
+                this.selectedRowsCheckbox.push(rowID);
         }
         else { // Remove the selected item
             this.selectedRowsCheckbox = this.selectedRowsCheckbox.filter(selectedId => selectedId !== rowID);
@@ -2459,7 +2943,7 @@ class ECSPrimengTable {
             pageSize: this.currentRowsPerPage, // Set the number of rows per page
             sort: this.tableLazyLoadEventInformation.multiSortMeta, // Set the sorting information
             filter: filtersWithoutGlobalAndSelectedRows, // Set the filters excluding the global filter
-            globalFilter: this.globalSearchText, // Set the global filter text
+            globalFilter: this.effectiveGlobalSearchText, // Use the applied query, not pending input
             columns: this.tableOptions.columns.shown.map(col => col.field), // Set the columns to show
             dateFormat: this.dateFormat,
             dateTimezone: this.dateTimezone,
@@ -2471,6 +2955,8 @@ class ECSPrimengTable {
             filename: event.filename,
             useIconInBools: event.useIconInBools
         };
+        if (this.treeState)
+            Object.assign(requestData, { expandedKeys: [...this.treeState.expanded] });
         this.tableService.fetchExcelReport(this.tableOptions.excelReport.url, requestData).subscribe({
             next: (response) => {
                 this.tableService.downloadFile(response.body, event.filename, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
@@ -2505,7 +2991,7 @@ class ECSPrimengTable {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ECSPrimengTable, deps: [{ token: ECSPrimengTableService }, { token: ECSPrimengTableNotificationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ECSPrimengTable, isStandalone: true, selector: "ecs-primeng-table", inputs: { tableOptions: "tableOptions" }, outputs: { onRowCheckboxChange: "onRowCheckboxChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onDataEndUpdate: "onDataEndUpdate" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }, { propertyName: "paginatorContainer", first: true, predicate: ["paginatorContainer"], descendants: true }, { propertyName: "responsiveHeaderMenu", first: true, predicate: ["responsiveHeaderMenu"], descendants: true }, { propertyName: "responsiveRowMenu", first: true, predicate: ["responsiveRowMenu"], descendants: true }], ngImport: i0, template: "<div #tableContainer>\r\n    <p-table #dt\r\n        size=\"small\" showGridlines stripedRows \r\n        sortMode=\"multiple\"\r\n        [resizableColumns]=\"true\" columnResizeMode=\"expand\"\r\n        [reorderableColumns]=\"true\"\r\n        [scrollable]=\"true\" [scrollHeight]=\"scrollHeightValue\"\r\n        [columns]=\"tableOptions.columns?.shown ?? []\" [value]=\"tableOptions.data ?? []\" dataKey=\"rowID\" \r\n        [paginator]=\"true\" paginatorDropdownAppendTo=\"body\" [first]=\"currentPage * currentRowsPerPage\" [rows]=\"currentRowsPerPage\" [totalRecords]=\"totalRecords\"\r\n        [rowsPerPageOptions]=\"allowedRowsPerPage\" [showCurrentPageReport]=\"false\" (onPage)=\"pageChange($event)\"\r\n        [metaKeySelection]=\"true\" [selectionMode]=\"tableOptions.rows?.singleSelector?.enabled ? 'single' : null\" [metaKeySelection]=\"tableOptions.rows?.singleSelector?.metakey\" [(selection)]=\"rowSelection\" (onRowSelect)=\"rowSelect($event)\" (onRowUnselect)=\"rowUnselect($event)\"\r\n        [lazy]=\"true\" (onLazyLoad)=\"fetchTableData($event)\">\r\n\r\n        <!--TEMPLATE FOR THE ACTIONS HEADER COLUMN-->\r\n        <ng-template #actionColumnHeaderTemplate>\r\n            @if ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0) {\r\n                <th [ngStyle]=\"{\r\n                        'text-align': 'center',\r\n                        'vertical-align': 'middle',\r\n                        'max-width': actionColumnWidth + 'px',\r\n                        'min-width': actionColumnWidth + 'px',\r\n                        'width': actionColumnWidth + 'px'\r\n                    }\"\r\n                    pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows?.action?.resizable\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\"\r\n                    [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.action?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\" id=\"actions-header\"\r\n                    [attr.scope]=\"'col'\">\r\n                    {{ (tableOptions.rows?.action?.header ?? '') | ecsTranslate }}\r\n                </th>\r\n            }\r\n        </ng-template>\r\n\r\n        <!--TEMPLATE FOR THE ACTIONS ROW COLUMN-->\r\n        <ng-template #actionColumnTemplate let-rowData=\"rowData\">\r\n            @if ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0) {\r\n                <td \r\n                    [ngStyle]=\"{\r\n                        'text-align': (getDataAlignHorizontalAsText(tableOptions.rows?.action?.horizontalAlignment ?? DataAlignHorizontal.Center)),\r\n                        'vertical-align': (getDataAlignVerticalAsText(tableOptions.rows?.action?.verticalAlignment ?? DataAlignVertical.Middle)),\r\n                        'max-width': actionColumnWidth + 'px',\r\n                        'min-width': actionColumnWidth + 'px',\r\n                        'width': actionColumnWidth + 'px'\r\n                    }\"\r\n                    pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\"\r\n                    [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.action?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n                    @if (compactRows) {\r\n                        @if (hasRowMenuActions(rowData)) {\r\n                            <button pButton type=\"button\" icon=\"pi pi-ellipsis-v\" [attr.aria-label]=\"(tableOptions.responsive?.rowMenuLabel || 'Row actions') | ecsTranslate\"\r\n                                aria-haspopup=\"menu\" [attr.aria-expanded]=\"responsiveRowMenu.visible && rowMenuRow === rowData\"\r\n                                (click)=\"openRowMenu($event, rowData)\" class=\"ecs-responsive-trigger\"></button>\r\n                        }\r\n                    } @else {\r\n                    @for (button of tableOptions.rows?.action?.buttons; track button; let last = $last) {\r\n                        <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\"/>\r\n                    }\r\n                    }\r\n                </td>\r\n            }\r\n        </ng-template>\r\n\r\n        <!-- TEMPLATE FOR THE ROW CHECKBOX SELECTOR HEADER COLUMN -->\r\n        <ng-template #rowSelectorColumnHeaderTemplate>\r\n            <th \r\n                [ngStyle]=\"{\r\n                    'text-align': 'center',\r\n                    'vertical-align': 'middle',\r\n                    'max-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n                    'min-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n                    'width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px'\r\n                }\"\r\n                id=\"rowSelector-header\"  [attr.scope]=\"'col'\" pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows?.checkboxSelector?.resizable\" pFrozenColumn \r\n                [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.checkboxSelector?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n                    <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                        {{ (tableOptions.rows?.checkboxSelector?.header ?? '') | ecsTranslate }}\r\n                        <p-columnFilter type=\"boolean\" field=\"selector\" display=\"menu\" [showButtons]=\"false\"/>\r\n                    </div>\r\n            </th>\r\n        </ng-template>\r\n\r\n        <!--TEMPLATE FOR THE ROW CHECKBOX SELECTOR COLUMN-->\r\n        <ng-template #rowSelectorColumnTemplate let-rowData=\"rowData\">\r\n            <td \r\n            [ngStyle]=\"{\r\n                'text-align': (getDataAlignHorizontalAsText(tableOptions.rows?.checkboxSelector?.horizontalAlignment ?? DataAlignHorizontal.Center)),\r\n                'vertical-align': (getDataAlignVerticalAsText(tableOptions.rows?.checkboxSelector?.verticalAlignment ?? DataAlignVertical.Middle)),\r\n                'max-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n                'min-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n                'width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px'\r\n            }\"\r\n            pFrozenColumn [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" \r\n            [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.checkboxSelector?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n            <p-checkbox \r\n                [disabled]=\"!(tableOptions.rows?.checkboxSelector?.enabledCondition?.(rowData) ?? true)\"\r\n                [binary]=\"true\"\r\n                [ngModel]=\"isRowCheckboxSelected(rowData.rowID)\"\r\n                (onChange)=\"onRowChekboxChange($event, rowData.rowID)\"/>\r\n            </td>\r\n        </ng-template>\r\n\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE ACTIONS ABOVE THE HEADER -->\r\n        <ng-template #caption>\r\n            <div #headerContainer [class.ecs-compact-header]=\"compactHeader\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                @if (compactHeader) {\r\n                    @if (tableOptions.globalFilter?.enabled) {\r\n                        <p-iconField iconPosition=\"left\" class=\"ecs-responsive-search\">\r\n                            <p-inputIcon><i class=\"pi pi-search\"></i></p-inputIcon>\r\n                            <input pInputText type=\"text\" [attr.aria-label]=\"'Search keyword' | ecsTranslate\" [placeholder]=\"'Search keyword' | ecsTranslate\" autocomplete=\"off\"\r\n                                [maxlength]=\"tableOptions.globalFilter?.maxLength ?? null\" [(ngModel)]=\"globalSearchText\"\r\n                                (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\"/>\r\n                            @if (globalSearchText) {\r\n                                <p-inputIcon position=\"right\"><button type=\"button\" class=\"ecs-clear-search\" [attr.aria-label]=\"'Clear search' | ecsTranslate\" (click)=\"clearFilters(dt, true, true)\"><i class=\"pi pi-times\"></i></button></p-inputIcon>\r\n                            }\r\n                        </p-iconField>\r\n                    }\r\n                    @if (tableOptions.description?.text) {\r\n                        <i [class]=\"tableOptions.description!.icon\" [pTooltip]=\"(tableOptions.description!.text) | ecsTranslate\" [escape]=\"false\"></i>\r\n                    }\r\n                    <button pButton type=\"button\" icon=\"pi pi-bars\" [attr.aria-label]=\"(tableOptions.responsive?.headerMenuLabel || 'Table actions') | ecsTranslate\"\r\n                        aria-haspopup=\"menu\" [attr.aria-expanded]=\"responsiveHeaderMenu.visible\"\r\n                        (click)=\"openHeaderMenu($event)\" class=\"ecs-responsive-trigger ecs-header-menu-trigger\"></button>\r\n                } @else {\r\n\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <!--CHOOSE COLUMNS TO SHOW-->\r\n                    @if (tableOptions.columns?.selectorEnabled) {\r\n                        <p-button [icon]=\"tableOptions.columns?.selectorIcon ?? 'pi pi-pen-to-square'\" (onClick)=\"columnSelectorShow()\" [pTooltip]=\"'Modify columns' | ecsTranslate\"\r\n                            [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                    <!--CLEAR SORTS AND FILTERS-->\r\n                    @if (tableOptions.header?.clearSortsEnabled) {\r\n                        <p-button [icon]=\"tableOptions.header?.clearSortsIcon ?? 'pi pi-sort-alt-slash'\" (onClick)=\"clearSorts(dt)\" [disabled]=\"!hasToClearSorts(dt)\"\r\n                            [pTooltip]=\"'Clear sorts' | ecsTranslate\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                    @if (tableOptions.header?.clearFiltersEnabled) {\r\n                        <p-button\r\n                            [icon]=\"tableOptions.header?.clearFiltersIcon ?? 'pi pi-filter-slash'\" (onClick)=\"clearFilters(dt)\" [disabled]=\"!hasToClearFilters(dt, globalSearchText)\"\r\n                            [pTooltip]=\"'Clear filters' | ecsTranslate\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n\r\n                    <!--TABLE DESCRIPTION-->\r\n                    @if(tableOptions.description?.text){ <!-- If a table description text is provided -->\r\n                        @if(!tableOptions.description!.tooltip){ <!-- The table description must be shown as text next to the icon -->\r\n                            <i [class]=\"tableOptions.description!.icon\"></i>\r\n                            <span [innerHTML]=\"(tableOptions.description!.text) | ecsTranslate\"></span>\r\n                        } @else {\r\n                            <i [escape]=\"false\" [pTooltip]=\"(tableOptions.description!.text) | ecsTranslate\" tooltipPosition=\"right\" [class]=\"tableOptions.description!.icon\"></i>\r\n                        }\r\n                    }\r\n                </div>\r\n\r\n                <!--TABLE VIEWS-->\r\n                @if(tableViewsEnabled()){\r\n                    <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                        <p-buttongroup>\r\n                            <p-button (click)=\"viewsModalShow=true;\"\r\n                                [label]=\"tableViewCurrentSelectedAlias \r\n                                    ? tableViewCurrentSelectedAlias \r\n                                    : ((tableOptions.views?.noViewSelectedText || '--- Select a view ---') | ecsTranslate)\"\r\n                                [class]=\"'viewButton' + (tableOptions.views?.selectViewButtonClass ? ' ' + tableOptions.views!.selectViewButtonClass : '')\"/>\r\n                            <p-button (click)=\"viewLoad(tableViewCurrentSelectedAlias!)\"  [disabled]=\"!tableViewCurrentSelectedAlias\" [pTooltip]=\"'Apply view again' | ecsTranslate\" [showDelay]=\"700\" tooltipPosition=\"top\"\r\n                                [icon]=\"tableOptions.views?.reloadViewButtonIcon || 'pi pi-refresh'\"\r\n                                [class]=\"tableOptions.views?.reloadViewButtonClass || ''\"/>\r\n                        </p-buttongroup>\r\n                    </div>\r\n                }\r\n\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <!--GLOBAL FILTER-->\r\n                    @if (tableOptions.globalFilter?.enabled) {\r\n                        <p-iconField iconPosition=\"left\" class=\"ml-auto\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n                            <p-inputIcon>\r\n                                <i class=\"pi pi-search\"></i>\r\n                            </p-inputIcon>\r\n                            <input pInputText type=\"text\" \r\n                                (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\"  autocomplete=\"off\" \r\n                                [maxlength]=\"tableOptions.globalFilter?.maxLength ?? null\" [placeholder]=\"'Search keyword' | ecsTranslate\" [(ngModel)]=\"globalSearchText\"\r\n                                style=\"width: 220px;\"/>\r\n                            <!-- Right icon (only if there is text) -->\r\n                            @if (globalSearchText) {\r\n                                <p-inputIcon position=\"right\">\r\n                                    <i class=\"pi pi-times\" style=\"cursor: pointer;\"  (click)=\"clearFilters(dt, true, true); $event.stopPropagation()\"></i>\r\n                                </p-inputIcon>\r\n                            }\r\n                        </p-iconField>\r\n                    }\r\n\r\n                    <!--EXPORT DATA-->\r\n                    @if (tableOptions.excelReport?.url?.trim()) {\r\n                        <p-button icon=\"pi pi-file-excel\" (onClick)=\"openExcelExport()\"\r\n                            [pTooltip]=\"'Export to Excel' | ecsTranslate\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n\r\n                    <!--RESET TABLE VIEW-->\r\n                    @if(tableOptions.resetTableView?.enabled){\r\n                        <p-button [icon]=\"tableOptions.resetTableView?.icon ?? 'pi pi-eraser'\" (click)=\"resetTableView()\" [pTooltip]=\"'Reset table view' | ecsTranslate\" [showDelay]=\"700\"\r\n                            tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n\r\n                    <!--REFRESH DATA-->\r\n                    <p-button icon=\"pi pi-refresh\" (onClick)=\"refreshData($event)\" [pTooltip]=\"'Refresh data' | ecsTranslate\" [showDelay]=\"700\"\r\n                        tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    \r\n                    <!-- HEADER ACTION BUTTONS -->\r\n                    @if ((tableOptions.header?.buttons?.length ?? 0) > 0) {\r\n                        <td style=\"display: flex; justify-content: center; align-items: center; gap: 10px;\">\r\n                            @for (button of tableOptions.header?.buttons; track $index) {\r\n                                <ecs-table-button [button]=\"button\" [rowData]=\"null\"/>\r\n                            }\r\n                        </td>\r\n                    }\r\n                </div>\r\n                }\r\n            </div>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE HEADERS -->\r\n        <ng-template #header let-columns>\r\n            @let headerGroups = getColumnHeaderGroups(columns);\r\n            @if (headerGroups.length) {\r\n                <tr class=\"ecs-column-groups\">\r\n                    @if ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0 && !tableOptions.rows?.action?.positionRight) {\r\n                        <td aria-hidden=\"true\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\" alignFrozen=\"left\"\r\n                            [style.width.px]=\"actionColumnWidth\" [style.min-width.px]=\"actionColumnWidth\"></td>\r\n                    }\r\n                    @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                        <td aria-hidden=\"true\" pFrozenColumn [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" alignFrozen=\"left\"\r\n                            [style.width.px]=\"tableOptions.rows?.checkboxSelector?.width ?? 150\" [style.min-width.px]=\"tableOptions.rows?.checkboxSelector?.width ?? 150\"></td>\r\n                    }\r\n                    @for (group of headerGroups; track group.field) {\r\n                        <td [attr.colspan]=\"group.colspan\" role=\"columnheader\" [attr.aria-colspan]=\"group.colspan\" style=\"text-align: center; vertical-align: middle;\"\r\n                            pFrozenColumn [frozen]=\"group.frozenColumnAlign !== FrozenColumnAlign.Noone\"\r\n                            [alignFrozen]=\"getFrozenColumnAlignAsText(group.frozenColumnAlign)\">\r\n                            {{ group.label | translate }}\r\n                        </td>\r\n                    }\r\n                    @if (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                        <td aria-hidden=\"true\" pFrozenColumn [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" alignFrozen=\"right\"\r\n                            [style.width.px]=\"tableOptions.rows?.checkboxSelector?.width ?? 150\" [style.min-width.px]=\"tableOptions.rows?.checkboxSelector?.width ?? 150\"></td>\r\n                    }\r\n                    @if ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0 && tableOptions.rows?.action?.positionRight) {\r\n                        <td aria-hidden=\"true\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\" alignFrozen=\"right\"\r\n                            [style.width.px]=\"actionColumnWidth\" [style.min-width.px]=\"actionColumnWidth\"></td>\r\n                    }\r\n                </tr>\r\n            }\r\n            <tr>\r\n                @if (!tableOptions.rows?.action?.positionRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @for (col of columns; track col.header) {\r\n                    <th [ngStyle]=\"getColumnStyle(col, true)\"\r\n                        pResizableColumn [pResizableColumnDisabled]=\"!col.canBeResized ? true : false\"\r\n                        pReorderableColumn [pReorderableColumnDisabled]=\"!col.canBeReordered ? true : false\"\r\n                        pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\"\r\n                        [pSortableColumn]=\"col.field\" [pSortableColumnDisabled]=\"!col.canBeSorted ? true : false\"\r\n                        style=\"text-align: center;\"\r\n                        [id]=\"col.field + '-header'\" [attr.scope]=\"'col'\">\r\n                        <div style=\"display: flex; justify-content: space-between; align-items: center; width: 100%;\">\r\n                            <div style=\"margin-right: 15px;\">\r\n                                <span>{{ col.header | translate }}</span>\r\n                            </div>\r\n                            <div style=\"display: flex; align-items: center; gap: 5px;\">\r\n                                @if (col.canBeSorted) {\r\n                                    <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n                                }\r\n                                @if(col.canBeFiltered){\r\n                                    @if (!col.filterPredefinedValuesName || col.filterPredefinedValuesName.length === 0) {\r\n                                        <p-columnFilter [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\" [showButtons]=\"false\"/>\r\n                                    } @else {\r\n                                        <p-columnFilter\r\n                                            [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\"\r\n                                            [showButtons]=\"false\" matchMode=\"in\" operator=\"or\" [showMatchModes]=\"false\"\r\n                                            [showOperator]=\"false\" [showAddButton]=\"false\" [showClearButton]=\"false\" [showApplyButton]=\"false\">\r\n                                            <ng-template #filter>\r\n                                                <p-multiSelect\r\n                                                    [style]=\"{ minWidth: '400px' }\" [(ngModel)]=\"predefinedFiltersSelectedValuesCollection[col.filterPredefinedValuesName]\"\r\n                                                    [options]=\"getPredefinedFilterValues(col.filterPredefinedValuesName)\" [placeholder]=\"'Any value' | ecsTranslate\"\r\n                                                    (onChange)=\"onPredefinedFilterChange(col.field, $event.value)\" optionLabel=\"name\">\r\n                                                    <ng-template #item let-option >\r\n                                                        <div style=\"display: inline-block; vertical-align: middle;\">\r\n                                                            <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\" [selectable]=\"false\" [rowData]=\"null\"/>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                </p-multiSelect>\r\n                                            </ng-template>\r\n                                        </p-columnFilter>\r\n                                    }\r\n                                }\r\n                                @if (col.columnDescription && col.columnDescription.length > 0) {\r\n                                    <i [pTooltip]=\"(col.columnDescription) | ecsTranslate\" tooltipPosition=\"top\" [class]=\"tableOptions.columnDescriptionIcon || 'pi pi-info-circle'\"></i>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                    </th>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.action?.positionRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n                }\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS CONTENTS -->\r\n        <ng-template #body let-rowData let-columns=\"columns\"> \r\n            <tr [pSelectableRow]=\"rowData\" [ngClass]=\"tableOptions.rows?.class?.(rowData)\" [ngStyle]=\"tableOptions.rows?.style?.(rowData)\">\r\n                @if (!tableOptions.rows?.action?.positionRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n                }\r\n                @for (col of columns; track col.field) {\r\n                    <td (mousedown)=\"col.dataType !== DataType.Boolean && copyToClipboardStart($event)\" (mouseup)=\"copyToClipboardCancel()\"\r\n                        [ngStyle]=\"getColumnStyle(col)\" pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" \r\n                        [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\" [style.text-align]=\"getDataAlignHorizontalAsText(col.dataAlignHorizontal)\" [style.vertical-align]=\"getDataAlignVerticalAsText(col.dataAlignVertical)\">\r\n                        <ecs-table-cell [col]=\"col\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\" \r\n                            [dateFormat]=\"dateFormat\" [dateTimezone]=\"dateTimezone\" [dateCulture]=\"dateCulture\"\r\n                            [predefinedFiltersCollection]=\"tableOptions.predefinedFilters\"/>\r\n                    </td>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.action?.positionRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n                }\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS NO CONTENTS -->\r\n        <ng-template #emptymessage>\r\n            <tr>\r\n                <td colspan=\"999\">{{ 'No data found for the current filter criteria.' | ecsTranslate }}</td>\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- SHOW CUSTOM RECORDS REPORT -->\r\n        <ng-template #paginatorleft>\r\n            <div #paginatorContainer>\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    @if(tableOptions.legend?.content){\r\n                        <ecs-table-button [button]=\"tableOptions.legend?.button\" [rowData]=\"null\" [overrideAction]=\"op.toggle.bind(op)\"/>\r\n                        <p-popover #op>\r\n                            <div [innerHTML]=\"(tableOptions.legend?.content) | ecsTranslate\"></div>\r\n                        </p-popover>\r\n                    }\r\n                    <span>{{ 'Showing {{count}} records of {{total}} available records' | ecsTranslate: { count: totalRecords, total: totalRecordsNotFiltered } }}</span>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n    </p-table>\r\n</div>\r\n<ecs-column-selector [visible]=\"showColumnSelector\" [columnModalData]=\"columnModalData\" [filteredColumnData]=\"filteredColumnData\" [orderByHeader]=\"tableOptions.columns?.selectorOrderByColumnName === true\" (visibleChange)=\"showColumnSelector=false\" (applyChanges)=\"applyColumnModalChanges($event)\"/>\r\n<ecs-export-excel [visible]=\"showExportModal\" [rowCheckboxSelectorActive]=\"tableOptions.rows?.checkboxSelector?.enabled ?? false\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"tableOptions.excelReport?.titleAllowUserEdit ?? false\" (visibleChange)=\"showExportModal=false\" (exportToExcel)=\"generateExcelReport($event)\"/>\r\n<ecs-views-management [visible]=\"viewsModalShow\" [tableViews_menuItems]=\"tableViews_menuItems\" \r\n    (onViewSelect)=\"viewLoad($event)\" (onViewCreate)=\"viewCreate($event)\" (onViewDelete)=\"viewDelete($event)\" (onViewEditAlias)=\"viewEditAlias($event)\" (onViewUpdateData)=\"viewUpdateData($event)\" (onViewUpdateActiveStartup)=\"viewUpdateActiveStartup($event)\"\r\n    (visibleChange)=\"viewsModalShow=false\"/>\r\n<!-- Body-level overlays avoid clipping inside scrollable and frozen table cells. -->\r\n<p-menu #responsiveHeaderMenu [model]=\"headerMenuItems\" [popup]=\"true\" appendTo=\"body\" styleClass=\"ecs-responsive-menu\"/>\r\n<p-menu #responsiveRowMenu [model]=\"rowMenuItems\" [popup]=\"true\" appendTo=\"body\" styleClass=\"ecs-responsive-menu\"/>\r\n", styles: [".highlighted-text{background-color:#ff0;color:#000;border-radius:2px}.excel-export-tooltip .bool-icon{text-shadow:0 0 2px white,0 0 3px white}.excel-export-tooltip .bool-true{color:green}.excel-export-tooltip .bool-false{color:red}.p-datatable-column-filter-button.p-button-icon-only.p-button-rounded,.p-datatable-column-filter-clear-button.p-button-icon-only.p-button-rounded{height:var(--p-icon-size)!important;width:var(--p-icon-size)!important;border-radius:0!important}.viewButton{width:200px}.viewButton .p-button{width:100%;justify-content:center}.viewButton .p-button-label{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.ecs-compact-header{gap:.5rem;min-width:0}.ecs-header-menu-trigger{margin-left:auto;flex:0 0 auto}.ecs-responsive-trigger{min-width:44px;min-height:44px}.ecs-responsive-search{flex:1 1 220px;min-width:0;max-width:320px}.ecs-responsive-search input{width:100%;padding-right:2.5rem}.ecs-clear-search{border:0;background:transparent;color:inherit;cursor:pointer}.ecs-responsive-menu{max-width:calc(100vw - 16px);max-height:calc(100dvh - 32px);overflow-y:auto}.ecs-responsive-menu .p-menu-item-link{min-height:44px;white-space:normal}.p-datatable-thead>.ecs-column-groups>td{padding:var(--p-datatable-header-cell-padding);background:var(--p-datatable-header-cell-background);color:var(--p-datatable-header-cell-color);font-weight:var(--p-datatable-column-title-font-weight);border:1px solid var(--p-datatable-header-cell-border-color);white-space:normal;overflow-wrap:anywhere}\n"], dependencies: [{ kind: "pipe", type: ECSTableTranslatePipe, name: "ecsTranslate" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i9$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i9$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5.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", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i5.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i5.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i5.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i5.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i5.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i8.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i11.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i10.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i11$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: TableCell, selector: "ecs-table-cell", inputs: ["col", "rowData", "globalSearchText", "predefinedFiltersCollection", "dateFormat", "dateTimezone", "dateCulture"] }, { kind: "component", type: TablePredefinedFilters, selector: "ecs-table-predefined-filters", inputs: ["option", "col", "selectable", "rowData", "globalSearchText"] }, { kind: "component", type: TableButton, selector: "ecs-table-button", inputs: ["button", "rowData", "isActionButton", "isLastActionButton", "overrideAction"] }, { kind: "component", type: ColumnSelector, selector: "ecs-column-selector", inputs: ["orderByHeader", "visible", "columnModalData", "filteredColumnData"], outputs: ["visibleChange", "applyChanges"] }, { kind: "component", type: ExportExcel, selector: "ecs-export-excel", inputs: ["visible", "rowCheckboxSelectorActive", "excelReportTitle", "allowTitleUserEdit"], outputs: ["exportToExcel", "visibleChange"] }, { kind: "ngmodule", type: ButtonGroupModule }, { kind: "component", type: i13.ButtonGroup, selector: "p-buttonGroup, p-buttongroup, p-button-group" }, { kind: "component", type: ViewsManagement, selector: "ecs-views-management", inputs: ["visible", "tableViews_menuItems"], outputs: ["onViewSelect", "onViewDelete", "onViewUpdateData", "onViewUpdateActiveStartup", "onViewEditAlias", "onViewCreate", "visibleChange"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i14.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i15.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: ECSPrimengTable, isStandalone: true, selector: "ecs-primeng-table", inputs: { tableOptions: "tableOptions" }, outputs: { onRowCheckboxChange: "onRowCheckboxChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onDataEndUpdate: "onDataEndUpdate" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }, { propertyName: "paginatorContainer", first: true, predicate: ["paginatorContainer"], descendants: true }, { propertyName: "responsiveHeaderMenu", first: true, predicate: ["responsiveHeaderMenu"], descendants: true }, { propertyName: "responsiveRowMenu", first: true, predicate: ["responsiveRowMenu"], descendants: true }], ngImport: i0, template: "<div #tableContainer>\r\n    <p-table #dt\r\n        size=\"small\" showGridlines stripedRows \r\n        sortMode=\"multiple\"\r\n        [resizableColumns]=\"true\" columnResizeMode=\"expand\"\r\n        [reorderableColumns]=\"true\"\r\n        [scrollable]=\"true\" [scrollHeight]=\"scrollHeightValue\"\r\n        [columns]=\"tableOptions.columns?.shown ?? []\" [value]=\"tableOptions.data ?? []\" dataKey=\"rowID\" \r\n        [paginator]=\"!treeState\" [loading]=\"treeState?.loading ?? false\" paginatorDropdownAppendTo=\"body\" [first]=\"currentPage * currentRowsPerPage\" [rows]=\"currentRowsPerPage\" [totalRecords]=\"totalRecords\"\r\n        [rowsPerPageOptions]=\"allowedRowsPerPage\" [showCurrentPageReport]=\"false\" (onPage)=\"pageChange($event)\"\r\n        [metaKeySelection]=\"true\" [selectionMode]=\"tableOptions.rows?.singleSelector?.enabled ? 'single' : null\" [metaKeySelection]=\"tableOptions.rows?.singleSelector?.metakey\" [(selection)]=\"rowSelection\" (onRowSelect)=\"rowSelect($event)\" (onRowUnselect)=\"rowUnselect($event)\"\r\n        [lazy]=\"true\" (onLazyLoad)=\"fetchTableData($event)\">\r\n\r\n        <!--TEMPLATE FOR THE ACTIONS HEADER COLUMN-->\r\n        <ng-template #actionColumnHeaderTemplate>\r\n            @if ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0) {\r\n                <th [ngStyle]=\"{\r\n                        'text-align': 'center',\r\n                        'vertical-align': 'middle',\r\n                        'max-width': actionColumnWidth + 'px',\r\n                        'min-width': actionColumnWidth + 'px',\r\n                        'width': actionColumnWidth + 'px'\r\n                    }\"\r\n                    pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows?.action?.resizable\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\"\r\n                    [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.action?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\" id=\"actions-header\"\r\n                    [attr.scope]=\"'col'\">\r\n                    {{ (tableOptions.rows?.action?.header ?? '') | ecsTranslate }}\r\n                </th>\r\n            }\r\n        </ng-template>\r\n\r\n        <!--TEMPLATE FOR THE ACTIONS ROW COLUMN-->\r\n        <ng-template #actionColumnTemplate let-rowData=\"rowData\">\r\n            @if ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0) {\r\n                <td \r\n                    [ngStyle]=\"{\r\n                        'text-align': (getDataAlignHorizontalAsText(tableOptions.rows?.action?.horizontalAlignment ?? DataAlignHorizontal.Center)),\r\n                        'vertical-align': (getDataAlignVerticalAsText(tableOptions.rows?.action?.verticalAlignment ?? DataAlignVertical.Middle)),\r\n                        'max-width': actionColumnWidth + 'px',\r\n                        'min-width': actionColumnWidth + 'px',\r\n                        'width': actionColumnWidth + 'px'\r\n                    }\"\r\n                    pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\"\r\n                    [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.action?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n                    @if (compactRows) {\r\n                        @if (hasRowMenuActions(rowData)) {\r\n                            <button pButton type=\"button\" icon=\"pi pi-ellipsis-v\" [attr.aria-label]=\"(tableOptions.responsive?.rowMenuLabel || 'Row actions') | ecsTranslate\"\r\n                                aria-haspopup=\"menu\" [attr.aria-expanded]=\"responsiveRowMenu.visible && rowMenuRow === rowData\"\r\n                                (click)=\"openRowMenu($event, rowData)\" class=\"ecs-responsive-trigger\"></button>\r\n                        }\r\n                    } @else {\r\n                    @for (button of tableOptions.rows?.action?.buttons; track button; let last = $last) {\r\n                        <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\"/>\r\n                    }\r\n                    }\r\n                </td>\r\n            }\r\n        </ng-template>\r\n\r\n        <!-- TEMPLATE FOR THE ROW CHECKBOX SELECTOR HEADER COLUMN -->\r\n        <ng-template #rowSelectorColumnHeaderTemplate>\r\n            <th \r\n                [ngStyle]=\"{\r\n                    'text-align': 'center',\r\n                    'vertical-align': 'middle',\r\n                    'max-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n                    'min-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n                    'width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px'\r\n                }\"\r\n                id=\"rowSelector-header\"  [attr.scope]=\"'col'\" pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows?.checkboxSelector?.resizable\" pFrozenColumn \r\n                [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.checkboxSelector?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n                    <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                        @if (tableOptions.rows?.checkboxSelector?.selectAllEnabled) {\r\n                            <p-checkbox [binary]=\"true\" [ngModel]=\"allMatchingRowsSelected\"\r\n                                [indeterminate]=\"matchingRowsPartiallySelected\"\r\n                                [disabled]=\"selectAllLoading || !tableOptions.rows?.checkboxSelector?.urlSelectAll\"\r\n                                [ariaLabel]=\"'Select all filtered rows' | ecsTranslate\"\r\n                                [pTooltip]=\"'Select all filtered rows' | ecsTranslate\"\r\n                                (onChange)=\"toggleAllMatchingRows($event.checked)\"/>\r\n                        }\r\n                        {{ (tableOptions.rows?.checkboxSelector?.header ?? '') | ecsTranslate }}\r\n                        <p-columnFilter type=\"boolean\" field=\"selector\" display=\"menu\" [showButtons]=\"false\"/>\r\n                    </div>\r\n            </th>\r\n        </ng-template>\r\n\r\n        <!--TEMPLATE FOR THE ROW CHECKBOX SELECTOR COLUMN-->\r\n        <ng-template #rowSelectorColumnTemplate let-rowData=\"rowData\">\r\n            <td \r\n            [ngStyle]=\"{\r\n                'text-align': (getDataAlignHorizontalAsText(tableOptions.rows?.checkboxSelector?.horizontalAlignment ?? DataAlignHorizontal.Center)),\r\n                'vertical-align': (getDataAlignVerticalAsText(tableOptions.rows?.checkboxSelector?.verticalAlignment ?? DataAlignVertical.Middle)),\r\n                'max-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n                'min-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n                'width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px'\r\n            }\"\r\n            pFrozenColumn [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" \r\n            [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.checkboxSelector?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n            <p-checkbox \r\n                [disabled]=\"!(tableOptions.rows?.checkboxSelector?.enabledCondition?.(rowData) ?? true)\"\r\n                [binary]=\"true\"\r\n                [ngModel]=\"isRowCheckboxSelected(rowData.rowID)\"\r\n                (onChange)=\"onRowChekboxChange($event, rowData.rowID)\"/>\r\n            </td>\r\n        </ng-template>\r\n\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE ACTIONS ABOVE THE HEADER -->\r\n        <ng-template #caption>\r\n            <div #headerContainer [class.ecs-compact-header]=\"compactHeader\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                @if (compactHeader) {\r\n                    @if (tableOptions.globalFilter?.enabled) {\r\n                        <p-iconField iconPosition=\"left\" class=\"ecs-responsive-search\">\r\n                            <p-inputIcon><i class=\"pi pi-search\"></i></p-inputIcon>\r\n                            <input pInputText type=\"text\" [attr.aria-label]=\"'Search keyword' | ecsTranslate\" [placeholder]=\"'Search keyword' | ecsTranslate\" autocomplete=\"off\"\r\n                                [maxlength]=\"tableOptions.globalFilter?.maxLength ?? null\" [ngModel]=\"globalSearchText\"\r\n                                (ngModelChange)=\"onGlobalSearchInput($event)\"/>\r\n                            @if (globalSearchText) {\r\n                                <p-inputIcon position=\"right\"><button type=\"button\" class=\"ecs-clear-search\" [attr.aria-label]=\"'Clear search' | ecsTranslate\" (click)=\"clearFilters(dt, true, true)\"><i class=\"pi pi-times\"></i></button></p-inputIcon>\r\n                            }\r\n                        </p-iconField>\r\n                    }\r\n                    @if (tableOptions.description?.text) {\r\n                        <i [class]=\"tableOptions.description!.icon\" [pTooltip]=\"(tableOptions.description!.text) | ecsTranslate\" [escape]=\"false\"></i>\r\n                    }\r\n                    <button pButton type=\"button\" icon=\"pi pi-bars\" [attr.aria-label]=\"(tableOptions.responsive?.headerMenuLabel || 'Table actions') | ecsTranslate\"\r\n                        aria-haspopup=\"menu\" [attr.aria-expanded]=\"responsiveHeaderMenu.visible\"\r\n                        (click)=\"openHeaderMenu($event)\" class=\"ecs-responsive-trigger ecs-header-menu-trigger\"></button>\r\n                } @else {\r\n\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <!--CHOOSE COLUMNS TO SHOW-->\r\n                    @if (tableOptions.columns?.selectorEnabled) {\r\n                        <p-button [icon]=\"tableOptions.columns?.selectorIcon ?? 'pi pi-pen-to-square'\" (onClick)=\"columnSelectorShow()\" [pTooltip]=\"'Modify columns' | ecsTranslate\"\r\n                            [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                    <!--CLEAR SORTS AND FILTERS-->\r\n                    @if (tableOptions.header?.clearSortsEnabled) {\r\n                        <p-button [icon]=\"tableOptions.header?.clearSortsIcon ?? 'pi pi-sort-alt-slash'\" (onClick)=\"clearSorts(dt)\" [disabled]=\"!hasToClearSorts(dt)\"\r\n                            [pTooltip]=\"'Clear sorts' | ecsTranslate\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                    @if (tableOptions.header?.clearFiltersEnabled) {\r\n                        <p-button\r\n                            [icon]=\"tableOptions.header?.clearFiltersIcon ?? 'pi pi-filter-slash'\" (onClick)=\"clearFilters(dt)\" [disabled]=\"!hasToClearFilters(dt, globalSearchText)\"\r\n                            [pTooltip]=\"'Clear filters' | ecsTranslate\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n\r\n                    <!--TABLE DESCRIPTION-->\r\n                    @if(tableOptions.description?.text){ <!-- If a table description text is provided -->\r\n                        @if(!tableOptions.description!.tooltip){ <!-- The table description must be shown as text next to the icon -->\r\n                            <i [class]=\"tableOptions.description!.icon\"></i>\r\n                            <span [innerHTML]=\"(tableOptions.description!.text) | ecsTranslate\"></span>\r\n                        } @else {\r\n                            <i [escape]=\"false\" [pTooltip]=\"(tableOptions.description!.text) | ecsTranslate\" tooltipPosition=\"right\" [class]=\"tableOptions.description!.icon\"></i>\r\n                        }\r\n                    }\r\n                </div>\r\n\r\n                <!--TABLE VIEWS-->\r\n                @if(tableViewsEnabled()){\r\n                    <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                        <p-buttongroup>\r\n                            <p-button (click)=\"viewsModalShow=true;\"\r\n                                [label]=\"tableViewCurrentSelectedAlias \r\n                                    ? tableViewCurrentSelectedAlias \r\n                                    : ((tableOptions.views?.noViewSelectedText || '--- Select a view ---') | ecsTranslate)\"\r\n                                [class]=\"'viewButton' + (tableOptions.views?.selectViewButtonClass ? ' ' + tableOptions.views!.selectViewButtonClass : '')\"/>\r\n                            <p-button (click)=\"viewLoad(tableViewCurrentSelectedAlias!)\"  [disabled]=\"!tableViewCurrentSelectedAlias\" [pTooltip]=\"'Apply view again' | ecsTranslate\" [showDelay]=\"700\" tooltipPosition=\"top\"\r\n                                [icon]=\"tableOptions.views?.reloadViewButtonIcon || 'pi pi-refresh'\"\r\n                                [class]=\"tableOptions.views?.reloadViewButtonClass || ''\"/>\r\n                        </p-buttongroup>\r\n                    </div>\r\n                }\r\n\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <!--GLOBAL FILTER-->\r\n                    @if (tableOptions.globalFilter?.enabled) {\r\n                        <p-iconField iconPosition=\"left\" class=\"ml-auto\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n                            <p-inputIcon>\r\n                                <i class=\"pi pi-search\"></i>\r\n                            </p-inputIcon>\r\n                            <input pInputText type=\"text\" \r\n                                (ngModelChange)=\"onGlobalSearchInput($event)\" autocomplete=\"off\"\r\n                                [maxlength]=\"tableOptions.globalFilter?.maxLength ?? null\" [placeholder]=\"'Search keyword' | ecsTranslate\" [ngModel]=\"globalSearchText\"\r\n                                style=\"width: 220px;\"/>\r\n                            <!-- Right icon (only if there is text) -->\r\n                            @if (globalSearchText) {\r\n                                <p-inputIcon position=\"right\">\r\n                                    <i class=\"pi pi-times\" style=\"cursor: pointer;\"  (click)=\"clearFilters(dt, true, true); $event.stopPropagation()\"></i>\r\n                                </p-inputIcon>\r\n                            }\r\n                        </p-iconField>\r\n                    }\r\n\r\n                    <!--EXPORT DATA-->\r\n                    @if (tableOptions.excelReport?.url?.trim()) {\r\n                        <p-button icon=\"pi pi-file-excel\" (onClick)=\"openExcelExport()\"\r\n                            [pTooltip]=\"'Export to Excel' | ecsTranslate\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n\r\n                    <!--RESET TABLE VIEW-->\r\n                    @if(tableOptions.resetTableView?.enabled){\r\n                        <p-button [icon]=\"tableOptions.resetTableView?.icon ?? 'pi pi-eraser'\" (click)=\"resetTableView()\" [pTooltip]=\"'Reset table view' | ecsTranslate\" [showDelay]=\"700\"\r\n                            tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n\r\n                    <!--REFRESH DATA-->\r\n                    <p-button icon=\"pi pi-refresh\" (onClick)=\"refreshData($event)\" [pTooltip]=\"'Refresh data' | ecsTranslate\" [showDelay]=\"700\"\r\n                        tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    \r\n                    <!-- HEADER ACTION BUTTONS -->\r\n                    @if ((tableOptions.header?.buttons?.length ?? 0) > 0) {\r\n                        <td style=\"display: flex; justify-content: center; align-items: center; gap: 10px;\">\r\n                            @for (button of tableOptions.header?.buttons; track $index) {\r\n                                <ecs-table-button [button]=\"button\" [rowData]=\"null\"/>\r\n                            }\r\n                        </td>\r\n                    }\r\n                </div>\r\n                }\r\n            </div>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE HEADERS -->\r\n        <ng-template #header let-columns>\r\n            @let headerGroups = getColumnHeaderGroups(columns);\r\n            @if (headerGroups.length) {\r\n                <tr class=\"ecs-column-groups\">\r\n                    @if ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0 && !tableOptions.rows?.action?.positionRight) {\r\n                        <td aria-hidden=\"true\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\" alignFrozen=\"left\"\r\n                            [style.width.px]=\"actionColumnWidth\" [style.min-width.px]=\"actionColumnWidth\"></td>\r\n                    }\r\n                    @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                        <td aria-hidden=\"true\" pFrozenColumn [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" alignFrozen=\"left\"\r\n                            [style.width.px]=\"tableOptions.rows?.checkboxSelector?.width ?? 150\" [style.min-width.px]=\"tableOptions.rows?.checkboxSelector?.width ?? 150\"></td>\r\n                    }\r\n                    @for (group of headerGroups; track group.field) {\r\n                        <td [attr.colspan]=\"group.colspan\" role=\"columnheader\" [attr.aria-colspan]=\"group.colspan\" style=\"text-align: center; vertical-align: middle;\"\r\n                            pFrozenColumn [frozen]=\"group.frozenColumnAlign !== FrozenColumnAlign.Noone\"\r\n                            [alignFrozen]=\"getFrozenColumnAlignAsText(group.frozenColumnAlign)\">\r\n                            {{ group.label | translate }}\r\n                        </td>\r\n                    }\r\n                    @if (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                        <td aria-hidden=\"true\" pFrozenColumn [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" alignFrozen=\"right\"\r\n                            [style.width.px]=\"tableOptions.rows?.checkboxSelector?.width ?? 150\" [style.min-width.px]=\"tableOptions.rows?.checkboxSelector?.width ?? 150\"></td>\r\n                    }\r\n                    @if ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0 && tableOptions.rows?.action?.positionRight) {\r\n                        <td aria-hidden=\"true\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\" alignFrozen=\"right\"\r\n                            [style.width.px]=\"actionColumnWidth\" [style.min-width.px]=\"actionColumnWidth\"></td>\r\n                    }\r\n                </tr>\r\n            }\r\n            <tr>\r\n                @if (!tableOptions.rows?.action?.positionRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @for (col of columns; track col.header) {\r\n                    <th [ngStyle]=\"getColumnStyle(col, true)\"\r\n                        pResizableColumn [pResizableColumnDisabled]=\"!col.canBeResized ? true : false\"\r\n                        pReorderableColumn [pReorderableColumnDisabled]=\"!col.canBeReordered ? true : false\"\r\n                        pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\"\r\n                        [pSortableColumn]=\"col.field\" [pSortableColumnDisabled]=\"!col.canBeSorted ? true : false\"\r\n                        style=\"text-align: center;\"\r\n                        [id]=\"col.field + '-header'\" [attr.scope]=\"'col'\">\r\n                        <div style=\"display: flex; justify-content: space-between; align-items: center; width: 100%;\">\r\n                            <div style=\"margin-right: 15px;\">\r\n                                <span>{{ col.header | translate }}</span>\r\n                            </div>\r\n                            <div style=\"display: flex; align-items: center; gap: 5px;\">\r\n                                @if (col.canBeSorted) {\r\n                                    <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n                                }\r\n                                @if(col.canBeFiltered){\r\n                                    @if (!col.filterPredefinedValuesName || col.filterPredefinedValuesName.length === 0) {\r\n                                        <p-columnFilter [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\" [showButtons]=\"false\"/>\r\n                                    } @else {\r\n                                        <p-columnFilter\r\n                                            [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\"\r\n                                            [showButtons]=\"false\" matchMode=\"in\" operator=\"or\" [showMatchModes]=\"false\"\r\n                                            [showOperator]=\"false\" [showAddButton]=\"false\" [showClearButton]=\"false\" [showApplyButton]=\"false\">\r\n                                            <ng-template #filter>\r\n                                                <p-multiSelect\r\n                                                    [style]=\"{ minWidth: '400px' }\" [(ngModel)]=\"predefinedFiltersSelectedValuesCollection[col.filterPredefinedValuesName]\"\r\n                                                    [options]=\"getPredefinedFilterValues(col.filterPredefinedValuesName)\" [placeholder]=\"'Any value' | ecsTranslate\"\r\n                                                    (onChange)=\"onPredefinedFilterChange(col.field, $event.value)\" optionLabel=\"name\">\r\n                                                    <ng-template #item let-option >\r\n                                                        <div style=\"display: inline-block; vertical-align: middle;\">\r\n                                                            <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\" [selectable]=\"false\" [rowData]=\"null\"/>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                </p-multiSelect>\r\n                                            </ng-template>\r\n                                        </p-columnFilter>\r\n                                    }\r\n                                }\r\n                                @if (col.columnDescription && col.columnDescription.length > 0) {\r\n                                    <i [pTooltip]=\"(col.columnDescription) | ecsTranslate\" tooltipPosition=\"top\" [class]=\"tableOptions.columnDescriptionIcon || 'pi pi-info-circle'\"></i>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                    </th>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.action?.positionRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n                }\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS CONTENTS -->\r\n        <ng-template #body let-rowData let-columns=\"columns\"> \r\n            @if (treeState?.isMore(rowData)) {\r\n                <tr class=\"ecs-tree-more-row\">\r\n                    <td colspan=\"999\">\r\n                        <p-button icon=\"pi pi-plus\" [text]=\"true\" [label]=\"'Load more children' | ecsTranslate\"\r\n                            (onClick)=\"loadMoreTreeRows($event, rowData)\" />\r\n                    </td>\r\n                </tr>\r\n            } @else {\r\n            <tr [pSelectableRow]=\"rowData\" [ngClass]=\"tableOptions.rows?.class?.(rowData)\" [ngStyle]=\"tableOptions.rows?.style?.(rowData)\"\r\n                [attr.aria-level]=\"treeState ? treeState.depth(rowData) + 1 : null\"\r\n                [attr.aria-expanded]=\"treeState?.hasChildren(rowData) ? treeState?.isExpanded(rowData) : null\">\r\n                @if (!tableOptions.rows?.action?.positionRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n                }\r\n                @for (col of columns; track col.field) {\r\n                    <td (mousedown)=\"col.dataType !== DataType.Boolean && copyToClipboardStart($event)\" (mouseup)=\"copyToClipboardCancel()\"\r\n                        [ngStyle]=\"getColumnStyle(col)\" pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" \r\n                        [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\" [style.text-align]=\"getDataAlignHorizontalAsText(col.dataAlignHorizontal)\" [style.vertical-align]=\"getDataAlignVerticalAsText(col.dataAlignVertical)\">\r\n                        @if (treeState && col.field === treeColumn) {\r\n                            <div class=\"ecs-tree-cell\" [style.padding-inline-start.px]=\"treeState.depth(rowData) * 20\">\r\n                                <button type=\"button\" class=\"ecs-tree-toggle\" [class.ecs-tree-leaf]=\"!treeState.hasChildren(rowData)\"\r\n                                    [disabled]=\"!treeState.hasChildren(rowData) || treeState.isLoading(rowData) || treeState.loading\"\r\n                                    [attr.aria-label]=\"(treeState.isExpanded(rowData) ? 'Collapse node' : 'Expand node') | ecsTranslate\"\r\n                                    [attr.aria-expanded]=\"treeState.hasChildren(rowData) ? treeState.isExpanded(rowData) : null\"\r\n                                    [pTooltip]=\"(treeState.isExpanded(rowData) ? 'Collapse node' : 'Expand node') | ecsTranslate\"\r\n                                    (mousedown)=\"$event.stopPropagation()\" (mouseup)=\"$event.stopPropagation()\"\r\n                                    (click)=\"toggleTreeRow($event, rowData)\">\r\n                                    <i [class]=\"treeState.isLoading(rowData) ? 'pi pi-spinner pi-spin' : treeState.isExpanded(rowData) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\" aria-hidden=\"true\"></i>\r\n                                </button>\r\n                                <ecs-table-cell [col]=\"col\" [rowData]=\"rowData\" [globalSearchText]=\"effectiveGlobalSearchText\"\r\n                                    [dateFormat]=\"dateFormat\" [dateTimezone]=\"dateTimezone\" [dateCulture]=\"dateCulture\"\r\n                                    [predefinedFiltersCollection]=\"tableOptions.predefinedFilters\" />\r\n                            </div>\r\n                        } @else {\r\n                        <ecs-table-cell [col]=\"col\" [rowData]=\"rowData\" [globalSearchText]=\"effectiveGlobalSearchText\"\r\n                            [dateFormat]=\"dateFormat\" [dateTimezone]=\"dateTimezone\" [dateCulture]=\"dateCulture\"\r\n                            [predefinedFiltersCollection]=\"tableOptions.predefinedFilters\"/>\r\n                        }\r\n                    </td>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.action?.positionRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n                }\r\n            </tr>\r\n            }\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS NO CONTENTS -->\r\n        <ng-template #emptymessage>\r\n            <tr>\r\n                <td colspan=\"999\">{{ 'No data found for the current filter criteria.' | ecsTranslate }}</td>\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- SHOW CUSTOM RECORDS REPORT -->\r\n        <ng-template #paginatorleft>\r\n            <div #paginatorContainer>\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    @if(tableOptions.legend?.content){\r\n                        <ecs-table-button [button]=\"tableOptions.legend?.button\" [rowData]=\"null\" [overrideAction]=\"op.toggle.bind(op)\"/>\r\n                        <p-popover #op>\r\n                            <div [innerHTML]=\"(tableOptions.legend?.content) | ecsTranslate\"></div>\r\n                        </p-popover>\r\n                    }\r\n                    <span>{{ 'Showing {{count}} records of {{total}} available records' | ecsTranslate: { count: totalRecords, total: totalRecordsNotFiltered } }}</span>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n    </p-table>\r\n    @if (treeState) {\r\n        <div #paginatorContainer class=\"ecs-tree-paginator\">\r\n            @if (tableOptions.legend?.content) {\r\n                <ecs-table-button [button]=\"tableOptions.legend?.button\" [rowData]=\"null\" [overrideAction]=\"treeLegend.toggle.bind(treeLegend)\" />\r\n                <p-popover #treeLegend><div [innerHTML]=\"(tableOptions.legend?.content) | ecsTranslate\"></div></p-popover>\r\n            }\r\n            <span>{{ 'Showing {{count}} root nodes of {{total}} available root nodes' | ecsTranslate: { count: totalRecords, total: totalRecordsNotFiltered } }}</span>\r\n            <p-paginator [first]=\"currentPage * currentRowsPerPage\" [rows]=\"currentRowsPerPage\" [totalRecords]=\"totalRecords\"\r\n                [rowsPerPageOptions]=\"allowedRowsPerPage\" dropdownAppendTo=\"body\" (onPageChange)=\"treePageChange($event)\" />\r\n        </div>\r\n    }\r\n</div>\r\n<ecs-column-selector [visible]=\"showColumnSelector\" [columnModalData]=\"columnModalData\" [filteredColumnData]=\"filteredColumnData\" [orderByHeader]=\"tableOptions.columns?.selectorOrderByColumnName === true\" (visibleChange)=\"showColumnSelector=false\" (applyChanges)=\"applyColumnModalChanges($event)\"/>\r\n<ecs-export-excel [visible]=\"showExportModal\" [rowCheckboxSelectorActive]=\"tableOptions.rows?.checkboxSelector?.enabled ?? false\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"tableOptions.excelReport?.titleAllowUserEdit ?? false\" (visibleChange)=\"showExportModal=false\" (exportToExcel)=\"generateExcelReport($event)\"/>\r\n<ecs-views-management [visible]=\"viewsModalShow\" [tableViews_menuItems]=\"tableViews_menuItems\" \r\n    (onViewSelect)=\"viewLoad($event)\" (onViewCreate)=\"viewCreate($event)\" (onViewDelete)=\"viewDelete($event)\" (onViewEditAlias)=\"viewEditAlias($event)\" (onViewUpdateData)=\"viewUpdateData($event)\" (onViewUpdateActiveStartup)=\"viewUpdateActiveStartup($event)\"\r\n    (visibleChange)=\"viewsModalShow=false\"/>\r\n<!-- Body-level overlays avoid clipping inside scrollable and frozen table cells. -->\r\n<p-menu #responsiveHeaderMenu [model]=\"headerMenuItems\" [popup]=\"true\" appendTo=\"body\" styleClass=\"ecs-responsive-menu\"/>\r\n<p-menu #responsiveRowMenu [model]=\"rowMenuItems\" [popup]=\"true\" appendTo=\"body\" styleClass=\"ecs-responsive-menu\"/>\r\n", styles: [".highlighted-text{background-color:#ff0;color:#000;border-radius:2px}.excel-export-tooltip .bool-icon{text-shadow:0 0 2px white,0 0 3px white}.excel-export-tooltip .bool-true{color:green}.excel-export-tooltip .bool-false{color:red}.p-datatable-column-filter-button.p-button-icon-only.p-button-rounded,.p-datatable-column-filter-clear-button.p-button-icon-only.p-button-rounded{height:var(--p-icon-size)!important;width:var(--p-icon-size)!important;border-radius:0!important}.viewButton{width:200px}.viewButton .p-button{width:100%;justify-content:center}.viewButton .p-button-label{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.ecs-compact-header{gap:.5rem;min-width:0}.ecs-header-menu-trigger{margin-left:auto;flex:0 0 auto}.ecs-responsive-trigger{min-width:44px;min-height:44px}.ecs-responsive-search{flex:1 1 220px;min-width:0;max-width:320px}.ecs-responsive-search input{width:100%;padding-right:2.5rem}.ecs-clear-search{border:0;background:transparent;color:inherit;cursor:pointer}.ecs-responsive-menu{max-width:calc(100vw - 16px);max-height:calc(100dvh - 32px);overflow-y:auto}.ecs-responsive-menu .p-menu-item-link{min-height:44px;white-space:normal}.ecs-tree-cell{display:flex;align-items:center;gap:4px;min-width:0}.ecs-tree-cell>ecs-table-cell{flex:1;min-width:0}.ecs-tree-toggle{width:32px;height:32px;flex:0 0 32px;border:0;background:transparent;color:inherit;cursor:pointer}.ecs-tree-toggle:focus-visible{outline:2px solid var(--p-primary-color);outline-offset:1px}.ecs-tree-leaf{visibility:hidden}.ecs-tree-paginator{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.p-datatable-thead>.ecs-column-groups>td{padding:var(--p-datatable-header-cell-padding);background:var(--p-datatable-header-cell-background);color:var(--p-datatable-header-cell-color);font-weight:var(--p-datatable-column-title-font-weight);border:1px solid var(--p-datatable-header-cell-border-color);white-space:normal;overflow-wrap:anywhere}\n"], dependencies: [{ kind: "pipe", type: ECSTableTranslatePipe, name: "ecsTranslate" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i9$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i9$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5.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", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i5.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i5.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i5.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i5.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i5.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i5.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i8.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i11.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i10.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i11$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i13.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "component", type: TableCell, selector: "ecs-table-cell", inputs: ["col", "rowData", "globalSearchText", "predefinedFiltersCollection", "dateFormat", "dateTimezone", "dateCulture"] }, { kind: "component", type: TablePredefinedFilters, selector: "ecs-table-predefined-filters", inputs: ["option", "col", "selectable", "rowData", "globalSearchText"] }, { kind: "component", type: TableButton, selector: "ecs-table-button", inputs: ["button", "rowData", "isActionButton", "isLastActionButton", "overrideAction"] }, { kind: "component", type: ColumnSelector, selector: "ecs-column-selector", inputs: ["orderByHeader", "visible", "columnModalData", "filteredColumnData"], outputs: ["visibleChange", "applyChanges"] }, { kind: "component", type: ExportExcel, selector: "ecs-export-excel", inputs: ["visible", "rowCheckboxSelectorActive", "excelReportTitle", "allowTitleUserEdit"], outputs: ["exportToExcel", "visibleChange"] }, { kind: "ngmodule", type: ButtonGroupModule }, { kind: "component", type: i14.ButtonGroup, selector: "p-buttonGroup, p-buttongroup, p-button-group" }, { kind: "component", type: ViewsManagement, selector: "ecs-views-management", inputs: ["visible", "tableViews_menuItems"], outputs: ["onViewSelect", "onViewDelete", "onViewUpdateData", "onViewUpdateActiveStartup", "onViewEditAlias", "onViewCreate", "visibleChange"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i15.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i16.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ECSPrimengTable, decorators: [{
             type: Component,
@@ -2532,7 +3018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         ViewsManagement,
                         PopoverModule,
                         MenuModule
-                    ], standalone: true, encapsulation: ViewEncapsulation.None, template: "<div #tableContainer>\r\n    <p-table #dt\r\n        size=\"small\" showGridlines stripedRows \r\n        sortMode=\"multiple\"\r\n        [resizableColumns]=\"true\" columnResizeMode=\"expand\"\r\n        [reorderableColumns]=\"true\"\r\n        [scrollable]=\"true\" [scrollHeight]=\"scrollHeightValue\"\r\n        [columns]=\"tableOptions.columns?.shown ?? []\" [value]=\"tableOptions.data ?? []\" dataKey=\"rowID\" \r\n        [paginator]=\"true\" paginatorDropdownAppendTo=\"body\" [first]=\"currentPage * currentRowsPerPage\" [rows]=\"currentRowsPerPage\" [totalRecords]=\"totalRecords\"\r\n        [rowsPerPageOptions]=\"allowedRowsPerPage\" [showCurrentPageReport]=\"false\" (onPage)=\"pageChange($event)\"\r\n        [metaKeySelection]=\"true\" [selectionMode]=\"tableOptions.rows?.singleSelector?.enabled ? 'single' : null\" [metaKeySelection]=\"tableOptions.rows?.singleSelector?.metakey\" [(selection)]=\"rowSelection\" (onRowSelect)=\"rowSelect($event)\" (onRowUnselect)=\"rowUnselect($event)\"\r\n        [lazy]=\"true\" (onLazyLoad)=\"fetchTableData($event)\">\r\n\r\n        <!--TEMPLATE FOR THE ACTIONS HEADER COLUMN-->\r\n        <ng-template #actionColumnHeaderTemplate>\r\n            @if ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0) {\r\n                <th [ngStyle]=\"{\r\n                        'text-align': 'center',\r\n                        'vertical-align': 'middle',\r\n                        'max-width': actionColumnWidth + 'px',\r\n                        'min-width': actionColumnWidth + 'px',\r\n                        'width': actionColumnWidth + 'px'\r\n                    }\"\r\n                    pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows?.action?.resizable\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\"\r\n                    [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.action?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\" id=\"actions-header\"\r\n                    [attr.scope]=\"'col'\">\r\n                    {{ (tableOptions.rows?.action?.header ?? '') | ecsTranslate }}\r\n                </th>\r\n            }\r\n        </ng-template>\r\n\r\n        <!--TEMPLATE FOR THE ACTIONS ROW COLUMN-->\r\n        <ng-template #actionColumnTemplate let-rowData=\"rowData\">\r\n            @if ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0) {\r\n                <td \r\n                    [ngStyle]=\"{\r\n                        'text-align': (getDataAlignHorizontalAsText(tableOptions.rows?.action?.horizontalAlignment ?? DataAlignHorizontal.Center)),\r\n                        'vertical-align': (getDataAlignVerticalAsText(tableOptions.rows?.action?.verticalAlignment ?? DataAlignVertical.Middle)),\r\n                        'max-width': actionColumnWidth + 'px',\r\n                        'min-width': actionColumnWidth + 'px',\r\n                        'width': actionColumnWidth + 'px'\r\n                    }\"\r\n                    pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\"\r\n                    [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.action?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n                    @if (compactRows) {\r\n                        @if (hasRowMenuActions(rowData)) {\r\n                            <button pButton type=\"button\" icon=\"pi pi-ellipsis-v\" [attr.aria-label]=\"(tableOptions.responsive?.rowMenuLabel || 'Row actions') | ecsTranslate\"\r\n                                aria-haspopup=\"menu\" [attr.aria-expanded]=\"responsiveRowMenu.visible && rowMenuRow === rowData\"\r\n                                (click)=\"openRowMenu($event, rowData)\" class=\"ecs-responsive-trigger\"></button>\r\n                        }\r\n                    } @else {\r\n                    @for (button of tableOptions.rows?.action?.buttons; track button; let last = $last) {\r\n                        <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\"/>\r\n                    }\r\n                    }\r\n                </td>\r\n            }\r\n        </ng-template>\r\n\r\n        <!-- TEMPLATE FOR THE ROW CHECKBOX SELECTOR HEADER COLUMN -->\r\n        <ng-template #rowSelectorColumnHeaderTemplate>\r\n            <th \r\n                [ngStyle]=\"{\r\n                    'text-align': 'center',\r\n                    'vertical-align': 'middle',\r\n                    'max-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n                    'min-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n                    'width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px'\r\n                }\"\r\n                id=\"rowSelector-header\"  [attr.scope]=\"'col'\" pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows?.checkboxSelector?.resizable\" pFrozenColumn \r\n                [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.checkboxSelector?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n                    <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                        {{ (tableOptions.rows?.checkboxSelector?.header ?? '') | ecsTranslate }}\r\n                        <p-columnFilter type=\"boolean\" field=\"selector\" display=\"menu\" [showButtons]=\"false\"/>\r\n                    </div>\r\n            </th>\r\n        </ng-template>\r\n\r\n        <!--TEMPLATE FOR THE ROW CHECKBOX SELECTOR COLUMN-->\r\n        <ng-template #rowSelectorColumnTemplate let-rowData=\"rowData\">\r\n            <td \r\n            [ngStyle]=\"{\r\n                'text-align': (getDataAlignHorizontalAsText(tableOptions.rows?.checkboxSelector?.horizontalAlignment ?? DataAlignHorizontal.Center)),\r\n                'vertical-align': (getDataAlignVerticalAsText(tableOptions.rows?.checkboxSelector?.verticalAlignment ?? DataAlignVertical.Middle)),\r\n                'max-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n                'min-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n                'width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px'\r\n            }\"\r\n            pFrozenColumn [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" \r\n            [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.checkboxSelector?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n            <p-checkbox \r\n                [disabled]=\"!(tableOptions.rows?.checkboxSelector?.enabledCondition?.(rowData) ?? true)\"\r\n                [binary]=\"true\"\r\n                [ngModel]=\"isRowCheckboxSelected(rowData.rowID)\"\r\n                (onChange)=\"onRowChekboxChange($event, rowData.rowID)\"/>\r\n            </td>\r\n        </ng-template>\r\n\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE ACTIONS ABOVE THE HEADER -->\r\n        <ng-template #caption>\r\n            <div #headerContainer [class.ecs-compact-header]=\"compactHeader\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                @if (compactHeader) {\r\n                    @if (tableOptions.globalFilter?.enabled) {\r\n                        <p-iconField iconPosition=\"left\" class=\"ecs-responsive-search\">\r\n                            <p-inputIcon><i class=\"pi pi-search\"></i></p-inputIcon>\r\n                            <input pInputText type=\"text\" [attr.aria-label]=\"'Search keyword' | ecsTranslate\" [placeholder]=\"'Search keyword' | ecsTranslate\" autocomplete=\"off\"\r\n                                [maxlength]=\"tableOptions.globalFilter?.maxLength ?? null\" [(ngModel)]=\"globalSearchText\"\r\n                                (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\"/>\r\n                            @if (globalSearchText) {\r\n                                <p-inputIcon position=\"right\"><button type=\"button\" class=\"ecs-clear-search\" [attr.aria-label]=\"'Clear search' | ecsTranslate\" (click)=\"clearFilters(dt, true, true)\"><i class=\"pi pi-times\"></i></button></p-inputIcon>\r\n                            }\r\n                        </p-iconField>\r\n                    }\r\n                    @if (tableOptions.description?.text) {\r\n                        <i [class]=\"tableOptions.description!.icon\" [pTooltip]=\"(tableOptions.description!.text) | ecsTranslate\" [escape]=\"false\"></i>\r\n                    }\r\n                    <button pButton type=\"button\" icon=\"pi pi-bars\" [attr.aria-label]=\"(tableOptions.responsive?.headerMenuLabel || 'Table actions') | ecsTranslate\"\r\n                        aria-haspopup=\"menu\" [attr.aria-expanded]=\"responsiveHeaderMenu.visible\"\r\n                        (click)=\"openHeaderMenu($event)\" class=\"ecs-responsive-trigger ecs-header-menu-trigger\"></button>\r\n                } @else {\r\n\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <!--CHOOSE COLUMNS TO SHOW-->\r\n                    @if (tableOptions.columns?.selectorEnabled) {\r\n                        <p-button [icon]=\"tableOptions.columns?.selectorIcon ?? 'pi pi-pen-to-square'\" (onClick)=\"columnSelectorShow()\" [pTooltip]=\"'Modify columns' | ecsTranslate\"\r\n                            [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                    <!--CLEAR SORTS AND FILTERS-->\r\n                    @if (tableOptions.header?.clearSortsEnabled) {\r\n                        <p-button [icon]=\"tableOptions.header?.clearSortsIcon ?? 'pi pi-sort-alt-slash'\" (onClick)=\"clearSorts(dt)\" [disabled]=\"!hasToClearSorts(dt)\"\r\n                            [pTooltip]=\"'Clear sorts' | ecsTranslate\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                    @if (tableOptions.header?.clearFiltersEnabled) {\r\n                        <p-button\r\n                            [icon]=\"tableOptions.header?.clearFiltersIcon ?? 'pi pi-filter-slash'\" (onClick)=\"clearFilters(dt)\" [disabled]=\"!hasToClearFilters(dt, globalSearchText)\"\r\n                            [pTooltip]=\"'Clear filters' | ecsTranslate\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n\r\n                    <!--TABLE DESCRIPTION-->\r\n                    @if(tableOptions.description?.text){ <!-- If a table description text is provided -->\r\n                        @if(!tableOptions.description!.tooltip){ <!-- The table description must be shown as text next to the icon -->\r\n                            <i [class]=\"tableOptions.description!.icon\"></i>\r\n                            <span [innerHTML]=\"(tableOptions.description!.text) | ecsTranslate\"></span>\r\n                        } @else {\r\n                            <i [escape]=\"false\" [pTooltip]=\"(tableOptions.description!.text) | ecsTranslate\" tooltipPosition=\"right\" [class]=\"tableOptions.description!.icon\"></i>\r\n                        }\r\n                    }\r\n                </div>\r\n\r\n                <!--TABLE VIEWS-->\r\n                @if(tableViewsEnabled()){\r\n                    <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                        <p-buttongroup>\r\n                            <p-button (click)=\"viewsModalShow=true;\"\r\n                                [label]=\"tableViewCurrentSelectedAlias \r\n                                    ? tableViewCurrentSelectedAlias \r\n                                    : ((tableOptions.views?.noViewSelectedText || '--- Select a view ---') | ecsTranslate)\"\r\n                                [class]=\"'viewButton' + (tableOptions.views?.selectViewButtonClass ? ' ' + tableOptions.views!.selectViewButtonClass : '')\"/>\r\n                            <p-button (click)=\"viewLoad(tableViewCurrentSelectedAlias!)\"  [disabled]=\"!tableViewCurrentSelectedAlias\" [pTooltip]=\"'Apply view again' | ecsTranslate\" [showDelay]=\"700\" tooltipPosition=\"top\"\r\n                                [icon]=\"tableOptions.views?.reloadViewButtonIcon || 'pi pi-refresh'\"\r\n                                [class]=\"tableOptions.views?.reloadViewButtonClass || ''\"/>\r\n                        </p-buttongroup>\r\n                    </div>\r\n                }\r\n\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <!--GLOBAL FILTER-->\r\n                    @if (tableOptions.globalFilter?.enabled) {\r\n                        <p-iconField iconPosition=\"left\" class=\"ml-auto\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n                            <p-inputIcon>\r\n                                <i class=\"pi pi-search\"></i>\r\n                            </p-inputIcon>\r\n                            <input pInputText type=\"text\" \r\n                                (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\"  autocomplete=\"off\" \r\n                                [maxlength]=\"tableOptions.globalFilter?.maxLength ?? null\" [placeholder]=\"'Search keyword' | ecsTranslate\" [(ngModel)]=\"globalSearchText\"\r\n                                style=\"width: 220px;\"/>\r\n                            <!-- Right icon (only if there is text) -->\r\n                            @if (globalSearchText) {\r\n                                <p-inputIcon position=\"right\">\r\n                                    <i class=\"pi pi-times\" style=\"cursor: pointer;\"  (click)=\"clearFilters(dt, true, true); $event.stopPropagation()\"></i>\r\n                                </p-inputIcon>\r\n                            }\r\n                        </p-iconField>\r\n                    }\r\n\r\n                    <!--EXPORT DATA-->\r\n                    @if (tableOptions.excelReport?.url?.trim()) {\r\n                        <p-button icon=\"pi pi-file-excel\" (onClick)=\"openExcelExport()\"\r\n                            [pTooltip]=\"'Export to Excel' | ecsTranslate\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n\r\n                    <!--RESET TABLE VIEW-->\r\n                    @if(tableOptions.resetTableView?.enabled){\r\n                        <p-button [icon]=\"tableOptions.resetTableView?.icon ?? 'pi pi-eraser'\" (click)=\"resetTableView()\" [pTooltip]=\"'Reset table view' | ecsTranslate\" [showDelay]=\"700\"\r\n                            tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n\r\n                    <!--REFRESH DATA-->\r\n                    <p-button icon=\"pi pi-refresh\" (onClick)=\"refreshData($event)\" [pTooltip]=\"'Refresh data' | ecsTranslate\" [showDelay]=\"700\"\r\n                        tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    \r\n                    <!-- HEADER ACTION BUTTONS -->\r\n                    @if ((tableOptions.header?.buttons?.length ?? 0) > 0) {\r\n                        <td style=\"display: flex; justify-content: center; align-items: center; gap: 10px;\">\r\n                            @for (button of tableOptions.header?.buttons; track $index) {\r\n                                <ecs-table-button [button]=\"button\" [rowData]=\"null\"/>\r\n                            }\r\n                        </td>\r\n                    }\r\n                </div>\r\n                }\r\n            </div>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE HEADERS -->\r\n        <ng-template #header let-columns>\r\n            @let headerGroups = getColumnHeaderGroups(columns);\r\n            @if (headerGroups.length) {\r\n                <tr class=\"ecs-column-groups\">\r\n                    @if ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0 && !tableOptions.rows?.action?.positionRight) {\r\n                        <td aria-hidden=\"true\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\" alignFrozen=\"left\"\r\n                            [style.width.px]=\"actionColumnWidth\" [style.min-width.px]=\"actionColumnWidth\"></td>\r\n                    }\r\n                    @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                        <td aria-hidden=\"true\" pFrozenColumn [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" alignFrozen=\"left\"\r\n                            [style.width.px]=\"tableOptions.rows?.checkboxSelector?.width ?? 150\" [style.min-width.px]=\"tableOptions.rows?.checkboxSelector?.width ?? 150\"></td>\r\n                    }\r\n                    @for (group of headerGroups; track group.field) {\r\n                        <td [attr.colspan]=\"group.colspan\" role=\"columnheader\" [attr.aria-colspan]=\"group.colspan\" style=\"text-align: center; vertical-align: middle;\"\r\n                            pFrozenColumn [frozen]=\"group.frozenColumnAlign !== FrozenColumnAlign.Noone\"\r\n                            [alignFrozen]=\"getFrozenColumnAlignAsText(group.frozenColumnAlign)\">\r\n                            {{ group.label | translate }}\r\n                        </td>\r\n                    }\r\n                    @if (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                        <td aria-hidden=\"true\" pFrozenColumn [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" alignFrozen=\"right\"\r\n                            [style.width.px]=\"tableOptions.rows?.checkboxSelector?.width ?? 150\" [style.min-width.px]=\"tableOptions.rows?.checkboxSelector?.width ?? 150\"></td>\r\n                    }\r\n                    @if ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0 && tableOptions.rows?.action?.positionRight) {\r\n                        <td aria-hidden=\"true\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\" alignFrozen=\"right\"\r\n                            [style.width.px]=\"actionColumnWidth\" [style.min-width.px]=\"actionColumnWidth\"></td>\r\n                    }\r\n                </tr>\r\n            }\r\n            <tr>\r\n                @if (!tableOptions.rows?.action?.positionRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @for (col of columns; track col.header) {\r\n                    <th [ngStyle]=\"getColumnStyle(col, true)\"\r\n                        pResizableColumn [pResizableColumnDisabled]=\"!col.canBeResized ? true : false\"\r\n                        pReorderableColumn [pReorderableColumnDisabled]=\"!col.canBeReordered ? true : false\"\r\n                        pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\"\r\n                        [pSortableColumn]=\"col.field\" [pSortableColumnDisabled]=\"!col.canBeSorted ? true : false\"\r\n                        style=\"text-align: center;\"\r\n                        [id]=\"col.field + '-header'\" [attr.scope]=\"'col'\">\r\n                        <div style=\"display: flex; justify-content: space-between; align-items: center; width: 100%;\">\r\n                            <div style=\"margin-right: 15px;\">\r\n                                <span>{{ col.header | translate }}</span>\r\n                            </div>\r\n                            <div style=\"display: flex; align-items: center; gap: 5px;\">\r\n                                @if (col.canBeSorted) {\r\n                                    <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n                                }\r\n                                @if(col.canBeFiltered){\r\n                                    @if (!col.filterPredefinedValuesName || col.filterPredefinedValuesName.length === 0) {\r\n                                        <p-columnFilter [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\" [showButtons]=\"false\"/>\r\n                                    } @else {\r\n                                        <p-columnFilter\r\n                                            [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\"\r\n                                            [showButtons]=\"false\" matchMode=\"in\" operator=\"or\" [showMatchModes]=\"false\"\r\n                                            [showOperator]=\"false\" [showAddButton]=\"false\" [showClearButton]=\"false\" [showApplyButton]=\"false\">\r\n                                            <ng-template #filter>\r\n                                                <p-multiSelect\r\n                                                    [style]=\"{ minWidth: '400px' }\" [(ngModel)]=\"predefinedFiltersSelectedValuesCollection[col.filterPredefinedValuesName]\"\r\n                                                    [options]=\"getPredefinedFilterValues(col.filterPredefinedValuesName)\" [placeholder]=\"'Any value' | ecsTranslate\"\r\n                                                    (onChange)=\"onPredefinedFilterChange(col.field, $event.value)\" optionLabel=\"name\">\r\n                                                    <ng-template #item let-option >\r\n                                                        <div style=\"display: inline-block; vertical-align: middle;\">\r\n                                                            <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\" [selectable]=\"false\" [rowData]=\"null\"/>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                </p-multiSelect>\r\n                                            </ng-template>\r\n                                        </p-columnFilter>\r\n                                    }\r\n                                }\r\n                                @if (col.columnDescription && col.columnDescription.length > 0) {\r\n                                    <i [pTooltip]=\"(col.columnDescription) | ecsTranslate\" tooltipPosition=\"top\" [class]=\"tableOptions.columnDescriptionIcon || 'pi pi-info-circle'\"></i>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                    </th>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.action?.positionRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n                }\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS CONTENTS -->\r\n        <ng-template #body let-rowData let-columns=\"columns\"> \r\n            <tr [pSelectableRow]=\"rowData\" [ngClass]=\"tableOptions.rows?.class?.(rowData)\" [ngStyle]=\"tableOptions.rows?.style?.(rowData)\">\r\n                @if (!tableOptions.rows?.action?.positionRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n                }\r\n                @for (col of columns; track col.field) {\r\n                    <td (mousedown)=\"col.dataType !== DataType.Boolean && copyToClipboardStart($event)\" (mouseup)=\"copyToClipboardCancel()\"\r\n                        [ngStyle]=\"getColumnStyle(col)\" pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" \r\n                        [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\" [style.text-align]=\"getDataAlignHorizontalAsText(col.dataAlignHorizontal)\" [style.vertical-align]=\"getDataAlignVerticalAsText(col.dataAlignVertical)\">\r\n                        <ecs-table-cell [col]=\"col\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\" \r\n                            [dateFormat]=\"dateFormat\" [dateTimezone]=\"dateTimezone\" [dateCulture]=\"dateCulture\"\r\n                            [predefinedFiltersCollection]=\"tableOptions.predefinedFilters\"/>\r\n                    </td>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.action?.positionRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n                }\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS NO CONTENTS -->\r\n        <ng-template #emptymessage>\r\n            <tr>\r\n                <td colspan=\"999\">{{ 'No data found for the current filter criteria.' | ecsTranslate }}</td>\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- SHOW CUSTOM RECORDS REPORT -->\r\n        <ng-template #paginatorleft>\r\n            <div #paginatorContainer>\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    @if(tableOptions.legend?.content){\r\n                        <ecs-table-button [button]=\"tableOptions.legend?.button\" [rowData]=\"null\" [overrideAction]=\"op.toggle.bind(op)\"/>\r\n                        <p-popover #op>\r\n                            <div [innerHTML]=\"(tableOptions.legend?.content) | ecsTranslate\"></div>\r\n                        </p-popover>\r\n                    }\r\n                    <span>{{ 'Showing {{count}} records of {{total}} available records' | ecsTranslate: { count: totalRecords, total: totalRecordsNotFiltered } }}</span>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n    </p-table>\r\n</div>\r\n<ecs-column-selector [visible]=\"showColumnSelector\" [columnModalData]=\"columnModalData\" [filteredColumnData]=\"filteredColumnData\" [orderByHeader]=\"tableOptions.columns?.selectorOrderByColumnName === true\" (visibleChange)=\"showColumnSelector=false\" (applyChanges)=\"applyColumnModalChanges($event)\"/>\r\n<ecs-export-excel [visible]=\"showExportModal\" [rowCheckboxSelectorActive]=\"tableOptions.rows?.checkboxSelector?.enabled ?? false\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"tableOptions.excelReport?.titleAllowUserEdit ?? false\" (visibleChange)=\"showExportModal=false\" (exportToExcel)=\"generateExcelReport($event)\"/>\r\n<ecs-views-management [visible]=\"viewsModalShow\" [tableViews_menuItems]=\"tableViews_menuItems\" \r\n    (onViewSelect)=\"viewLoad($event)\" (onViewCreate)=\"viewCreate($event)\" (onViewDelete)=\"viewDelete($event)\" (onViewEditAlias)=\"viewEditAlias($event)\" (onViewUpdateData)=\"viewUpdateData($event)\" (onViewUpdateActiveStartup)=\"viewUpdateActiveStartup($event)\"\r\n    (visibleChange)=\"viewsModalShow=false\"/>\r\n<!-- Body-level overlays avoid clipping inside scrollable and frozen table cells. -->\r\n<p-menu #responsiveHeaderMenu [model]=\"headerMenuItems\" [popup]=\"true\" appendTo=\"body\" styleClass=\"ecs-responsive-menu\"/>\r\n<p-menu #responsiveRowMenu [model]=\"rowMenuItems\" [popup]=\"true\" appendTo=\"body\" styleClass=\"ecs-responsive-menu\"/>\r\n", styles: [".highlighted-text{background-color:#ff0;color:#000;border-radius:2px}.excel-export-tooltip .bool-icon{text-shadow:0 0 2px white,0 0 3px white}.excel-export-tooltip .bool-true{color:green}.excel-export-tooltip .bool-false{color:red}.p-datatable-column-filter-button.p-button-icon-only.p-button-rounded,.p-datatable-column-filter-clear-button.p-button-icon-only.p-button-rounded{height:var(--p-icon-size)!important;width:var(--p-icon-size)!important;border-radius:0!important}.viewButton{width:200px}.viewButton .p-button{width:100%;justify-content:center}.viewButton .p-button-label{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.ecs-compact-header{gap:.5rem;min-width:0}.ecs-header-menu-trigger{margin-left:auto;flex:0 0 auto}.ecs-responsive-trigger{min-width:44px;min-height:44px}.ecs-responsive-search{flex:1 1 220px;min-width:0;max-width:320px}.ecs-responsive-search input{width:100%;padding-right:2.5rem}.ecs-clear-search{border:0;background:transparent;color:inherit;cursor:pointer}.ecs-responsive-menu{max-width:calc(100vw - 16px);max-height:calc(100dvh - 32px);overflow-y:auto}.ecs-responsive-menu .p-menu-item-link{min-height:44px;white-space:normal}.p-datatable-thead>.ecs-column-groups>td{padding:var(--p-datatable-header-cell-padding);background:var(--p-datatable-header-cell-background);color:var(--p-datatable-header-cell-color);font-weight:var(--p-datatable-column-title-font-weight);border:1px solid var(--p-datatable-header-cell-border-color);white-space:normal;overflow-wrap:anywhere}\n"] }]
+                    ], standalone: true, encapsulation: ViewEncapsulation.None, template: "<div #tableContainer>\r\n    <p-table #dt\r\n        size=\"small\" showGridlines stripedRows \r\n        sortMode=\"multiple\"\r\n        [resizableColumns]=\"true\" columnResizeMode=\"expand\"\r\n        [reorderableColumns]=\"true\"\r\n        [scrollable]=\"true\" [scrollHeight]=\"scrollHeightValue\"\r\n        [columns]=\"tableOptions.columns?.shown ?? []\" [value]=\"tableOptions.data ?? []\" dataKey=\"rowID\" \r\n        [paginator]=\"!treeState\" [loading]=\"treeState?.loading ?? false\" paginatorDropdownAppendTo=\"body\" [first]=\"currentPage * currentRowsPerPage\" [rows]=\"currentRowsPerPage\" [totalRecords]=\"totalRecords\"\r\n        [rowsPerPageOptions]=\"allowedRowsPerPage\" [showCurrentPageReport]=\"false\" (onPage)=\"pageChange($event)\"\r\n        [metaKeySelection]=\"true\" [selectionMode]=\"tableOptions.rows?.singleSelector?.enabled ? 'single' : null\" [metaKeySelection]=\"tableOptions.rows?.singleSelector?.metakey\" [(selection)]=\"rowSelection\" (onRowSelect)=\"rowSelect($event)\" (onRowUnselect)=\"rowUnselect($event)\"\r\n        [lazy]=\"true\" (onLazyLoad)=\"fetchTableData($event)\">\r\n\r\n        <!--TEMPLATE FOR THE ACTIONS HEADER COLUMN-->\r\n        <ng-template #actionColumnHeaderTemplate>\r\n            @if ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0) {\r\n                <th [ngStyle]=\"{\r\n                        'text-align': 'center',\r\n                        'vertical-align': 'middle',\r\n                        'max-width': actionColumnWidth + 'px',\r\n                        'min-width': actionColumnWidth + 'px',\r\n                        'width': actionColumnWidth + 'px'\r\n                    }\"\r\n                    pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows?.action?.resizable\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\"\r\n                    [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.action?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\" id=\"actions-header\"\r\n                    [attr.scope]=\"'col'\">\r\n                    {{ (tableOptions.rows?.action?.header ?? '') | ecsTranslate }}\r\n                </th>\r\n            }\r\n        </ng-template>\r\n\r\n        <!--TEMPLATE FOR THE ACTIONS ROW COLUMN-->\r\n        <ng-template #actionColumnTemplate let-rowData=\"rowData\">\r\n            @if ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0) {\r\n                <td \r\n                    [ngStyle]=\"{\r\n                        'text-align': (getDataAlignHorizontalAsText(tableOptions.rows?.action?.horizontalAlignment ?? DataAlignHorizontal.Center)),\r\n                        'vertical-align': (getDataAlignVerticalAsText(tableOptions.rows?.action?.verticalAlignment ?? DataAlignVertical.Middle)),\r\n                        'max-width': actionColumnWidth + 'px',\r\n                        'min-width': actionColumnWidth + 'px',\r\n                        'width': actionColumnWidth + 'px'\r\n                    }\"\r\n                    pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\"\r\n                    [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.action?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n                    @if (compactRows) {\r\n                        @if (hasRowMenuActions(rowData)) {\r\n                            <button pButton type=\"button\" icon=\"pi pi-ellipsis-v\" [attr.aria-label]=\"(tableOptions.responsive?.rowMenuLabel || 'Row actions') | ecsTranslate\"\r\n                                aria-haspopup=\"menu\" [attr.aria-expanded]=\"responsiveRowMenu.visible && rowMenuRow === rowData\"\r\n                                (click)=\"openRowMenu($event, rowData)\" class=\"ecs-responsive-trigger\"></button>\r\n                        }\r\n                    } @else {\r\n                    @for (button of tableOptions.rows?.action?.buttons; track button; let last = $last) {\r\n                        <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\"/>\r\n                    }\r\n                    }\r\n                </td>\r\n            }\r\n        </ng-template>\r\n\r\n        <!-- TEMPLATE FOR THE ROW CHECKBOX SELECTOR HEADER COLUMN -->\r\n        <ng-template #rowSelectorColumnHeaderTemplate>\r\n            <th \r\n                [ngStyle]=\"{\r\n                    'text-align': 'center',\r\n                    'vertical-align': 'middle',\r\n                    'max-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n                    'min-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n                    'width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px'\r\n                }\"\r\n                id=\"rowSelector-header\"  [attr.scope]=\"'col'\" pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows?.checkboxSelector?.resizable\" pFrozenColumn \r\n                [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.checkboxSelector?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n                    <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                        @if (tableOptions.rows?.checkboxSelector?.selectAllEnabled) {\r\n                            <p-checkbox [binary]=\"true\" [ngModel]=\"allMatchingRowsSelected\"\r\n                                [indeterminate]=\"matchingRowsPartiallySelected\"\r\n                                [disabled]=\"selectAllLoading || !tableOptions.rows?.checkboxSelector?.urlSelectAll\"\r\n                                [ariaLabel]=\"'Select all filtered rows' | ecsTranslate\"\r\n                                [pTooltip]=\"'Select all filtered rows' | ecsTranslate\"\r\n                                (onChange)=\"toggleAllMatchingRows($event.checked)\"/>\r\n                        }\r\n                        {{ (tableOptions.rows?.checkboxSelector?.header ?? '') | ecsTranslate }}\r\n                        <p-columnFilter type=\"boolean\" field=\"selector\" display=\"menu\" [showButtons]=\"false\"/>\r\n                    </div>\r\n            </th>\r\n        </ng-template>\r\n\r\n        <!--TEMPLATE FOR THE ROW CHECKBOX SELECTOR COLUMN-->\r\n        <ng-template #rowSelectorColumnTemplate let-rowData=\"rowData\">\r\n            <td \r\n            [ngStyle]=\"{\r\n                'text-align': (getDataAlignHorizontalAsText(tableOptions.rows?.checkboxSelector?.horizontalAlignment ?? DataAlignHorizontal.Center)),\r\n                'vertical-align': (getDataAlignVerticalAsText(tableOptions.rows?.checkboxSelector?.verticalAlignment ?? DataAlignVertical.Middle)),\r\n                'max-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n                'min-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px',\r\n                'width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px'\r\n            }\"\r\n            pFrozenColumn [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" \r\n            [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.checkboxSelector?.positionRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n            <p-checkbox \r\n                [disabled]=\"!(tableOptions.rows?.checkboxSelector?.enabledCondition?.(rowData) ?? true)\"\r\n                [binary]=\"true\"\r\n                [ngModel]=\"isRowCheckboxSelected(rowData.rowID)\"\r\n                (onChange)=\"onRowChekboxChange($event, rowData.rowID)\"/>\r\n            </td>\r\n        </ng-template>\r\n\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE ACTIONS ABOVE THE HEADER -->\r\n        <ng-template #caption>\r\n            <div #headerContainer [class.ecs-compact-header]=\"compactHeader\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                @if (compactHeader) {\r\n                    @if (tableOptions.globalFilter?.enabled) {\r\n                        <p-iconField iconPosition=\"left\" class=\"ecs-responsive-search\">\r\n                            <p-inputIcon><i class=\"pi pi-search\"></i></p-inputIcon>\r\n                            <input pInputText type=\"text\" [attr.aria-label]=\"'Search keyword' | ecsTranslate\" [placeholder]=\"'Search keyword' | ecsTranslate\" autocomplete=\"off\"\r\n                                [maxlength]=\"tableOptions.globalFilter?.maxLength ?? null\" [ngModel]=\"globalSearchText\"\r\n                                (ngModelChange)=\"onGlobalSearchInput($event)\"/>\r\n                            @if (globalSearchText) {\r\n                                <p-inputIcon position=\"right\"><button type=\"button\" class=\"ecs-clear-search\" [attr.aria-label]=\"'Clear search' | ecsTranslate\" (click)=\"clearFilters(dt, true, true)\"><i class=\"pi pi-times\"></i></button></p-inputIcon>\r\n                            }\r\n                        </p-iconField>\r\n                    }\r\n                    @if (tableOptions.description?.text) {\r\n                        <i [class]=\"tableOptions.description!.icon\" [pTooltip]=\"(tableOptions.description!.text) | ecsTranslate\" [escape]=\"false\"></i>\r\n                    }\r\n                    <button pButton type=\"button\" icon=\"pi pi-bars\" [attr.aria-label]=\"(tableOptions.responsive?.headerMenuLabel || 'Table actions') | ecsTranslate\"\r\n                        aria-haspopup=\"menu\" [attr.aria-expanded]=\"responsiveHeaderMenu.visible\"\r\n                        (click)=\"openHeaderMenu($event)\" class=\"ecs-responsive-trigger ecs-header-menu-trigger\"></button>\r\n                } @else {\r\n\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <!--CHOOSE COLUMNS TO SHOW-->\r\n                    @if (tableOptions.columns?.selectorEnabled) {\r\n                        <p-button [icon]=\"tableOptions.columns?.selectorIcon ?? 'pi pi-pen-to-square'\" (onClick)=\"columnSelectorShow()\" [pTooltip]=\"'Modify columns' | ecsTranslate\"\r\n                            [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                    <!--CLEAR SORTS AND FILTERS-->\r\n                    @if (tableOptions.header?.clearSortsEnabled) {\r\n                        <p-button [icon]=\"tableOptions.header?.clearSortsIcon ?? 'pi pi-sort-alt-slash'\" (onClick)=\"clearSorts(dt)\" [disabled]=\"!hasToClearSorts(dt)\"\r\n                            [pTooltip]=\"'Clear sorts' | ecsTranslate\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                    @if (tableOptions.header?.clearFiltersEnabled) {\r\n                        <p-button\r\n                            [icon]=\"tableOptions.header?.clearFiltersIcon ?? 'pi pi-filter-slash'\" (onClick)=\"clearFilters(dt)\" [disabled]=\"!hasToClearFilters(dt, globalSearchText)\"\r\n                            [pTooltip]=\"'Clear filters' | ecsTranslate\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n\r\n                    <!--TABLE DESCRIPTION-->\r\n                    @if(tableOptions.description?.text){ <!-- If a table description text is provided -->\r\n                        @if(!tableOptions.description!.tooltip){ <!-- The table description must be shown as text next to the icon -->\r\n                            <i [class]=\"tableOptions.description!.icon\"></i>\r\n                            <span [innerHTML]=\"(tableOptions.description!.text) | ecsTranslate\"></span>\r\n                        } @else {\r\n                            <i [escape]=\"false\" [pTooltip]=\"(tableOptions.description!.text) | ecsTranslate\" tooltipPosition=\"right\" [class]=\"tableOptions.description!.icon\"></i>\r\n                        }\r\n                    }\r\n                </div>\r\n\r\n                <!--TABLE VIEWS-->\r\n                @if(tableViewsEnabled()){\r\n                    <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                        <p-buttongroup>\r\n                            <p-button (click)=\"viewsModalShow=true;\"\r\n                                [label]=\"tableViewCurrentSelectedAlias \r\n                                    ? tableViewCurrentSelectedAlias \r\n                                    : ((tableOptions.views?.noViewSelectedText || '--- Select a view ---') | ecsTranslate)\"\r\n                                [class]=\"'viewButton' + (tableOptions.views?.selectViewButtonClass ? ' ' + tableOptions.views!.selectViewButtonClass : '')\"/>\r\n                            <p-button (click)=\"viewLoad(tableViewCurrentSelectedAlias!)\"  [disabled]=\"!tableViewCurrentSelectedAlias\" [pTooltip]=\"'Apply view again' | ecsTranslate\" [showDelay]=\"700\" tooltipPosition=\"top\"\r\n                                [icon]=\"tableOptions.views?.reloadViewButtonIcon || 'pi pi-refresh'\"\r\n                                [class]=\"tableOptions.views?.reloadViewButtonClass || ''\"/>\r\n                        </p-buttongroup>\r\n                    </div>\r\n                }\r\n\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <!--GLOBAL FILTER-->\r\n                    @if (tableOptions.globalFilter?.enabled) {\r\n                        <p-iconField iconPosition=\"left\" class=\"ml-auto\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n                            <p-inputIcon>\r\n                                <i class=\"pi pi-search\"></i>\r\n                            </p-inputIcon>\r\n                            <input pInputText type=\"text\" \r\n                                (ngModelChange)=\"onGlobalSearchInput($event)\" autocomplete=\"off\"\r\n                                [maxlength]=\"tableOptions.globalFilter?.maxLength ?? null\" [placeholder]=\"'Search keyword' | ecsTranslate\" [ngModel]=\"globalSearchText\"\r\n                                style=\"width: 220px;\"/>\r\n                            <!-- Right icon (only if there is text) -->\r\n                            @if (globalSearchText) {\r\n                                <p-inputIcon position=\"right\">\r\n                                    <i class=\"pi pi-times\" style=\"cursor: pointer;\"  (click)=\"clearFilters(dt, true, true); $event.stopPropagation()\"></i>\r\n                                </p-inputIcon>\r\n                            }\r\n                        </p-iconField>\r\n                    }\r\n\r\n                    <!--EXPORT DATA-->\r\n                    @if (tableOptions.excelReport?.url?.trim()) {\r\n                        <p-button icon=\"pi pi-file-excel\" (onClick)=\"openExcelExport()\"\r\n                            [pTooltip]=\"'Export to Excel' | ecsTranslate\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n\r\n                    <!--RESET TABLE VIEW-->\r\n                    @if(tableOptions.resetTableView?.enabled){\r\n                        <p-button [icon]=\"tableOptions.resetTableView?.icon ?? 'pi pi-eraser'\" (click)=\"resetTableView()\" [pTooltip]=\"'Reset table view' | ecsTranslate\" [showDelay]=\"700\"\r\n                            tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n\r\n                    <!--REFRESH DATA-->\r\n                    <p-button icon=\"pi pi-refresh\" (onClick)=\"refreshData($event)\" [pTooltip]=\"'Refresh data' | ecsTranslate\" [showDelay]=\"700\"\r\n                        tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    \r\n                    <!-- HEADER ACTION BUTTONS -->\r\n                    @if ((tableOptions.header?.buttons?.length ?? 0) > 0) {\r\n                        <td style=\"display: flex; justify-content: center; align-items: center; gap: 10px;\">\r\n                            @for (button of tableOptions.header?.buttons; track $index) {\r\n                                <ecs-table-button [button]=\"button\" [rowData]=\"null\"/>\r\n                            }\r\n                        </td>\r\n                    }\r\n                </div>\r\n                }\r\n            </div>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE HEADERS -->\r\n        <ng-template #header let-columns>\r\n            @let headerGroups = getColumnHeaderGroups(columns);\r\n            @if (headerGroups.length) {\r\n                <tr class=\"ecs-column-groups\">\r\n                    @if ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0 && !tableOptions.rows?.action?.positionRight) {\r\n                        <td aria-hidden=\"true\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\" alignFrozen=\"left\"\r\n                            [style.width.px]=\"actionColumnWidth\" [style.min-width.px]=\"actionColumnWidth\"></td>\r\n                    }\r\n                    @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                        <td aria-hidden=\"true\" pFrozenColumn [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" alignFrozen=\"left\"\r\n                            [style.width.px]=\"tableOptions.rows?.checkboxSelector?.width ?? 150\" [style.min-width.px]=\"tableOptions.rows?.checkboxSelector?.width ?? 150\"></td>\r\n                    }\r\n                    @for (group of headerGroups; track group.field) {\r\n                        <td [attr.colspan]=\"group.colspan\" role=\"columnheader\" [attr.aria-colspan]=\"group.colspan\" style=\"text-align: center; vertical-align: middle;\"\r\n                            pFrozenColumn [frozen]=\"group.frozenColumnAlign !== FrozenColumnAlign.Noone\"\r\n                            [alignFrozen]=\"getFrozenColumnAlignAsText(group.frozenColumnAlign)\">\r\n                            {{ group.label | translate }}\r\n                        </td>\r\n                    }\r\n                    @if (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                        <td aria-hidden=\"true\" pFrozenColumn [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" alignFrozen=\"right\"\r\n                            [style.width.px]=\"tableOptions.rows?.checkboxSelector?.width ?? 150\" [style.min-width.px]=\"tableOptions.rows?.checkboxSelector?.width ?? 150\"></td>\r\n                    }\r\n                    @if ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0 && tableOptions.rows?.action?.positionRight) {\r\n                        <td aria-hidden=\"true\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\" alignFrozen=\"right\"\r\n                            [style.width.px]=\"actionColumnWidth\" [style.min-width.px]=\"actionColumnWidth\"></td>\r\n                    }\r\n                </tr>\r\n            }\r\n            <tr>\r\n                @if (!tableOptions.rows?.action?.positionRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @for (col of columns; track col.header) {\r\n                    <th [ngStyle]=\"getColumnStyle(col, true)\"\r\n                        pResizableColumn [pResizableColumnDisabled]=\"!col.canBeResized ? true : false\"\r\n                        pReorderableColumn [pReorderableColumnDisabled]=\"!col.canBeReordered ? true : false\"\r\n                        pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\"\r\n                        [pSortableColumn]=\"col.field\" [pSortableColumnDisabled]=\"!col.canBeSorted ? true : false\"\r\n                        style=\"text-align: center;\"\r\n                        [id]=\"col.field + '-header'\" [attr.scope]=\"'col'\">\r\n                        <div style=\"display: flex; justify-content: space-between; align-items: center; width: 100%;\">\r\n                            <div style=\"margin-right: 15px;\">\r\n                                <span>{{ col.header | translate }}</span>\r\n                            </div>\r\n                            <div style=\"display: flex; align-items: center; gap: 5px;\">\r\n                                @if (col.canBeSorted) {\r\n                                    <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n                                }\r\n                                @if(col.canBeFiltered){\r\n                                    @if (!col.filterPredefinedValuesName || col.filterPredefinedValuesName.length === 0) {\r\n                                        <p-columnFilter [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\" [showButtons]=\"false\"/>\r\n                                    } @else {\r\n                                        <p-columnFilter\r\n                                            [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\"\r\n                                            [showButtons]=\"false\" matchMode=\"in\" operator=\"or\" [showMatchModes]=\"false\"\r\n                                            [showOperator]=\"false\" [showAddButton]=\"false\" [showClearButton]=\"false\" [showApplyButton]=\"false\">\r\n                                            <ng-template #filter>\r\n                                                <p-multiSelect\r\n                                                    [style]=\"{ minWidth: '400px' }\" [(ngModel)]=\"predefinedFiltersSelectedValuesCollection[col.filterPredefinedValuesName]\"\r\n                                                    [options]=\"getPredefinedFilterValues(col.filterPredefinedValuesName)\" [placeholder]=\"'Any value' | ecsTranslate\"\r\n                                                    (onChange)=\"onPredefinedFilterChange(col.field, $event.value)\" optionLabel=\"name\">\r\n                                                    <ng-template #item let-option >\r\n                                                        <div style=\"display: inline-block; vertical-align: middle;\">\r\n                                                            <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\" [selectable]=\"false\" [rowData]=\"null\"/>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                </p-multiSelect>\r\n                                            </ng-template>\r\n                                        </p-columnFilter>\r\n                                    }\r\n                                }\r\n                                @if (col.columnDescription && col.columnDescription.length > 0) {\r\n                                    <i [pTooltip]=\"(col.columnDescription) | ecsTranslate\" tooltipPosition=\"top\" [class]=\"tableOptions.columnDescriptionIcon || 'pi pi-info-circle'\"></i>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                    </th>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.action?.positionRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n                }\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS CONTENTS -->\r\n        <ng-template #body let-rowData let-columns=\"columns\"> \r\n            @if (treeState?.isMore(rowData)) {\r\n                <tr class=\"ecs-tree-more-row\">\r\n                    <td colspan=\"999\">\r\n                        <p-button icon=\"pi pi-plus\" [text]=\"true\" [label]=\"'Load more children' | ecsTranslate\"\r\n                            (onClick)=\"loadMoreTreeRows($event, rowData)\" />\r\n                    </td>\r\n                </tr>\r\n            } @else {\r\n            <tr [pSelectableRow]=\"rowData\" [ngClass]=\"tableOptions.rows?.class?.(rowData)\" [ngStyle]=\"tableOptions.rows?.style?.(rowData)\"\r\n                [attr.aria-level]=\"treeState ? treeState.depth(rowData) + 1 : null\"\r\n                [attr.aria-expanded]=\"treeState?.hasChildren(rowData) ? treeState?.isExpanded(rowData) : null\">\r\n                @if (!tableOptions.rows?.action?.positionRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n                }\r\n                @for (col of columns; track col.field) {\r\n                    <td (mousedown)=\"col.dataType !== DataType.Boolean && copyToClipboardStart($event)\" (mouseup)=\"copyToClipboardCancel()\"\r\n                        [ngStyle]=\"getColumnStyle(col)\" pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" \r\n                        [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\" [style.text-align]=\"getDataAlignHorizontalAsText(col.dataAlignHorizontal)\" [style.vertical-align]=\"getDataAlignVerticalAsText(col.dataAlignVertical)\">\r\n                        @if (treeState && col.field === treeColumn) {\r\n                            <div class=\"ecs-tree-cell\" [style.padding-inline-start.px]=\"treeState.depth(rowData) * 20\">\r\n                                <button type=\"button\" class=\"ecs-tree-toggle\" [class.ecs-tree-leaf]=\"!treeState.hasChildren(rowData)\"\r\n                                    [disabled]=\"!treeState.hasChildren(rowData) || treeState.isLoading(rowData) || treeState.loading\"\r\n                                    [attr.aria-label]=\"(treeState.isExpanded(rowData) ? 'Collapse node' : 'Expand node') | ecsTranslate\"\r\n                                    [attr.aria-expanded]=\"treeState.hasChildren(rowData) ? treeState.isExpanded(rowData) : null\"\r\n                                    [pTooltip]=\"(treeState.isExpanded(rowData) ? 'Collapse node' : 'Expand node') | ecsTranslate\"\r\n                                    (mousedown)=\"$event.stopPropagation()\" (mouseup)=\"$event.stopPropagation()\"\r\n                                    (click)=\"toggleTreeRow($event, rowData)\">\r\n                                    <i [class]=\"treeState.isLoading(rowData) ? 'pi pi-spinner pi-spin' : treeState.isExpanded(rowData) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\" aria-hidden=\"true\"></i>\r\n                                </button>\r\n                                <ecs-table-cell [col]=\"col\" [rowData]=\"rowData\" [globalSearchText]=\"effectiveGlobalSearchText\"\r\n                                    [dateFormat]=\"dateFormat\" [dateTimezone]=\"dateTimezone\" [dateCulture]=\"dateCulture\"\r\n                                    [predefinedFiltersCollection]=\"tableOptions.predefinedFilters\" />\r\n                            </div>\r\n                        } @else {\r\n                        <ecs-table-cell [col]=\"col\" [rowData]=\"rowData\" [globalSearchText]=\"effectiveGlobalSearchText\"\r\n                            [dateFormat]=\"dateFormat\" [dateTimezone]=\"dateTimezone\" [dateCulture]=\"dateCulture\"\r\n                            [predefinedFiltersCollection]=\"tableOptions.predefinedFilters\"/>\r\n                        }\r\n                    </td>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.positionRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.action?.positionRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n                }\r\n            </tr>\r\n            }\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS NO CONTENTS -->\r\n        <ng-template #emptymessage>\r\n            <tr>\r\n                <td colspan=\"999\">{{ 'No data found for the current filter criteria.' | ecsTranslate }}</td>\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- SHOW CUSTOM RECORDS REPORT -->\r\n        <ng-template #paginatorleft>\r\n            <div #paginatorContainer>\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    @if(tableOptions.legend?.content){\r\n                        <ecs-table-button [button]=\"tableOptions.legend?.button\" [rowData]=\"null\" [overrideAction]=\"op.toggle.bind(op)\"/>\r\n                        <p-popover #op>\r\n                            <div [innerHTML]=\"(tableOptions.legend?.content) | ecsTranslate\"></div>\r\n                        </p-popover>\r\n                    }\r\n                    <span>{{ 'Showing {{count}} records of {{total}} available records' | ecsTranslate: { count: totalRecords, total: totalRecordsNotFiltered } }}</span>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n    </p-table>\r\n    @if (treeState) {\r\n        <div #paginatorContainer class=\"ecs-tree-paginator\">\r\n            @if (tableOptions.legend?.content) {\r\n                <ecs-table-button [button]=\"tableOptions.legend?.button\" [rowData]=\"null\" [overrideAction]=\"treeLegend.toggle.bind(treeLegend)\" />\r\n                <p-popover #treeLegend><div [innerHTML]=\"(tableOptions.legend?.content) | ecsTranslate\"></div></p-popover>\r\n            }\r\n            <span>{{ 'Showing {{count}} root nodes of {{total}} available root nodes' | ecsTranslate: { count: totalRecords, total: totalRecordsNotFiltered } }}</span>\r\n            <p-paginator [first]=\"currentPage * currentRowsPerPage\" [rows]=\"currentRowsPerPage\" [totalRecords]=\"totalRecords\"\r\n                [rowsPerPageOptions]=\"allowedRowsPerPage\" dropdownAppendTo=\"body\" (onPageChange)=\"treePageChange($event)\" />\r\n        </div>\r\n    }\r\n</div>\r\n<ecs-column-selector [visible]=\"showColumnSelector\" [columnModalData]=\"columnModalData\" [filteredColumnData]=\"filteredColumnData\" [orderByHeader]=\"tableOptions.columns?.selectorOrderByColumnName === true\" (visibleChange)=\"showColumnSelector=false\" (applyChanges)=\"applyColumnModalChanges($event)\"/>\r\n<ecs-export-excel [visible]=\"showExportModal\" [rowCheckboxSelectorActive]=\"tableOptions.rows?.checkboxSelector?.enabled ?? false\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"tableOptions.excelReport?.titleAllowUserEdit ?? false\" (visibleChange)=\"showExportModal=false\" (exportToExcel)=\"generateExcelReport($event)\"/>\r\n<ecs-views-management [visible]=\"viewsModalShow\" [tableViews_menuItems]=\"tableViews_menuItems\" \r\n    (onViewSelect)=\"viewLoad($event)\" (onViewCreate)=\"viewCreate($event)\" (onViewDelete)=\"viewDelete($event)\" (onViewEditAlias)=\"viewEditAlias($event)\" (onViewUpdateData)=\"viewUpdateData($event)\" (onViewUpdateActiveStartup)=\"viewUpdateActiveStartup($event)\"\r\n    (visibleChange)=\"viewsModalShow=false\"/>\r\n<!-- Body-level overlays avoid clipping inside scrollable and frozen table cells. -->\r\n<p-menu #responsiveHeaderMenu [model]=\"headerMenuItems\" [popup]=\"true\" appendTo=\"body\" styleClass=\"ecs-responsive-menu\"/>\r\n<p-menu #responsiveRowMenu [model]=\"rowMenuItems\" [popup]=\"true\" appendTo=\"body\" styleClass=\"ecs-responsive-menu\"/>\r\n", styles: [".highlighted-text{background-color:#ff0;color:#000;border-radius:2px}.excel-export-tooltip .bool-icon{text-shadow:0 0 2px white,0 0 3px white}.excel-export-tooltip .bool-true{color:green}.excel-export-tooltip .bool-false{color:red}.p-datatable-column-filter-button.p-button-icon-only.p-button-rounded,.p-datatable-column-filter-clear-button.p-button-icon-only.p-button-rounded{height:var(--p-icon-size)!important;width:var(--p-icon-size)!important;border-radius:0!important}.viewButton{width:200px}.viewButton .p-button{width:100%;justify-content:center}.viewButton .p-button-label{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.ecs-compact-header{gap:.5rem;min-width:0}.ecs-header-menu-trigger{margin-left:auto;flex:0 0 auto}.ecs-responsive-trigger{min-width:44px;min-height:44px}.ecs-responsive-search{flex:1 1 220px;min-width:0;max-width:320px}.ecs-responsive-search input{width:100%;padding-right:2.5rem}.ecs-clear-search{border:0;background:transparent;color:inherit;cursor:pointer}.ecs-responsive-menu{max-width:calc(100vw - 16px);max-height:calc(100dvh - 32px);overflow-y:auto}.ecs-responsive-menu .p-menu-item-link{min-height:44px;white-space:normal}.ecs-tree-cell{display:flex;align-items:center;gap:4px;min-width:0}.ecs-tree-cell>ecs-table-cell{flex:1;min-width:0}.ecs-tree-toggle{width:32px;height:32px;flex:0 0 32px;border:0;background:transparent;color:inherit;cursor:pointer}.ecs-tree-toggle:focus-visible{outline:2px solid var(--p-primary-color);outline-offset:1px}.ecs-tree-leaf{visibility:hidden}.ecs-tree-paginator{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.p-datatable-thead>.ecs-column-groups>td{padding:var(--p-datatable-header-cell-padding);background:var(--p-datatable-header-cell-background);color:var(--p-datatable-header-cell-color);font-weight:var(--p-datatable-column-title-font-weight);border:1px solid var(--p-datatable-header-cell-border-color);white-space:normal;overflow-wrap:anywhere}\n"] }]
         }], ctorParameters: () => [{ type: ECSPrimengTableService }, { type: ECSPrimengTableNotificationService }], propDecorators: { tableOptions: [{
                 type: Input
             }], onRowCheckboxChange: [{
@@ -2575,5 +3061,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CellDisplay, CellOverflowBehaviour, DEFAULT_TABLE_OPTIONS, DataAlignHorizontal, DataAlignVertical, DataType, DeviceType, ECSPrimengTable, ECSPrimengTableHttpService, ECSPrimengTableI18nService, ECSPrimengTableNotificationService, ECSPrimengTableService, ECSPrimengTableStateService, FrozenColumnAlign, TableViewSaveMode, createTableOptions };
+export { CellDisplay, CellOverflowBehaviour, DEFAULT_TABLE_OPTIONS, DataAlignHorizontal, DataAlignVertical, DataType, DeviceType, ECSPrimengTable, ECSPrimengTableHttpService, ECSPrimengTableI18nService, ECSPrimengTableNotificationService, ECSPrimengTableService, ECSPrimengTableStateService, FrozenColumnAlign, TableViewSaveMode, TreeTableState, createTableOptions };
 //# sourceMappingURL=competer-primeng-table.mjs.map