@competer/primeng-table 0.0.0-stage → 14.2.0

package/fesm2020/competer-primeng-table.mjs

@@ -0,0 +1,3049 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, Pipe, Component, Input, EventEmitter, ViewChild, Output, ChangeDetectorRef, ViewEncapsulation, HostListener } from '@angular/core';
+import * as i1$2 from '@ngx-translate/core';
+import { TranslateService, TranslateDefaultParser, TranslateModule } from '@ngx-translate/core';
+import * as i3$2 from 'primeng/api';
+import { PrimeNGConfig, TranslationKeys } from 'primeng/api';
+import { Subject, merge, EMPTY, takeUntil, Observable, finalize, firstValueFrom } from 'rxjs';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i6$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i6 from 'primeng/table';
+import { TableModule } from 'primeng/table';
+import * as i5 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import * as i3$1 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+import * as i10 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import * as i11 from 'primeng/multiselect';
+import { MultiSelectModule } from 'primeng/multiselect';
+import * as i5$1 from 'primeng/checkbox';
+import { CheckboxModule } from 'primeng/checkbox';
+import * as i13 from 'primeng/paginator';
+import { PaginatorModule } from 'primeng/paginator';
+import * as i14 from 'primeng/overlaypanel';
+import { OverlayPanelModule } from 'primeng/overlaypanel';
+import * as i15 from 'primeng/menu';
+import { MenuModule } from 'primeng/menu';
+import * as i3 from 'primeng/skeleton';
+import { SkeletonModule } from 'primeng/skeleton';
+import * as i4 from 'primeng/tag';
+import { TagModule } from 'primeng/tag';
+import * as i1 from '@angular/platform-browser';
+import { HttpHeaders } from '@angular/common/http';
+import { DomHandler } from 'primeng/dom';
+import * as i2 from 'primeng/dialog';
+import { DialogModule } from 'primeng/dialog';
+import * as i7 from 'primeng/selectbutton';
+import { SelectButtonModule } from 'primeng/selectbutton';
+
+/**
+ * Defines how content that overflows a table cell is displayed.
+ *
+ * @remarks
+ * This enumeration specifies the visual behavior of cell content when it exceeds the cell’s width.
+ */
+var CellOverflowBehaviour;
+(function (CellOverflowBehaviour) {
+    /** The overflowing content is clipped and not visible. */
+    CellOverflowBehaviour[CellOverflowBehaviour["Hidden"] = 0] = "Hidden";
+    /** The content wraps onto multiple lines to fit within the cell. */
+    CellOverflowBehaviour[CellOverflowBehaviour["Wrap"] = 1] = "Wrap";
+})(CellOverflowBehaviour || (CellOverflowBehaviour = {}));
+
+/**
+ * Defines the horizontal alignment of content within a table cell.
+ *
+ * @remarks
+ * Specifies how the content inside a cell is positioned horizontally relative to the cell's width.
+ */
+var DataAlignHorizontal;
+(function (DataAlignHorizontal) {
+    /** Content is aligned to the left side of the cell. */
+    DataAlignHorizontal[DataAlignHorizontal["Left"] = 0] = "Left";
+    /** Content is aligned to the center of the cell. */
+    DataAlignHorizontal[DataAlignHorizontal["Center"] = 1] = "Center";
+    /** Content is aligned to the right side of the cell. */
+    DataAlignHorizontal[DataAlignHorizontal["Right"] = 2] = "Right";
+})(DataAlignHorizontal || (DataAlignHorizontal = {}));
+
+/**
+ * Enum representing the vertical alignment of content within a table cell.
+ *
+ * @remarks
+ * Determines how the content inside a cell is positioned vertically relative to the cell's height.
+ */
+var DataAlignVertical;
+(function (DataAlignVertical) {
+    /** Align content to the top of the cell. */
+    DataAlignVertical[DataAlignVertical["Top"] = 0] = "Top";
+    /** Align content to the vertical middle of the cell. */
+    DataAlignVertical[DataAlignVertical["Middle"] = 1] = "Middle";
+    /** Align content to the bottom of the cell. */
+    DataAlignVertical[DataAlignVertical["Bottom"] = 2] = "Bottom";
+})(DataAlignVertical || (DataAlignVertical = {}));
+
+/**
+ * Enum representing the different types of data a table column can hold.
+ *
+ * @remarks
+ * This is used to determine how values should be rendered, formatted, and
+ * filtered in the table component.
+ */
+var DataType;
+(function (DataType) {
+    /** Plain text string values. */
+    DataType[DataType["Text"] = 0] = "Text";
+    /** Numeric values, e.g., integers or decimals. */
+    DataType[DataType["Numeric"] = 1] = "Numeric";
+    /** Boolean values (true/false). */
+    DataType[DataType["Boolean"] = 2] = "Boolean";
+    /** Date or datetime values. */
+    DataType[DataType["Date"] = 3] = "Date";
+    /** List of values, stored as a string separated by a delimiter (";"). */
+    DataType[DataType["List"] = 4] = "List";
+})(DataType || (DataType = {}));
+
+/**
+ * Enum representing the alignment of frozen columns in a table.
+ *
+ * @remarks
+ * Used to determine if a column should be frozen, and if so, on which side
+ * of the table it should appear.
+ */
+var FrozenColumnAlign;
+(function (FrozenColumnAlign) {
+    /** The column is not frozen. */
+    FrozenColumnAlign[FrozenColumnAlign["Noone"] = 0] = "Noone";
+    /** The column is frozen on the left side of the table. */
+    FrozenColumnAlign[FrozenColumnAlign["Left"] = 1] = "Left";
+    /** The column is frozen on the right side of the table. */
+    FrozenColumnAlign[FrozenColumnAlign["Right"] = 2] = "Right";
+})(FrozenColumnAlign || (FrozenColumnAlign = {}));
+
+/**
+ * Enum representing the mode used to save the state or configuration of a table view.
+ *
+ * @remarks
+ * Determines where and how the table's view settings (e.g., column order, filters,
+ * sorting) are persisted.
+ */
+var TableViewSaveMode;
+(function (TableViewSaveMode) {
+    /** Views are disabled. */
+    TableViewSaveMode[TableViewSaveMode["None"] = 0] = "None";
+    /** Save the table view state in the browser's sessionStorage (cleared on tab close). */
+    TableViewSaveMode[TableViewSaveMode["SessionStorage"] = 1] = "SessionStorage";
+    /** Save the table view state in the browser's localStorage (persists across sessions). */
+    TableViewSaveMode[TableViewSaveMode["LocalStorage"] = 2] = "LocalStorage";
+    /** Save the table view state in a backend database (requires server support). */
+    TableViewSaveMode[TableViewSaveMode["DatabaseStorage"] = 3] = "DatabaseStorage";
+})(TableViewSaveMode || (TableViewSaveMode = {}));
+
+/** Viewport categories; numeric values match the backend DeviceType enum. */
+var DeviceType;
+(function (DeviceType) {
+    DeviceType[DeviceType["Mobile"] = 0] = "Mobile";
+    DeviceType[DeviceType["Tablet"] = 1] = "Tablet";
+    DeviceType[DeviceType["Desktop"] = 2] = "Desktop";
+})(DeviceType || (DeviceType = {}));
+
+/** Cell presentation. Filtering, sorting and export continue to use DataType. */
+var CellDisplay;
+(function (CellDisplay) {
+    CellDisplay[CellDisplay["Default"] = 0] = "Default";
+    CellDisplay[CellDisplay["ProgressBar"] = 1] = "ProgressBar";
+})(CellDisplay || (CellDisplay = {}));
+
+/** Default configuration options for ECS Primeng table */
+const DEFAULT_TABLE_OPTIONS = {
+    isActive: true,
+    responsive: {
+        tabletMinWidth: 768,
+        desktopMinWidth: 1200,
+        headerMenu: false,
+        rowMenu: false,
+        headerMenuLabel: 'Table actions',
+        rowMenuLabel: 'Row actions'
+    },
+    statePersistence: { enabled: false },
+    urlTableConfiguration: undefined,
+    urlTableData: undefined,
+    data: [],
+    columnDescriptionIcon: "pi pi-info-circle",
+    description: {
+        icon: "pi pi-info-circle",
+        tooltip: true,
+        text: undefined
+    },
+    legend: {
+        content: undefined,
+        button: {
+            icon: "pi pi-bars",
+            label: "Legend"
+        }
+    },
+    header: {
+        buttons: [],
+        clearSortsEnabled: true,
+        clearSortsIcon: "pi pi-sort-alt-slash",
+        clearFiltersEnabled: true,
+        clearFiltersIcon: "pi pi-filter-slash"
+    },
+    columns: {
+        selectorEnabled: true,
+        selectorIcon: "pi pi-pencil",
+        selectorOrderByColumnName: true,
+        shown: []
+    },
+    rows: {
+        style: () => ({}),
+        class: () => ({}),
+        action: {
+            buttons: [],
+            header: "Actions",
+            positionRight: true,
+            width: 150,
+            frozen: true,
+            resizable: false,
+            horizontalAlignment: DataAlignHorizontal.Center,
+            verticalAlignment: DataAlignVertical.Middle
+        },
+        checkboxSelector: {
+            enabled: false,
+            selectAllEnabled: false,
+            urlSelectAll: undefined,
+            header: "Selected",
+            positionRight: false,
+            width: 150,
+            frozen: true,
+            resizable: false,
+            enabledCondition: undefined,
+            horizontalAlignment: DataAlignHorizontal.Center,
+            verticalAlignment: DataAlignVertical.Middle
+        },
+        singleSelector: {
+            enabled: false,
+            metakey: true
+        }
+    },
+    verticalScroll: {
+        fitToContainer: true,
+        height: 0,
+        cssFormula: undefined
+    },
+    globalFilter: {
+        enabled: true,
+        minLength: 0,
+        debounceTime: 0,
+        maxLength: 20
+    },
+    predefinedFilters: {},
+    views: {
+        saveMode: TableViewSaveMode.None,
+        saveKey: undefined,
+        urlGet: undefined,
+        urlSave: undefined,
+        selectViewButtonClass: undefined,
+        reloadViewButtonClass: undefined,
+        reloadViewButtonIcon: "pi pi-refresh",
+        noViewSelectedText: "--- Select a view ---"
+    },
+    resetTableView: {
+        enabled: true,
+        icon: "pi pi-eraser"
+    },
+    excelReport: {
+        url: undefined,
+        defaultTitle: "Report",
+        titleAllowUserEdit: true
+    },
+    copyToClipboardTime: 0.5
+};
+
+/**
+ * Deep merge two objects.
+ * Recursively copies properties from `source` into `target`,
+ * but ignores `undefined` values to preserve defaults.
+ */
+function deepMerge(target, source) {
+    for (const key in source) {
+        const value = source[key];
+        if (value === undefined) { // skip undefined values to keep defaults
+            continue;
+        }
+        if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+            if (!target[key])
+                target[key] = {};
+            deepMerge(target[key], value);
+        }
+        else {
+            target[key] = value;
+        }
+    }
+    return target;
+}
+/**
+ * Create table options based on defaults, with optional overrides.
+ */
+function createTableOptions(overrides = {}) {
+    const defaultsCopy = JSON.parse(JSON.stringify(DEFAULT_TABLE_OPTIONS)); // clone only data
+    const merged = deepMerge(defaultsCopy, overrides);
+    // Reasign function if they exist in override
+    if (overrides.rows?.style)
+        merged.rows.style = overrides.rows.style;
+    if (overrides.rows?.class)
+        merged.rows.class = overrides.rows.class;
+    return merged;
+}
+
+class TreeTableState {
+    constructor(options) {
+        this.options = options;
+        this.expanded = new Set();
+        this.nodes = new Map();
+        this.children = new Map();
+        this.totals = new Map();
+        this.pages = new Map();
+        this.entries = new WeakMap();
+        this.roots = [];
+        this.allRoots = [];
+        this.version = 0;
+        this.pending = new Set();
+        this.restoredPages = {};
+        this.visible = [];
+        this.loading = false;
+        this.page = 0;
+        this.pageSize = 10;
+        this.totalRecords = 0;
+        this.totalRecordsNotFiltered = 0;
+        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**.
+ *
+ * Provides a consistent interface for making GET and POST requests to the backend.
+ * Implementations must define how requests are executed, including error handling,
+ * headers, and response processing.
+ */
+class ECSPrimengTableHttpService {
+}
+ECSPrimengTableHttpService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ECSPrimengTableHttpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ECSPrimengTableHttpService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ECSPrimengTableHttpService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ECSPrimengTableHttpService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Abstract service for handling notifications in **ECS Primeng table**.
+ *
+ * Provides a consistent interface for displaying and clearing toast notifications.
+ * Implementations must define how the notifications are managed.
+ */
+class ECSPrimengTableNotificationService {
+}
+ECSPrimengTableNotificationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ECSPrimengTableNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ECSPrimengTableNotificationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ECSPrimengTableNotificationService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ECSPrimengTableNotificationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Provide on the parent COMPONENT containing the list and detail router outlet.
+ * Do not provide at application/root level or on the list component itself.
+ * Destroying that parent ends the scope and discards all its table states.
+ */
+class ECSPrimengTableStateService {
+    constructor() {
+        this.states = new Map();
+        this.destroyed = false;
+    }
+    get(key) {
+        const state = this.states.get(key);
+        return state ? structuredClone(state) : undefined;
+    }
+    set(key, state) {
+        // Parent and child destruction order must not resurrect a discarded scope.
+        if (!this.destroyed)
+            this.states.set(key, structuredClone(state));
+    }
+    clear(key) {
+        if (key === undefined)
+            this.states.clear();
+        else
+            this.states.delete(key);
+    }
+    ngOnDestroy() {
+        this.destroyed = true;
+        this.clear();
+    }
+}
+ECSPrimengTableStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ECSPrimengTableStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ECSPrimengTableStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ECSPrimengTableStateService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ECSPrimengTableStateService, decorators: [{
+            type: Injectable
+        }] });
+
+/** Translates UI text only; never changes column keys, data or persisted view names. */
+class ECSPrimengTableI18nService {
+    constructor() {
+        this.translate = inject(TranslateService, { optional: true });
+        this.prime = inject(PrimeNGConfig, { optional: true });
+        this.destroy$ = new Subject();
+        this.parser = new TranslateDefaultParser();
+        this.connected = false;
+        this.appliedPrimeTranslations = false;
+        this.changes = this.translate
+            ? merge(this.translate.onLangChange, this.translate.onTranslationChange, this.translate.onDefaultLangChange)
+            : EMPTY;
+    }
+    text(key, params) {
+        if (!key)
+            return '';
+        const value = this.translate?.instant(key, params);
+        // Literal English keys also serve as defaults, including interpolated counters.
+        if (typeof value === 'string' && value !== key)
+            return value;
+        return this.parser.interpolate(key, params) ?? key;
+    }
+    /** Optional dictionary section "primeng" configures the application's shared PrimeNG locale. */
+    connectPrimeNG() {
+        if (this.connected || !this.prime || !this.translate)
+            return;
+        this.connected = true;
+        this.primeDefaults = Object.fromEntries([...Object.values(TranslationKeys), 'dateFormat', 'aria'].map(key => [key, structuredClone(this.prime.getTranslation(key))]));
+        this.syncPrimeNG();
+        this.changes.pipe(takeUntil(this.destroy$)).subscribe(() => this.syncPrimeNG());
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    syncPrimeNG() {
+        const value = this.translate.instant('primeng');
+        const defined = value && typeof value === 'object' && !Array.isArray(value);
+        if (!defined && !this.appliedPrimeTranslations)
+            return;
+        const defaults = this.primeDefaults;
+        const overrides = defined ? value : {};
+        this.prime.setTranslation({
+            ...defaults, ...overrides,
+            aria: { ...defaults['aria'], ...overrides['aria'] }
+        });
+        this.appliedPrimeTranslations = !!defined;
+    }
+}
+ECSPrimengTableI18nService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ECSPrimengTableI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ECSPrimengTableI18nService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ECSPrimengTableI18nService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ECSPrimengTableI18nService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** Supports English defaults and live dictionary updates without mutating the source value. */
+class ECSTableTranslatePipe {
+    constructor(i18n, changeDetector) {
+        this.i18n = i18n;
+        this.subscription = i18n.changes.subscribe(() => changeDetector.markForCheck());
+    }
+    transform(key, params) {
+        return this.i18n.text(key, params);
+    }
+    ngOnDestroy() { this.subscription.unsubscribe(); }
+}
+ECSTableTranslatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ECSTableTranslatePipe, deps: [{ token: ECSPrimengTableI18nService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Pipe });
+ECSTableTranslatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: ECSTableTranslatePipe, isStandalone: true, name: "ecsTranslate", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ECSTableTranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ecsTranslate', standalone: true, pure: false }]
+        }], ctorParameters: function () { return [{ type: ECSPrimengTableI18nService }, { type: i0.ChangeDetectorRef }]; } });
+
+/**
+ * Converts a `DataAlignHorizontal` enum value to its corresponding CSS text alignment string.
+ *
+ * @param dataAlignHorizontal - The horizontal alignment enum value.
+ * @returns The CSS text alignment string ('left', 'center', or 'right').
+ *
+ * @remarks
+ * If an unknown value is provided, the function defaults to 'center'.
+ */
+function dataAlignHorizontalAsText(dataAlignHorizontal) {
+    switch (dataAlignHorizontal) {
+        case DataAlignHorizontal.Left:
+            return 'left';
+        case DataAlignHorizontal.Center:
+            return 'center';
+        case DataAlignHorizontal.Right:
+            return 'right';
+        default:
+            return 'center';
+    }
+}
+
+/**
+ * Converts a `DataAlignVertical` enum value to its corresponding CSS vertical alignment string.
+ *
+ * @param dataAlignVertical - The vertical alignment enum value.
+ * @returns The CSS vertical alignment string ('top', 'middle', or 'bottom').
+ *
+ * @remarks
+ * If an unknown value is provided, the function defaults to 'middle'.
+ */
+function dataAlignVerticalAsText(dataAlignVertical) {
+    switch (dataAlignVertical) {
+        case DataAlignVertical.Top:
+            return 'top';
+        case DataAlignVertical.Middle:
+            return 'middle';
+        case DataAlignVertical.Bottom:
+            return 'bottom';
+        default:
+            return 'middle';
+    }
+}
+
+/**
+ * Converts a `DataType` enum value to its corresponding string representation.
+ *
+ * @param dataType - The data type enum value.
+ * @returns The string representation of the data type ('text', 'numeric', 'boolean', or 'date').
+ *
+ * @remarks
+ * If an unknown value is provided, the function defaults to 'text'.
+ */
+function dataTypeAsText(dataType) {
+    switch (dataType) {
+        case DataType.Text:
+            return 'text';
+        case DataType.Numeric:
+            return 'numeric';
+        case DataType.Boolean:
+            return 'boolean';
+        case DataType.Date:
+            return 'date';
+        default:
+            return 'text';
+    }
+}
+
+/**
+ * Converts a `FrozenColumnAlign` enum value to its corresponding CSS alignment string.
+ *
+ * @param frozenColumnAlign - The frozen column alignment enum value.
+ * @returns The CSS alignment string ('left' or 'right').
+ *
+ * @remarks
+ * If an unknown value is provided, the function defaults to 'left'.
+ */
+function frozenColumnAlignAsText(frozenColumnAlign) {
+    switch (frozenColumnAlign) {
+        case FrozenColumnAlign.Left:
+            return 'left';
+        case FrozenColumnAlign.Right:
+            return 'right';
+        default:
+            return 'left';
+    }
+}
+
+/**
+ * Generates sanitized HTML (`SafeHtml`) with highlighted text based on a global search term.
+ *
+ * @remarks
+ * This utility safely creates HTML content where occurrences of the provided global search text
+ * within the cell value are wrapped in a `<span class="highlighted-text">` tag for visual emphasis.
+ * If the cell does not match the search text or is of type `Boolean`, the original value is returned as safe HTML.
+ *
+ * @param {any} cellValue - The cell's value that may contain the text to highlight.
+ * @param {IColumnMetadata} colMetadata - Metadata configuration of the column that defines its data type and filtering behavior.
+ * @param {string | null} globalSearchText - The search text to highlight if found within the cell's content.
+ * @param {DomSanitizer} sanitizer - Angular's sanitizer used to safely produce trusted HTML content.
+ * @returns {SafeHtml} A `SafeHtml` instance containing highlighted HTML when a match is found, or the original sanitized text otherwise.
+ */
+function highlightText(cellValue, colMetadata, globalSearchText, sanitizer) {
+    if (colMetadata.dataType !== DataType.Boolean && globalSearchText !== null) { // Check if the column data type is not boolean and global search text is not null
+        const valueToUse = String(cellValue); // Convert cell value to string
+        if (colMetadata.canBeGlobalFiltered) { // Check if the column can be globally filtered
+            const searchLowerCase = globalSearchText.toUpperCase(); // Convert global search text to uppercase for case-insensitive comparison
+            const cellValueLowerCase = valueToUse.toUpperCase(); // Convert cell value to uppercase for case-insensitive comparison
+            if (cellValueLowerCase.includes(searchLowerCase)) { // Check if the cell value contains the search text
+                // Determine the start and end indices of the search text within the cell value
+                const startIndex = cellValueLowerCase.indexOf(searchLowerCase);
+                const endIndex = startIndex + globalSearchText.length;
+                // Extract the prefix, highlight, and suffix of the cell value
+                const prefix = valueToUse.substring(0, startIndex);
+                const highlight = valueToUse.substring(startIndex, endIndex);
+                const suffix = valueToUse.substring(endIndex);
+                return sanitizer.bypassSecurityTrustHtml(`${prefix}<span class="highlighted-text">${highlight}</span>${suffix}`); // Construct SafeHtml with highlighted text using the <mark> element
+            }
+        }
+    }
+    return sanitizer.bypassSecurityTrustHtml(String(cellValue)); // Return the original cell value if it doesn't meet the highlighting conditions
+}
+
+class ECSPrimengTableService {
+    constructor(http, notification) {
+        this.http = http;
+        this.notification = notification;
+        this.i18n = inject(ECSPrimengTableI18nService);
+    }
+    fetchTableConfiguration(url) {
+        return this.http.handleHttpGetRequest(url);
+    }
+    fetchTableData(url, postData) {
+        return this.http.handleHttpPostRequest(url, postData);
+    }
+    fetchExcelReport(url, postData) {
+        let httpOptions = new HttpHeaders({
+            'accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+            'Content-Type': 'application/json'
+        });
+        return this.http.handleHttpPostRequest(url, postData, httpOptions, "blob");
+    }
+    getIconBlob(url) {
+        return this.http.handleHttpGetRequest(url, "blob");
+    }
+    downloadFile(data, fileName, contentType) {
+        const blob = new Blob([data], { type: contentType });
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = fileName;
+        link.click();
+        window.URL.revokeObjectURL(url);
+    }
+    handleTableError(error, customTitle = 'Data Loading Error') {
+        const message = error.message || 'Unknown error occurred';
+        this.notification.showToast('error', this.i18n.text(customTitle), this.i18n.text(message));
+    }
+    orderColumnsWithFrozens(colsToOrder) {
+        const frozenLeftColumns = colsToOrder.filter(col => col.frozenColumnAlign === FrozenColumnAlign.Left);
+        const frozenRightColumns = colsToOrder.filter(col => col.frozenColumnAlign === FrozenColumnAlign.Right);
+        const nonFrozenColumns = colsToOrder.filter(col => col.frozenColumnAlign === FrozenColumnAlign.Noone);
+        return [...frozenLeftColumns, ...nonFrozenColumns, ...frozenRightColumns];
+    }
+    /**
+     * Handles click events on action buttons in a row of data.
+     *
+     * @param {function} action - The action function to be executed when the button is clicked. It should accept one parameter, which is the row data.
+     * @param {any} [rowData=null] - The data of the row corresponding to the clicked button. Defaults to null.
+     *
+     * @returns {void}
+     *
+     * @example
+     * // Define an action for a button
+     * const deleteAction = (rowData) => {
+     *   console.log(`Delete row with id: ${rowData.rowID}`);
+     * };
+     *
+     * // Use handleButtonsClick with row data
+     * handleButtonsClick(deleteAction, { rowID: 1, name: 'John Doe' });
+     */
+    handleButtonsClick(action, rowData = null) {
+        if (action) { // If the button has an assigned action
+            action(rowData); // Perform the action
+        }
+    }
+    handlePredefinedFilterClick(action, rowData = null, option) {
+        if (action) { // If the button has an assigned action
+            action(rowData, option); // Perform the action
+        }
+    }
+    getColumnStyle(col, headerCols = false) {
+        let styles = {};
+        if (!headerCols) {
+            switch (col.cellOverflowBehaviour) {
+                case CellOverflowBehaviour.Wrap:
+                    styles['white-space'] = 'normal';
+                    styles['word-wrap'] = 'break-word';
+                    styles['word-break'] = 'break-all';
+                    styles['overflow'] = 'hidden';
+                    break;
+                /*case CellOverflowBehaviour.Ellipsis:
+                  styles['white-space'] = 'nowrap';
+                  styles['overflow'] = 'hidden';
+                  styles['text-overflow'] = 'ellipsis';
+                  styles['width'] = '100%';
+                  styles['min-width'] = '100%';
+                  styles['max-width'] = '100%';
+                break;*/
+                /*
+                  display: block;
+          width: 100%;
+          text-align: center;
+                */
+                case CellOverflowBehaviour.Hidden:
+                default:
+                    styles['white-space'] = 'nowrap';
+                    break;
+            }
+        }
+        if (col.initialWidth > 0) {
+            const width = `${col.initialWidth}px`;
+            styles['width'] = width;
+            styles['min-width'] = width;
+            styles['max-width'] = width;
+        }
+        return styles;
+        /*let styles: Record<string, string> = {};
+        if(!headerCols){
+          styles = {
+              'white-space': col.cellOverflowBehaviour === CellOverflowBehaviour.Wrap ? 'normal' : 'nowrap',
+              'word-wrap': col.cellOverflowBehaviour === CellOverflowBehaviour.Wrap ? 'break-word' : 'normal',
+              'word-break': col.cellOverflowBehaviour === CellOverflowBehaviour.Wrap ? 'break-all' : 'normal'
+          };
+        }
+        if (col.initialWidth > 0) {
+            styles['max-width'] = col.initialWidth + 'px';
+            styles['min-width'] = col.initialWidth + 'px';
+            styles['width'] = col.initialWidth + 'px';
+        }
+        return styles;*/
+    }
+    fetchTableViews(tableViewSaveAs, recoverListEndpoint, tableViewSaveKey) {
+        let tableViewList = [];
+        let tableViewNotParsed = null;
+        if (tableViewSaveKey !== "" && tableViewSaveKey !== '') {
+            switch (tableViewSaveAs) {
+                case TableViewSaveMode.None:
+                    tableViewNotParsed = null;
+                    break;
+                case TableViewSaveMode.SessionStorage:
+                    tableViewNotParsed = sessionStorage.getItem(tableViewSaveKey);
+                    break;
+                case TableViewSaveMode.LocalStorage:
+                    tableViewNotParsed = localStorage.getItem(tableViewSaveKey);
+                    break;
+                case TableViewSaveMode.DatabaseStorage:
+                    const postData = {
+                        tableViewSaveKey: tableViewSaveKey
+                    };
+                    return this.http.handleHttpPostRequest(recoverListEndpoint, postData);
+                default:
+                    this.notification.showToast("error", this.i18n.text("SAVE VIEW TYPE DOES NOT EXIST"), this.i18n.text("This type of save view does not exist."));
+            }
+        }
+        tableViewList = tableViewNotParsed ? JSON.parse(tableViewNotParsed) : [];
+        this.sortViews(tableViewList);
+        return tableViewList;
+    }
+    sortViews(tableSaveViewList) {
+        tableSaveViewList.sort((a, b) => a.viewAlias.toLowerCase().localeCompare(b.viewAlias.toLowerCase()));
+    }
+    updateViewsMenuItems(tableSaveViewList) {
+        return tableSaveViewList.map(item => ({
+            label: item.viewAlias,
+            lastActive: item.lastActive
+        }));
+    }
+    viewsSaveToDatabase(tableSaveViewList, setListEndpoint, tableViewSaveKey) {
+        const serializedSaveViews = tableSaveViewList.map(view => ({
+            viewAlias: view.viewAlias,
+            viewData: JSON.stringify(view.viewData),
+            lastActive: view.lastActive
+        }));
+        const postData = {
+            tableViewSaveKey: tableViewSaveKey,
+            views: serializedSaveViews
+        };
+        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);
+        const filtersWithoutGlobalAndSelectedRows = { ...modifyFiltersFn(JSON.parse(JSON.stringify(dt.filters))) };
+        if (filtersWithoutGlobalAndSelectedRows['rowID']) {
+            filtersWithoutGlobalAndSelectedRows['rowID'][0].value = null;
+        }
+        if (filtersWithoutGlobalAndSelectedRows['selector']) {
+            filtersWithoutGlobalAndSelectedRows['selector'][0].value = null;
+        }
+        const tableView = {
+            columnsShown: [...dt.columns],
+            multiSortMeta: dt.multiSortMeta,
+            filters: { ...filtersWithoutGlobalAndSelectedRows },
+            globalSearchText: globalSearchText,
+            currentPage: currentPage,
+            currentRowsPerPage: currentRowsPerPage,
+            tableWidth: tableWidth,
+            columnsWidth: colsWidth
+        };
+        return tableView;
+    }
+    computeColumnWidths(dt) {
+        let widths = [];
+        const headers = dt.el.nativeElement.querySelectorAll('.p-datatable-thead > tr > th');
+        headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header)));
+        return widths.join(',');
+    }
+    computeTableWidth(dt) {
+        let tableWidth = 0;
+        if (dt.columnResizeMode === 'expand') {
+            tableWidth = DomHandler.getOuterWidth(dt.tableViewChild?.nativeElement);
+        }
+        return tableWidth;
+    }
+}
+ECSPrimengTableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ECSPrimengTableService, deps: [{ token: ECSPrimengTableHttpService }, { token: ECSPrimengTableNotificationService }], target: i0.ɵɵFactoryTarget.Injectable });
+ECSPrimengTableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ECSPrimengTableService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ECSPrimengTableService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: ECSPrimengTableHttpService }, { type: ECSPrimengTableNotificationService }]; } });
+
+class TablePredefinedFilters {
+    constructor(sanitizer, tableService) {
+        this.sanitizer = sanitizer;
+        this.tableService = tableService;
+        this.selectable = false;
+    }
+    /**
+     * Converts a blob from the database to a safe URL that can be used to display an image.
+     *
+     * This function takes a `Blob` object, converts it to a base64 encoded string, and returns a `SafeUrl`
+     * that can be used in an HTML template to display the image securely. The `SafeUrl` ensures that
+     * Angular's security mechanisms are bypassed correctly, preventing potential security risks.
+     *
+     * @param {Blob} blob - The blob object representing the image data from the database.
+     * @returns {SafeUrl} A safe URL that can be used to display the image in an HTML template.
+     *
+     * @example
+     * // Example usage in a component
+     * const imageBlob = new Blob([binaryData], { type: 'image/jpeg' });
+     * const imageUrl = this.getBlobIconAsUrl(imageBlob);
+     *
+     * // In your HTML template
+     * <img [src]="imageUrl" alt="Image">
+     */
+    getBlobIconAsUrl(blob) {
+        let objectURL = `data:image/jpeg;base64,${blob}`; // Create a base64 encoded string from the blob data
+        return this.sanitizer.bypassSecurityTrustUrl(objectURL); // Bypass Angular's security mechanisms to create a SafeUrl
+    }
+    handleClick() {
+        if (this.option.action) {
+            this.tableService.handlePredefinedFilterClick(this.option.action, this.rowData, this.option);
+        }
+    }
+    getTagStyle(option) {
+        return {
+            ...option.tagStyle,
+            'vertical-align': 'middle',
+            'gap': 0
+        };
+    }
+    getImageSkeletonStyle(width, height, isSkeleton = false) {
+        const finalHeight = height && height > 0 ? `${height}px` : '22px'; // Compute final height; use default if invalid
+        let finalWidth;
+        if (width && width > 0) { // If width is valid, use it
+            finalWidth = `${width}px`;
+        }
+        else if (isSkeleton) { // If it's a skeleton and width is not provided, mirror the height
+            finalWidth = finalHeight;
+        }
+        const style = {
+            'vertical-align': 'middle',
+            'height': finalHeight
+        };
+        if (finalWidth) { // Add width if available
+            style['width'] = finalWidth;
+        }
+        return style;
+    }
+    highlightText(cellValue, colMetadata, globalSearchText) {
+        return highlightText(cellValue, colMetadata, globalSearchText ?? null, this.sanitizer);
+    }
+}
+TablePredefinedFilters.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TablePredefinedFilters, deps: [{ token: i1.DomSanitizer }, { token: ECSPrimengTableService }], target: i0.ɵɵFactoryTarget.Component });
+TablePredefinedFilters.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TablePredefinedFilters, isStandalone: true, selector: "ecs-table-predefined-filters", inputs: { option: "option", col: "col", selectable: "selectable", rowData: "rowData", globalSearchText: "globalSearchText" }, ngImport: i0, template: "<div style=\"display: flex; align-items: center; gap: 0.5rem;\"\r\n    [style.cursor]=\"(selectable && option?.action) ? 'pointer' : 'default'\"\r\n    [attr.role]=\"selectable && option?.action ? 'button' : null\"\r\n    (click)=\"handleClick(); selectable && option?.action && $event.stopPropagation();\">\r\n  <ng-container *ngIf=\"option?.icon\">\r\n    <i [class]=\"option.icon\" [style]=\"'vertical-align: middle; color: '+(option.iconColor || '') +';' +(option.iconStyle || '')\"></i>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!option?.imageBlob && option?.imageBlobSourceEndpoint\"> <!-- If a blob image needs to be loaded from endpoint, while it's still loading, show skeleton -->\r\n    <p-skeleton [style]=\"getImageSkeletonStyle(option.imageWidth, option.imageHeight, true)\"></p-skeleton>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"option?.imageBlob\">\r\n    <img alt=\"image\" [src]=\"getBlobIconAsUrl(option.imageBlob)\" [style]=\"getImageSkeletonStyle(option.imageWidth, option.imageHeight)\"/>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"option?.imageURL\">\r\n    <img alt=\"iconFromURL\" [src]=\"option.imageURL\" [style]=\"getImageSkeletonStyle(option.imageWidth, option.imageHeight)\"/>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"option?.displayTag === true\">\r\n    <p-tag [innerHtml]=\"highlightText(option.name, col, globalSearchText)\" [style]=\"getTagStyle(option)\" [value]=\"option.name\"></p-tag>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"option?.displayName === true\">\r\n    <span style=\"gap: 0;\" [innerHtml]=\"highlightText(option.name, col, globalSearchText)\"  [ngStyle]=\"option.nameStyle || {}\">{{ option.name }}</span>\r\n  </ng-container>\r\n</div>", dependencies: [{ kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4.Tag, selector: "p-tag", inputs: ["styleClass", "style", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TablePredefinedFilters, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecs-table-predefined-filters', imports: [
+                        SkeletonModule,
+                        TagModule,
+                        CommonModule
+                    ], standalone: true, template: "<div style=\"display: flex; align-items: center; gap: 0.5rem;\"\r\n    [style.cursor]=\"(selectable && option?.action) ? 'pointer' : 'default'\"\r\n    [attr.role]=\"selectable && option?.action ? 'button' : null\"\r\n    (click)=\"handleClick(); selectable && option?.action && $event.stopPropagation();\">\r\n  <ng-container *ngIf=\"option?.icon\">\r\n    <i [class]=\"option.icon\" [style]=\"'vertical-align: middle; color: '+(option.iconColor || '') +';' +(option.iconStyle || '')\"></i>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!option?.imageBlob && option?.imageBlobSourceEndpoint\"> <!-- If a blob image needs to be loaded from endpoint, while it's still loading, show skeleton -->\r\n    <p-skeleton [style]=\"getImageSkeletonStyle(option.imageWidth, option.imageHeight, true)\"></p-skeleton>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"option?.imageBlob\">\r\n    <img alt=\"image\" [src]=\"getBlobIconAsUrl(option.imageBlob)\" [style]=\"getImageSkeletonStyle(option.imageWidth, option.imageHeight)\"/>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"option?.imageURL\">\r\n    <img alt=\"iconFromURL\" [src]=\"option.imageURL\" [style]=\"getImageSkeletonStyle(option.imageWidth, option.imageHeight)\"/>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"option?.displayTag === true\">\r\n    <p-tag [innerHtml]=\"highlightText(option.name, col, globalSearchText)\" [style]=\"getTagStyle(option)\" [value]=\"option.name\"></p-tag>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"option?.displayName === true\">\r\n    <span style=\"gap: 0;\" [innerHtml]=\"highlightText(option.name, col, globalSearchText)\"  [ngStyle]=\"option.nameStyle || {}\">{{ option.name }}</span>\r\n  </ng-container>\r\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: ECSPrimengTableService }]; }, propDecorators: { option: [{
+                type: Input
+            }], col: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], rowData: [{
+                type: Input
+            }], globalSearchText: [{
+                type: Input
+            }] } });
+
+class TableCell {
+    constructor(datePipe, sanitizer) {
+        this.datePipe = datePipe;
+        this.sanitizer = sanitizer;
+        this.globalSearchText = null;
+        this.predefinedFiltersCollection = {}; // Contains a collection of the values that need to be shown for predefined column filters
+        this.dateFormat = "dd-MMM-yyyy HH:mm:ss zzzz";
+        this.dateTimezone = "+00:00";
+        this.dateCulture = "en-US";
+        this.DataType = DataType;
+        this.CellDisplay = CellDisplay;
+    }
+    /** Only finite numbers are valid; do not turn empty strings or booleans into progress. */
+    get hasProgressValue() {
+        return typeof this.value === 'number' && Number.isFinite(this.value);
+    }
+    get progressValue() {
+        return Math.min(100, Math.max(0, this.value));
+    }
+    get progressTooltip() {
+        return this.col.dataTooltipCustomColumnSource ? this.tooltipText : `${this.value} %`;
+    }
+    get value() {
+        return this.rowData[this.col.field];
+    }
+    get tooltipText() {
+        if (this.col.dataTooltipCustomColumnSource && this.col.dataTooltipCustomColumnSource.length > 0) {
+            return this.rowData[this.col.dataTooltipCustomColumnSource];
+        }
+        return this.value;
+    }
+    getListValues(col, rowData) {
+        const value = rowData[col.field];
+        return value ? value.split(';').map((v) => v.trim()) : [];
+    }
+    /** List tooltips use the same semicolon-separated positions as the displayed list. */
+    getListTooltip(item, index) {
+        const source = this.col.dataTooltipCustomColumnSource;
+        const tooltips = source ? this.rowData[source] : null;
+        if (typeof tooltips !== 'string')
+            return item;
+        // Preserve empty entries so subsequent tooltips never move to another item.
+        return tooltips.split(';')[index]?.trim() ?? item;
+    }
+    getDataAlignHorizontalAsText(dataAlignHorizontal) {
+        dataAlignHorizontalAsText(dataAlignHorizontal);
+    }
+    getDataAlignVerticalAsText(dataAlignVertical) {
+        dataAlignVerticalAsText(dataAlignVertical);
+    }
+    /**
+     * Formats a date value using either column-level overrides or global settings.
+     * The incoming value is assumed to represent a UTC date.
+     *
+     * @param {any} value - The date value to be formatted.
+     * @param {string | null} dateFormat - Optional column-level override for the date format.
+     * @param {string | null} dateTimezone - Optional column-level override for the timezone used in formatting.
+     * @param {string | null} dateCulture - Optional column-level override for the culture used in formatting.
+     *
+     * @returns {string} - The formatted date string using the effective (column or global) settings,
+     *                     or an empty string if the value is invalid or undefined.
+     *
+     * @example
+     * // Example using only global settings:
+     * const result = formatDate(dateValue, null, null, null);
+     *
+     * @example
+     * // Example using column-level overrides:
+     * const result = formatDate(dateValue, 'dd/MM/yyyy', 'UTC', 'en-GB');
+     */
+    formatDate(value, dateFormat, dateTimezone, dateCulture) {
+        if (!value) { // If no value, return empty
+            return '';
+        }
+        let formattedDate = undefined; // By default, formattedDate will be undefined
+        const effectiveFormat = dateFormat ?? this.dateFormat;
+        const effectiveTimezone = dateTimezone ?? this.dateTimezone;
+        const effectiveCulture = dateCulture ?? this.dateCulture;
+        if (value) { // If value is not undefined
+            let dateToParse = value;
+            if (typeof value === 'string' && !value.endsWith('Z') && !/[+-]\d{2}:\d{2}$/.test(value)) { // Check if the date does not contain Z
+                dateToParse += 'Z';
+            }
+            const dateUtc = new Date(dateToParse);
+            if (!isNaN(dateUtc.getTime())) { // Check that the date is valid before performing transformation
+                formattedDate = this.datePipe.transform(dateUtc, effectiveFormat, effectiveTimezone, effectiveCulture); // Perform the date masking
+            }
+        }
+        return formattedDate ?? ''; // Returns the date formatted, or as empty string if an issue was found (or value was undefined).
+    }
+    getPredefinedFilterTooltip(colMetadata, value) {
+        if (colMetadata.dataType == DataType.List) {
+            return value;
+        }
+        if (colMetadata.filterPredefinedValuesName && colMetadata.filterPredefinedValuesName.length > 0) {
+            const options = this.getPredefinedFilterValues(colMetadata.filterPredefinedValuesName);
+            return options.find(x => x.value == value)?.name;
+        }
+        return null;
+    }
+    /**
+     * Checks if the provided column metadata matches a specific style of the predefined filters
+     * that need to be applied to an item on a row.
+     *
+     * @param {IprimengColumnsMetadata} colMetadata - The metadata of the column being checked.
+     * @param {any} value - The value to be matched against the predefined filter values.
+     * @returns {any} The matching predefined filter value if found, otherwise null.
+     */
+    getPredfinedFilterMatch(colMetadata, value) {
+        if (colMetadata.filterPredefinedValuesName && colMetadata.filterPredefinedValuesName.length > 0) { // Check if the column uses predefined filter values
+            const options = this.getPredefinedFilterValues(colMetadata.filterPredefinedValuesName); // Get the predefined filter values based on the name
+            return options.find(option => option.value === value); // Return the matching option if found
+        }
+        return null; // Return null if the column does not use predefined filter values
+    }
+    getPredefinedFilterValues(columnKeyName) {
+        return this.predefinedFiltersCollection?.[columnKeyName] || []; // Return the predefined filter values or an empty array if the option name does not exist
+    }
+    highlightText(cellValue, colMetadata, globalSearchText) {
+        return highlightText(cellValue, colMetadata, globalSearchText, this.sanitizer);
+    }
+    ecsTrack6(index, item) { return index; }
+    ecsTrack7(index, item) { return index; }
+}
+TableCell.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableCell, deps: [{ token: i1$1.DatePipe }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+TableCell.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TableCell, isStandalone: true, selector: "ecs-table-cell", inputs: { col: "col", rowData: "rowData", globalSearchText: "globalSearchText", predefinedFiltersCollection: "predefinedFiltersCollection", dateFormat: "dateFormat", dateTimezone: "dateTimezone", dateCulture: "dateCulture" }, ngImport: i0, template: "<ng-container *ngIf=\"value !== null && value !== undefined\">\r\n  <ng-container *ngIf=\"col.dataType === DataType.Numeric && col.cellDisplay === CellDisplay.ProgressBar; else ecsElse6\">\r\n    <ng-container *ngIf=\"hasProgressValue\">\r\n      <div class=\"ecs-progress-cell\"\r\n        [pTooltip]=\"progressTooltip\"\r\n        [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n        [showDelay]=\"200\" tooltipPosition=\"top\">\r\n        <div class=\"ecs-progress-bar\" role=\"progressbar\"\r\n          [attr.aria-label]=\"col.header\"\r\n          aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n          [attr.aria-valuenow]=\"progressValue\"\r\n          [attr.aria-valuetext]=\"value + ' %'\">\r\n          <div class=\"ecs-progress-bar-fill\" [style.width.%]=\"progressValue\"></div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container><ng-template #ecsElse6><ng-container *ngIf=\"col.filterPredefinedValuesName && col.filterPredefinedValuesName.length > 0; else ecsElse7\">\r\n    <div [ngStyle]=\"{\r\n            'justify-content': getDataAlignHorizontalAsText(col.dataAlignHorizontal),\r\n            'align-items': getDataAlignVerticalAsText(col.dataAlignVertical)\r\n        }\">\r\n      <ng-container *ngIf=\"col.dataType === DataType.List; else ecsElse8\">\r\n        <ng-container *ngFor=\"let item of getListValues(col, rowData); trackBy: ecsTrack6; let $index = index; let $first = first; let $last = last; let $even = even; let $odd = odd; let $count = count\">\r\n          <ng-container *ngIf=\"getPredfinedFilterMatch(col, item) as option\">\r\n            <div style=\"display: inline-block; margin-right: 0.5rem;\"\r\n                [pTooltip]=\"getListTooltip(item, $index)\"\r\n              [escape]=\"false\"\r\n                [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n                [showDelay]=\"700\"\r\n                tooltipPosition=\"top\">\r\n                <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\" [selectable]=\"true\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\"></ecs-table-predefined-filters>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container><ng-template #ecsElse8>\r\n        <ng-container *ngIf=\"getPredfinedFilterMatch(col, value) as option\">\r\n          <div style=\"display: inline-block;\"\r\n            [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n              ? rowData[col.dataTooltipCustomColumnSource] \r\n              : value\"\r\n            [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n            [showDelay]=\"700\"\r\n            tooltipPosition=\"top\">\r\n            <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\" [selectable]=\"true\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\"></ecs-table-predefined-filters>\r\n          </div>\r\n        </ng-container>\r\n      </ng-template>\r\n    </div>\r\n  </ng-container><ng-template #ecsElse7>\r\n    <ng-container [ngSwitch]=\"col.dataType\"><ng-container *ngSwitchCase=\"DataType.List\">\r\n        <ng-container *ngFor=\"let item of getListValues(col, rowData); trackBy: ecsTrack7; let $index = index; let $first = first; let $last = last; let $even = even; let $odd = odd; let $count = count\">\r\n          <span [innerHtml]=\"highlightText(item, col, globalSearchText)\"\r\n            [pTooltip]=\"getListTooltip(item, $index)\"\r\n            [escape]=\"false\"\r\n            [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n            [showDelay]=\"700\"\r\n            tooltipPosition=\"top\"></span><ng-container *ngIf=\"!$last\"><span>;</span></ng-container>\r\n        </ng-container>\r\n      </ng-container><ng-container *ngSwitchCase=\"DataType.Boolean\">\r\n        <i class=\"pi\"\r\n          [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n            ? rowData[col.dataTooltipCustomColumnSource] \r\n            : value\"\r\n          [tooltipDisabled]=\"!col.dataTooltipShow || !col.dataTooltipCustomColumnSource || col.dataTooltipCustomColumnSource.length === 0\"\r\n          [showDelay]=\"700\"\r\n          tooltipPosition=\"top\"\r\n          [style.color]=\"value ? 'green' : 'red'\"\r\n          [ngClass]=\"{ 'pi-check-circle': value, 'pi-times-circle': !value }\">\r\n        </i>\r\n      </ng-container><ng-container *ngSwitchCase=\"DataType.Date\">\r\n        <div \r\n          [innerHtml]=\"highlightText(formatDate(value, col.dateFormat, col.dateTimezone, col.dateCulture), col, globalSearchText)\"\r\n          [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n            ? rowData[col.dataTooltipCustomColumnSource] \r\n            : formatDate(value, col.dateFormat, col.dateTimezone, col.dateCulture)\"\r\n          [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n          [showDelay]=\"700\"\r\n          tooltipPosition=\"top\">\r\n          {{ formatDate(value, col.dateFormat, col.dateTimezone, col.dateCulture) }}\r\n        </div>\r\n      </ng-container><ng-container *ngSwitchDefault>\r\n        <div\r\n          [innerHtml]=\"highlightText(value, col, globalSearchText)\"\r\n          [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n            ? rowData[col.dataTooltipCustomColumnSource] \r\n            : value\"\r\n          [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n          [showDelay]=\"700\"\r\n          tooltipPosition=\"top\">\r\n          {{ value }}\r\n        </div>\r\n      </ng-container></ng-container>\r\n  </ng-template></ng-template>\r\n</ng-container>\r\n", styles: [":host:has(.ecs-progress-bar){display:block;min-width:0}.ecs-progress-cell{padding-block:.5rem;margin-block:-.5rem}.ecs-progress-bar{width:100%;height:.875rem;overflow:hidden;border:1px solid var(--p-content-border-color, var(--surface-border, #d1d5db));border-radius:999px;background:var(--p-content-background, var(--surface-card, #f8fafc))}.ecs-progress-bar-fill{height:100%;background:var(--p-progressbar-value-background, var(--primary-color, #ffb547))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: TablePredefinedFilters, selector: "ecs-table-predefined-filters", inputs: ["option", "col", "selectable", "rowData", "globalSearchText"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableCell, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecs-table-cell', imports: [
+                        CommonModule,
+                        TooltipModule,
+                        TablePredefinedFilters
+                    ], standalone: true, template: "<ng-container *ngIf=\"value !== null && value !== undefined\">\r\n  <ng-container *ngIf=\"col.dataType === DataType.Numeric && col.cellDisplay === CellDisplay.ProgressBar; else ecsElse6\">\r\n    <ng-container *ngIf=\"hasProgressValue\">\r\n      <div class=\"ecs-progress-cell\"\r\n        [pTooltip]=\"progressTooltip\"\r\n        [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n        [showDelay]=\"200\" tooltipPosition=\"top\">\r\n        <div class=\"ecs-progress-bar\" role=\"progressbar\"\r\n          [attr.aria-label]=\"col.header\"\r\n          aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n          [attr.aria-valuenow]=\"progressValue\"\r\n          [attr.aria-valuetext]=\"value + ' %'\">\r\n          <div class=\"ecs-progress-bar-fill\" [style.width.%]=\"progressValue\"></div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container><ng-template #ecsElse6><ng-container *ngIf=\"col.filterPredefinedValuesName && col.filterPredefinedValuesName.length > 0; else ecsElse7\">\r\n    <div [ngStyle]=\"{\r\n            'justify-content': getDataAlignHorizontalAsText(col.dataAlignHorizontal),\r\n            'align-items': getDataAlignVerticalAsText(col.dataAlignVertical)\r\n        }\">\r\n      <ng-container *ngIf=\"col.dataType === DataType.List; else ecsElse8\">\r\n        <ng-container *ngFor=\"let item of getListValues(col, rowData); trackBy: ecsTrack6; let $index = index; let $first = first; let $last = last; let $even = even; let $odd = odd; let $count = count\">\r\n          <ng-container *ngIf=\"getPredfinedFilterMatch(col, item) as option\">\r\n            <div style=\"display: inline-block; margin-right: 0.5rem;\"\r\n                [pTooltip]=\"getListTooltip(item, $index)\"\r\n              [escape]=\"false\"\r\n                [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n                [showDelay]=\"700\"\r\n                tooltipPosition=\"top\">\r\n                <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\" [selectable]=\"true\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\"></ecs-table-predefined-filters>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container><ng-template #ecsElse8>\r\n        <ng-container *ngIf=\"getPredfinedFilterMatch(col, value) as option\">\r\n          <div style=\"display: inline-block;\"\r\n            [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n              ? rowData[col.dataTooltipCustomColumnSource] \r\n              : value\"\r\n            [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n            [showDelay]=\"700\"\r\n            tooltipPosition=\"top\">\r\n            <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\" [selectable]=\"true\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\"></ecs-table-predefined-filters>\r\n          </div>\r\n        </ng-container>\r\n      </ng-template>\r\n    </div>\r\n  </ng-container><ng-template #ecsElse7>\r\n    <ng-container [ngSwitch]=\"col.dataType\"><ng-container *ngSwitchCase=\"DataType.List\">\r\n        <ng-container *ngFor=\"let item of getListValues(col, rowData); trackBy: ecsTrack7; let $index = index; let $first = first; let $last = last; let $even = even; let $odd = odd; let $count = count\">\r\n          <span [innerHtml]=\"highlightText(item, col, globalSearchText)\"\r\n            [pTooltip]=\"getListTooltip(item, $index)\"\r\n            [escape]=\"false\"\r\n            [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n            [showDelay]=\"700\"\r\n            tooltipPosition=\"top\"></span><ng-container *ngIf=\"!$last\"><span>;</span></ng-container>\r\n        </ng-container>\r\n      </ng-container><ng-container *ngSwitchCase=\"DataType.Boolean\">\r\n        <i class=\"pi\"\r\n          [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n            ? rowData[col.dataTooltipCustomColumnSource] \r\n            : value\"\r\n          [tooltipDisabled]=\"!col.dataTooltipShow || !col.dataTooltipCustomColumnSource || col.dataTooltipCustomColumnSource.length === 0\"\r\n          [showDelay]=\"700\"\r\n          tooltipPosition=\"top\"\r\n          [style.color]=\"value ? 'green' : 'red'\"\r\n          [ngClass]=\"{ 'pi-check-circle': value, 'pi-times-circle': !value }\">\r\n        </i>\r\n      </ng-container><ng-container *ngSwitchCase=\"DataType.Date\">\r\n        <div \r\n          [innerHtml]=\"highlightText(formatDate(value, col.dateFormat, col.dateTimezone, col.dateCulture), col, globalSearchText)\"\r\n          [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n            ? rowData[col.dataTooltipCustomColumnSource] \r\n            : formatDate(value, col.dateFormat, col.dateTimezone, col.dateCulture)\"\r\n          [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n          [showDelay]=\"700\"\r\n          tooltipPosition=\"top\">\r\n          {{ formatDate(value, col.dateFormat, col.dateTimezone, col.dateCulture) }}\r\n        </div>\r\n      </ng-container><ng-container *ngSwitchDefault>\r\n        <div\r\n          [innerHtml]=\"highlightText(value, col, globalSearchText)\"\r\n          [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n            ? rowData[col.dataTooltipCustomColumnSource] \r\n            : value\"\r\n          [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n          [showDelay]=\"700\"\r\n          tooltipPosition=\"top\">\r\n          {{ value }}\r\n        </div>\r\n      </ng-container></ng-container>\r\n  </ng-template></ng-template>\r\n</ng-container>\r\n", styles: [":host:has(.ecs-progress-bar){display:block;min-width:0}.ecs-progress-cell{padding-block:.5rem;margin-block:-.5rem}.ecs-progress-bar{width:100%;height:.875rem;overflow:hidden;border:1px solid var(--p-content-border-color, var(--surface-border, #d1d5db));border-radius:999px;background:var(--p-content-background, var(--surface-card, #f8fafc))}.ecs-progress-bar-fill{height:100%;background:var(--p-progressbar-value-background, var(--primary-color, #ffb547))}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.DatePipe }, { type: i1.DomSanitizer }]; }, propDecorators: { col: [{
+                type: Input
+            }], rowData: [{
+                type: Input
+            }], globalSearchText: [{
+                type: Input
+            }], predefinedFiltersCollection: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }], dateTimezone: [{
+                type: Input
+            }], dateCulture: [{
+                type: Input
+            }] } });
+
+class TableButton {
+    constructor(tableService) {
+        this.tableService = tableService;
+        this.isActionButton = false;
+        this.isLastActionButton = false;
+    }
+    handleClick(event) {
+        if (this.button?.action || this.overrideAction) { // If there is an action or an override, execute logic
+            if (this.overrideAction) { // If overrideAction exists, execute it first
+                this.overrideAction(event); // Call override action
+            }
+            else { // Otherwise execute the normal button action through the service
+                this.tableService.handleButtonsClick(this.button.action, this.rowData);
+            }
+        }
+    }
+    getButtonStyle(button, isActionButton, isLastActionButton) {
+        const styles = {};
+        if (button.style) { // Add inline styles from button.style
+            button.style.split(';').forEach(part => {
+                const [prop, value] = part.split(':').map(x => x.trim());
+                if (prop && value)
+                    styles[prop] = value;
+            });
+        }
+        if (isActionButton && !isLastActionButton) { // Add margin-right for action buttons
+            styles['margin-right'] = '10px';
+        }
+        return styles;
+    }
+}
+TableButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableButton, deps: [{ token: ECSPrimengTableService }], target: i0.ɵɵFactoryTarget.Component });
+TableButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TableButton, isStandalone: true, selector: "ecs-table-button", inputs: { button: "button", rowData: "rowData", isActionButton: "isActionButton", isLastActionButton: "isLastActionButton", overrideAction: "overrideAction" }, ngImport: i0, template: "<ng-container *ngIf=\"button.visibleCondition?.(rowData) ?? true\"> <!--If 'visibleCondition' is true or not defined-->\r\n  <ng-container *ngIf=\"(button.enabledCondition?.(rowData) ?? true) || !button.conditionFailHide\"> <!--Render button if 'enabledCondition' is true or undefined, OR if 'conditionFailHide' is false-->\r\n    <p-button\r\n      [ariaLabel]=\"(button.label || button.tooltip || '') | ecsTranslate\"\r\n      [disabled]=\"!(button.enabledCondition?.(rowData) ?? true)\"\r\n      [iconPos]=\"button.iconPos || 'left'\"\r\n      [pTooltip]=\"(button.tooltip || '') | ecsTranslate\"\r\n      [tooltipDisabled]=\"!button.tooltip || button.tooltip.length === 0\"\r\n      [showDelay]=\"700\"\r\n      tooltipPosition=\"top\"\r\n      [styleClass]=\"\r\n        (isActionButton ? ' custom-small-btn' : '') +\r\n        (button.rounded ? ' p-button-rounded' : '') +\r\n        (button.raised ? ' p-button-raised' : '') +\r\n        (button.variant === 'text' ? ' p-button-text' : '') +\r\n        (button.variant === 'outlined' ? ' p-button-outlined' : '') +\r\n        (button.class ? ' ' + button.class : '')\r\n      \"\r\n      [icon]=\"button.icon || ''\"\r\n      [label]=\"(button.label || '') | ecsTranslate\"\r\n      [ngStyle]=\"getButtonStyle(button, isActionButton, isLastActionButton)\"\r\n      (onClick)=\"handleClick($event)\"></p-button>\r\n  </ng-container>\r\n</ng-container>", styles: [":host ::ng-deep .custom-small-btn.p-button{height:28px!important;line-height:28px;padding-top:0;padding-bottom:0}\n"], dependencies: [{ kind: "pipe", type: ECSTableTranslatePipe, name: "ecsTranslate" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecs-table-button', imports: [
+                        ECSTableTranslatePipe,
+                        CommonModule,
+                        ButtonModule,
+                        TooltipModule
+                    ], standalone: true, template: "<ng-container *ngIf=\"button.visibleCondition?.(rowData) ?? true\"> <!--If 'visibleCondition' is true or not defined-->\r\n  <ng-container *ngIf=\"(button.enabledCondition?.(rowData) ?? true) || !button.conditionFailHide\"> <!--Render button if 'enabledCondition' is true or undefined, OR if 'conditionFailHide' is false-->\r\n    <p-button\r\n      [ariaLabel]=\"(button.label || button.tooltip || '') | ecsTranslate\"\r\n      [disabled]=\"!(button.enabledCondition?.(rowData) ?? true)\"\r\n      [iconPos]=\"button.iconPos || 'left'\"\r\n      [pTooltip]=\"(button.tooltip || '') | ecsTranslate\"\r\n      [tooltipDisabled]=\"!button.tooltip || button.tooltip.length === 0\"\r\n      [showDelay]=\"700\"\r\n      tooltipPosition=\"top\"\r\n      [styleClass]=\"\r\n        (isActionButton ? ' custom-small-btn' : '') +\r\n        (button.rounded ? ' p-button-rounded' : '') +\r\n        (button.raised ? ' p-button-raised' : '') +\r\n        (button.variant === 'text' ? ' p-button-text' : '') +\r\n        (button.variant === 'outlined' ? ' p-button-outlined' : '') +\r\n        (button.class ? ' ' + button.class : '')\r\n      \"\r\n      [icon]=\"button.icon || ''\"\r\n      [label]=\"(button.label || '') | ecsTranslate\"\r\n      [ngStyle]=\"getButtonStyle(button, isActionButton, isLastActionButton)\"\r\n      (onClick)=\"handleClick($event)\"></p-button>\r\n  </ng-container>\r\n</ng-container>", styles: [":host ::ng-deep .custom-small-btn.p-button{height:28px!important;line-height:28px;padding-top:0;padding-bottom:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: ECSPrimengTableService }]; }, propDecorators: { button: [{
+                type: Input
+            }], rowData: [{
+                type: Input
+            }], isActionButton: [{
+                type: Input
+            }], isLastActionButton: [{
+                type: Input
+            }], overrideAction: [{
+                type: Input
+            }] } });
+
+class ColumnSelector {
+    constructor(translate, changeDetector) {
+        this.translate = translate;
+        this.destroy$ = new Subject();
+        this.orderByHeader = false;
+        this.visible = false;
+        this.columnModalData = [];
+        this.filteredColumnData = [];
+        this.visibleChange = new EventEmitter();
+        this.applyChanges = new EventEmitter();
+        this.cellOverflowBehaviourOptions = [
+            { icon: 'pi pi-minus', val: CellOverflowBehaviour.Hidden, name: "Hidden" },
+            { icon: 'pi pi-equals', val: CellOverflowBehaviour.Wrap, name: "Wrap" } /*,
+            {icon: 'pi pi-ellipsis-h', val: CellOverflowBehaviour.Ellipsis, name: "Ellipsis"}*/
+        ];
+        this.dataAlignHorizontalOptions = [
+            { icon: 'pi pi-align-left', val: DataAlignHorizontal.Left, name: "Left" },
+            { icon: 'pi pi-align-center', val: DataAlignHorizontal.Center, name: "Center" },
+            { icon: 'pi pi-align-right', val: DataAlignHorizontal.Right, name: "Right" }
+        ];
+        this.dataAlignVerticalOptions = [
+            { icon: 'pi pi-angle-up', val: DataAlignVertical.Top, name: "Top" },
+            { icon: 'pi pi-align-justify', val: DataAlignVertical.Middle, name: "Middle" },
+            { icon: 'pi pi-angle-down', val: DataAlignVertical.Bottom, name: "Bottom" }
+        ];
+        this.globalSearchText = null; // The text used by the global search
+        this.globalSearchMaxLength = 50;
+        merge(translate.onLangChange, translate.onTranslationChange, translate.onDefaultLangChange)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.updateVisibleColumns();
+            changeDetector.markForCheck();
+        });
+    }
+    ngOnChanges() {
+        if (!this.visible)
+            this.globalSearchText = null;
+        this.updateVisibleColumns();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    updateVisibleColumns() {
+        const search = (this.globalSearchText ?? '').toLocaleLowerCase();
+        const label = (column) => column.header ? this.translate.instant(column.header) : '';
+        this.filteredColumnData = this.columnModalData.filter(column => label(column).toLocaleLowerCase().includes(search));
+        if (this.orderByHeader) {
+            this.filteredColumnData.sort((a, b) => label(a).localeCompare(label(b)));
+        }
+    }
+    translatedOptions(options) {
+        return options.map(option => ({ ...option, name: this.translate.instant(option.name) }));
+    }
+    allColumnsCheckboxActive() {
+        return this.columnModalData.every(column => column.selected);
+    }
+    allColumnsCheckboxClick(event) {
+        if (event.checked) {
+            this.columnModalData.forEach(column => { column.selected = true; });
+        }
+        else {
+            this.columnModalData.forEach(column => {
+                if (!column.selectDisabled) {
+                    column.selected = false;
+                }
+            });
+        }
+    }
+    filterColumnModal(event) {
+        this.globalSearchText = event.target.value;
+        this.updateVisibleColumns();
+    }
+    applyColumnModalChanges() {
+        const selected = this.columnModalData.filter(c => c.selected && !c.selectDisabled);
+        this.applyChanges.emit(selected);
+        this.closeModal();
+    }
+    clearGlobalFilter(dt) {
+        this.globalSearchText = null;
+        this.updateVisibleColumns();
+    }
+    closeModal() {
+        this.globalSearchText = null;
+        this.visibleChange.emit(false);
+    }
+}
+ColumnSelector.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ColumnSelector, deps: [{ token: i1$2.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ColumnSelector.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ColumnSelector, isStandalone: true, selector: "ecs-column-selector", inputs: { orderByHeader: "orderByHeader", visible: "visible", columnModalData: "columnModalData", filteredColumnData: "filteredColumnData" }, outputs: { visibleChange: "visibleChange", applyChanges: "applyChanges" }, viewQueries: [{ propertyName: "dt_columnDialog", first: true, predicate: ["dt_columnDialog"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!--COLUMN MODAL DIALOG-->\r\n<p-dialog [(visible)]=\"visible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [closeOnEscape]=\"false\" [closable]=\"false\" [maximizable]=\"false\" [style]=\"{'min-width': '65vw', 'max-width': '65vw'}\">\r\n    <ng-template pTemplate=\"header\">\r\n        <span class=\"white-space-nowrap\"><b>{{ 'MODIFY COLUMNS' | ecsTranslate }}</b></span>\r\n    </ng-template>\r\n    <div style=\"padding: 10px;\">\r\n        <p-table #dt_columnDialog [value]=\"filteredColumnData\" [scrollable]=\"true\" size=\"small\" showGridlines stripedRows\r\n            scrollHeight=\"calc(80vh - 220px)\">\r\n            <ng-template pTemplate=\"caption\">\r\n                <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                    <div style=\"display: flex; align-items: center; gap: 10px\">\r\n                        <p-checkbox inputId=\"selectAll\" [binary]=\"true\" [ngModel]=\"allColumnsCheckboxActive()\" (onChange)=\"allColumnsCheckboxClick($event)\"></p-checkbox>\r\n                        <label for=\"selectAll\">{{ 'Select all columns' | ecsTranslate }}</label>\r\n                    </div>\r\n                    <div style=\"display: flex; align-items: center;\">\r\n                        <span class=\"ecs-global-search\">\r\n                            <span class=\"ecs-input-icon\">\r\n                                <i class=\"pi pi-search\"></i>\r\n                            </span>\r\n                            <input pInputText type=\"text\" \r\n                                (input)=\"filterColumnModal($event)\" autocomplete=\"off\" \r\n                                [maxlength]=\"globalSearchMaxLength\" [placeholder]=\"'Search column name' | ecsTranslate\" [(ngModel)]=\"globalSearchText\"\r\n                                style=\"width: 220px;\"/>\r\n                            <!-- Right icon (only if there is text) -->\r\n                            <ng-container *ngIf=\"globalSearchText\">\r\n                                <span class=\"ecs-input-icon\" position=\"right\">\r\n                                    <i class=\"pi pi-times\" style=\"cursor: pointer;\" (click)=\"clearGlobalFilter(dt_columnDialog); $event.stopPropagation()\"></i>\r\n                                </span>\r\n                            </ng-container>\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"header\">\r\n                <tr>\r\n                    <th pFrozenColumn style=\"max-width: 100px; min-width: 100px; width: 100px; text-align: center;\">{{ 'Show column' | ecsTranslate }}</th>\r\n                    <th pFrozenColumn style=\"max-width: 250px; min-width: 250px; width: 250px; text-align: center;\">{{ 'Column name' | ecsTranslate }}</th>\r\n                    <th style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">{{ 'Cell overflow behaviour' | ecsTranslate }}</th>\r\n                    <th style=\"max-width: 160px; min-width: 160px; width: 160px; text-align: center;\">{{ 'Horizontal alignment' | ecsTranslate }}</th>\r\n                    <th style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">{{ 'Vertical alignment' | ecsTranslate }}</th>\r\n                </tr>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"body\" let-rowData>\r\n                <tr>\r\n                    <td pFrozenColumn style=\"max-width: 100px; min-width: 100px; width: 100px; text-align: center;\">\r\n                        <p-checkbox \r\n                            [(ngModel)]=\"rowData.selected\" \r\n                            [binary]=\"true\"\r\n                            [disabled]=\"rowData.selectDisabled\"></p-checkbox>\r\n                    </td>\r\n                    <td pFrozenColumn style=\"max-width: 250px; min-width: 250px; width: 250px;\">{{rowData.header | translate}}</td>\r\n                    <td style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">\r\n                        <p-selectButton [(ngModel)]=\"rowData.cellOverflowBehaviour\" [options]=\"translatedOptions(cellOverflowBehaviourOptions)\" optionValue=\"val\" optionLabel=\"name\" [disabled]=\"rowData.cellOverflowBehaviourDisabled\" allowEmpty=\"false\">\r\n                            <ng-template pTemplate=\"item\" let-item>\r\n                                <i [class]=\"item.icon\" style=\"margin: -20px;\" [pTooltip]=\"(item.name) | ecsTranslate\" [showDelay]=\"400\" tooltipPosition=\"top\"></i>\r\n                            </ng-template>\r\n                        </p-selectButton>\r\n                    </td>\r\n                    <td style=\"max-width: 160px; min-width: 160px; width: 160px; text-align: center;\">\r\n                        <p-selectButton [(ngModel)]=\"rowData.dataAlignHorizontal\" [options]=\"translatedOptions(dataAlignHorizontalOptions)\" optionValue=\"val\" optionLabel=\"name\" [disabled]=\"rowData.dataAlignHorizontalDisabled\" allowEmpty=\"false\">\r\n                            <ng-template pTemplate=\"item\" let-item>\r\n                                <i [class]=\"item.icon\" style=\"margin: -20px;\" [pTooltip]=\"(item.name) | ecsTranslate\" [showDelay]=\"400\" tooltipPosition=\"top\"></i>\r\n                            </ng-template>\r\n                        </p-selectButton>\r\n                    </td>\r\n                    <td style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">\r\n                        <p-selectButton [(ngModel)]=\"rowData.dataAlignVertical\" [options]=\"translatedOptions(dataAlignVerticalOptions)\" optionValue=\"val\" optionLabel=\"name\" [disabled]=\"rowData.dataAlignVerticalDisabled\" allowEmpty=\"false\">\r\n                            <ng-template pTemplate=\"item\" let-item>\r\n                                <i [class]=\"item.icon\" style=\"margin: -20px;\" [pTooltip]=\"(item.name) | ecsTranslate\" [showDelay]=\"400\" tooltipPosition=\"top\"></i>\r\n                            </ng-template>\r\n                        </p-selectButton>\r\n                    </td>\r\n                </tr>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"emptymessage\">\r\n                <tr>\r\n                    <td colspan=\"999\">{{ 'There are no columns' | ecsTranslate }}</td>\r\n                </tr>\r\n            </ng-template>\r\n        </p-table>\r\n        <div style=\"display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 10px;\">\r\n            {{ 'Showing {{count}} columns of {{total}} available columns' | ecsTranslate: { count: filteredColumnData ? filteredColumnData.length : 0, total: columnModalData ? columnModalData.length : 0 } }}\r\n        </div>\r\n    </div>\r\n    <ng-template pTemplate=\"footer\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n        <p-button (click)=\"closeModal()\" [label]=\"'Cancel changes' | ecsTranslate\" outlined=\"true\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n        <p-button (click)=\"applyColumnModalChanges()\" [label]=\"'Save changes' | ecsTranslate\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n    </ng-template>\r\n</p-dialog>", dependencies: [{ kind: "pipe", type: ECSTableTranslatePipe, name: "ecsTranslate" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i3$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i6.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5$1.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i7.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "tabindex", "multiple", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6$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: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i10.InputText, selector: "[pInputText]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ColumnSelector, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecs-column-selector', imports: [
+                        ECSTableTranslatePipe,
+                        TranslateModule,
+                        DialogModule,
+                        TableModule,
+                        CheckboxModule,
+                        ButtonModule,
+                        SelectButtonModule,
+                        CommonModule,
+                        FormsModule,
+                        InputTextModule,
+                        TooltipModule
+                    ], standalone: true, template: "<!--COLUMN MODAL DIALOG-->\r\n<p-dialog [(visible)]=\"visible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [closeOnEscape]=\"false\" [closable]=\"false\" [maximizable]=\"false\" [style]=\"{'min-width': '65vw', 'max-width': '65vw'}\">\r\n    <ng-template pTemplate=\"header\">\r\n        <span class=\"white-space-nowrap\"><b>{{ 'MODIFY COLUMNS' | ecsTranslate }}</b></span>\r\n    </ng-template>\r\n    <div style=\"padding: 10px;\">\r\n        <p-table #dt_columnDialog [value]=\"filteredColumnData\" [scrollable]=\"true\" size=\"small\" showGridlines stripedRows\r\n            scrollHeight=\"calc(80vh - 220px)\">\r\n            <ng-template pTemplate=\"caption\">\r\n                <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                    <div style=\"display: flex; align-items: center; gap: 10px\">\r\n                        <p-checkbox inputId=\"selectAll\" [binary]=\"true\" [ngModel]=\"allColumnsCheckboxActive()\" (onChange)=\"allColumnsCheckboxClick($event)\"></p-checkbox>\r\n                        <label for=\"selectAll\">{{ 'Select all columns' | ecsTranslate }}</label>\r\n                    </div>\r\n                    <div style=\"display: flex; align-items: center;\">\r\n                        <span class=\"ecs-global-search\">\r\n                            <span class=\"ecs-input-icon\">\r\n                                <i class=\"pi pi-search\"></i>\r\n                            </span>\r\n                            <input pInputText type=\"text\" \r\n                                (input)=\"filterColumnModal($event)\" autocomplete=\"off\" \r\n                                [maxlength]=\"globalSearchMaxLength\" [placeholder]=\"'Search column name' | ecsTranslate\" [(ngModel)]=\"globalSearchText\"\r\n                                style=\"width: 220px;\"/>\r\n                            <!-- Right icon (only if there is text) -->\r\n                            <ng-container *ngIf=\"globalSearchText\">\r\n                                <span class=\"ecs-input-icon\" position=\"right\">\r\n                                    <i class=\"pi pi-times\" style=\"cursor: pointer;\" (click)=\"clearGlobalFilter(dt_columnDialog); $event.stopPropagation()\"></i>\r\n                                </span>\r\n                            </ng-container>\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"header\">\r\n                <tr>\r\n                    <th pFrozenColumn style=\"max-width: 100px; min-width: 100px; width: 100px; text-align: center;\">{{ 'Show column' | ecsTranslate }}</th>\r\n                    <th pFrozenColumn style=\"max-width: 250px; min-width: 250px; width: 250px; text-align: center;\">{{ 'Column name' | ecsTranslate }}</th>\r\n                    <th style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">{{ 'Cell overflow behaviour' | ecsTranslate }}</th>\r\n                    <th style=\"max-width: 160px; min-width: 160px; width: 160px; text-align: center;\">{{ 'Horizontal alignment' | ecsTranslate }}</th>\r\n                    <th style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">{{ 'Vertical alignment' | ecsTranslate }}</th>\r\n                </tr>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"body\" let-rowData>\r\n                <tr>\r\n                    <td pFrozenColumn style=\"max-width: 100px; min-width: 100px; width: 100px; text-align: center;\">\r\n                        <p-checkbox \r\n                            [(ngModel)]=\"rowData.selected\" \r\n                            [binary]=\"true\"\r\n                            [disabled]=\"rowData.selectDisabled\"></p-checkbox>\r\n                    </td>\r\n                    <td pFrozenColumn style=\"max-width: 250px; min-width: 250px; width: 250px;\">{{rowData.header | translate}}</td>\r\n                    <td style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">\r\n                        <p-selectButton [(ngModel)]=\"rowData.cellOverflowBehaviour\" [options]=\"translatedOptions(cellOverflowBehaviourOptions)\" optionValue=\"val\" optionLabel=\"name\" [disabled]=\"rowData.cellOverflowBehaviourDisabled\" allowEmpty=\"false\">\r\n                            <ng-template pTemplate=\"item\" let-item>\r\n                                <i [class]=\"item.icon\" style=\"margin: -20px;\" [pTooltip]=\"(item.name) | ecsTranslate\" [showDelay]=\"400\" tooltipPosition=\"top\"></i>\r\n                            </ng-template>\r\n                        </p-selectButton>\r\n                    </td>\r\n                    <td style=\"max-width: 160px; min-width: 160px; width: 160px; text-align: center;\">\r\n                        <p-selectButton [(ngModel)]=\"rowData.dataAlignHorizontal\" [options]=\"translatedOptions(dataAlignHorizontalOptions)\" optionValue=\"val\" optionLabel=\"name\" [disabled]=\"rowData.dataAlignHorizontalDisabled\" allowEmpty=\"false\">\r\n                            <ng-template pTemplate=\"item\" let-item>\r\n                                <i [class]=\"item.icon\" style=\"margin: -20px;\" [pTooltip]=\"(item.name) | ecsTranslate\" [showDelay]=\"400\" tooltipPosition=\"top\"></i>\r\n                            </ng-template>\r\n                        </p-selectButton>\r\n                    </td>\r\n                    <td style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">\r\n                        <p-selectButton [(ngModel)]=\"rowData.dataAlignVertical\" [options]=\"translatedOptions(dataAlignVerticalOptions)\" optionValue=\"val\" optionLabel=\"name\" [disabled]=\"rowData.dataAlignVerticalDisabled\" allowEmpty=\"false\">\r\n                            <ng-template pTemplate=\"item\" let-item>\r\n                                <i [class]=\"item.icon\" style=\"margin: -20px;\" [pTooltip]=\"(item.name) | ecsTranslate\" [showDelay]=\"400\" tooltipPosition=\"top\"></i>\r\n                            </ng-template>\r\n                        </p-selectButton>\r\n                    </td>\r\n                </tr>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"emptymessage\">\r\n                <tr>\r\n                    <td colspan=\"999\">{{ 'There are no columns' | ecsTranslate }}</td>\r\n                </tr>\r\n            </ng-template>\r\n        </p-table>\r\n        <div style=\"display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 10px;\">\r\n            {{ 'Showing {{count}} columns of {{total}} available columns' | ecsTranslate: { count: filteredColumnData ? filteredColumnData.length : 0, total: columnModalData ? columnModalData.length : 0 } }}\r\n        </div>\r\n    </div>\r\n    <ng-template pTemplate=\"footer\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n        <p-button (click)=\"closeModal()\" [label]=\"'Cancel changes' | ecsTranslate\" outlined=\"true\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n        <p-button (click)=\"applyColumnModalChanges()\" [label]=\"'Save changes' | ecsTranslate\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n    </ng-template>\r\n</p-dialog>" }]
+        }], ctorParameters: function () { return [{ type: i1$2.TranslateService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { orderByHeader: [{
+                type: Input
+            }], dt_columnDialog: [{
+                type: ViewChild,
+                args: ['dt_columnDialog']
+            }], visible: [{
+                type: Input
+            }], columnModalData: [{
+                type: Input
+            }], filteredColumnData: [{
+                type: Input
+            }], visibleChange: [{
+                type: Output
+            }], applyChanges: [{
+                type: Output
+            }] } });
+
+class ExportExcelService {
+    getCurrentTimeString() {
+        const now = new Date();
+        const year = now.getUTCFullYear();
+        const month = String(now.getUTCMonth() + 1).padStart(2, '0');
+        const day = String(now.getUTCDate()).padStart(2, '0');
+        const hours = String(now.getUTCHours()).padStart(2, '0');
+        const minutes = String(now.getUTCMinutes()).padStart(2, '0');
+        const seconds = String(now.getUTCSeconds()).padStart(2, '0');
+        return `_${year}${month}${day}_${hours}${minutes}${seconds}_UTC`;
+    }
+}
+ExportExcelService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ExportExcelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ExportExcelService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ExportExcelService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ExportExcelService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ExportExcel {
+    constructor(notificationSerivce, exportExcelService) {
+        this.notificationSerivce = notificationSerivce;
+        this.exportExcelService = exportExcelService;
+        this.i18n = inject(ECSPrimengTableI18nService);
+        this.translatedOptionSets = new WeakMap();
+        this.visible = false;
+        this.rowCheckboxSelectorActive = false;
+        this.excelReportTitle = "";
+        this.includeTimeInTitle = true;
+        this.exportUseIconsInBools = false;
+        this.allowTitleUserEdit = false;
+        this.exportToExcel = new EventEmitter();
+        this.visibleChange = new EventEmitter();
+        this.option_exportColumns_selected = false;
+        this.option_exportColumns = [
+            { label: 'Only visible', value: false },
+            { label: 'All columns', value: true }
+        ];
+        this.option_applyCurrentFilters_selected = false;
+        this.option_applyCurrentFilters = [
+            { label: 'No filters', value: false },
+            { label: 'Apply current filters', value: true }
+        ];
+        this.option_applyCurrentSorts_selected = false;
+        this.option_applyCurrentSorts = [
+            { label: 'No sorts', value: false },
+            { label: 'Apply current sorts', value: true }
+        ];
+        this.option_selectedRowsExport_selected = 0;
+        this.option_selectedRowsExport = [
+            { label: 'All rows', value: 0 },
+            { label: 'Selected rows', value: 1 },
+            { label: 'Not selected rows', value: 2 }
+        ];
+    }
+    ngOnChanges(changes) {
+        // If visible changes from false to true, reset values
+        if (changes['visible'] && changes['visible'].currentValue === true && changes['visible'].previousValue === false) {
+            this.resetValues();
+        }
+    }
+    resetValues() {
+        this.includeTimeInTitle = true;
+        this.exportUseIconsInBools = false;
+        this.option_exportColumns_selected = false;
+        this.option_applyCurrentFilters_selected = false;
+        this.option_applyCurrentSorts_selected = false;
+        this.option_selectedRowsExport_selected = 0;
+    }
+    getExcelReport() {
+        let excelReportFinalTitle = "";
+        this.excelReportTitle = this.excelReportTitle?.trim();
+        if (!this.excelReportTitle || this.excelReportTitle.length <= 0) {
+            this.notificationSerivce.clearToasts();
+            this.notificationSerivce.showToast("error", this.i18n.text("REPORT NAME NOT VALID"), this.i18n.text("The report name is not valid"));
+            return;
+        }
+        const allowedPattern = /^[A-Za-z0-9 _-]*$/;
+        if (!allowedPattern.test(this.excelReportTitle)) {
+            this.notificationSerivce.clearToasts();
+            this.notificationSerivce.showToast("error", this.i18n.text("INVALID CHARACTERS IN REPORT NAME"), this.i18n.text("The report name contains invalid characters."));
+            return;
+        }
+        if (this.includeTimeInTitle) {
+            excelReportFinalTitle = this.excelReportTitle + this.exportExcelService.getCurrentTimeString() + ".xlsx";
+        }
+        else {
+            excelReportFinalTitle = this.excelReportTitle + ".xlsx";
+        }
+        this.exportToExcel.emit({
+            allColumns: this.option_exportColumns_selected,
+            applyFilters: this.option_applyCurrentFilters_selected,
+            applySorts: this.option_applyCurrentSorts_selected,
+            selectedRows: this.option_selectedRowsExport_selected,
+            filename: excelReportFinalTitle,
+            useIconInBools: this.exportUseIconsInBools
+        });
+    }
+    translatedOptions(options) {
+        const labels = options.map(option => this.i18n.text(option.label));
+        const cached = this.translatedOptionSets.get(options);
+        if (cached?.length === options.length && cached.every((option, index) => option.label === labels[index] && option.value === options[index].value)) {
+            return cached;
+        }
+        const translated = options.map((option, index) => ({ ...option, label: labels[index] }));
+        this.translatedOptionSets.set(options, translated);
+        return translated;
+    }
+    filterSelectorDisabled() {
+        return this.option_selectedRowsExport_selected >= 1;
+    }
+    onChangeExportRows(event) {
+        if (event.value >= 1) {
+            this.option_applyCurrentFilters_selected = true;
+        }
+    }
+    closeModal() {
+        this.visibleChange.emit(false);
+    }
+}
+ExportExcel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ExportExcel, deps: [{ token: ECSPrimengTableNotificationService }, { token: ExportExcelService }], target: i0.ɵɵFactoryTarget.Component });
+ExportExcel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ExportExcel, isStandalone: true, selector: "ecs-export-excel", inputs: { visible: "visible", rowCheckboxSelectorActive: "rowCheckboxSelectorActive", excelReportTitle: "excelReportTitle", allowTitleUserEdit: "allowTitleUserEdit" }, outputs: { exportToExcel: "exportToExcel", visibleChange: "visibleChange" }, usesOnChanges: true, ngImport: i0, template: "<p-dialog [(visible)]=\"visible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\"\r\n    [closable]=\"false\" [closeOnEscape]=\"false\" [maximizable]=\"false\" [style]=\"{'min-width': '70vw', 'max-width': '70vw'}\">\r\n    <ng-template pTemplate=\"header\">\r\n        <div>\r\n            <span class=\"p-dialog-title\">{{ 'Export data to Excel' | ecsTranslate }}</span>\r\n        </div>\r\n    </ng-template>\r\n    <div style=\"display: grid; grid-template-columns: 4fr 8fr; gap: 1rem; align-items: center; margin-top: 10px;\">\r\n        <div style=\"justify-self: end;\">\r\n            {{ 'Report filename' | ecsTranslate }}\r\n        </div>\r\n        <div style=\"justify-self: stretch; width: 100%;\">\r\n            <input pInputText id=\"reportTitle\" [attr.aria-label]=\"'Report filename' | ecsTranslate\" [(ngModel)]=\"excelReportTitle\" autocomplete=\"off\" style=\"width: 100%;\" [disabled]=\"!allowTitleUserEdit\" maxlength=\"100\"/>\r\n        </div>\r\n\r\n        <div style=\"justify-self: end;\">\r\n            <i [pTooltip]=\"'Activating this option will add the current <b>\\'_{year}{month}{day}_{hours}{minutes}{seconds}_UTC\\'</b> at the end of your filename.' | ecsTranslate\"\r\n                tooltipPosition=\"top\"\r\n                [escape]=\"false\"\r\n                class=\"pi pi-info-circle\">\r\n            </i>\r\n            {{ 'Include time in report filename?' | ecsTranslate }}\r\n        </div>\r\n        <div style=\"justify-self: stretch; width: 100%;\">\r\n            <p-checkbox [binary]=\"true\" [(ngModel)]=\"includeTimeInTitle\"></p-checkbox>\r\n        </div>\r\n\r\n        <div style=\"justify-self: end;\">\r\n            <i [pTooltip]=\"'Activating this option will make boolean values be shown as icons in the Excel report:<br>True \u2192 <span class=\\'bool-icon bool-true\\'>\u2714</span><br>False \u2192 <span class=\\'bool-icon bool-false\\'>\u2718</span>' | ecsTranslate\"\r\n                tooltipPosition=\"top\"\r\n                tooltipStyleClass=\"excel-export-tooltip\"\r\n                [escape]=\"false\"\r\n                class=\"pi pi-info-circle\">\r\n            </i>\r\n            {{ 'Use icons in boolean fields?' | ecsTranslate }}\r\n        </div>\r\n        <div style=\"justify-self: stretch; width: 100%;\">\r\n            <p-checkbox [binary]=\"true\" [(ngModel)]=\"exportUseIconsInBools\"></p-checkbox>\r\n        </div>\r\n\r\n        <div style=\"justify-self: end;\">\r\n            {{ 'Export columns' | ecsTranslate }}\r\n        </div>\r\n        <div style=\"justify-self: start;\">\r\n            <p-selectButton [(ngModel)]=\"option_exportColumns_selected\" [options]=\"translatedOptions(option_exportColumns)\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\"><ng-template pTemplate=\"item\" let-option>{{ option.label | ecsTranslate }}</ng-template></p-selectButton>\r\n        </div>\r\n\r\n        <div style=\"justify-self: end;\">\r\n            <ng-container *ngIf=\"filterSelectorDisabled()\">\r\n                <i [pTooltip]=\"'Sorts are active because you want to export selected rows following a filter criteria' | ecsTranslate\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n            </ng-container>\r\n            {{ 'Filters to apply' | ecsTranslate }}\r\n        </div>\r\n        <div style=\"justify-self: start;\">\r\n            <p-selectButton [(ngModel)]=\"option_applyCurrentFilters_selected\" [options]=\"translatedOptions(option_applyCurrentFilters)\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\" [disabled]=\"filterSelectorDisabled()\"><ng-template pTemplate=\"item\" let-option>{{ option.label | ecsTranslate }}</ng-template></p-selectButton>\r\n        </div>\r\n\r\n        <div style=\"justify-self: end;\">\r\n            {{ 'Sorts to apply' | ecsTranslate }}\r\n        </div>\r\n        <div style=\"justify-self: start;\">\r\n            <p-selectButton [(ngModel)]=\"option_applyCurrentSorts_selected\" [options]=\"translatedOptions(option_applyCurrentSorts)\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\"><ng-template pTemplate=\"item\" let-option>{{ option.label | ecsTranslate }}</ng-template></p-selectButton>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"rowCheckboxSelectorActive\">\r\n            <div style=\"justify-self: end;\">\r\n                {{ 'Selected rows' | ecsTranslate }}\r\n            </div>\r\n            <div style=\"justify-self: start;\">\r\n                <p-selectButton [(ngModel)]=\"option_selectedRowsExport_selected\" [options]=\"translatedOptions(option_selectedRowsExport)\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\" (onChange)=\"onChangeExportRows($event)\"><ng-template pTemplate=\"item\" let-option>{{ option.label | ecsTranslate }}</ng-template></p-selectButton>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <ng-template pTemplate=\"footer\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n        <p-button (click)=\"closeModal()\" [label]=\"'Cancel export' | ecsTranslate\" outlined=\"true\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n        <p-button (click)=\"getExcelReport()\" [label]=\"'Export' | ecsTranslate\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n    </ng-template>\r\n</p-dialog>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: ECSTableTranslatePipe, name: "ecsTranslate" }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i3$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6$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: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i7.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "tabindex", "multiple", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i10.InputText, selector: "[pInputText]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5$1.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ExportExcel, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecs-export-excel', imports: [
+                        CommonModule,
+                        ECSTableTranslatePipe,
+                        DialogModule,
+                        FormsModule,
+                        ButtonModule,
+                        SelectButtonModule,
+                        InputTextModule,
+                        TooltipModule,
+                        CheckboxModule
+                    ], standalone: true, template: "<p-dialog [(visible)]=\"visible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\"\r\n    [closable]=\"false\" [closeOnEscape]=\"false\" [maximizable]=\"false\" [style]=\"{'min-width': '70vw', 'max-width': '70vw'}\">\r\n    <ng-template pTemplate=\"header\">\r\n        <div>\r\n            <span class=\"p-dialog-title\">{{ 'Export data to Excel' | ecsTranslate }}</span>\r\n        </div>\r\n    </ng-template>\r\n    <div style=\"display: grid; grid-template-columns: 4fr 8fr; gap: 1rem; align-items: center; margin-top: 10px;\">\r\n        <div style=\"justify-self: end;\">\r\n            {{ 'Report filename' | ecsTranslate }}\r\n        </div>\r\n        <div style=\"justify-self: stretch; width: 100%;\">\r\n            <input pInputText id=\"reportTitle\" [attr.aria-label]=\"'Report filename' | ecsTranslate\" [(ngModel)]=\"excelReportTitle\" autocomplete=\"off\" style=\"width: 100%;\" [disabled]=\"!allowTitleUserEdit\" maxlength=\"100\"/>\r\n        </div>\r\n\r\n        <div style=\"justify-self: end;\">\r\n            <i [pTooltip]=\"'Activating this option will add the current <b>\\'_{year}{month}{day}_{hours}{minutes}{seconds}_UTC\\'</b> at the end of your filename.' | ecsTranslate\"\r\n                tooltipPosition=\"top\"\r\n                [escape]=\"false\"\r\n                class=\"pi pi-info-circle\">\r\n            </i>\r\n            {{ 'Include time in report filename?' | ecsTranslate }}\r\n        </div>\r\n        <div style=\"justify-self: stretch; width: 100%;\">\r\n            <p-checkbox [binary]=\"true\" [(ngModel)]=\"includeTimeInTitle\"></p-checkbox>\r\n        </div>\r\n\r\n        <div style=\"justify-self: end;\">\r\n            <i [pTooltip]=\"'Activating this option will make boolean values be shown as icons in the Excel report:<br>True \u2192 <span class=\\'bool-icon bool-true\\'>\u2714</span><br>False \u2192 <span class=\\'bool-icon bool-false\\'>\u2718</span>' | ecsTranslate\"\r\n                tooltipPosition=\"top\"\r\n                tooltipStyleClass=\"excel-export-tooltip\"\r\n                [escape]=\"false\"\r\n                class=\"pi pi-info-circle\">\r\n            </i>\r\n            {{ 'Use icons in boolean fields?' | ecsTranslate }}\r\n        </div>\r\n        <div style=\"justify-self: stretch; width: 100%;\">\r\n            <p-checkbox [binary]=\"true\" [(ngModel)]=\"exportUseIconsInBools\"></p-checkbox>\r\n        </div>\r\n\r\n        <div style=\"justify-self: end;\">\r\n            {{ 'Export columns' | ecsTranslate }}\r\n        </div>\r\n        <div style=\"justify-self: start;\">\r\n            <p-selectButton [(ngModel)]=\"option_exportColumns_selected\" [options]=\"translatedOptions(option_exportColumns)\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\"><ng-template pTemplate=\"item\" let-option>{{ option.label | ecsTranslate }}</ng-template></p-selectButton>\r\n        </div>\r\n\r\n        <div style=\"justify-self: end;\">\r\n            <ng-container *ngIf=\"filterSelectorDisabled()\">\r\n                <i [pTooltip]=\"'Sorts are active because you want to export selected rows following a filter criteria' | ecsTranslate\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n            </ng-container>\r\n            {{ 'Filters to apply' | ecsTranslate }}\r\n        </div>\r\n        <div style=\"justify-self: start;\">\r\n            <p-selectButton [(ngModel)]=\"option_applyCurrentFilters_selected\" [options]=\"translatedOptions(option_applyCurrentFilters)\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\" [disabled]=\"filterSelectorDisabled()\"><ng-template pTemplate=\"item\" let-option>{{ option.label | ecsTranslate }}</ng-template></p-selectButton>\r\n        </div>\r\n\r\n        <div style=\"justify-self: end;\">\r\n            {{ 'Sorts to apply' | ecsTranslate }}\r\n        </div>\r\n        <div style=\"justify-self: start;\">\r\n            <p-selectButton [(ngModel)]=\"option_applyCurrentSorts_selected\" [options]=\"translatedOptions(option_applyCurrentSorts)\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\"><ng-template pTemplate=\"item\" let-option>{{ option.label | ecsTranslate }}</ng-template></p-selectButton>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"rowCheckboxSelectorActive\">\r\n            <div style=\"justify-self: end;\">\r\n                {{ 'Selected rows' | ecsTranslate }}\r\n            </div>\r\n            <div style=\"justify-self: start;\">\r\n                <p-selectButton [(ngModel)]=\"option_selectedRowsExport_selected\" [options]=\"translatedOptions(option_selectedRowsExport)\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\" (onChange)=\"onChangeExportRows($event)\"><ng-template pTemplate=\"item\" let-option>{{ option.label | ecsTranslate }}</ng-template></p-selectButton>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <ng-template pTemplate=\"footer\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n        <p-button (click)=\"closeModal()\" [label]=\"'Cancel export' | ecsTranslate\" outlined=\"true\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n        <p-button (click)=\"getExcelReport()\" [label]=\"'Export' | ecsTranslate\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n    </ng-template>\r\n</p-dialog>\r\n" }]
+        }], ctorParameters: function () { return [{ type: ECSPrimengTableNotificationService }, { type: ExportExcelService }]; }, propDecorators: { visible: [{
+                type: Input
+            }], rowCheckboxSelectorActive: [{
+                type: Input
+            }], excelReportTitle: [{
+                type: Input
+            }], allowTitleUserEdit: [{
+                type: Input
+            }], exportToExcel: [{
+                type: Output
+            }], visibleChange: [{
+                type: Output
+            }] } });
+
+class ViewsManagement {
+    constructor(notification) {
+        this.notification = notification;
+        this.i18n = inject(ECSPrimengTableI18nService);
+        this.visible = false;
+        this.tableViews_menuItems = [];
+        this.onViewSelect = new EventEmitter();
+        this.onViewDelete = new EventEmitter();
+        this.onViewUpdateData = new EventEmitter();
+        this.onViewUpdateActiveStartup = new EventEmitter();
+        this.onViewEditAlias = new EventEmitter();
+        this.onViewCreate = new EventEmitter();
+        this.visibleChange = new EventEmitter();
+        this.viewEditorShow = false;
+        this.editingViewAlias = '';
+        this.newViewAlias = '';
+    }
+    loadView(viewAlias) {
+        this.onViewSelect.emit(viewAlias);
+    }
+    deleteView(viewAlias) {
+        this.onViewDelete.emit(viewAlias);
+    }
+    updateView(viewAlias) {
+        this.onViewUpdateData.emit(viewAlias);
+    }
+    updateViewActiveStartup(viewAlias) {
+        this.onViewUpdateActiveStartup.emit(viewAlias);
+    }
+    createView(viewAlias) {
+        const exists = this.tableViews_menuItems.some(item => item.label === viewAlias);
+        if (exists) {
+            this.notification.showToast("error", this.i18n.text("DUPLICATE VIEW NAME"), this.i18n.text("A view with alias \"{{value0}}\" already exists", { value0: viewAlias }));
+            return;
+        }
+        this.onViewCreate.emit(viewAlias);
+    }
+    editViewAlias(viewAliasOld, viewAliasNew) {
+        this.onViewEditAlias.emit({
+            viewAliasOld: viewAliasOld,
+            viewAliasNew: viewAliasNew
+        });
+    }
+    showViewEditor(editingViewAlias = '') {
+        this.editingViewAlias = editingViewAlias;
+        this.newViewAlias = this.editingViewAlias;
+        this.viewEditorShow = true;
+    }
+    closeModal() {
+        this.visibleChange.emit(false);
+    }
+    createOrUpdateTableView() {
+        this.viewEditorShow = false;
+        if (this.editingViewAlias !== '') {
+            this.editViewAlias(this.editingViewAlias, this.newViewAlias);
+        }
+        else {
+            this.createView(this.newViewAlias);
+        }
+    }
+}
+ViewsManagement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ViewsManagement, deps: [{ token: ECSPrimengTableNotificationService }], target: i0.ɵɵFactoryTarget.Component });
+ViewsManagement.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ViewsManagement, isStandalone: true, selector: "ecs-views-management", inputs: { visible: "visible", tableViews_menuItems: "tableViews_menuItems" }, outputs: { onViewSelect: "onViewSelect", onViewDelete: "onViewDelete", onViewUpdateData: "onViewUpdateData", onViewUpdateActiveStartup: "onViewUpdateActiveStartup", onViewEditAlias: "onViewEditAlias", onViewCreate: "onViewCreate", visibleChange: "visibleChange" }, ngImport: i0, template: "<p-dialog [(visible)]=\"visible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\"\r\n    [closable]=\"true\" [closeOnEscape]=\"false\" [maximizable]=\"false\" [style]=\"{'min-width': '70vw', 'max-width': '70vw'}\" (onHide)=\"closeModal()\">\r\n    <ng-template pTemplate=\"header\">\r\n        <div>\r\n            <span class=\"p-dialog-title\">{{ 'Table views' | ecsTranslate }}</span>\r\n        </div>\r\n    </ng-template>\r\n    <div class=\"p-4 pt-0\">\r\n        <p-table #dt_viewsDialog [value]=\"tableViews_menuItems\" [scrollable]=\"true\" size=\"small\" showGridlines stripedRows scrollHeight=\"400px\" [tableStyle]=\"{'min-width': '25rem'}\">\r\n            <ng-template pTemplate=\"caption\">\r\n                <div style=\"display: flex; justify-content: flex-end; align-items: center; width: 100%;\">\r\n                    <p-button icon=\"pi pi-plus\" [label]=\"'New view' | ecsTranslate\" (click)=\"showViewEditor()\" [pTooltip]=\"'New view' | ecsTranslate\" tooltipPosition=\"top\" [showDelay]=\"700\"></p-button>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"header\">\r\n                <tr>\r\n                    <th style=\"text-align: center;\">{{ 'View name' | ecsTranslate }}</th>\r\n                    <th style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">{{ 'Load on startup' | ecsTranslate }}</th>\r\n                    <th style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">{{ 'Actions' | ecsTranslate }}</th>\r\n                </tr>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"body\" let-rowData>\r\n                <tr>\r\n                    <td>\r\n                        {{rowData.label}}\r\n                    </td>\r\n                    <td style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">\r\n                        <p-checkbox [(ngModel)]=\"rowData.lastActive\" [binary]=\"true\" (onChange)=\"updateViewActiveStartup(rowData.label)\"></p-checkbox>\r\n                    </td>\r\n                    <td style=\"max-width: 220px; min-width: 220px; width: 220px; display: flex; justify-content: center; align-items: center; height: 100%;\">\r\n                        <button pButton icon=\"pi pi-upload\" (click)=\"loadView(rowData.label);\" [showDelay]=\"700\" [pTooltip]=\"'Restore' | ecsTranslate\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px; margin-right: 10px;\"></button>\r\n                        <button pButton icon=\"pi pi-save\" (click)=\"updateView(rowData.label);\" [showDelay]=\"700\" [pTooltip]=\"'Save' | ecsTranslate\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px; margin-right: 10px;\"></button>\r\n                        <button pButton icon=\"pi pi-pencil\" (click)=\"showViewEditor(rowData.label);\" [showDelay]=\"700\" [pTooltip]=\"'Edit' | ecsTranslate\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px; margin-right: 10px;\"></button>\r\n                        <button pButton icon=\"pi pi-trash\" (click)=\"deleteView(rowData.label);\" [showDelay]=\"700\" [pTooltip]=\"'Delete' | ecsTranslate\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px;\"></button>\r\n                    </td>\r\n                </tr>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"emptymessage\">\r\n                <tr>\r\n                    <td colspan=\"999\">{{ 'There are no views' | ecsTranslate }}</td>\r\n                </tr>\r\n            </ng-template>\r\n        </p-table>\r\n        <div style=\"display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 10px;\">\r\n            {{ 'Showing {{count}} views' | ecsTranslate: { count: tableViews_menuItems ? tableViews_menuItems.length : 0 } }}\r\n        </div>\r\n    </div>\r\n</p-dialog>\r\n\r\n<!--TABLE VIEW SAVE-->\r\n<p-dialog [(visible)]=\"viewEditorShow\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [closeOnEscape]=\"false\" [closable]=\"false\" [maximizable]=\"false\" [style]=\"{'max-width': '60vw'}\">\r\n    <ng-template pTemplate=\"header\">\r\n        <div class=\"inline-flex align-items-center justify-content-center gap-2\">\r\n            <span class=\"white-space-nowrap\"><b>{{ (editingViewAlias !== '' ? 'UPDATE VIEW' : 'CREATE NEW VIEW') | ecsTranslate }}</b></span>\r\n        </div>\r\n    </ng-template>\r\n    <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n        <label for=\"newtableviewname\"><strong>{{ 'View alias' | ecsTranslate }}<span style=\"color: red;\">*</span></strong></label>\r\n        <input \r\n            pInputText \r\n            id=\"newtableviewname\" \r\n            aria-describedby=\"newtableviewname-help\" \r\n            style=\"width: 400px;\"\r\n            maxlength=\"30\"\r\n            [(ngModel)]=\"newViewAlias\"/>\r\n    </div>\r\n    <ng-template pTemplate=\"footer\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n        <p-button (click)=\"viewEditorShow = false\" [label]=\"'Cancel' | ecsTranslate\" outlined=\"true\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n        <p-button (click)=\"createOrUpdateTableView()\" [label]=\"(editingViewAlias !== '' ? 'Update' : 'Create') | ecsTranslate\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n    </ng-template>\r\n</p-dialog>", dependencies: [{ kind: "pipe", type: ECSTableTranslatePipe, name: "ecsTranslate" }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i3$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6$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: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i10.InputText, selector: "[pInputText]" }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5$1.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ViewsManagement, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecs-views-management', imports: [
+                        ECSTableTranslatePipe,
+                        DialogModule,
+                        TableModule,
+                        ButtonModule,
+                        CommonModule,
+                        FormsModule,
+                        TooltipModule,
+                        InputTextModule,
+                        CheckboxModule
+                    ], standalone: true, template: "<p-dialog [(visible)]=\"visible\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\"\r\n    [closable]=\"true\" [closeOnEscape]=\"false\" [maximizable]=\"false\" [style]=\"{'min-width': '70vw', 'max-width': '70vw'}\" (onHide)=\"closeModal()\">\r\n    <ng-template pTemplate=\"header\">\r\n        <div>\r\n            <span class=\"p-dialog-title\">{{ 'Table views' | ecsTranslate }}</span>\r\n        </div>\r\n    </ng-template>\r\n    <div class=\"p-4 pt-0\">\r\n        <p-table #dt_viewsDialog [value]=\"tableViews_menuItems\" [scrollable]=\"true\" size=\"small\" showGridlines stripedRows scrollHeight=\"400px\" [tableStyle]=\"{'min-width': '25rem'}\">\r\n            <ng-template pTemplate=\"caption\">\r\n                <div style=\"display: flex; justify-content: flex-end; align-items: center; width: 100%;\">\r\n                    <p-button icon=\"pi pi-plus\" [label]=\"'New view' | ecsTranslate\" (click)=\"showViewEditor()\" [pTooltip]=\"'New view' | ecsTranslate\" tooltipPosition=\"top\" [showDelay]=\"700\"></p-button>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"header\">\r\n                <tr>\r\n                    <th style=\"text-align: center;\">{{ 'View name' | ecsTranslate }}</th>\r\n                    <th style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">{{ 'Load on startup' | ecsTranslate }}</th>\r\n                    <th style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">{{ 'Actions' | ecsTranslate }}</th>\r\n                </tr>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"body\" let-rowData>\r\n                <tr>\r\n                    <td>\r\n                        {{rowData.label}}\r\n                    </td>\r\n                    <td style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">\r\n                        <p-checkbox [(ngModel)]=\"rowData.lastActive\" [binary]=\"true\" (onChange)=\"updateViewActiveStartup(rowData.label)\"></p-checkbox>\r\n                    </td>\r\n                    <td style=\"max-width: 220px; min-width: 220px; width: 220px; display: flex; justify-content: center; align-items: center; height: 100%;\">\r\n                        <button pButton icon=\"pi pi-upload\" (click)=\"loadView(rowData.label);\" [showDelay]=\"700\" [pTooltip]=\"'Restore' | ecsTranslate\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px; margin-right: 10px;\"></button>\r\n                        <button pButton icon=\"pi pi-save\" (click)=\"updateView(rowData.label);\" [showDelay]=\"700\" [pTooltip]=\"'Save' | ecsTranslate\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px; margin-right: 10px;\"></button>\r\n                        <button pButton icon=\"pi pi-pencil\" (click)=\"showViewEditor(rowData.label);\" [showDelay]=\"700\" [pTooltip]=\"'Edit' | ecsTranslate\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px; margin-right: 10px;\"></button>\r\n                        <button pButton icon=\"pi pi-trash\" (click)=\"deleteView(rowData.label);\" [showDelay]=\"700\" [pTooltip]=\"'Delete' | ecsTranslate\" tooltipPosition=\"top\" size=\"small\" class=\"p-button-sm\" style=\"height: 28px;\"></button>\r\n                    </td>\r\n                </tr>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"emptymessage\">\r\n                <tr>\r\n                    <td colspan=\"999\">{{ 'There are no views' | ecsTranslate }}</td>\r\n                </tr>\r\n            </ng-template>\r\n        </p-table>\r\n        <div style=\"display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 10px;\">\r\n            {{ 'Showing {{count}} views' | ecsTranslate: { count: tableViews_menuItems ? tableViews_menuItems.length : 0 } }}\r\n        </div>\r\n    </div>\r\n</p-dialog>\r\n\r\n<!--TABLE VIEW SAVE-->\r\n<p-dialog [(visible)]=\"viewEditorShow\" [modal]=\"true\" [draggable]=\"false\" [resizable]=\"false\" [closeOnEscape]=\"false\" [closable]=\"false\" [maximizable]=\"false\" [style]=\"{'max-width': '60vw'}\">\r\n    <ng-template pTemplate=\"header\">\r\n        <div class=\"inline-flex align-items-center justify-content-center gap-2\">\r\n            <span class=\"white-space-nowrap\"><b>{{ (editingViewAlias !== '' ? 'UPDATE VIEW' : 'CREATE NEW VIEW') | ecsTranslate }}</b></span>\r\n        </div>\r\n    </ng-template>\r\n    <div style=\"display: flex; flex-direction: column; gap: 8px;\">\r\n        <label for=\"newtableviewname\"><strong>{{ 'View alias' | ecsTranslate }}<span style=\"color: red;\">*</span></strong></label>\r\n        <input \r\n            pInputText \r\n            id=\"newtableviewname\" \r\n            aria-describedby=\"newtableviewname-help\" \r\n            style=\"width: 400px;\"\r\n            maxlength=\"30\"\r\n            [(ngModel)]=\"newViewAlias\"/>\r\n    </div>\r\n    <ng-template pTemplate=\"footer\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n        <p-button (click)=\"viewEditorShow = false\" [label]=\"'Cancel' | ecsTranslate\" outlined=\"true\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n        <p-button (click)=\"createOrUpdateTableView()\" [label]=\"(editingViewAlias !== '' ? 'Update' : 'Create') | ecsTranslate\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n    </ng-template>\r\n</p-dialog>" }]
+        }], ctorParameters: function () { return [{ type: ECSPrimengTableNotificationService }]; }, propDecorators: { visible: [{
+                type: Input
+            }], tableViews_menuItems: [{
+                type: Input
+            }], onViewSelect: [{
+                type: Output
+            }], onViewDelete: [{
+                type: Output
+            }], onViewUpdateData: [{
+                type: Output
+            }], onViewUpdateActiveStartup: [{
+                type: Output
+            }], onViewEditAlias: [{
+                type: Output
+            }], onViewCreate: [{
+                type: Output
+            }], visibleChange: [{
+                type: Output
+            }] } });
+
+class ECSPrimengTable {
+    constructor(tableService, notification) {
+        this.tableService = tableService;
+        this.notification = notification;
+        this.i18n = inject(ECSPrimengTableI18nService);
+        this.changeDetector = inject(ChangeDetectorRef, { optional: true });
+        this.stateScope = inject(ECSPrimengTableStateService, { optional: true });
+        this.destroy$ = new Subject();
+        this.initialStateApplied = false;
+        this.destroyed = false;
+        this.tableOptions = DEFAULT_TABLE_OPTIONS;
+        this.treeStateRestored = false;
+        this.onRowCheckboxChange = new EventEmitter(); // Emitter that returns the column selected and if it was selected or unselected
+        this.onRowSelect = new EventEmitter;
+        this.onRowUnselect = new EventEmitter;
+        this.onDataEndUpdate = new EventEmitter();
+        this.viewsModalShow = false;
+        this.tableViewCurrentSelectedAlias = null;
+        this.tableViewsFirstFetchDone = false;
+        this.excelReportTitle = "";
+        this.showExportModal = false;
+        this.showColumnSelector = false;
+        this.selectedRowsCheckbox = []; // An array to keep all the selected rows
+        this.selectAllLoading = false;
+        this.selectionQueryKey = '';
+        this.globalSearchText = null; // The text used by the global search
+        this.appliedGlobalSearchText = null;
+        this.globalSearchManaged = false;
+        this.tableViewsList = [];
+        this.tableViews_menuItems = [];
+        this.DataType = DataType;
+        this.CellOverflowBehaviour = CellOverflowBehaviour;
+        this.DataAlignHorizontal = DataAlignHorizontal;
+        this.DataAlignVertical = DataAlignVertical;
+        this.FrozenColumnAlign = FrozenColumnAlign;
+        this.TableViewSaveMode = TableViewSaveMode;
+        this.currentPage = 0; // The current page we are at
+        this.currentRowsPerPage = 0; // The current rows per page selected
+        this.allowedRowsPerPage = []; // The different values of rows per page allowed
+        this.totalRecords = 0; // The number of total records that are available (taking into account the filters)
+        this.totalRecordsNotFiltered = 0; // The total number of records available if no filters were applied
+        this.dateFormat = "dd-MMM-yyyy HH:mm:ss zzzz";
+        this.dateTimezone = "+00:00";
+        this.dateCulture = "en-US";
+        this.exportDateFormat = "dd-MMM-yyyy HH:mm:ss";
+        this.columns = [];
+        this.columnsCantBeHidden = [];
+        this.columnsSelected = [];
+        this.columnModalData = [];
+        this.filteredColumnData = [];
+        this.predefinedFiltersSelectedValuesCollection = {}; // Contains a collection of the predefined column filters selection (possible values come from 'predefinedFiltersCollection')
+        this.tableLazyLoadEventInformation = {}; // Data of the last lazy load event of the table
+        this.initialConfigurationFetched = false;
+        this.maxViews = 0;
+        this.deviceType = DeviceType.Desktop;
+        this.columnSelectionCustomized = false;
+        this.headerMenuItems = [];
+        this.rowMenuItems = [];
+        this.i18n.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.headerMenuItems = this.translateMenuItems(this.headerMenuItems);
+            this.rowMenuItems = this.translateMenuItems(this.rowMenuItems);
+            this.changeDetector?.markForCheck();
+        });
+    }
+    /** 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);
+    }
+    ngOnInit() {
+        this.i18n.connectPrimeNG();
+        if (this.tableOptions.tree)
+            this.treeState = new TreeTableState(this.tableOptions.tree);
+        this.validateStatePersistence();
+        this.updateResponsiveViewport();
+        this.fetchTableConfiguration();
+    }
+    ngAfterViewInit() {
+        this.calculateScrollHeight();
+        this.changeDetector?.detectChanges();
+    }
+    get compactHeader() {
+        return !!this.tableOptions.responsive?.headerMenu && this.deviceType !== DeviceType.Desktop;
+    }
+    get compactRows() {
+        return !!this.tableOptions.responsive?.rowMenu && this.deviceType !== DeviceType.Desktop;
+    }
+    get actionColumnWidth() {
+        return this.compactRows ? 56 : (this.tableOptions.rows?.action?.width ?? 150);
+    }
+    getColumnHeaderGroups(columns) {
+        if (!columns.some(column => column.headerGroup?.trim()))
+            return [];
+        const groups = [];
+        for (const column of columns) {
+            const label = column.headerGroup?.trim() ?? '';
+            const frozenColumnAlign = column.frozenColumnAlign ?? FrozenColumnAlign.Noone;
+            const previous = groups[groups.length - 1];
+            if (previous && previous.label === label && previous.frozenColumnAlign === frozenColumnAlign) {
+                previous.colspan++;
+            }
+            else {
+                groups.push({ field: column.field, label, colspan: 1, frozenColumnAlign });
+            }
+        }
+        return groups;
+    }
+    isInitiallyVisible(column) {
+        if (!column.canBeHidden)
+            return true;
+        if (column.startHidden)
+            return false;
+        const devices = column.visibleOnlyIn;
+        return !devices?.length || devices.some(device => device === this.deviceType || String(device).toLowerCase() === DeviceType[this.deviceType].toLowerCase());
+    }
+    updateResponsiveViewport() {
+        const options = this.tableOptions.responsive;
+        const tablet = options?.tabletMinWidth ?? 768;
+        const desktop = options?.desktopMinWidth ?? 1200;
+        if (!Number.isFinite(tablet) || !Number.isFinite(desktop) || tablet <= 0 || desktop <= tablet) {
+            throw new Error('ECS table responsive widths must be finite and 0 < tabletMinWidth < desktopMinWidth.');
+        }
+        const width = typeof window === 'undefined' ? desktop : window.innerWidth;
+        const next = width < tablet ? DeviceType.Mobile : width < desktop ? DeviceType.Tablet : DeviceType.Desktop;
+        if (next === this.deviceType)
+            return;
+        this.deviceType = next;
+        this.responsiveHeaderMenu?.hide();
+        this.responsiveRowMenu?.hide();
+        if (!this.initialConfigurationFetched || this.columnSelectionCustomized ||
+            !this.columns.some(column => column.visibleOnlyIn?.length))
+            return;
+        const selected = this.columns.filter(column => column.canBeHidden && this.isInitiallyVisible(column));
+        const shown = this.tableService.orderColumnsWithFrozens(this.columnsCantBeHidden.concat(selected));
+        const previous = this.tableOptions.columns?.shown ?? [];
+        if (shown.length === previous.length && shown.every((column, i) => column.field === previous[i].field))
+            return;
+        this.columnsSelected = selected;
+        this.tableOptions.columns.shown = shown;
+        this.showColumnSelector = false;
+        // Request newly visible fields without resetting filters, sorting or pagination.
+        if (this.initialStateApplied)
+            this.fetchTableData(this.tableLazyLoadEventInformation);
+    }
+    buttonVisible(button, row) {
+        return (button.visibleCondition?.(row) ?? true) &&
+            ((button.enabledCondition?.(row) ?? true) || !button.conditionFailHide);
+    }
+    hasRowMenuActions(row) {
+        return (this.tableOptions.rows?.action?.buttons ?? []).some(button => this.buttonVisible(button, row));
+    }
+    buttonMenuItems(buttons, row) {
+        return buttons.filter(button => this.buttonVisible(button, row)).map((button, index) => ({
+            label: button.label || button.tooltip || 'Action {{number}}',
+            _uiParams: { number: index + 1 },
+            icon: button.icon,
+            disabled: !(button.enabledCondition?.(row) ?? true),
+            command: () => {
+                if (this.buttonVisible(button, row) && (button.enabledCondition?.(row) ?? true) && button.action) {
+                    this.tableService.handleButtonsClick(button.action, row);
+                }
+            }
+        }));
+    }
+    closeResponsiveMenus() {
+        this.responsiveHeaderMenu?.hide();
+        this.responsiveRowMenu?.hide();
+    }
+    openRowMenu(event, row) {
+        event.stopPropagation();
+        this.responsiveHeaderMenu?.hide();
+        if (this.responsiveRowMenu?.visible && this.rowMenuRow === row) {
+            this.responsiveRowMenu.hide();
+            return;
+        }
+        // Use one overlay for all rows. Replacing the model binds every action to this row.
+        this.rowMenuRow = row;
+        this.rowMenuItems = this.translateMenuItems(this.buttonMenuItems(this.tableOptions.rows?.action?.buttons ?? [], row));
+        const wasOpen = this.responsiveRowMenu?.visible;
+        this.responsiveRowMenu?.show(event);
+        if (wasOpen)
+            this.responsiveRowMenu?.alignOverlay();
+    }
+    translateMenuItems(items) {
+        return items.map(item => {
+            if (item['_literalLabel'])
+                return item;
+            const key = item['_uiLabelKey'] ?? item.label;
+            return { ...item, _uiLabelKey: key, label: this.i18n.text(key, item['_uiParams']) };
+        });
+    }
+    openHeaderMenu(event) {
+        this.responsiveRowMenu?.hide();
+        const options = this.tableOptions;
+        const items = [];
+        if (options.columns?.selectorEnabled)
+            items.push({ label: 'Modify columns', icon: options.columns.selectorIcon, command: () => this.columnSelectorShow() });
+        if (options.header?.clearSortsEnabled)
+            items.push({ label: 'Clear sorts', icon: options.header.clearSortsIcon, disabled: !this.hasToClearSorts(this.dt), command: () => this.clearSorts(this.dt) });
+        if (options.header?.clearFiltersEnabled)
+            items.push({ label: 'Clear filters', icon: options.header.clearFiltersIcon, disabled: !this.hasToClearFilters(this.dt, this.globalSearchText), command: () => this.clearFilters(this.dt) });
+        if (this.tableViewsEnabled()) {
+            items.push({ label: this.tableViewCurrentSelectedAlias || options.views?.noViewSelectedText || 'Select a view', _literalLabel: !!this.tableViewCurrentSelectedAlias, icon: 'pi pi-bookmark', command: () => { this.viewsModalShow = true; } });
+            items.push({ label: 'Apply view again', icon: options.views?.reloadViewButtonIcon || 'pi pi-refresh', disabled: !this.tableViewCurrentSelectedAlias, command: () => this.viewLoad(this.tableViewCurrentSelectedAlias) });
+        }
+        if (options.excelReport?.url?.trim())
+            items.push({ label: 'Export to Excel', icon: 'pi pi-file-excel', command: () => this.openExcelExport() });
+        if (options.resetTableView?.enabled)
+            items.push({ label: 'Reset table view', icon: options.resetTableView.icon, command: () => this.resetTableView() });
+        items.push({ label: 'Refresh data', icon: 'pi pi-refresh', command: () => this.refreshData(event) });
+        items.push(...this.buttonMenuItems(options.header?.buttons ?? [], null));
+        this.headerMenuItems = this.translateMenuItems(items);
+        this.responsiveHeaderMenu?.toggle(event);
+    }
+    validateStatePersistence() {
+        if (!this.tableOptions.statePersistence?.enabled)
+            return;
+        if (!this.tableOptions.statePersistence.key?.trim() || !this.stateScope) {
+            throw new Error('ECS table statePersistence requires a non-empty key and ECSPrimengTableStateService provided on a parent scope component.');
+        }
+    }
+    ngOnDestroy() {
+        this.cancelGlobalSearch();
+        this.destroyed = true;
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.treeState?.cancel();
+        const options = this.tableOptions.statePersistence;
+        const key = options?.key?.trim();
+        if (!key || !this.stateScope)
+            return;
+        if (!options?.enabled) {
+            this.stateScope.clear(key);
+            return;
+        }
+        if (!this.initialStateApplied || !this.dt)
+            return;
+        const filters = structuredClone(this.dt.filters ?? {});
+        delete filters['global'];
+        delete filters['selector'];
+        this.stateScope.set(key, {
+            configurationUrl: this.tableOptions.urlTableConfiguration ?? '',
+            dataUrl: this.tableOptions.urlTableData ?? '',
+            filters,
+            multiSortMeta: structuredClone(this.dt.multiSortMeta ?? []),
+            globalSearchText: this.effectiveGlobalSearchText,
+            currentPage: this.currentPage,
+            currentRowsPerPage: this.currentRowsPerPage,
+            treeMode: this.treeState?.mode,
+            treeExpandedKeys: this.treeState ? [...this.treeState.expanded] : undefined,
+            treeChildPages: this.treeState?.snapshotPages()
+        });
+    }
+    restoreNavigationState() {
+        this.validateStatePersistence();
+        const options = this.tableOptions.statePersistence;
+        const key = options?.key?.trim();
+        if (!options?.enabled) {
+            if (key)
+                this.stateScope?.clear(key);
+            return false;
+        }
+        const state = this.stateScope.get(key);
+        if (!state)
+            return false;
+        if (state.configurationUrl !== this.tableOptions.urlTableConfiguration ||
+            state.dataUrl !== this.tableOptions.urlTableData || state.treeMode !== this.treeState?.mode) {
+            this.stateScope.clear(key);
+            return false;
+        }
+        const fields = new Set(this.columns.map(column => column.field));
+        const filters = {};
+        for (const [field, filter] of Object.entries(state.filters)) {
+            if (fields.has(field))
+                filters[field] = filter;
+        }
+        this.currentRowsPerPage = this.allowedRowsPerPage.includes(state.currentRowsPerPage)
+            ? state.currentRowsPerPage : this.currentRowsPerPage;
+        this.currentPage = this.currentRowsPerPage === state.currentRowsPerPage
+            ? Math.max(0, state.currentPage) : 0;
+        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' };
+        }
+        const sorts = state.multiSortMeta.filter(sort => fields.has(sort.field));
+        this.dt.filters = { ...this.dt.filters, ...structuredClone(filters) };
+        // Keep initialStateApplied=false while PrimeNG setters can emit lazy-load events.
+        this.dt.multiSortMeta = sorts;
+        this.dt.first = this.currentPage * this.currentRowsPerPage;
+        this.dt.rows = this.currentRowsPerPage;
+        this.tableLazyLoadEventInformation = {
+            first: this.dt.first,
+            rows: this.currentRowsPerPage,
+            filters: this.dt.filters,
+            multiSortMeta: sorts
+        };
+        this.restorePredefinedSelections(filters);
+        return true;
+    }
+    restorePredefinedSelections(filters) {
+        this.predefinedFiltersSelectedValuesCollection = {};
+        for (const column of this.columns) {
+            const key = column.filterPredefinedValuesName;
+            if (!key)
+                continue;
+            const criteria = filters[column.field];
+            const value = (Array.isArray(criteria) ? criteria[0] : criteria)?.value;
+            if (value === null || value === undefined)
+                continue;
+            this.predefinedFiltersSelectedValuesCollection[key] =
+                (this.tableOptions.predefinedFilters?.[key] ?? []).filter(option => Array.isArray(value) ? value.includes(option.value) : value === option.value);
+        }
+    }
+    onResize() {
+        this.updateResponsiveViewport();
+        this.calculateScrollHeight();
+    }
+    calculateScrollHeight() {
+        if (this.tableOptions.verticalScroll?.cssFormula) {
+            return;
+        }
+        if (this.tableOptions.verticalScroll?.fitToContainer && this.tableContainer && this.paginatorContainer && this.headerContainer) {
+            const containerRect = this.tableContainer.nativeElement.getBoundingClientRect();
+            const paginatorHeight = this.paginatorContainer.nativeElement.offsetHeight;
+            const headerHeight = this.headerContainer.nativeElement.offsetHeight;
+            const viewportHeight = window.innerHeight;
+            const topOffset = containerRect.top + window.scrollY;
+            this.tableOptions.verticalScroll.height = (viewportHeight - topOffset - paginatorHeight - headerHeight) - 60;
+        }
+    }
+    get scrollHeightValue() {
+        if (this.tableOptions.verticalScroll?.cssFormula) {
+            return this.tableOptions.verticalScroll.cssFormula;
+        }
+        const height = this.tableOptions.verticalScroll?.height;
+        return height && height > 0 ? `${height}px` : '';
+    }
+    /**
+     * Updates the table data and, if needed, retrieves the initial table configuration from an external source.
+     *
+     * Also allows resetting the table to its original state before any user manipulations.
+     *
+     * @param {boolean} [resetTableView=false] Optional.
+     * - `true`: resets the table state before loading data.
+     * - `false`: refreshes data using the current configuration (and retrieves initial configuration if necessary).
+     *
+     * **_Behavior_**
+     * - The table is automatically set to `isActive = true`.
+     * - If the initial configuration has not been fetched, it will fetch it and then update the data.
+     * - If the initial configuration is already fetched, it will just update the data.
+     * - If `resetTableView` is true and the configuration is already initialized, the table will be reset to its original state before updating the data.
+     */
+    updateData(resetTableView = false) {
+        this.tableOptions.isActive = true; // Enable table actions: the table is now active and can perform updates
+        if (!this.initialConfigurationFetched || resetTableView) { // If initial configuration hasn't been fetched yet or a reset is explicitly requested
+            if (this.initialConfigurationFetched && resetTableView) { // Reset the table only if it was already initialized and a reset is explicitly requested
+                this.resetTableView(); // Reset table state (filters, pagination, sorting, etc.) and then refresh data
+            }
+            else { // We only need to get the table configuration without reseting the view
+                this.fetchTableConfiguration(); // Fetch the initial table configuration before updating data
+            }
+        }
+        else { // Table is already initialized and no reset requested, just refresh the data
+            this.fetchTableData(this.tableLazyLoadEventInformation); // Update table rows using the last lazy load event
+        }
+    }
+    canFetchData() {
+        return !this.destroyed
+            && !!this.tableOptions.isActive
+            && !!this.tableOptions.urlTableConfiguration?.trim()
+            && !!this.tableOptions.urlTableData?.trim();
+    }
+    fetchTableConfiguration(resetTableView = false) {
+        if (!this.canFetchData()) {
+            return;
+        }
+        this.tableService.fetchTableConfiguration(this.tableOptions.urlTableConfiguration)
+            .pipe(takeUntil(this.destroy$)).subscribe({
+            next: (response) => {
+                this.handleTableConfigurationResponse(response.body, resetTableView);
+            },
+            error: (err) => this.tableService.handleTableError(err, 'Columns Error')
+        });
+    }
+    handleTableConfigurationResponse(body, resetTableView = false) {
+        this.allowedRowsPerPage = body.allowedItemsPerPage; // Update the number of rows allowed per page
+        this.currentRowsPerPage = Math.min(...this.allowedRowsPerPage); // Update the current rows per page to use the minimum value of allowed rows per page by default
+        this.columns = body.columnsInfo; // Update columns with fetched data
+        this.columnsCantBeHidden = this.columns.filter((col) => !col.canBeHidden); // Filter columns that cannot be hidden
+        this.columnSelectionCustomized = false;
+        this.columnsSelected = this.columns.filter(col => col.canBeHidden && this.isInitiallyVisible(col)); // Selected columns that are not hidden by default
+        this.tableOptions.columns.shown = this.tableService.orderColumnsWithFrozens(this.columnsCantBeHidden.concat(this.columnsSelected));
+        this.dateFormat = body.dateFormat;
+        this.dateTimezone = body.dateTimezone;
+        this.dateCulture = body.dateCulture;
+        this.exportDateFormat = body.exportDateFormat;
+        this.currentPage = 0;
+        this.initialConfigurationFetched = true;
+        this.maxViews = body.maxViews;
+        if (resetTableView) {
+            this.tableOptions.isActive = false;
+            this.clearFilters(this.dt, true);
+            this.clearSorts(this.dt, true);
+            this.dt.tableWidthState = this.initialTableWidth;
+            this.dt.columnWidthsState = this.initialColumnWidths;
+            this.dt.restoreColumnWidths();
+            this.tableLazyLoadEventInformation.multiSortMeta = [];
+            this.tableOptions.isActive = true;
+            this.initialStateApplied = true;
+            this.tableLazyLoadEventInformation.first = 0;
+            this.tableLazyLoadEventInformation.rows = this.currentRowsPerPage;
+            this.fetchTableData(this.tableLazyLoadEventInformation);
+        }
+        else {
+            setTimeout(() => {
+                if (this.destroyed)
+                    return;
+                this.initialColumnWidths = this.tableService.computeColumnWidths(this.dt);
+                this.initialTableWidth = this.tableService.computeTableWidth(this.dt);
+            }, 0);
+            this.fetchTableViews();
+        }
+    }
+    refreshData(event) {
+        this.fetchTableData(this.tableLazyLoadEventInformation);
+    }
+    tableViewsEnabled() {
+        const views = this.tableOptions.views;
+        if (views?.saveMode === TableViewSaveMode.None) { // saveMode must be different from noone
+            return false;
+        }
+        if (!views?.saveKey?.trim()) { // saveKey must exist and must not be empty after trim
+            return false;
+        }
+        if (this.maxViews <= 0) { // maxViews must be greater than 0
+            return false;
+        }
+        if (views?.saveMode === TableViewSaveMode.DatabaseStorage) { // If saveMode is database, urlGet and urlSave must exist and must not be empty after trim
+            if (!views?.urlGet?.trim() || !views?.urlSave?.trim()) {
+                return false;
+            }
+        }
+        return true; // All checks passed, views are enabled
+    }
+    fetchTableViews() {
+        if (!this.tableViewsEnabled()) {
+            this.startInitialDataLoad();
+            return;
+        }
+        const tableViews = this.tableService.fetchTableViews(this.tableOptions.views.saveMode, this.tableOptions.views.urlGet, this.tableOptions.views.saveKey);
+        if (tableViews instanceof Observable) {
+            tableViews.pipe(takeUntil(this.destroy$)).subscribe({
+                next: (response) => {
+                    let parsedResult = response.body.map((item) => ({
+                        viewAlias: item.viewAlias,
+                        viewData: JSON.parse(item.viewData),
+                        lastActive: item.lastActive
+                    }));
+                    this.tableViewListProcess(parsedResult);
+                },
+                error: (err) => {
+                    this.tableService.handleTableError(err, 'Views get error');
+                    this.startInitialDataLoad();
+                }
+            });
+        }
+        else {
+            this.tableViewListProcess(tableViews);
+        }
+    }
+    tableViewListProcess(tableViews) {
+        this.tableViewsList = [...tableViews];
+        if (this.tableViewsList.length > 0) {
+            this.tableService.sortViews(this.tableViewsList);
+        }
+        this.tableViews_menuItems = [...this.tableService.updateViewsMenuItems(this.tableViewsList)];
+        this.startInitialDataLoad();
+    }
+    startInitialDataLoad() {
+        if (this.initialStateApplied || this.destroyed)
+            return;
+        const restored = this.restoreNavigationState();
+        this.initialStateApplied = true;
+        const viewToStartup = restored ? undefined : this.tableViewsList.find(v => v.lastActive);
+        if (viewToStartup) { // If there is a view that needs to be loaded on startup
+            this.viewLoad(viewToStartup.viewAlias);
+        }
+        else {
+            this.fetchTableData(this.tableLazyLoadEventInformation);
+        }
+    }
+    viewLoad(tableViewAlias) {
+        const viewToLoad = this.tableViewsList.find(v => v.viewAlias === tableViewAlias);
+        if (!viewToLoad) {
+            this.notification.showToast("error", this.i18n.text("VIEW TO LOAD DOESN'T EXIST"), this.i18n.text("The view to load doesn't exist"));
+            return;
+        }
+        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)
+            .filter(col => !this.columnsCantBeHidden.includes(col));
+        this.tableOptions.columns.shown = this.tableService.orderColumnsWithFrozens(this.columnsCantBeHidden.concat(this.columnsSelected));
+        this.currentPage = viewData.currentPage;
+        this.currentRowsPerPage = viewData.currentRowsPerPage;
+        this.restoreGlobalSearch(viewData.globalSearchText);
+        this.tableOptions.isActive = false;
+        this.tableLazyLoadEventInformation.multiSortMeta = [...(viewData.multiSortMeta ?? [])];
+        this.dt.multiSortMeta = [...(viewData.multiSortMeta ?? [])];
+        this.dt.sortMultiple();
+        this.dt.first = this.currentPage * this.currentRowsPerPage;
+        this.dt.rows = this.currentRowsPerPage;
+        this.tableLazyLoadEventInformation.first = this.dt.first;
+        this.tableLazyLoadEventInformation.rows = this.currentRowsPerPage;
+        this.tableOptions.isActive = true;
+        this.tableLazyLoadEventInformation.filters = structuredClone(viewData.filters);
+        this.dt.filters = structuredClone(viewData.filters);
+        this.restorePredefinedSelections(viewData.filters);
+        this.dt.tableWidthState = viewData.tableWidth;
+        this.dt.columnWidthsState = viewData.columnsWidth;
+        this.tableViewCurrentSelectedAlias = tableViewAlias;
+        this.notification.showToast("info", this.i18n.text("TABLE VIEW RESTORED"), this.i18n.text("The table view '{{value0}}' has been restored.", { value0: this.tableViewCurrentSelectedAlias }));
+        this.viewsModalShow = false;
+        this.fetchTableData(this.tableLazyLoadEventInformation);
+    }
+    viewCreate(viewAlias) {
+        if (this.tableViewsList.length >= this.maxViews) {
+            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.generateViewData();
+        let newView = {
+            lastActive: false,
+            viewAlias: viewAlias,
+            viewData: viewData
+        };
+        this.tableViewsList.push(newView);
+        this.tableService.sortViews(this.tableViewsList);
+        this.tableViews_menuItems = [...this.tableService.updateViewsMenuItems(this.tableViewsList)];
+        this.tableViewCurrentSelectedAlias = viewAlias;
+        this.viewsSave(0);
+    }
+    viewDelete(viewAlias) {
+        const index = this.tableViewsList.findIndex(v => v.viewAlias === viewAlias);
+        if (index === -1) {
+            this.notification.showToast("error", this.i18n.text("Table view delete failed"), this.i18n.text("The table view could not be deleted since it was not found."));
+            return;
+        }
+        this.tableViewsList.splice(index, 1);
+        this.tableViews_menuItems = [...this.tableService.updateViewsMenuItems(this.tableViewsList)];
+        if (this.tableViewCurrentSelectedAlias === viewAlias) {
+            this.tableViewCurrentSelectedAlias = null;
+        }
+        this.viewsSave(3);
+    }
+    viewEditAlias(event) {
+        const index = this.tableViewsList.findIndex(v => v.viewAlias === event.viewAliasOld);
+        if (index === -1) {
+            this.notification.showToast("error", this.i18n.text("Table view alias change failed"), this.i18n.text("The table view alias could not be changed since it was not found."));
+            return;
+        }
+        this.tableViewsList[index].viewAlias = event.viewAliasNew;
+        this.tableService.sortViews(this.tableViewsList);
+        this.tableViews_menuItems = [...this.tableService.updateViewsMenuItems(this.tableViewsList)];
+        if (this.tableViewCurrentSelectedAlias === event.viewAliasOld) {
+            this.tableViewCurrentSelectedAlias = event.viewAliasNew;
+        }
+        this.viewsSave(2);
+    }
+    viewUpdateData(viewAlias) {
+        const index = this.tableViewsList.findIndex(v => v.viewAlias === viewAlias);
+        if (index === -1) {
+            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.generateViewData();
+        this.tableViewsList[index].viewData = viewData;
+        this.viewsSave(1);
+    }
+    viewUpdateActiveStartup(viewAlias) {
+        const index = this.tableViewsList.findIndex(v => v.viewAlias === viewAlias);
+        if (index === -1) {
+            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 newStatus = !this.tableViewsList[index].lastActive;
+        this.tableViewsList.forEach(v => v.lastActive = false);
+        this.tableViewsList[index].lastActive = newStatus;
+        this.tableViews_menuItems = [...this.tableService.updateViewsMenuItems(this.tableViewsList)];
+        this.viewsSave(4);
+    }
+    viewsSave(endMessage) {
+        let tableView = JSON.stringify(this.tableViewsList);
+        switch (this.tableOptions.views.saveMode) {
+            case TableViewSaveMode.SessionStorage:
+                sessionStorage.setItem(this.tableOptions.views.saveKey, tableView);
+                break;
+            case TableViewSaveMode.LocalStorage:
+                localStorage.setItem(this.tableOptions.views.saveKey, tableView);
+                break;
+            case TableViewSaveMode.DatabaseStorage:
+                const saveObsv = this.tableService.viewsSaveToDatabase(this.tableViewsList, this.tableOptions.views.urlSave, this.tableOptions.views.saveKey);
+                saveObsv.subscribe({
+                    next: (response) => {
+                        this.viewsSaveEnd(endMessage);
+                    },
+                    error: (err) => this.tableService.handleTableError(err, 'Views save error')
+                });
+                return;
+            default:
+                this.notification.showToast("error", this.i18n.text("NOT IMPLEMENTED"), this.i18n.text("This type os save view has not been implemented yet."));
+                return;
+        }
+        this.viewsSaveEnd(endMessage);
+    }
+    viewsSaveEnd(endMessage) {
+        this.changeDetector?.markForCheck();
+        switch (endMessage) {
+            case 0: // NEW VIEW
+                this.notification.showToast("info", this.i18n.text("Table view created"), this.i18n.text("New table view has been created."));
+                this.viewsModalShow = false;
+                break;
+            case 1: // UPDATE VIEW
+                this.notification.showToast("info", this.i18n.text("Table view data updated"), this.i18n.text("The table view data was updated."));
+                break;
+            case 2: // UPDATE ALIAS
+                this.notification.showToast("info", this.i18n.text("Table view name updated"), this.i18n.text("The table view alias was updated."));
+                break;
+            case 3: // DELETE VIEW
+                this.notification.showToast("info", this.i18n.text("Table view delete"), this.i18n.text("The table view was deleted."));
+                break;
+            case 4: // DELETE VIEW
+                this.notification.showToast("info", this.i18n.text("Table view active on startup"), this.i18n.text("Changed the view that will be active on startup."));
+                break;
+        }
+    }
+    fetchTableData(event) {
+        if (!this.canFetchData()) {
+            return;
+        }
+        if (!this.initialConfigurationFetched || !this.initialStateApplied) {
+            return;
+        }
+        this.responsiveRowMenu?.hide();
+        this.tableLazyLoadEventInformation = event; // Store the event information for later use
+        if (event.rows != null && event.rows !== undefined) {
+            this.currentRowsPerPage = event.rows;
+        }
+        if (event.first != null && event.first !== undefined && event.rows != null && event.rows !== undefined) {
+            this.currentPage = event.first / event.rows;
+        }
+        let filtersWithoutGlobalAndSelectedRows = this.modifyFiltersWithoutGlobalAndSelectedRows(this.tableLazyLoadEventInformation.filters); // Create filters excluding the global filter
+        filtersWithoutGlobalAndSelectedRows = this.revertDateTimeZoneFilters(filtersWithoutGlobalAndSelectedRows);
+        const requestData = {
+            page: this.currentPage,
+            pageSize: this.currentRowsPerPage,
+            sort: this.tableLazyLoadEventInformation.multiSortMeta,
+            filter: filtersWithoutGlobalAndSelectedRows,
+            globalFilter: this.effectiveGlobalSearchText,
+            columns: this.tableOptions.columns.shown.map(col => col.field),
+            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(takeUntil(this.destroy$), finalize(() => {
+            if (this.destroyed)
+                return;
+            this.onDataEndUpdate.emit(); // This is always executed after data update.
+        }))
+            .subscribe({
+            next: (response) => this.handleTableDataResponse(response.body),
+            error: (err) => this.tableService.handleTableError(err, 'Columns Error')
+        });
+    }
+    modifyFiltersWithoutGlobalAndSelectedRows(filters, overrideOption = -1) {
+        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
+        }
+        this.selectorRowFilterBuilder(filtersWithoutGlobalAndSelectedRows, overrideOption);
+        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);
+    }
+    selectorRowFilterBuilder(filtersWithoutGlobalAndSelectedRows, overrideOption = -1) {
+        if (filtersWithoutGlobalAndSelectedRows.hasOwnProperty('selector') || overrideOption === 1 || overrideOption === 2) {
+            const selectorFilter = filtersWithoutGlobalAndSelectedRows['selector']?.[0];
+            let filterType = null;
+            if (overrideOption < 0 || overrideOption > 2) {
+                filterType = selectorFilter?.value ?? null;
+            }
+            else {
+                switch (overrideOption) {
+                    case 0: // All
+                        filterType = null;
+                        break;
+                    case 1: // Only selected rows
+                        filterType = true;
+                        break;
+                    case 2: // Only NOT selected
+                        filterType = false;
+                        break;
+                }
+            }
+            if (!filtersWithoutGlobalAndSelectedRows.hasOwnProperty('rowID')) {
+                filtersWithoutGlobalAndSelectedRows['rowID'] = [
+                    {
+                        "value": null,
+                        "matchMode": "in",
+                        "operator": "or"
+                    }
+                ];
+            }
+            const idFilter = filtersWithoutGlobalAndSelectedRows['rowID'][0];
+            if (filterType === true) {
+                idFilter.matchMode = "in";
+                idFilter.value = this.selectedRowsCheckbox;
+            }
+            else if (filterType === false) {
+                idFilter.operator = "and";
+                idFilter.matchMode = "notIn";
+                idFilter.value = this.selectedRowsCheckbox;
+            }
+            else if (filterType === null) {
+                idFilter.value = null;
+                idFilter.matchMode = "in";
+            }
+        }
+    }
+    revertDateTimeZoneFilters(inputFilter) {
+        this.tableOptions.columns.shown.forEach((column) => {
+            if (column.dataType === DataType.Date) { // If its date type
+                if (inputFilter.hasOwnProperty(column.field)) {
+                    const originalDate = inputFilter[column.field][0].value;
+                    if (originalDate !== null && originalDate instanceof Date) {
+                        const utcDate = new Date(Date.UTC(originalDate.getFullYear(), originalDate.getMonth(), originalDate.getDate()));
+                        inputFilter[column.field][0].value = utcDate;
+                    }
+                }
+            }
+        });
+        return inputFilter;
+    }
+    handleTableDataResponse(body) {
+        this.tableOptions.data = body.data; // Update the table data
+        this.totalRecords = body.totalRecords; // Update the total number of records
+        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(takeUntil(this.destroy$)));
+            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) {
+                this.predefinedFiltersSelectedValuesCollection = {};
+                for (const key in dt.filters) {
+                    if (dt.filters.hasOwnProperty(key)) {
+                        const filters = dt.filters[key];
+                        if (Array.isArray(filters)) {
+                            filters.forEach(filter => {
+                                filter.value = null; // Set value to null
+                            });
+                        }
+                        else {
+                            filters.value = null; // Set value to null
+                        }
+                    }
+                }
+                let filters = { ...this.dt.filters };
+                dt.columns?.forEach(element => {
+                    dt.filter(null, element.field, element.matchMode);
+                });
+                this.dt.filters = filters;
+            }
+            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) {
+        let hasToClear = this.hasToClearSorts(dt, force);
+        if (hasToClear) {
+            dt.multiSortMeta = [];
+            dt.sortMultiple();
+        }
+    }
+    hasToClearSorts(dt, force = false) {
+        let hasToClear = false;
+        const hasSorts = (dt.multiSortMeta && dt.multiSortMeta.length > 0);
+        if (force || hasSorts) {
+            hasToClear = true;
+        }
+        return hasToClear;
+    }
+    hasToClearFilters(dt, globalSearchText, force = false) {
+        let hasToClear = false;
+        const filtersWithoutGlobalAndSelectedRows = this.modifyFiltersWithoutGlobalAndSelectedRows(dt.filters);
+        const hasFilters = this.hasFilters(filtersWithoutGlobalAndSelectedRows);
+        const hasGlobalFilter = (globalSearchText && globalSearchText.trim() !== "");
+        if (force || hasFilters || hasGlobalFilter) {
+            hasToClear = true;
+        }
+        return hasToClear;
+    }
+    /**
+     * Determines whether there are active filters based on the provided filter rules.
+     *
+     * @param {any} filterRules An object representing filter rules for each column.
+     *   The keys are column names, and the values are arrays of filter rules.
+     *   Each filter rule has the following properties:
+     *     - `field`: The field or property name of the column.
+     *     - `value`: The filter value entered by the user.
+     *     - Other properties depending on the type of filter (e.g., `matchMode` for string filters).
+     * @returns {boolean} `true` if at least one active filter is found, otherwise `false`.
+     */
+    hasFilters(filterRules) {
+        for (const columnName of Object.keys(filterRules)) { // Iterate over each column name in the filter rules
+            const columnFilters = filterRules[columnName]; // Get the filter rules for the current column
+            for (const filterRule of columnFilters) { // Iterate over each filter rule for the current column
+                if (filterRule.value !== null && filterRule.value !== "") { // Check if the filter value is not null or an empty string
+                    return true; // At least one active filter found
+                }
+            }
+        }
+        return false; // No active filters found
+    }
+    getColumnStyle(col, headerCols = false) {
+        return this.tableService.getColumnStyle(col, headerCols);
+    }
+    getPredefinedFilterValues(columnKeyName) {
+        return this.tableOptions.predefinedFilters?.[columnKeyName] || []; // Return the predefined filter values or an empty array if the option name does not exist
+    }
+    getFrozenColumnAlignAsText(frozenColumnAlign) {
+        return frozenColumnAlignAsText(frozenColumnAlign);
+    }
+    getDataTypeAsText(dataType) {
+        return dataTypeAsText(dataType);
+    }
+    /**
+     * Updates the filters of a PrimeNG data table based on predefined filter changes.
+     *
+     * @param {string} filterName - The name of the filter to be updated.
+     * @param {IPrimengPredefinedFilter[]} selectedValues - An array of selected predefined filter values.
+     */
+    onPredefinedFilterChange(filterName, selectedValues) {
+        const filters = { ...this.dt.filters }; // Create a shallow copy of the current filters to avoid mutating the original filters directly
+        const newValue = selectedValues && selectedValues.length ? selectedValues.map(value => value.value) : null; // Convert empty selection to null so PrimeNG removes the filter instead of applying an empty array
+        if (Array.isArray(filters[filterName])) { // Check if the filter for the given filterName is an array
+            filters[filterName].forEach(criteria => {
+                criteria.value = newValue; // Update the value of each criteria with the values from selectedValues
+            });
+        }
+        else if (filters[filterName]) { // Check if the filter for the given filterName exists and is not an array
+            const criteria = filters[filterName]; // Cast the filter criteria to FilterMetadata
+            criteria.value = newValue; // Update the value of the criteria with the values from selectedValues
+        }
+        this.dt.filters = filters; // Update the data table's filters with the modified filters object
+        this.dt._filter(); // Trigger the filtering operation on the data table to apply the new filters
+    }
+    /**
+     * Checks if the provided column metadata matches a specific style of the predefined filters
+     * that need to be applied to an item on a row.
+     *
+     * @param {IprimengColumnsMetadata} colMetadata - The metadata of the column being checked.
+     * @param {any} value - The value to be matched against the predefined filter values.
+     * @returns {any} The matching predefined filter value if found, otherwise null.
+     */
+    getPredfinedFilterMatch(colMetadata, value) {
+        if (colMetadata.filterPredefinedValuesName && colMetadata.filterPredefinedValuesName.length > 0) { // Check if the column uses predefined filter values
+            const options = this.getPredefinedFilterValues(colMetadata.filterPredefinedValuesName); // Get the predefined filter values based on the name
+            return options.find(option => option.value === value); // Return the matching option if found
+        }
+        return null; // Return null if the column does not use predefined filter values
+    }
+    copyToClipboardStart(event) {
+        if ((this.tableOptions.copyToClipboardTime ?? 0) > 0) {
+            const cellContent = event.target.innerText;
+            this.copyCellDataTimer = setTimeout(() => {
+                navigator.clipboard.writeText(cellContent).then(() => {
+                    this.notification.clearToasts();
+                    this.notification.showToast("info", this.i18n.text("CELL CONTENT COPIED"), this.i18n.text("The cell content has been copied to your clipboard."));
+                }).catch(err => {
+                    this.notification.clearToasts();
+                    this.notification.showToast("error", this.i18n.text("CELL CONTENT COPIED"), this.i18n.text("The cell content failed to copy to your clipboard with error: {{value0}}", { value0: err }));
+                });
+            }, (this.tableOptions.copyToClipboardTime ?? 0) * 1000);
+        }
+    }
+    copyToClipboardCancel() {
+        if ((this.tableOptions.copyToClipboardTime ?? 0) > 0) {
+            clearTimeout(this.copyCellDataTimer);
+        }
+    }
+    getDataAlignHorizontalAsText(dataAlignHorizontal) {
+        return dataAlignHorizontalAsText(dataAlignHorizontal);
+    }
+    getDataAlignVerticalAsText(dataAlignVertical) {
+        return dataAlignVerticalAsText(dataAlignVertical);
+    }
+    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(takeUntil(this.destroy$)));
+            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
+            if (!this.selectedRowsCheckbox.includes(rowID))
+                this.selectedRowsCheckbox.push(rowID);
+        }
+        else { // Remove the selected item
+            this.selectedRowsCheckbox = this.selectedRowsCheckbox.filter(selectedId => selectedId !== rowID);
+        }
+        this.onRowCheckboxChange.emit({
+            rowID: rowID,
+            selected: event.checked
+        });
+    }
+    rowSelect(event) {
+        this.onRowSelect.emit({
+            rowID: event.data.rowID,
+            rowData: event.data
+        });
+    }
+    rowUnselect(event) {
+        this.onRowUnselect.emit({
+            rowID: event.data.rowID,
+            rowData: event.data
+        });
+    }
+    pageChange(event) {
+        this.currentPage = event.rows ? event.first / event.rows : 0;
+        this.currentRowsPerPage = event.rows ? event.rows : 0;
+    }
+    columnSelectorShow() {
+        this.tableOptions.columns?.selectorOrderByColumnName;
+        let tempData = this.columns.map(column => {
+            const isSelected = this.columnsSelected.some(selectedColumn => selectedColumn.field === column.field) || this.columnsCantBeHidden.some(selectedColumn => selectedColumn.field === column.field);
+            const isSelectDisabled = this.columnsCantBeHidden.some(selectedColumn => selectedColumn.field === column.field);
+            return {
+                field: column.field,
+                header: column.header,
+                selected: isSelected,
+                selectDisabled: isSelectDisabled,
+                cellOverflowBehaviour: column.cellOverflowBehaviour,
+                cellOverflowBehaviourDisabled: !column.cellOverflowBehaviourAllowUserEdit,
+                dataAlignHorizontal: column.dataAlignHorizontal,
+                dataAlignHorizontalDisabled: !column.dataAlignHorizontalAllowUserEdit,
+                dataAlignVertical: column.dataAlignVertical,
+                dataAlignVerticalDisabled: !column.dataAlignVerticalAllowUserEdit
+            };
+        });
+        this.columnModalData = [...tempData];
+        this.filteredColumnData = this.columnModalData;
+        this.showColumnSelector = true;
+    }
+    applyColumnModalChanges(selectedColumns) {
+        this.columnSelectionCustomized = true;
+        const existingColumns = this.dt.columns;
+        const columnsToKeep = new Set();
+        this.columnsCantBeHidden.forEach(col => columnsToKeep.add(col.field));
+        selectedColumns.forEach(col => columnsToKeep.add(col.field));
+        const finalColumns = [];
+        existingColumns.forEach(col => {
+            if (columnsToKeep.has(col.field)) {
+                finalColumns.push(col);
+            }
+        });
+        selectedColumns.forEach(col => {
+            const matchingColumn = this.columns.find(c => c.field === col.field);
+            if (matchingColumn && !finalColumns.find(c => c.field === matchingColumn.field)) {
+                finalColumns.push(matchingColumn);
+            }
+        });
+        let prevColsToShow = this.tableOptions.columns.shown;
+        this.tableOptions.columns.shown = this.tableService.orderColumnsWithFrozens(finalColumns);
+        let sameColumnsAsBefore = prevColsToShow.length === this.tableOptions.columns.shown.length &&
+            prevColsToShow.every((prevCol, index) => prevCol.field === this.tableOptions.columns.shown[index].field);
+        this.columnsSelected = this.tableOptions.columns.shown.filter(column => !this.columnsCantBeHidden.some(nonSelectable => nonSelectable.field === column.field));
+        this.updateColumnsSpecialProperties(this.columnModalData);
+        if (!sameColumnsAsBefore) {
+            this.tableOptions.isActive = false;
+            this.clearSorts(this.dt, true);
+            this.clearFilters(this.dt, true, false);
+            setTimeout(() => {
+                this.tableOptions.isActive = true;
+            }, 1);
+        }
+    }
+    updateColumnsSpecialProperties(columnsSource) {
+        const allColumns = [this.columns, this.tableOptions.columns.shown, this.columnsSelected, this.columnsCantBeHidden];
+        const columnModalDataMap = new Map(columnsSource.map((item) => [item.field, {
+                cellOverflowBehaviour: item.cellOverflowBehaviour,
+                dataAlignHorizontal: item.dataAlignHorizontal,
+                dataAlignVertical: item.dataAlignVertical,
+                width: item.width
+            }]));
+        const updatedFields = new Set(); // To track updated fields
+        allColumns.forEach((columnList) => {
+            columnList.forEach((col) => {
+                if (columnModalDataMap.has(col.field) && !updatedFields.has(col.field)) {
+                    const columnData = columnModalDataMap.get(col.field);
+                    if (columnData) {
+                        col.cellOverflowBehaviour = columnData.cellOverflowBehaviour;
+                        col.dataAlignHorizontal = columnData.dataAlignHorizontal;
+                        col.dataAlignVertical = columnData.dataAlignVertical;
+                        col.width = columnData.width;
+                        updatedFields.add(col.field);
+                    }
+                }
+            });
+        });
+    }
+    openExcelExport() {
+        const defaultTitle = this.tableOptions.excelReport?.defaultTitle?.trim();
+        const allowEdit = this.tableOptions.excelReport?.titleAllowUserEdit === true;
+        this.excelReportTitle = this.i18n.text((!defaultTitle && !allowEdit) ? 'Report' : defaultTitle);
+        this.showExportModal = true;
+    }
+    generateExcelReport(event) {
+        if (!this.tableOptions.excelReport?.url?.trim()) {
+            return;
+        }
+        let filtersWithoutGlobalAndSelectedRows = this.modifyFiltersWithoutGlobalAndSelectedRows(this.tableLazyLoadEventInformation.filters, event.selectedRows); // Create filters excluding the global filter
+        filtersWithoutGlobalAndSelectedRows = this.revertDateTimeZoneFilters(filtersWithoutGlobalAndSelectedRows);
+        const filtersMustBeApplied = (event.selectedRows === 1 || event.selectedRows === 2)
+            ? true
+            : event.applyFilters;
+        const requestData = {
+            page: this.currentPage,
+            pageSize: this.currentRowsPerPage,
+            sort: this.tableLazyLoadEventInformation.multiSortMeta,
+            filter: filtersWithoutGlobalAndSelectedRows,
+            globalFilter: this.effectiveGlobalSearchText,
+            columns: this.tableOptions.columns.shown.map(col => col.field),
+            dateFormat: this.dateFormat,
+            dateTimezone: this.dateTimezone,
+            dateCulture: this.dateCulture,
+            exportDateFormat: this.exportDateFormat,
+            allColumns: event.allColumns,
+            applyFilters: filtersMustBeApplied,
+            applySorts: event.applySorts,
+            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');
+                this.showExportModal = false;
+            },
+            error: (err) => this.tableService.handleTableError(err, 'Excel export error')
+        });
+    }
+    updateIconBlobsForCollections() {
+        Object.keys(this.tableOptions.predefinedFilters ?? {}).forEach(key => {
+            const filters = this.tableOptions.predefinedFilters?.[key];
+            if (Array.isArray(filters) && filters.length > 0) {
+                filters.forEach(filter => {
+                    if (filter.imageBlobSourceEndpoint && !filter.imageBlob) {
+                        filter.imageBlob = undefined;
+                        filter.imageBlobFetchError = false;
+                        this.tableService.getIconBlob(filter.imageBlobSourceEndpoint).subscribe({
+                            next: (response) => {
+                                filter.imageBlob = response.body;
+                                this.showExportModal = false;
+                            },
+                            error: () => {
+                                filter.imageBlobFetchError = true;
+                            }
+                        });
+                    }
+                });
+            }
+            else {
+                console.warn(`Filters for key ${key} is not an array:`, filters);
+            }
+        });
+    }
+    ecsTrack1(index, button) { return button; }
+    ecsTrack2(index, button) { return index; }
+    ecsTrack3(index, group) { return group.field; }
+    ecsTrack4(index, col) { return col.header; }
+    ecsTrack5(index, col) { return col.field; }
+}
+ECSPrimengTable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ECSPrimengTable, deps: [{ token: ECSPrimengTableService }, { token: ECSPrimengTableNotificationService }], target: i0.ɵɵFactoryTarget.Component });
+ECSPrimengTable.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ECSPrimengTable, isStandalone: true, selector: "ecs-primeng-table", inputs: { tableOptions: "tableOptions" }, outputs: { onRowCheckboxChange: "onRowCheckboxChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onDataEndUpdate: "onDataEndUpdate" }, host: { listeners: { "document:keydown.escape": "closeResponsiveMenus()", "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        styleClass=\"p-datatable-sm p-datatable-gridlines p-datatable-striped\"\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        [selectionMode]=\"tableOptions.rows?.singleSelector?.enabled ? 'single' : ''\" [metaKeySelection]=\"tableOptions.rows?.singleSelector?.metakey ?? true\" [(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            <ng-container *ngIf=\"(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            </ng-container>\r\n        </ng-template>\r\n\r\n        <!--TEMPLATE FOR THE ACTIONS ROW COLUMN-->\r\n        <ng-template #actionColumnTemplate let-rowData=\"rowData\">\r\n            <ng-container *ngIf=\"(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                    <ng-container *ngIf=\"compactRows; else ecsElse0\">\r\n                        <ng-container *ngIf=\"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                        </ng-container>\r\n                    </ng-container><ng-template #ecsElse0>\r\n                    <ng-container *ngFor=\"let button of tableOptions.rows?.action?.buttons; trackBy: ecsTrack1; let $index = index; let $first = first; let $last = last; let $even = even; let $odd = odd; let $count = count; let last = last\">\r\n                        <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\"></ecs-table-button>\r\n                    </ng-container>\r\n                    </ng-template>\r\n                </td>\r\n            </ng-container>\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                        <ng-container *ngIf=\"tableOptions.rows?.checkboxSelector?.selectAllEnabled\">\r\n                            <input type=\"checkbox\" class=\"ecs-select-all\" [checked]=\"allMatchingRowsSelected\"\r\n                                [indeterminate]=\"matchingRowsPartiallySelected\"\r\n                                [disabled]=\"selectAllLoading || !tableOptions.rows?.checkboxSelector?.urlSelectAll\"\r\n                                [attr.aria-label]=\"'Select all filtered rows' | ecsTranslate\"\r\n                                [pTooltip]=\"'Select all filtered rows' | ecsTranslate\"\r\n                                (change)=\"toggleAllMatchingRows($any($event.target).checked)\">\r\n                        </ng-container>\r\n                        {{ (tableOptions.rows?.checkboxSelector?.header ?? '') | ecsTranslate }}\r\n                        <p-columnFilter type=\"boolean\" field=\"selector\" display=\"menu\" [showButtons]=\"false\"></p-columnFilter>\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)\"></p-checkbox>\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 pTemplate=\"caption\">\r\n            <div #headerContainer [class.ecs-compact-header]=\"compactHeader\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                <ng-container *ngIf=\"compactHeader; else ecsElse1\">\r\n                    <ng-container *ngIf=\"tableOptions.globalFilter?.enabled\">\r\n                        <span class=\"ecs-global-search ecs-responsive-search\">\r\n                            <span class=\"ecs-input-icon\"><i class=\"pi pi-search\"></i></span>\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                            <ng-container *ngIf=\"globalSearchText\">\r\n                                <span class=\"ecs-input-icon\" 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></span>\r\n                            </ng-container>\r\n                        </span>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"tableOptions.description?.text\">\r\n                        <i [class]=\"tableOptions.description!.icon\" [pTooltip]=\"(tableOptions.description!.text) | ecsTranslate\" [escape]=\"false\"></i>\r\n                    </ng-container>\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                </ng-container><ng-template #ecsElse1>\r\n\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <!--CHOOSE COLUMNS TO SHOW-->\r\n                    <ng-container *ngIf=\"tableOptions.columns?.selectorEnabled\">\r\n                        <p-button [icon]=\"tableOptions.columns?.selectorIcon ?? 'pi pi-pencil'\" (onClick)=\"columnSelectorShow()\" [pTooltip]=\"'Modify columns' | ecsTranslate\"\r\n                            [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"></p-button>\r\n                    </ng-container>\r\n                    <!--CLEAR SORTS AND FILTERS-->\r\n                    <ng-container *ngIf=\"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\"></p-button>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"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\"></p-button>\r\n                    </ng-container>\r\n\r\n                    <!--TABLE DESCRIPTION-->\r\n                    <ng-container *ngIf=\"tableOptions.description?.text\"> <!-- If a table description text is provided -->\r\n                        <ng-container *ngIf=\"!tableOptions.description!.tooltip; else ecsElse2\"> <!-- 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                        </ng-container><ng-template #ecsElse2>\r\n                            <i [escape]=\"false\" [pTooltip]=\"(tableOptions.description!.text) | ecsTranslate\" tooltipPosition=\"right\" [class]=\"tableOptions.description!.icon\"></i>\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <!--TABLE VIEWS-->\r\n                <ng-container *ngIf=\"tableViewsEnabled()\">\r\n                    <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                        <span class=\"p-buttonset ecs-view-buttons\">\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 : '')\"></p-button>\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 || ''\"></p-button>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <!--GLOBAL FILTER-->\r\n                    <ng-container *ngIf=\"tableOptions.globalFilter?.enabled\">\r\n                        <span class=\"ecs-global-search ml-auto\">\r\n                            <span class=\"ecs-input-icon\">\r\n                                <i class=\"pi pi-search\"></i>\r\n                            </span>\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                            <ng-container *ngIf=\"globalSearchText\">\r\n                                <span class=\"ecs-input-icon\" position=\"right\">\r\n                                    <i class=\"pi pi-times\" style=\"cursor: pointer;\"  (click)=\"clearFilters(dt, true, true); $event.stopPropagation()\"></i>\r\n                                </span>\r\n                            </ng-container>\r\n                        </span>\r\n                    </ng-container>\r\n\r\n                    <!--EXPORT DATA-->\r\n                    <ng-container *ngIf=\"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\"></p-button>\r\n                    </ng-container>\r\n\r\n                    <!--RESET TABLE VIEW-->\r\n                    <ng-container *ngIf=\"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\"></p-button>\r\n                    </ng-container>\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\"></p-button>\r\n                    \r\n                    <!-- HEADER ACTION BUTTONS -->\r\n                    <ng-container *ngIf=\"(tableOptions.header?.buttons?.length ?? 0) > 0\">\r\n                        <td style=\"display: flex; justify-content: center; align-items: center; gap: 10px;\">\r\n                            <ng-container *ngFor=\"let button of tableOptions.header?.buttons; trackBy: ecsTrack2; let $index = index; let $first = first; let $last = last; let $even = even; let $odd = odd; let $count = count\">\r\n                                <ecs-table-button [button]=\"button\" [rowData]=\"null\"></ecs-table-button>\r\n                            </ng-container>\r\n                        </td>\r\n                    </ng-container>\r\n                </div>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE HEADERS -->\r\n        <ng-template pTemplate=\"header\" let-columns>\r\n            <ng-container *ngIf=\"getColumnHeaderGroups(columns) as headerGroups\">\r\n            <ng-container *ngIf=\"headerGroups.length\">\r\n                <tr class=\"ecs-column-groups\">\r\n                    <ng-container *ngIf=\"(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                    </ng-container>\r\n                    <ng-container *ngIf=\"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                    </ng-container>\r\n                    <ng-container *ngFor=\"let group of headerGroups; trackBy: ecsTrack3; let $index = index; let $first = first; let $last = last; let $even = even; let $odd = odd; let $count = count\">\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                    </ng-container>\r\n                    <ng-container *ngIf=\"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                    </ng-container>\r\n                    <ng-container *ngIf=\"(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                    </ng-container>\r\n                </tr>\r\n            </ng-container>\r\n            <tr>\r\n                <ng-container *ngIf=\"!tableOptions.rows?.action?.positionRight\">\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.positionRight\">\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let col of columns; trackBy: ecsTrack4; let $index = index; let $first = first; let $last = last; let $even = even; let $odd = odd; let $count = count\">\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                                <ng-container *ngIf=\"col.canBeSorted\">\r\n                                    <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"col.canBeFiltered\">\r\n                                    <ng-container *ngIf=\"!col.filterPredefinedValuesName || col.filterPredefinedValuesName.length === 0; else ecsElse3\">\r\n                                        <p-columnFilter [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\" [showButtons]=\"false\" (click)=\"$event.stopPropagation()\"></p-columnFilter>\r\n                                    </ng-container><ng-template #ecsElse3>\r\n                                        <p-columnFilter\r\n                                            [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\"\r\n                                            (click)=\"$event.stopPropagation()\"\r\n                                            [showButtons]=\"false\" matchMode=\"in\" operator=\"or\" [showMatchModes]=\"false\"\r\n                                            [showOperator]=\"false\" [showAddButton]=\"false\" [showClearButton]=\"false\" [showApplyButton]=\"false\">\r\n                                            <ng-template pTemplate=\"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 pTemplate=\"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\"></ecs-table-predefined-filters>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                </p-multiSelect>\r\n                                            </ng-template>\r\n                                        </p-columnFilter>\r\n                                    </ng-template>\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"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                                </ng-container>\r\n                            </div>\r\n                        </div>\r\n                    </th>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.positionRight\">\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"tableOptions.rows?.action?.positionRight\">\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n                </ng-container>\r\n            </tr>\r\n            </ng-container>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS CONTENTS -->\r\n        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\">\r\n            <ng-container *ngIf=\"treeState?.isMore(rowData); else ecsElse4\">\r\n                <tr class=\"ecs-tree-more-row\">\r\n                    <td colspan=\"999\">\r\n                        <p-button icon=\"pi pi-plus\" styleClass=\"p-button-text\" [label]=\"'Load more children' | ecsTranslate\"\r\n                            (onClick)=\"loadMoreTreeRows($event, rowData)\" ></p-button>\r\n                    </td>\r\n                </tr>\r\n            </ng-container><ng-template #ecsElse4>\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                <ng-container *ngIf=\"!tableOptions.rows?.action?.positionRight\">\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.positionRight\">\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let col of columns; trackBy: ecsTrack5; let $index = index; let $first = first; let $last = last; let $even = even; let $odd = odd; let $count = count\">\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                        <ng-container *ngIf=\"treeState && col.field === treeColumn; else ecsElse5\">\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\" ></ecs-table-cell>\r\n                            </div>\r\n                        </ng-container><ng-template #ecsElse5>\r\n                        <ecs-table-cell [col]=\"col\" [rowData]=\"rowData\" [globalSearchText]=\"effectiveGlobalSearchText\"\r\n                            [dateFormat]=\"dateFormat\" [dateTimezone]=\"dateTimezone\" [dateCulture]=\"dateCulture\"\r\n                            [predefinedFiltersCollection]=\"tableOptions.predefinedFilters\"></ecs-table-cell>\r\n                        </ng-template>\r\n                    </td>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.positionRight\">\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"tableOptions.rows?.action?.positionRight\">\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n                </ng-container>\r\n            </tr>\r\n            </ng-template>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS NO CONTENTS -->\r\n        <ng-template pTemplate=\"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 pTemplate=\"paginatorleft\">\r\n            <div #paginatorContainer>\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <ng-container *ngIf=\"tableOptions.legend?.content\">\r\n                        <ecs-table-button [button]=\"tableOptions.legend?.button\" [rowData]=\"null\" [overrideAction]=\"op.toggle.bind(op)\"></ecs-table-button>\r\n                        <p-overlayPanel #op>\r\n                            <div [innerHTML]=\"(tableOptions.legend?.content) | ecsTranslate\"></div>\r\n                        </p-overlayPanel>\r\n                    </ng-container>\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    <ng-container *ngIf=\"treeState\">\r\n        <div #paginatorContainer class=\"ecs-tree-paginator\">\r\n            <ng-container *ngIf=\"tableOptions.legend?.content\">\r\n                <ecs-table-button [button]=\"tableOptions.legend?.button\" [rowData]=\"null\" [overrideAction]=\"treeLegend.toggle.bind(treeLegend)\" ></ecs-table-button>\r\n                <p-overlayPanel #treeLegend><div [innerHTML]=\"(tableOptions.legend?.content) | ecsTranslate\"></div></p-overlayPanel>\r\n            </ng-container>\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)\" ></p-paginator>\r\n        </div>\r\n    </ng-container>\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)\"></ecs-column-selector>\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)\"></ecs-export-excel>\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\"></ecs-views-management>\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\"></p-menu>\r\n<p-menu #responsiveRowMenu [model]=\"rowMenuItems\" [popup]=\"true\" appendTo=\"body\" styleClass=\"ecs-responsive-menu\"></p-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}.ecs-view-buttons{display:inline-flex;align-items:center;flex-wrap:nowrap}.ecs-view-buttons>p-button{display:inline-flex;flex:0 0 auto}.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-global-search{display:inline-flex;align-items:center;gap:8px;min-width:0}.ecs-global-search>.ecs-input-icon{display:inline-flex;flex:0 0 auto}.ecs-global-search input{min-width:0}.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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i6$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: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "virtualRowHeight", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["selectAllChange", "selectionChange", "contextMenuSelectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i6.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i6.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i6.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i6.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i6.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6.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"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "fitContent", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i10.InputText, selector: "[pInputText]" }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i11.MultiSelect, selector: "p-multiSelect", inputs: ["style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "label", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5$1.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "trueValue", "falseValue"], outputs: ["onChange"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i13.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "templateLeft", "templateRight", "dropdownAppendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "showPageLinks", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "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: "component", type: ViewsManagement, selector: "ecs-views-management", inputs: ["visible", "tableViews_menuItems"], outputs: ["onViewSelect", "onViewDelete", "onViewUpdateData", "onViewUpdateActiveStartup", "onViewEditAlias", "onViewCreate", "visibleChange"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i14.OverlayPanel, selector: "p-overlayPanel", inputs: ["dismissable", "showCloseIcon", "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"], outputs: ["onShow", "onHide"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ECSPrimengTable, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecs-primeng-table', imports: [
+                        ECSTableTranslatePipe,
+                        TranslateModule,
+                        CommonModule,
+                        FormsModule,
+                        TableModule,
+                        ButtonModule,
+                        TooltipModule,
+                        InputTextModule,
+                        MultiSelectModule,
+                        CheckboxModule,
+                        PaginatorModule,
+                        TableCell,
+                        TablePredefinedFilters,
+                        TableButton,
+                        ColumnSelector,
+                        ExportExcel,
+                        ViewsManagement,
+                        OverlayPanelModule,
+                        MenuModule
+                    ], standalone: true, encapsulation: ViewEncapsulation.None, template: "<div #tableContainer>\r\n    <p-table #dt\r\n        styleClass=\"p-datatable-sm p-datatable-gridlines p-datatable-striped\"\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        [selectionMode]=\"tableOptions.rows?.singleSelector?.enabled ? 'single' : ''\" [metaKeySelection]=\"tableOptions.rows?.singleSelector?.metakey ?? true\" [(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            <ng-container *ngIf=\"(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            </ng-container>\r\n        </ng-template>\r\n\r\n        <!--TEMPLATE FOR THE ACTIONS ROW COLUMN-->\r\n        <ng-template #actionColumnTemplate let-rowData=\"rowData\">\r\n            <ng-container *ngIf=\"(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                    <ng-container *ngIf=\"compactRows; else ecsElse0\">\r\n                        <ng-container *ngIf=\"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                        </ng-container>\r\n                    </ng-container><ng-template #ecsElse0>\r\n                    <ng-container *ngFor=\"let button of tableOptions.rows?.action?.buttons; trackBy: ecsTrack1; let $index = index; let $first = first; let $last = last; let $even = even; let $odd = odd; let $count = count; let last = last\">\r\n                        <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\"></ecs-table-button>\r\n                    </ng-container>\r\n                    </ng-template>\r\n                </td>\r\n            </ng-container>\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                        <ng-container *ngIf=\"tableOptions.rows?.checkboxSelector?.selectAllEnabled\">\r\n                            <input type=\"checkbox\" class=\"ecs-select-all\" [checked]=\"allMatchingRowsSelected\"\r\n                                [indeterminate]=\"matchingRowsPartiallySelected\"\r\n                                [disabled]=\"selectAllLoading || !tableOptions.rows?.checkboxSelector?.urlSelectAll\"\r\n                                [attr.aria-label]=\"'Select all filtered rows' | ecsTranslate\"\r\n                                [pTooltip]=\"'Select all filtered rows' | ecsTranslate\"\r\n                                (change)=\"toggleAllMatchingRows($any($event.target).checked)\">\r\n                        </ng-container>\r\n                        {{ (tableOptions.rows?.checkboxSelector?.header ?? '') | ecsTranslate }}\r\n                        <p-columnFilter type=\"boolean\" field=\"selector\" display=\"menu\" [showButtons]=\"false\"></p-columnFilter>\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)\"></p-checkbox>\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 pTemplate=\"caption\">\r\n            <div #headerContainer [class.ecs-compact-header]=\"compactHeader\" style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                <ng-container *ngIf=\"compactHeader; else ecsElse1\">\r\n                    <ng-container *ngIf=\"tableOptions.globalFilter?.enabled\">\r\n                        <span class=\"ecs-global-search ecs-responsive-search\">\r\n                            <span class=\"ecs-input-icon\"><i class=\"pi pi-search\"></i></span>\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                            <ng-container *ngIf=\"globalSearchText\">\r\n                                <span class=\"ecs-input-icon\" 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></span>\r\n                            </ng-container>\r\n                        </span>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"tableOptions.description?.text\">\r\n                        <i [class]=\"tableOptions.description!.icon\" [pTooltip]=\"(tableOptions.description!.text) | ecsTranslate\" [escape]=\"false\"></i>\r\n                    </ng-container>\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                </ng-container><ng-template #ecsElse1>\r\n\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <!--CHOOSE COLUMNS TO SHOW-->\r\n                    <ng-container *ngIf=\"tableOptions.columns?.selectorEnabled\">\r\n                        <p-button [icon]=\"tableOptions.columns?.selectorIcon ?? 'pi pi-pencil'\" (onClick)=\"columnSelectorShow()\" [pTooltip]=\"'Modify columns' | ecsTranslate\"\r\n                            [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"></p-button>\r\n                    </ng-container>\r\n                    <!--CLEAR SORTS AND FILTERS-->\r\n                    <ng-container *ngIf=\"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\"></p-button>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"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\"></p-button>\r\n                    </ng-container>\r\n\r\n                    <!--TABLE DESCRIPTION-->\r\n                    <ng-container *ngIf=\"tableOptions.description?.text\"> <!-- If a table description text is provided -->\r\n                        <ng-container *ngIf=\"!tableOptions.description!.tooltip; else ecsElse2\"> <!-- 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                        </ng-container><ng-template #ecsElse2>\r\n                            <i [escape]=\"false\" [pTooltip]=\"(tableOptions.description!.text) | ecsTranslate\" tooltipPosition=\"right\" [class]=\"tableOptions.description!.icon\"></i>\r\n                        </ng-template>\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <!--TABLE VIEWS-->\r\n                <ng-container *ngIf=\"tableViewsEnabled()\">\r\n                    <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                        <span class=\"p-buttonset ecs-view-buttons\">\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 : '')\"></p-button>\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 || ''\"></p-button>\r\n                        </span>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <!--GLOBAL FILTER-->\r\n                    <ng-container *ngIf=\"tableOptions.globalFilter?.enabled\">\r\n                        <span class=\"ecs-global-search ml-auto\">\r\n                            <span class=\"ecs-input-icon\">\r\n                                <i class=\"pi pi-search\"></i>\r\n                            </span>\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                            <ng-container *ngIf=\"globalSearchText\">\r\n                                <span class=\"ecs-input-icon\" position=\"right\">\r\n                                    <i class=\"pi pi-times\" style=\"cursor: pointer;\"  (click)=\"clearFilters(dt, true, true); $event.stopPropagation()\"></i>\r\n                                </span>\r\n                            </ng-container>\r\n                        </span>\r\n                    </ng-container>\r\n\r\n                    <!--EXPORT DATA-->\r\n                    <ng-container *ngIf=\"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\"></p-button>\r\n                    </ng-container>\r\n\r\n                    <!--RESET TABLE VIEW-->\r\n                    <ng-container *ngIf=\"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\"></p-button>\r\n                    </ng-container>\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\"></p-button>\r\n                    \r\n                    <!-- HEADER ACTION BUTTONS -->\r\n                    <ng-container *ngIf=\"(tableOptions.header?.buttons?.length ?? 0) > 0\">\r\n                        <td style=\"display: flex; justify-content: center; align-items: center; gap: 10px;\">\r\n                            <ng-container *ngFor=\"let button of tableOptions.header?.buttons; trackBy: ecsTrack2; let $index = index; let $first = first; let $last = last; let $even = even; let $odd = odd; let $count = count\">\r\n                                <ecs-table-button [button]=\"button\" [rowData]=\"null\"></ecs-table-button>\r\n                            </ng-container>\r\n                        </td>\r\n                    </ng-container>\r\n                </div>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE HEADERS -->\r\n        <ng-template pTemplate=\"header\" let-columns>\r\n            <ng-container *ngIf=\"getColumnHeaderGroups(columns) as headerGroups\">\r\n            <ng-container *ngIf=\"headerGroups.length\">\r\n                <tr class=\"ecs-column-groups\">\r\n                    <ng-container *ngIf=\"(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                    </ng-container>\r\n                    <ng-container *ngIf=\"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                    </ng-container>\r\n                    <ng-container *ngFor=\"let group of headerGroups; trackBy: ecsTrack3; let $index = index; let $first = first; let $last = last; let $even = even; let $odd = odd; let $count = count\">\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                    </ng-container>\r\n                    <ng-container *ngIf=\"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                    </ng-container>\r\n                    <ng-container *ngIf=\"(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                    </ng-container>\r\n                </tr>\r\n            </ng-container>\r\n            <tr>\r\n                <ng-container *ngIf=\"!tableOptions.rows?.action?.positionRight\">\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.positionRight\">\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let col of columns; trackBy: ecsTrack4; let $index = index; let $first = first; let $last = last; let $even = even; let $odd = odd; let $count = count\">\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                                <ng-container *ngIf=\"col.canBeSorted\">\r\n                                    <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"col.canBeFiltered\">\r\n                                    <ng-container *ngIf=\"!col.filterPredefinedValuesName || col.filterPredefinedValuesName.length === 0; else ecsElse3\">\r\n                                        <p-columnFilter [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\" [showButtons]=\"false\" (click)=\"$event.stopPropagation()\"></p-columnFilter>\r\n                                    </ng-container><ng-template #ecsElse3>\r\n                                        <p-columnFilter\r\n                                            [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\"\r\n                                            (click)=\"$event.stopPropagation()\"\r\n                                            [showButtons]=\"false\" matchMode=\"in\" operator=\"or\" [showMatchModes]=\"false\"\r\n                                            [showOperator]=\"false\" [showAddButton]=\"false\" [showClearButton]=\"false\" [showApplyButton]=\"false\">\r\n                                            <ng-template pTemplate=\"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 pTemplate=\"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\"></ecs-table-predefined-filters>\r\n                                                        </div>\r\n                                                    </ng-template>\r\n                                                </p-multiSelect>\r\n                                            </ng-template>\r\n                                        </p-columnFilter>\r\n                                    </ng-template>\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"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                                </ng-container>\r\n                            </div>\r\n                        </div>\r\n                    </th>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.positionRight\">\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"tableOptions.rows?.action?.positionRight\">\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n                </ng-container>\r\n            </tr>\r\n            </ng-container>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS CONTENTS -->\r\n        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\">\r\n            <ng-container *ngIf=\"treeState?.isMore(rowData); else ecsElse4\">\r\n                <tr class=\"ecs-tree-more-row\">\r\n                    <td colspan=\"999\">\r\n                        <p-button icon=\"pi pi-plus\" styleClass=\"p-button-text\" [label]=\"'Load more children' | ecsTranslate\"\r\n                            (onClick)=\"loadMoreTreeRows($event, rowData)\" ></p-button>\r\n                    </td>\r\n                </tr>\r\n            </ng-container><ng-template #ecsElse4>\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                <ng-container *ngIf=\"!tableOptions.rows?.action?.positionRight\">\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.positionRight\">\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let col of columns; trackBy: ecsTrack5; let $index = index; let $first = first; let $last = last; let $even = even; let $odd = odd; let $count = count\">\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                        <ng-container *ngIf=\"treeState && col.field === treeColumn; else ecsElse5\">\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\" ></ecs-table-cell>\r\n                            </div>\r\n                        </ng-container><ng-template #ecsElse5>\r\n                        <ecs-table-cell [col]=\"col\" [rowData]=\"rowData\" [globalSearchText]=\"effectiveGlobalSearchText\"\r\n                            [dateFormat]=\"dateFormat\" [dateTimezone]=\"dateTimezone\" [dateCulture]=\"dateCulture\"\r\n                            [predefinedFiltersCollection]=\"tableOptions.predefinedFilters\"></ecs-table-cell>\r\n                        </ng-template>\r\n                    </td>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.positionRight\">\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"tableOptions.rows?.action?.positionRight\">\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n                </ng-container>\r\n            </tr>\r\n            </ng-template>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS NO CONTENTS -->\r\n        <ng-template pTemplate=\"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 pTemplate=\"paginatorleft\">\r\n            <div #paginatorContainer>\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <ng-container *ngIf=\"tableOptions.legend?.content\">\r\n                        <ecs-table-button [button]=\"tableOptions.legend?.button\" [rowData]=\"null\" [overrideAction]=\"op.toggle.bind(op)\"></ecs-table-button>\r\n                        <p-overlayPanel #op>\r\n                            <div [innerHTML]=\"(tableOptions.legend?.content) | ecsTranslate\"></div>\r\n                        </p-overlayPanel>\r\n                    </ng-container>\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    <ng-container *ngIf=\"treeState\">\r\n        <div #paginatorContainer class=\"ecs-tree-paginator\">\r\n            <ng-container *ngIf=\"tableOptions.legend?.content\">\r\n                <ecs-table-button [button]=\"tableOptions.legend?.button\" [rowData]=\"null\" [overrideAction]=\"treeLegend.toggle.bind(treeLegend)\" ></ecs-table-button>\r\n                <p-overlayPanel #treeLegend><div [innerHTML]=\"(tableOptions.legend?.content) | ecsTranslate\"></div></p-overlayPanel>\r\n            </ng-container>\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)\" ></p-paginator>\r\n        </div>\r\n    </ng-container>\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)\"></ecs-column-selector>\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)\"></ecs-export-excel>\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\"></ecs-views-management>\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\"></p-menu>\r\n<p-menu #responsiveRowMenu [model]=\"rowMenuItems\" [popup]=\"true\" appendTo=\"body\" styleClass=\"ecs-responsive-menu\"></p-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}.ecs-view-buttons{display:inline-flex;align-items:center;flex-wrap:nowrap}.ecs-view-buttons>p-button{display:inline-flex;flex:0 0 auto}.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-global-search{display:inline-flex;align-items:center;gap:8px;min-width:0}.ecs-global-search>.ecs-input-icon{display:inline-flex;flex:0 0 auto}.ecs-global-search input{min-width:0}.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: function () { return [{ type: ECSPrimengTableService }, { type: ECSPrimengTableNotificationService }]; }, propDecorators: { tableOptions: [{
+                type: Input
+            }], onRowCheckboxChange: [{
+                type: Output
+            }], onRowSelect: [{
+                type: Output
+            }], onRowUnselect: [{
+                type: Output
+            }], onDataEndUpdate: [{
+                type: Output
+            }], dt: [{
+                type: ViewChild,
+                args: ['dt']
+            }], tableContainer: [{
+                type: ViewChild,
+                args: ['tableContainer', { static: false }]
+            }], headerContainer: [{
+                type: ViewChild,
+                args: ['headerContainer', { static: false }]
+            }], paginatorContainer: [{
+                type: ViewChild,
+                args: ['paginatorContainer', { static: false }]
+            }], responsiveHeaderMenu: [{
+                type: ViewChild,
+                args: ['responsiveHeaderMenu']
+            }], responsiveRowMenu: [{
+                type: ViewChild,
+                args: ['responsiveRowMenu']
+            }], closeResponsiveMenus: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+/*
+ * Public API Surface of ecs-primeng-table
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+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