@eternalcodestudio/primeng-table 19.0.0 → 19.0.1

package/fesm2022/eternalcodestudio-primeng-table.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, Component, Injectable, EventEmitter, Output, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Injectable, Input, Component, EventEmitter, Output, ViewChild, HostListener, ViewEncapsulation } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i8$1 from '@angular/forms';
@@ -14,11 +14,11 @@ import * as i11 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i10 from 'primeng/iconfield';
 import { IconFieldModule } from 'primeng/iconfield';
-import * as i9 from 'primeng/inputicon';
+import * as i9$1 from 'primeng/inputicon';
 import { InputIconModule } from 'primeng/inputicon';
 import * as i12 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
-import * as i4$1 from 'primeng/checkbox';
+import * as i9 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
 import { PaginatorModule } from 'primeng/paginator';
 import * as i14 from 'primeng/buttongroup';
@@ -35,52 +35,215 @@ import { DialogModule } from 'primeng/dialog';
 import * as i6 from 'primeng/selectbutton';
 import { SelectButtonModule, SelectButton } from 'primeng/selectbutton';
 import * as i2 from 'primeng/api';
-import { Observable } from 'rxjs';
+import { Observable, finalize } from 'rxjs';
 
+/**
+ * Enum representing how content that overflows a table cell should be handled.
+ *
+ * @remarks
+ * Determines the visual behavior of cell content when it exceeds the cell's width.
+ */
 var CellOverflowBehaviour;
 (function (CellOverflowBehaviour) {
+    /** Content that exceeds the cell's width is clipped and not visible. */
     CellOverflowBehaviour[CellOverflowBehaviour["Hidden"] = 0] = "Hidden";
-    CellOverflowBehaviour[CellOverflowBehaviour["Wrap"] = 1] = "Wrap"; /*,
-    Ellipsis*/
+    /** Content wraps onto multiple lines to fit within the cell. */
+    CellOverflowBehaviour[CellOverflowBehaviour["Wrap"] = 1] = "Wrap";
+    /** Content is truncated and an ellipsis (...) is shown at the end. */
+    CellOverflowBehaviour[CellOverflowBehaviour["Ellipsis"] = 2] = "Ellipsis";
 })(CellOverflowBehaviour || (CellOverflowBehaviour = {}));
 
+/**
+ * Enum representing the horizontal alignment of content within a table cell.
+ *
+ * @remarks
+ * Determines how the content inside a cell is positioned horizontally relative to the cell's width.
+ */
 var DataAlignHorizontal;
 (function (DataAlignHorizontal) {
+    /** Align content to the left of the cell. */
     DataAlignHorizontal[DataAlignHorizontal["Left"] = 0] = "Left";
+    /** Align content to the center of the cell. */
     DataAlignHorizontal[DataAlignHorizontal["Center"] = 1] = "Center";
+    /** Align content to the right 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) {
-    TableViewSaveMode[TableViewSaveMode["noone"] = 0] = "noone";
-    TableViewSaveMode[TableViewSaveMode["sessionStorage"] = 1] = "sessionStorage";
-    TableViewSaveMode[TableViewSaveMode["localStorage"] = 2] = "localStorage";
-    TableViewSaveMode[TableViewSaveMode["databaseStorage"] = 3] = "databaseStorage";
+    /** Do not save the table view state. */
+    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 = {}));
 
+const DEFAULT_TABLE_OPTIONS = {
+    isActive: true,
+    data: [],
+    urlTableConfiguration: undefined,
+    urlTableData: undefined,
+    header: {
+        buttons: [],
+        clearSortsEnabled: true,
+        clearSortsIcon: "pi pi-sort-alt-slash",
+        clearFiltersEnabled: true,
+        clearFiltersIcon: "pi pi-filter-slash"
+    },
+    columns: {
+        selectorEnabled: true,
+        selectorIcon: "pi pi-pen-to-square",
+        shown: []
+    },
+    rows: {
+        style: () => ({}),
+        class: () => ({}),
+        action: {
+            buttons: [],
+            header: "Actions",
+            alignmentRight: true,
+            width: 150,
+            frozen: true,
+            resizable: false
+        },
+        checkboxSelector: {
+            enabled: false,
+            header: "Selected",
+            alignmentRight: false,
+            width: 150,
+            frozen: true,
+            resizable: false,
+            enabledCondition: undefined
+        },
+        singleSelector: {
+            enabled: false,
+            metakey: true
+        }
+    },
+    verticalScroll: {
+        fitToContainer: true,
+        height: 0,
+        cssFormula: undefined
+    },
+    globalFilter: {
+        enabled: true,
+        maxLength: 20
+    },
+    predefinedFilters: {},
+    views: {
+        saveMode: TableViewSaveMode.None,
+        saveKey: undefined,
+        urlGet: undefined,
+        urlSave: undefined
+    },
+    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)); // clona solo datos
+    const merged = deepMerge(defaultsCopy, overrides);
+    // reasignar funciones si existen en overrides
+    if (overrides.rows?.style)
+        merged.rows.style = overrides.rows.style;
+    if (overrides.rows?.class)
+        merged.rows.class = overrides.rows.class;
+    return merged;
+}
+
 function dataAlignHorizontalAsText(dataAlignHorizontal) {
     switch (dataAlignHorizontal) {
         case DataAlignHorizontal.Left:
@@ -175,170 +338,33 @@ function highlightText(cellValue, colMetadata, globalSearchText) {
     return cellValue; // Return the original cell value if it doesn't meet the highlighting conditions
 }
 
-class TablePredifinedFilters {
-    sanitizer;
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-    }
-    option;
-    col;
-    /**
-     * 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
-    }
-    getIconStyles(option) {
-        return {
-            'vertical-align': 'middle',
-            'margin-right': '0.5rem',
-            'color': option.iconColor || '',
-            ...option.iconStyle
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TablePredifinedFilters, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TablePredifinedFilters, isStandalone: true, selector: "ecs-table-predifined-filters", inputs: { option: "option", col: "col" }, ngImport: i0, template: "@if (option?.icon) {\r\n  <i [class]=\"option.icon\" [ngStyle]=\"getIconStyles(option)\"></i>\r\n}\r\n@if (!option?.iconBlob && option?.iconBlobSourceEndpoint) {\r\n  <p-skeleton size=\"28px\" [ngStyle]=\"{\r\n    'vertical-align': 'middle',\r\n    'margin-right': '0.5rem'\r\n  }\"/>\r\n}\r\n@if (option?.iconBlob) {\r\n  <img alt=\"iconBlob\"\r\n       [src]=\"getBlobIconAsUrl(option.iconBlob)\"\r\n       height=\"28\"\r\n       style=\"vertical-align: middle; margin-right: 0.5rem;\"/>\r\n}\r\n@if (option?.iconURL) {\r\n  <img alt=\"iconFromURL\"\r\n       [src]=\"option.iconURL\"\r\n       height=\"28\"\r\n       style=\"vertical-align: middle; margin-right: 0.5rem;\"/>\r\n}\r\n@if (option?.displayTag === true) {\r\n  <p-tag [style]=\"option.tagStyle\"\r\n         [ngStyle]=\"{\r\n            'vertical-align': 'middle',\r\n            'margin-right': '0.5rem'\r\n          }\">\r\n    {{ option.name }}\r\n  </p-tag>\r\n}\r\n@if (option?.displayName === true) {\r\n  <span style=\"margin-left: 0.25rem; margin-top: 0.25rem;\">{{ option.name }}</span>\r\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: ["style", "styleClass", "severity", "value", "icon", "rounded"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TablePredifinedFilters, decorators: [{
-            type: Component,
-            args: [{ selector: 'ecs-table-predifined-filters', imports: [
-                        CommonModule,
-                        SkeletonModule,
-                        TagModule
-                    ], standalone: true, template: "@if (option?.icon) {\r\n  <i [class]=\"option.icon\" [ngStyle]=\"getIconStyles(option)\"></i>\r\n}\r\n@if (!option?.iconBlob && option?.iconBlobSourceEndpoint) {\r\n  <p-skeleton size=\"28px\" [ngStyle]=\"{\r\n    'vertical-align': 'middle',\r\n    'margin-right': '0.5rem'\r\n  }\"/>\r\n}\r\n@if (option?.iconBlob) {\r\n  <img alt=\"iconBlob\"\r\n       [src]=\"getBlobIconAsUrl(option.iconBlob)\"\r\n       height=\"28\"\r\n       style=\"vertical-align: middle; margin-right: 0.5rem;\"/>\r\n}\r\n@if (option?.iconURL) {\r\n  <img alt=\"iconFromURL\"\r\n       [src]=\"option.iconURL\"\r\n       height=\"28\"\r\n       style=\"vertical-align: middle; margin-right: 0.5rem;\"/>\r\n}\r\n@if (option?.displayTag === true) {\r\n  <p-tag [style]=\"option.tagStyle\"\r\n         [ngStyle]=\"{\r\n            'vertical-align': 'middle',\r\n            'margin-right': '0.5rem'\r\n          }\">\r\n    {{ option.name }}\r\n  </p-tag>\r\n}\r\n@if (option?.displayName === true) {\r\n  <span style=\"margin-left: 0.25rem; margin-top: 0.25rem;\">{{ option.name }}</span>\r\n}" }]
-        }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { option: [{
-                type: Input
-            }], col: [{
-                type: Input
-            }] } });
-
-class TableCell {
-    datePipe;
-    constructor(datePipe) {
-        this.datePipe = datePipe;
-    }
-    col;
-    rowData;
-    globalSearchText = null;
-    predifinedFiltersCollection = {}; // Contains a collection of the values that need to be shown for predifined column filters
-    dateFormat = "dd-MMM-yyyy HH:mm:ss zzzz";
-    dateTimezone = "+00:00";
-    dateCulture = "en-US";
-    DataType = DataType;
-    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;
-    }
-    getDataAlignHorizontalAsText(dataAlignHorizontal) {
-        dataAlignHorizontalAsText(dataAlignHorizontal);
-    }
-    getDataAlignVerticalAsText(dataAlignVertical) {
-        dataAlignVerticalAsText(dataAlignVertical);
-    }
-    /**
-     * Formats a date value to a specific string format. Provided date will be assumed to be in UTC
-     *
-     * @param {any} value - The date value to be formatted.
-     * @returns {string} - The formatted date string in 'dd-MMM-yyyy HH:mm:ss' format followed by the timezone, or empty string if the provided value is invalid or undefined.
-     *
-     * @example
-     * // Example date value
-     * const dateValue: Date = new Date();
-     *
-     * // Use formatDate to get the formatted date string
-     * const formattedDate: string = formatDate(dateValue);
-     *
-     * // Output might be: '18-Jun-2024 14:30:00 GMT+0000'
-     */
-    formatDate(value) {
-        let formattedDate = undefined; // By default, formattedDate will be undefined
-        if (value) { // If value is not undefined
-            formattedDate = this.datePipe.transform(value, this.dateFormat, this.dateTimezone, this.dateCulture); // Perform the date masking
-        }
-        return formattedDate ?? ''; // Returns the date formatted, or as empty string if an issue was found (or value was undefined).
-    }
-    /**
-     * 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.filterPredifinedValuesName && colMetadata.filterPredifinedValuesName.length > 0) { // Check if the column uses predefined filter values
-            const options = this.getPredifinedFilterValues(colMetadata.filterPredifinedValuesName); // 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
-    }
-    getPredifinedFilterValues(columnKeyName) {
-        return this.predifinedFiltersCollection[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);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableCell, deps: [{ token: i1$1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableCell, isStandalone: true, selector: "ecs-table-cell", inputs: { col: "col", rowData: "rowData", globalSearchText: "globalSearchText", predifinedFiltersCollection: "predifinedFiltersCollection", dateFormat: "dateFormat", dateTimezone: "dateTimezone", dateCulture: "dateCulture" }, ngImport: i0, template: "<!--\r\n[ngStyle]=\"{\r\n            'display': 'flex',\r\n            'justify-content': getDataAlignHorizontalAsText(col.dataAlignHorizontal),\r\n            'align-items': getDataAlignVerticalAsText(col.dataAlignVertical)\r\n        }\">\r\n-->\r\n@if (value !== null) {\r\n  @if (col.filterPredifinedValuesName && col.filterPredifinedValuesName.length > 0) {\r\n    <div [ngStyle]=\"{\r\n            'justify-content': getDataAlignHorizontalAsText(col.dataAlignHorizontal),\r\n            'align-items': getDataAlignVerticalAsText(col.dataAlignVertical)\r\n        }\">\r\n      @if (getPredfinedFilterMatch(col, value); as option) {\r\n        <div \r\n          [pTooltip]=\"tooltipText\"\r\n          [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n          [showDelay]=\"700\"\r\n          tooltipPosition=\"top\">\r\n          <ecs-table-predifined-filters [option]=\"option\" [col]=\"col\"/>\r\n        </div>\r\n      }\r\n    </div>\r\n  } @else {\r\n    @switch (col.dataType) {\r\n      @case (DataType.Boolean) {\r\n        <i class=\"pi\"\r\n          [pTooltip]=\"tooltipText\"\r\n          [tooltipDisabled]=\"!col.dataTooltipShow\"\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      }\r\n      @case (DataType.Date) {\r\n        <div \r\n          [innerHtml]=\"highlightText(formatDate(value), col, globalSearchText)\"\r\n          [pTooltip]=\"tooltipText\"\r\n          [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n          [showDelay]=\"700\"\r\n          tooltipPosition=\"top\">\r\n          {{ formatDate(value) }}\r\n        </div>\r\n      }\r\n      @default {\r\n        <div\r\n          [innerHtml]=\"highlightText(value, col, globalSearchText)\"\r\n          [pTooltip]=\"tooltipText\"\r\n          [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n          [showDelay]=\"700\"\r\n          tooltipPosition=\"top\">\r\n          {{ value }}\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: TablePredifinedFilters, selector: "ecs-table-predifined-filters", inputs: ["option", "col"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableCell, decorators: [{
-            type: Component,
-            args: [{ selector: 'ecs-table-cell', imports: [
-                        CommonModule,
-                        TooltipModule,
-                        TablePredifinedFilters
-                    ], standalone: true, template: "<!--\r\n[ngStyle]=\"{\r\n            'display': 'flex',\r\n            'justify-content': getDataAlignHorizontalAsText(col.dataAlignHorizontal),\r\n            'align-items': getDataAlignVerticalAsText(col.dataAlignVertical)\r\n        }\">\r\n-->\r\n@if (value !== null) {\r\n  @if (col.filterPredifinedValuesName && col.filterPredifinedValuesName.length > 0) {\r\n    <div [ngStyle]=\"{\r\n            'justify-content': getDataAlignHorizontalAsText(col.dataAlignHorizontal),\r\n            'align-items': getDataAlignVerticalAsText(col.dataAlignVertical)\r\n        }\">\r\n      @if (getPredfinedFilterMatch(col, value); as option) {\r\n        <div \r\n          [pTooltip]=\"tooltipText\"\r\n          [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n          [showDelay]=\"700\"\r\n          tooltipPosition=\"top\">\r\n          <ecs-table-predifined-filters [option]=\"option\" [col]=\"col\"/>\r\n        </div>\r\n      }\r\n    </div>\r\n  } @else {\r\n    @switch (col.dataType) {\r\n      @case (DataType.Boolean) {\r\n        <i class=\"pi\"\r\n          [pTooltip]=\"tooltipText\"\r\n          [tooltipDisabled]=\"!col.dataTooltipShow\"\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      }\r\n      @case (DataType.Date) {\r\n        <div \r\n          [innerHtml]=\"highlightText(formatDate(value), col, globalSearchText)\"\r\n          [pTooltip]=\"tooltipText\"\r\n          [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n          [showDelay]=\"700\"\r\n          tooltipPosition=\"top\">\r\n          {{ formatDate(value) }}\r\n        </div>\r\n      }\r\n      @default {\r\n        <div\r\n          [innerHtml]=\"highlightText(value, col, globalSearchText)\"\r\n          [pTooltip]=\"tooltipText\"\r\n          [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n          [showDelay]=\"700\"\r\n          tooltipPosition=\"top\">\r\n          {{ value }}\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n}" }]
-        }], ctorParameters: () => [{ type: i1$1.DatePipe }], propDecorators: { col: [{
-                type: Input
-            }], rowData: [{
-                type: Input
-            }], globalSearchText: [{
-                type: Input
-            }], predifinedFiltersCollection: [{
-                type: Input
-            }], dateFormat: [{
-                type: Input
-            }], dateTimezone: [{
-                type: Input
-            }], dateCulture: [{
-                type: Input
-            }] } });
-
+/**
+ * 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 {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ECSPrimengTableHttpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ECSPrimengTableHttpService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ECSPrimengTableHttpService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ECSPrimengTableHttpService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ECSPrimengTableHttpService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", 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 {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ECSPrimengTableNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ECSPrimengTableNotificationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ECSPrimengTableNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ECSPrimengTableNotificationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ECSPrimengTableNotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ECSPrimengTableNotificationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -361,7 +387,10 @@ class ECSPrimengTableService {
             'accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
             'Content-Type': 'application/json'
         });
-        return this.http.handleHttpPostRequest(url, postData, httpOptions, true, null, true, 'blob');
+        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 });
@@ -404,37 +433,77 @@ class ECSPrimengTableService {
             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) {
-            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'
-            };
+            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;
+        return styles;*/
     }
     fetchTableViews(tableViewSaveAs, recoverListEndpoint, tableViewSaveKey) {
         let tableViewList = [];
         let tableViewNotParsed = null;
         if (tableViewSaveKey !== "" && tableViewSaveKey !== '') {
             switch (tableViewSaveAs) {
-                case TableViewSaveMode.noone:
+                case TableViewSaveMode.None:
                     tableViewNotParsed = null;
                     break;
-                case TableViewSaveMode.sessionStorage:
+                case TableViewSaveMode.SessionStorage:
                     tableViewNotParsed = sessionStorage.getItem(tableViewSaveKey);
                     break;
-                case TableViewSaveMode.localStorage:
+                case TableViewSaveMode.LocalStorage:
                     tableViewNotParsed = localStorage.getItem(tableViewSaveKey);
                     break;
-                case TableViewSaveMode.databaseStorage:
+                case TableViewSaveMode.DatabaseStorage:
                     const postData = {
                         tableViewSaveKey: tableViewSaveKey
                     };
@@ -452,7 +521,8 @@ class ECSPrimengTableService {
     }
     updateViewsMenuItems(tableSaveViewList) {
         return tableSaveViewList.map(item => ({
-            label: item.viewAlias
+            label: item.viewAlias,
+            lastActive: item.lastActive
         }));
     }
     viewsSaveToDatabase(tableSaveViewList, setListEndpoint, tableViewSaveKey) {
@@ -502,16 +572,190 @@ class ECSPrimengTableService {
         }
         return tableWidth;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ECSPrimengTableService, deps: [{ token: ECSPrimengTableHttpService }, { token: ECSPrimengTableNotificationService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ECSPrimengTableService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ECSPrimengTableService, deps: [{ token: ECSPrimengTableHttpService }, { token: ECSPrimengTableNotificationService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ECSPrimengTableService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ECSPrimengTableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ECSPrimengTableService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }], ctorParameters: () => [{ type: ECSPrimengTableHttpService }, { type: ECSPrimengTableNotificationService }] });
 
+class TablePredefinedFilters {
+    sanitizer;
+    tableService;
+    constructor(sanitizer, tableService) {
+        this.sanitizer = sanitizer;
+        this.tableService = tableService;
+    }
+    option;
+    col;
+    selectable = false;
+    rowData;
+    /**
+     * 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'
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TablePredefinedFilters, deps: [{ token: i1.DomSanitizer }, { token: ECSPrimengTableService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TablePredefinedFilters, isStandalone: true, selector: "ecs-table-predefined-filters", inputs: { option: "option", col: "col", selectable: "selectable", rowData: "rowData" }, ngImport: i0, template: "<div style=\"align-items: center; gap: 0.25rem;\"\r\n    [style.cursor]=\"(selectable && option?.action) ? 'pointer' : 'default'\"\r\n    [attr.role]=\"selectable && option?.action ? 'button' : null\"\r\n    (click)=\"handleClick(); $event.stopPropagation();\">\r\n  @if (option?.icon) {\r\n    <i [class]=\"option.icon\"\r\n      [style]=\"'vertical-align: middle; color: '+(option.iconColor || '') +';' +(option.iconStyle || '')\"></i>\r\n  }\r\n  @if (!option?.imageBlob && option?.imageBlobSourceEndpoint) {\r\n    <p-skeleton size=\"28px\"\r\n                [style]=\"{'vertical-align': 'middle'}\"/>\r\n  }\r\n  @if (option?.imageBlob) {\r\n    <img alt=\"image\"\r\n        [src]=\"getBlobIconAsUrl(option.imageBlob)\"\r\n        height=\"28\"\r\n        style=\"vertical-align: middle;\"/>\r\n  }\r\n  @if (option?.imageURL) {\r\n    <img alt=\"iconFromURL\"\r\n        [src]=\"option.imageURL\"\r\n        height=\"28\"\r\n        style=\"vertical-align: middle;\"/>\r\n  }\r\n  @if (option?.displayTag === true) {\r\n    <p-tag [style]=\"getTagStyle(option)\" [value]=\"option.name\"/>\r\n  }\r\n  @if (option?.displayName === true) {\r\n    <span>{{ option.name }}</span>\r\n  }\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: ["style", "styleClass", "severity", "value", "icon", "rounded"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TablePredefinedFilters, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecs-table-predefined-filters', imports: [
+                        SkeletonModule,
+                        TagModule
+                    ], standalone: true, template: "<div style=\"align-items: center; gap: 0.25rem;\"\r\n    [style.cursor]=\"(selectable && option?.action) ? 'pointer' : 'default'\"\r\n    [attr.role]=\"selectable && option?.action ? 'button' : null\"\r\n    (click)=\"handleClick(); $event.stopPropagation();\">\r\n  @if (option?.icon) {\r\n    <i [class]=\"option.icon\"\r\n      [style]=\"'vertical-align: middle; color: '+(option.iconColor || '') +';' +(option.iconStyle || '')\"></i>\r\n  }\r\n  @if (!option?.imageBlob && option?.imageBlobSourceEndpoint) {\r\n    <p-skeleton size=\"28px\"\r\n                [style]=\"{'vertical-align': 'middle'}\"/>\r\n  }\r\n  @if (option?.imageBlob) {\r\n    <img alt=\"image\"\r\n        [src]=\"getBlobIconAsUrl(option.imageBlob)\"\r\n        height=\"28\"\r\n        style=\"vertical-align: middle;\"/>\r\n  }\r\n  @if (option?.imageURL) {\r\n    <img alt=\"iconFromURL\"\r\n        [src]=\"option.imageURL\"\r\n        height=\"28\"\r\n        style=\"vertical-align: middle;\"/>\r\n  }\r\n  @if (option?.displayTag === true) {\r\n    <p-tag [style]=\"getTagStyle(option)\" [value]=\"option.name\"/>\r\n  }\r\n  @if (option?.displayName === true) {\r\n    <span>{{ option.name }}</span>\r\n  }\r\n</div>" }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: ECSPrimengTableService }], propDecorators: { option: [{
+                type: Input
+            }], col: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], rowData: [{
+                type: Input
+            }] } });
+
+class TableCell {
+    datePipe;
+    constructor(datePipe) {
+        this.datePipe = datePipe;
+    }
+    col;
+    rowData;
+    globalSearchText = null;
+    predefinedFiltersCollection = {}; // Contains a collection of the values that need to be shown for predefined column filters
+    dateFormat = "dd-MMM-yyyy HH:mm:ss zzzz";
+    dateTimezone = "+00:00";
+    dateCulture = "en-US";
+    DataType = DataType;
+    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()) : [];
+    }
+    getDataAlignHorizontalAsText(dataAlignHorizontal) {
+        dataAlignHorizontalAsText(dataAlignHorizontal);
+    }
+    getDataAlignVerticalAsText(dataAlignVertical) {
+        dataAlignVerticalAsText(dataAlignVertical);
+    }
+    /**
+     * Formats a date value to a specific string format. Provided date will be assumed to be in UTC
+     *
+     * @param {any} value - The date value to be formatted.
+     * @returns {string} - The formatted date string in 'dd-MMM-yyyy HH:mm:ss' format followed by the timezone, or empty string if the provided value is invalid or undefined.
+     *
+     * @example
+     * // Example date value
+     * const dateValue: Date = new Date();
+     *
+     * // Use formatDate to get the formatted date string
+     * const formattedDate: string = formatDate(dateValue);
+     *
+     * // Output might be: '18-Jun-2024 14:30:00 GMT+0000'
+     */
+    formatDate(value) {
+        let formattedDate = undefined; // By default, formattedDate will be undefined
+        if (value) { // If value is not undefined
+            formattedDate = this.datePipe.transform(value, this.dateFormat, this.dateTimezone, this.dateCulture); // 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);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableCell, deps: [{ token: i1$1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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: "@if (value !== null) {\r\n  @if (col.filterPredefinedValuesName && col.filterPredefinedValuesName.length > 0) {\r\n    <div [ngStyle]=\"{\r\n            'justify-content': getDataAlignHorizontalAsText(col.dataAlignHorizontal),\r\n            'align-items': getDataAlignVerticalAsText(col.dataAlignVertical)\r\n        }\">\r\n      @if (col.dataType === DataType.List){\r\n        @for (item of getListValues(col, rowData); track item) {\r\n          @if (getPredfinedFilterMatch(col, item); as option) {\r\n            <div style=\"display: inline-block; margin-right: 0.5rem;\"\r\n                [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n                    ? rowData[col.dataTooltipCustomColumnSource] \r\n                    : item\"\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\"/>\r\n            </div>\r\n          }\r\n        }\r\n      } @else {\r\n        @if (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\"/>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  } @else {\r\n    @switch (col.dataType) {\r\n      @case (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      }\r\n      @case (DataType.Date) {\r\n        <div \r\n          [innerHtml]=\"highlightText(formatDate(value), col, globalSearchText)\"\r\n          [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n            ? rowData[col.dataTooltipCustomColumnSource] \r\n            : formatDate(value)\"\r\n          [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n          [showDelay]=\"700\"\r\n          tooltipPosition=\"top\">\r\n          {{ formatDate(value) }}\r\n        </div>\r\n      }\r\n      @default {\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      }\r\n    }\r\n  }\r\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: TablePredefinedFilters, selector: "ecs-table-predefined-filters", inputs: ["option", "col", "selectable", "rowData"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableCell, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecs-table-cell', imports: [
+                        CommonModule,
+                        TooltipModule,
+                        TablePredefinedFilters
+                    ], standalone: true, template: "@if (value !== null) {\r\n  @if (col.filterPredefinedValuesName && col.filterPredefinedValuesName.length > 0) {\r\n    <div [ngStyle]=\"{\r\n            'justify-content': getDataAlignHorizontalAsText(col.dataAlignHorizontal),\r\n            'align-items': getDataAlignVerticalAsText(col.dataAlignVertical)\r\n        }\">\r\n      @if (col.dataType === DataType.List){\r\n        @for (item of getListValues(col, rowData); track item) {\r\n          @if (getPredfinedFilterMatch(col, item); as option) {\r\n            <div style=\"display: inline-block; margin-right: 0.5rem;\"\r\n                [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n                    ? rowData[col.dataTooltipCustomColumnSource] \r\n                    : item\"\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\"/>\r\n            </div>\r\n          }\r\n        }\r\n      } @else {\r\n        @if (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\"/>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  } @else {\r\n    @switch (col.dataType) {\r\n      @case (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      }\r\n      @case (DataType.Date) {\r\n        <div \r\n          [innerHtml]=\"highlightText(formatDate(value), col, globalSearchText)\"\r\n          [pTooltip]=\"col.dataTooltipCustomColumnSource && col.dataTooltipCustomColumnSource.length > 0 \r\n            ? rowData[col.dataTooltipCustomColumnSource] \r\n            : formatDate(value)\"\r\n          [tooltipDisabled]=\"!col.dataTooltipShow\"\r\n          [showDelay]=\"700\"\r\n          tooltipPosition=\"top\">\r\n          {{ formatDate(value) }}\r\n        </div>\r\n      }\r\n      @default {\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      }\r\n    }\r\n  }\r\n}" }]
+        }], ctorParameters: () => [{ type: i1$1.DatePipe }], propDecorators: { col: [{
+                type: Input
+            }], rowData: [{
+                type: Input
+            }], globalSearchText: [{
+                type: Input
+            }], predefinedFiltersCollection: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }], dateTimezone: [{
+                type: Input
+            }], dateCulture: [{
+                type: Input
+            }] } });
+
 class TableButton {
     tableService;
     constructor(tableService) {
@@ -521,25 +765,21 @@ class TableButton {
     rowData;
     isActionButton = false;
     isLastActionButton = false;
-    clicked = new EventEmitter();
-    isDisabled() {
-        return this.button.condition ? !this.button.condition(this.rowData) : false;
-    }
     handleClick() {
         if (this.button.action) {
             this.tableService.handleButtonsClick(this.button.action, this.rowData);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableButton, deps: [{ token: ECSPrimengTableService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TableButton, isStandalone: true, selector: "ecs-table-button", inputs: { button: "button", rowData: "rowData", isActionButton: "isActionButton", isLastActionButton: "isLastActionButton" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<p-button\r\n  [disabled]=\"isDisabled()\"\r\n  [pTooltip]=\"button.tooltip || ''\"\r\n  [tooltipDisabled]=\"!button.tooltip || button.tooltip.length === 0\"\r\n  [showDelay]=\"700\"\r\n  tooltipPosition=\"top\"\r\n  [styleClass]=\"(button.color || 'p-button-outlined') + (isActionButton ? ' custom-small-btn' : '')\"\r\n  [icon]=\"button.icon || ''\"\r\n  [label]=\"button.label || ''\"\r\n  [size]=\"isActionButton ? 'small': undefined\"\r\n  [ngStyle]=\"isActionButton && !isLastActionButton ? {'margin-right':'10px'} : {}\"\r\n  (onClick)=\"handleClick()\"/>", styles: [":host ::ng-deep .custom-small-btn.p-button{height:28px!important;line-height:28px;padding-top:0;padding-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableButton, deps: [{ token: ECSPrimengTableService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableButton, isStandalone: true, selector: "ecs-table-button", inputs: { button: "button", rowData: "rowData", isActionButton: "isActionButton", isLastActionButton: "isLastActionButton" }, ngImport: i0, template: "@if(!(button.conditionFailHide && (button.enabledCondition?.(rowData) ?? false))){\r\n  <p-button\r\n    [disabled]=\"!(button.enabledCondition?.(rowData) ?? true)\"\r\n    [rounded]=\"button.rounded || false\"\r\n    [iconPos]=\"button.iconPos || 'left'\"\r\n    [raised]=\"button.raised || false\"\r\n    [variant]=\"button.variant || null\"\r\n    [pTooltip]=\"button.tooltip || ''\"\r\n    [tooltipDisabled]=\"!button.tooltip || button.tooltip.length === 0\"\r\n    [showDelay]=\"700\"\r\n    tooltipPosition=\"top\"\r\n    [styleClass]=\"(button.color || 'p-button-outlined') + (isActionButton ? ' custom-small-btn' : '') + (button.style || '')\"\r\n    [icon]=\"button.icon || ''\"\r\n    [label]=\"button.label || ''\"\r\n    [size]=\"isActionButton ? 'small': undefined\"\r\n    [ngStyle]=\"isActionButton && !isLastActionButton ? {'margin-right':'10px'} : {}\"\r\n    (onClick)=\"handleClick()\"/>\r\n}", styles: [":host ::ng-deep .custom-small-btn.p-button{height:28px!important;line-height:28px;padding-top:0;padding-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableButton, decorators: [{
             type: Component,
             args: [{ selector: 'ecs-table-button', imports: [
                         CommonModule,
                         ButtonModule,
                         TooltipModule
-                    ], standalone: true, template: "<p-button\r\n  [disabled]=\"isDisabled()\"\r\n  [pTooltip]=\"button.tooltip || ''\"\r\n  [tooltipDisabled]=\"!button.tooltip || button.tooltip.length === 0\"\r\n  [showDelay]=\"700\"\r\n  tooltipPosition=\"top\"\r\n  [styleClass]=\"(button.color || 'p-button-outlined') + (isActionButton ? ' custom-small-btn' : '')\"\r\n  [icon]=\"button.icon || ''\"\r\n  [label]=\"button.label || ''\"\r\n  [size]=\"isActionButton ? 'small': undefined\"\r\n  [ngStyle]=\"isActionButton && !isLastActionButton ? {'margin-right':'10px'} : {}\"\r\n  (onClick)=\"handleClick()\"/>", styles: [":host ::ng-deep .custom-small-btn.p-button{height:28px!important;line-height:28px;padding-top:0;padding-bottom:0}\n"] }]
+                    ], standalone: true, template: "@if(!(button.conditionFailHide && (button.enabledCondition?.(rowData) ?? false))){\r\n  <p-button\r\n    [disabled]=\"!(button.enabledCondition?.(rowData) ?? true)\"\r\n    [rounded]=\"button.rounded || false\"\r\n    [iconPos]=\"button.iconPos || 'left'\"\r\n    [raised]=\"button.raised || false\"\r\n    [variant]=\"button.variant || null\"\r\n    [pTooltip]=\"button.tooltip || ''\"\r\n    [tooltipDisabled]=\"!button.tooltip || button.tooltip.length === 0\"\r\n    [showDelay]=\"700\"\r\n    tooltipPosition=\"top\"\r\n    [styleClass]=\"(button.color || 'p-button-outlined') + (isActionButton ? ' custom-small-btn' : '') + (button.style || '')\"\r\n    [icon]=\"button.icon || ''\"\r\n    [label]=\"button.label || ''\"\r\n    [size]=\"isActionButton ? 'small': undefined\"\r\n    [ngStyle]=\"isActionButton && !isLastActionButton ? {'margin-right':'10px'} : {}\"\r\n    (onClick)=\"handleClick()\"/>\r\n}", styles: [":host ::ng-deep .custom-small-btn.p-button{height:28px!important;line-height:28px;padding-top:0;padding-bottom:0}\n"] }]
         }], ctorParameters: () => [{ type: ECSPrimengTableService }], propDecorators: { button: [{
                 type: Input
             }], rowData: [{
@@ -548,8 +788,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], isLastActionButton: [{
                 type: Input
-            }], clicked: [{
-                type: Output
             }] } });
 
 class ColumnSelector {
@@ -560,19 +798,19 @@ class ColumnSelector {
     visibleChange = new EventEmitter();
     applyChanges = new EventEmitter();
     cellOverflowBehaviourOptions = [
-        { icon: 'pi pi-minus', val: CellOverflowBehaviour.Hidden },
-        { icon: 'pi pi-equals', val: CellOverflowBehaviour.Wrap } /*,
-        {icon: 'pi pi-ellipsis-h', val: CellOverflowBehaviour.Ellipsis}*/
+        { 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"}*/
     ];
     dataAlignHorizontalOptions = [
-        { icon: 'pi pi-align-left', val: DataAlignHorizontal.Left },
-        { icon: 'pi pi-align-center', val: DataAlignHorizontal.Center },
-        { icon: 'pi pi-align-right', val: DataAlignHorizontal.Right }
+        { 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" }
     ];
     dataAlignVerticalOptions = [
-        { icon: 'pi pi-angle-up', val: DataAlignVertical.Top },
-        { icon: 'pi pi-align-justify', val: DataAlignVertical.Middle },
-        { icon: 'pi pi-angle-down', val: DataAlignVertical.Bottom }
+        { 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" }
     ];
     globalSearchText = null; // The text used by the global search
     globalSearchMaxLength = 50;
@@ -614,10 +852,10 @@ class ColumnSelector {
         this.globalSearchText = null;
         this.visibleChange.emit(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ColumnSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ColumnSelector, isStandalone: true, selector: "ecs-column-selector", inputs: { visible: "visible", columnModalData: "columnModalData", filteredColumnData: "filteredColumnData" }, outputs: { visibleChange: "visibleChange", applyChanges: "applyChanges" }, viewQueries: [{ propertyName: "dt_columnDialog", first: true, predicate: ["dt_columnDialog"], descendants: 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</b></span>\r\n    </ng-template>\r\n    <div style=\"padding: 20px;\">\r\n        <p-table #dt_columnDialog [value]=\"columnModalData\" [scrollable]=\"true\" size=\"small\" showGridlines stripedRows \r\n            [globalFilterFields]=\"['header']\" scrollHeight=\"400px\" [tableStyle]=\"{'min-width': '25rem'}\" (onFilter)=\"onColumnModalFilter($event)\">\r\n            <ng-template #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</label>\r\n                    </div>\r\n                    <div style=\"display: flex; align-items: center;\">\r\n                        <p-iconField iconPosition=\"left\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n                            <p-inputIcon>\r\n                                <i class=\"pi pi-search\"></i>\r\n                            </p-inputIcon>\r\n                            <input pInputText type=\"text\" \r\n                                (input)=\"filterColumnModal($event)\" autocomplete=\"off\" \r\n                                [maxlength]=\"globalSearchMaxLength\" placeholder=\"Search column name\" [(ngModel)]=\"globalSearchText\"\r\n                                style=\"width: 220px;\"/>\r\n                            <!-- Right icon (only if there is text) -->\r\n                            @if (globalSearchText) {\r\n                                <p-inputIcon position=\"right\">\r\n                                    <i class=\"pi pi-times\" style=\"cursor: pointer;\" (click)=\"clearGlobalFilter(dt_columnDialog); $event.stopPropagation()\"></i>\r\n                                </p-inputIcon>\r\n                            }\r\n                        </p-iconField>\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template #header>\r\n                <tr>\r\n                    <th pFrozenColumn style=\"max-width: 100px; min-width: 100px; width: 100px; text-align: center;\">Show column</th>\r\n                    <th pFrozenColumn style=\"max-width: 250px; min-width: 250px; width: 250px; text-align: center;\">Column name</th>\r\n                    <th style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">Cell overflow behaviour</th>\r\n                    <th style=\"max-width: 160px; min-width: 160px; width: 160px; text-align: center;\">Horizontal aligment</th>\r\n                    <th style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">Vertical aligment</th>\r\n                </tr>\r\n            </ng-template>\r\n            <ng-template #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\"/>\r\n                    </td>\r\n                    <td pFrozenColumn style=\"max-width: 250px; min-width: 250px; width: 250px;\">{{rowData.header}}</td>\r\n                    <td style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">\r\n                        <p-selectButton [(ngModel)]=\"rowData.cellOverflowBehaviour\" [options]=\"cellOverflowBehaviourOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.cellOverflowBehaviourDisabled\" allowEmpty=\"false\">\r\n                            <ng-template #item let-item>\r\n                                <i [class]=\"item.icon\" style=\"margin: -20px;\"></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]=\"dataAlignHorizontalOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.dataAlignHorizontalDisabled\" allowEmpty=\"false\">\r\n                            <ng-template #item let-item>\r\n                                <i [class]=\"item.icon\" style=\"margin: -20px;\"></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]=\"dataAlignVerticalOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.dataAlignVerticalDisabled\" allowEmpty=\"false\">\r\n                            <ng-template #item let-item>\r\n                                <i [class]=\"item.icon\" style=\"margin: -20px;\"></i>\r\n                            </ng-template>\r\n                        </p-selectButton>\r\n                    </td>\r\n                </tr>\r\n            </ng-template>\r\n            <ng-template #emptymessage>\r\n                <tr>\r\n                    <td colspan=\"999\">There are no columns</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 {{filteredColumnData ? filteredColumnData.length : 0}} columns of {{columnModalData ? columnModalData.length : 0}} available columns\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\" severity=\"danger\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n        <p-button (click)=\"applyColumnModalChanges()\" label=\"Save changes\" severity=\"success\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n    </ng-template>\r\n</p-dialog>", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i6.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$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: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i9.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ColumnSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ColumnSelector, isStandalone: true, selector: "ecs-column-selector", inputs: { visible: "visible", columnModalData: "columnModalData", filteredColumnData: "filteredColumnData" }, outputs: { visibleChange: "visibleChange", applyChanges: "applyChanges" }, viewQueries: [{ propertyName: "dt_columnDialog", first: true, predicate: ["dt_columnDialog"], descendants: 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</b></span>\r\n    </ng-template>\r\n    <div style=\"padding: 20px;\">\r\n        <p-table #dt_columnDialog [value]=\"columnModalData\" [scrollable]=\"true\" size=\"small\" showGridlines stripedRows \r\n            [globalFilterFields]=\"['header']\" scrollHeight=\"400px\" [tableStyle]=\"{'min-width': '25rem'}\" (onFilter)=\"onColumnModalFilter($event)\">\r\n            <ng-template #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</label>\r\n                    </div>\r\n                    <div style=\"display: flex; align-items: center;\">\r\n                        <p-iconField iconPosition=\"left\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n                            <p-inputIcon>\r\n                                <i class=\"pi pi-search\"></i>\r\n                            </p-inputIcon>\r\n                            <input pInputText type=\"text\" \r\n                                (input)=\"filterColumnModal($event)\" autocomplete=\"off\" \r\n                                [maxlength]=\"globalSearchMaxLength\" placeholder=\"Search column name\" [(ngModel)]=\"globalSearchText\"\r\n                                style=\"width: 220px;\"/>\r\n                            <!-- Right icon (only if there is text) -->\r\n                            @if (globalSearchText) {\r\n                                <p-inputIcon position=\"right\">\r\n                                    <i class=\"pi pi-times\" style=\"cursor: pointer;\" (click)=\"clearGlobalFilter(dt_columnDialog); $event.stopPropagation()\"></i>\r\n                                </p-inputIcon>\r\n                            }\r\n                        </p-iconField>\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template #header>\r\n                <tr>\r\n                    <th pFrozenColumn style=\"max-width: 100px; min-width: 100px; width: 100px; text-align: center;\">Show column</th>\r\n                    <th pFrozenColumn style=\"max-width: 250px; min-width: 250px; width: 250px; text-align: center;\">Column name</th>\r\n                    <th style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">Cell overflow behaviour</th>\r\n                    <th style=\"max-width: 160px; min-width: 160px; width: 160px; text-align: center;\">Horizontal aligment</th>\r\n                    <th style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">Vertical aligment</th>\r\n                </tr>\r\n            </ng-template>\r\n            <ng-template #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\"/>\r\n                    </td>\r\n                    <td pFrozenColumn style=\"max-width: 250px; min-width: 250px; width: 250px;\">{{rowData.header}}</td>\r\n                    <td style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">\r\n                        <p-selectButton [(ngModel)]=\"rowData.cellOverflowBehaviour\" [options]=\"cellOverflowBehaviourOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.cellOverflowBehaviourDisabled\" allowEmpty=\"false\">\r\n                            <ng-template #item let-item>\r\n                                <i [class]=\"item.icon\" style=\"margin: -20px;\" [pTooltip]=\"item.name\" [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]=\"dataAlignHorizontalOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.dataAlignHorizontalDisabled\" allowEmpty=\"false\">\r\n                            <ng-template #item let-item>\r\n                                <i [class]=\"item.icon\" style=\"margin: -20px;\" [pTooltip]=\"item.name\" [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]=\"dataAlignVerticalOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.dataAlignVerticalDisabled\" allowEmpty=\"false\">\r\n                            <ng-template #item let-item>\r\n                                <i [class]=\"item.icon\" style=\"margin: -20px;\" [pTooltip]=\"item.name\" [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 #emptymessage>\r\n                <tr>\r\n                    <td colspan=\"999\">There are no columns</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 {{filteredColumnData ? filteredColumnData.length : 0}} columns of {{columnModalData ? columnModalData.length : 0}} available columns\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\" severity=\"danger\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n        <p-button (click)=\"applyColumnModalChanges()\" label=\"Save changes\" severity=\"success\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n    </ng-template>\r\n</p-dialog>", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i5$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i6.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$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: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i9$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ColumnSelector, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ColumnSelector, decorators: [{
             type: Component,
             args: [{ selector: 'ecs-column-selector', imports: [
                         DialogModule,
@@ -629,8 +867,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         FormsModule,
                         InputIconModule,
                         IconFieldModule,
-                        InputTextModule
-                    ], 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</b></span>\r\n    </ng-template>\r\n    <div style=\"padding: 20px;\">\r\n        <p-table #dt_columnDialog [value]=\"columnModalData\" [scrollable]=\"true\" size=\"small\" showGridlines stripedRows \r\n            [globalFilterFields]=\"['header']\" scrollHeight=\"400px\" [tableStyle]=\"{'min-width': '25rem'}\" (onFilter)=\"onColumnModalFilter($event)\">\r\n            <ng-template #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</label>\r\n                    </div>\r\n                    <div style=\"display: flex; align-items: center;\">\r\n                        <p-iconField iconPosition=\"left\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n                            <p-inputIcon>\r\n                                <i class=\"pi pi-search\"></i>\r\n                            </p-inputIcon>\r\n                            <input pInputText type=\"text\" \r\n                                (input)=\"filterColumnModal($event)\" autocomplete=\"off\" \r\n                                [maxlength]=\"globalSearchMaxLength\" placeholder=\"Search column name\" [(ngModel)]=\"globalSearchText\"\r\n                                style=\"width: 220px;\"/>\r\n                            <!-- Right icon (only if there is text) -->\r\n                            @if (globalSearchText) {\r\n                                <p-inputIcon position=\"right\">\r\n                                    <i class=\"pi pi-times\" style=\"cursor: pointer;\" (click)=\"clearGlobalFilter(dt_columnDialog); $event.stopPropagation()\"></i>\r\n                                </p-inputIcon>\r\n                            }\r\n                        </p-iconField>\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template #header>\r\n                <tr>\r\n                    <th pFrozenColumn style=\"max-width: 100px; min-width: 100px; width: 100px; text-align: center;\">Show column</th>\r\n                    <th pFrozenColumn style=\"max-width: 250px; min-width: 250px; width: 250px; text-align: center;\">Column name</th>\r\n                    <th style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">Cell overflow behaviour</th>\r\n                    <th style=\"max-width: 160px; min-width: 160px; width: 160px; text-align: center;\">Horizontal aligment</th>\r\n                    <th style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">Vertical aligment</th>\r\n                </tr>\r\n            </ng-template>\r\n            <ng-template #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\"/>\r\n                    </td>\r\n                    <td pFrozenColumn style=\"max-width: 250px; min-width: 250px; width: 250px;\">{{rowData.header}}</td>\r\n                    <td style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">\r\n                        <p-selectButton [(ngModel)]=\"rowData.cellOverflowBehaviour\" [options]=\"cellOverflowBehaviourOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.cellOverflowBehaviourDisabled\" allowEmpty=\"false\">\r\n                            <ng-template #item let-item>\r\n                                <i [class]=\"item.icon\" style=\"margin: -20px;\"></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]=\"dataAlignHorizontalOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.dataAlignHorizontalDisabled\" allowEmpty=\"false\">\r\n                            <ng-template #item let-item>\r\n                                <i [class]=\"item.icon\" style=\"margin: -20px;\"></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]=\"dataAlignVerticalOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.dataAlignVerticalDisabled\" allowEmpty=\"false\">\r\n                            <ng-template #item let-item>\r\n                                <i [class]=\"item.icon\" style=\"margin: -20px;\"></i>\r\n                            </ng-template>\r\n                        </p-selectButton>\r\n                    </td>\r\n                </tr>\r\n            </ng-template>\r\n            <ng-template #emptymessage>\r\n                <tr>\r\n                    <td colspan=\"999\">There are no columns</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 {{filteredColumnData ? filteredColumnData.length : 0}} columns of {{columnModalData ? columnModalData.length : 0}} available columns\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\" severity=\"danger\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n        <p-button (click)=\"applyColumnModalChanges()\" label=\"Save changes\" severity=\"success\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n    </ng-template>\r\n</p-dialog>" }]
+                        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</b></span>\r\n    </ng-template>\r\n    <div style=\"padding: 20px;\">\r\n        <p-table #dt_columnDialog [value]=\"columnModalData\" [scrollable]=\"true\" size=\"small\" showGridlines stripedRows \r\n            [globalFilterFields]=\"['header']\" scrollHeight=\"400px\" [tableStyle]=\"{'min-width': '25rem'}\" (onFilter)=\"onColumnModalFilter($event)\">\r\n            <ng-template #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</label>\r\n                    </div>\r\n                    <div style=\"display: flex; align-items: center;\">\r\n                        <p-iconField iconPosition=\"left\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n                            <p-inputIcon>\r\n                                <i class=\"pi pi-search\"></i>\r\n                            </p-inputIcon>\r\n                            <input pInputText type=\"text\" \r\n                                (input)=\"filterColumnModal($event)\" autocomplete=\"off\" \r\n                                [maxlength]=\"globalSearchMaxLength\" placeholder=\"Search column name\" [(ngModel)]=\"globalSearchText\"\r\n                                style=\"width: 220px;\"/>\r\n                            <!-- Right icon (only if there is text) -->\r\n                            @if (globalSearchText) {\r\n                                <p-inputIcon position=\"right\">\r\n                                    <i class=\"pi pi-times\" style=\"cursor: pointer;\" (click)=\"clearGlobalFilter(dt_columnDialog); $event.stopPropagation()\"></i>\r\n                                </p-inputIcon>\r\n                            }\r\n                        </p-iconField>\r\n                    </div>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template #header>\r\n                <tr>\r\n                    <th pFrozenColumn style=\"max-width: 100px; min-width: 100px; width: 100px; text-align: center;\">Show column</th>\r\n                    <th pFrozenColumn style=\"max-width: 250px; min-width: 250px; width: 250px; text-align: center;\">Column name</th>\r\n                    <th style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">Cell overflow behaviour</th>\r\n                    <th style=\"max-width: 160px; min-width: 160px; width: 160px; text-align: center;\">Horizontal aligment</th>\r\n                    <th style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">Vertical aligment</th>\r\n                </tr>\r\n            </ng-template>\r\n            <ng-template #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\"/>\r\n                    </td>\r\n                    <td pFrozenColumn style=\"max-width: 250px; min-width: 250px; width: 250px;\">{{rowData.header}}</td>\r\n                    <td style=\"max-width: 150px; min-width: 150px; width: 150px; text-align: center;\">\r\n                        <p-selectButton [(ngModel)]=\"rowData.cellOverflowBehaviour\" [options]=\"cellOverflowBehaviourOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.cellOverflowBehaviourDisabled\" allowEmpty=\"false\">\r\n                            <ng-template #item let-item>\r\n                                <i [class]=\"item.icon\" style=\"margin: -20px;\" [pTooltip]=\"item.name\" [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]=\"dataAlignHorizontalOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.dataAlignHorizontalDisabled\" allowEmpty=\"false\">\r\n                            <ng-template #item let-item>\r\n                                <i [class]=\"item.icon\" style=\"margin: -20px;\" [pTooltip]=\"item.name\" [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]=\"dataAlignVerticalOptions\" optionValue=\"val\" optionLabel=\"icon\" [disabled]=\"rowData.dataAlignVerticalDisabled\" allowEmpty=\"false\">\r\n                            <ng-template #item let-item>\r\n                                <i [class]=\"item.icon\" style=\"margin: -20px;\" [pTooltip]=\"item.name\" [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 #emptymessage>\r\n                <tr>\r\n                    <td colspan=\"999\">There are no columns</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 {{filteredColumnData ? filteredColumnData.length : 0}} columns of {{columnModalData ? columnModalData.length : 0}} available columns\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\" severity=\"danger\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n        <p-button (click)=\"applyColumnModalChanges()\" label=\"Save changes\" severity=\"success\" [style]=\"{'margin-top': '10px'}\"></p-button>\r\n    </ng-template>\r\n</p-dialog>" }]
         }], propDecorators: { dt_columnDialog: [{
                 type: ViewChild,
                 args: ['dt_columnDialog']
@@ -657,10 +896,10 @@ class ExportExcelService {
         const seconds = String(now.getUTCSeconds()).padStart(2, '0');
         return `_${year}${month}${day}_${hours}${minutes}${seconds}_UTC`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ExportExcelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ExportExcelService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ExportExcelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ExportExcelService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ExportExcelService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ExportExcelService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -754,10 +993,10 @@ class ExportExcel {
     closeModal() {
         this.visibleChange.emit(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ExportExcel, deps: [{ token: ECSPrimengTableNotificationService }, { token: ExportExcelService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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</span>\r\n        </div>\r\n    </ng-template>\r\n    <div style=\"display: grid; grid-template-columns: 4fr 8fr; gap: 1rem; align-items: center;\">\r\n        <div style=\"justify-self: end;\">\r\n            Report filename\r\n        </div>\r\n        <div style=\"justify-self: stretch; width: 100%;\">\r\n            <input pInputText id=\"reportTitle\" [(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 '_{year}{month}{day}_{hours}{minutes}{seconds}_UTC' at the end of your filename\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n            Include time in report filename\r\n        </div>\r\n        <div style=\"justify-self: stretch; width: 100%;\">\r\n            <p-checkbox [binary]=\"true\" [(ngModel)]=\"includeTimeInTitle\"/>\r\n        </div>\r\n        \r\n        <div style=\"justify-self: end;\">\r\n            Export columns\r\n        </div>\r\n        <div style=\"justify-self: start;\">\r\n            <p-selectButton [(ngModel)]=\"option_exportColumns_selected\" [options]=\"option_exportColumns\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\"/>\r\n        </div>\r\n\r\n        <div style=\"justify-self: end;\">\r\n            @if(filterSelectorDisabled()){\r\n                <i pTooltip=\"Sorts are active because you want to export selected rows following a filter criteria\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n            }\r\n            Filters to apply\r\n        </div>\r\n        <div style=\"justify-self: start;\">\r\n            <p-selectButton [(ngModel)]=\"option_applyCurrentFilters_selected\" [options]=\"option_applyCurrentFilters\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\" [disabled]=\"filterSelectorDisabled()\"/>\r\n        </div>\r\n\r\n        <div style=\"justify-self: end;\">\r\n            Sorts to apply\r\n        </div>\r\n        <div style=\"justify-self: start;\">\r\n            <p-selectButton [(ngModel)]=\"option_applyCurrentSorts_selected\" [options]=\"option_applyCurrentSorts\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\"/>\r\n        </div>\r\n\r\n        @if(rowCheckboxSelectorActive){\r\n            <div style=\"justify-self: end;\">\r\n                Selected rows\r\n            </div>\r\n            <div style=\"justify-self: start;\">\r\n                <p-selectButton [(ngModel)]=\"option_selectedRowsExport_selected\" [options]=\"option_selectedRowsExport\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\" (onChange)=\"onChangeExportRows($event)\"/>\r\n            </div>\r\n        }\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\" severity=\"danger\" [style]=\"{'margin-top': '20px'}\"/>\r\n        <p-button (click)=\"getExcelReport()\" label=\"Export\" severity=\"success\" [style]=\"{'margin-top': '20px'}\"/>\r\n    </ng-template>\r\n</p-dialog>", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$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: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$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", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ExportExcel, deps: [{ token: ECSPrimengTableNotificationService }, { token: ExportExcelService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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</span>\r\n        </div>\r\n    </ng-template>\r\n    <div style=\"display: grid; grid-template-columns: 4fr 8fr; gap: 1rem; align-items: center;\">\r\n        <div style=\"justify-self: end;\">\r\n            Report filename\r\n        </div>\r\n        <div style=\"justify-self: stretch; width: 100%;\">\r\n            <input pInputText id=\"reportTitle\" [(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 '_{year}{month}{day}_{hours}{minutes}{seconds}_UTC' at the end of your filename\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n            Include time in report filename\r\n        </div>\r\n        <div style=\"justify-self: stretch; width: 100%;\">\r\n            <p-checkbox [binary]=\"true\" [(ngModel)]=\"includeTimeInTitle\"/>\r\n        </div>\r\n        \r\n        <div style=\"justify-self: end;\">\r\n            Export columns\r\n        </div>\r\n        <div style=\"justify-self: start;\">\r\n            <p-selectButton [(ngModel)]=\"option_exportColumns_selected\" [options]=\"option_exportColumns\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\"/>\r\n        </div>\r\n\r\n        <div style=\"justify-self: end;\">\r\n            @if(filterSelectorDisabled()){\r\n                <i pTooltip=\"Sorts are active because you want to export selected rows following a filter criteria\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n            }\r\n            Filters to apply\r\n        </div>\r\n        <div style=\"justify-self: start;\">\r\n            <p-selectButton [(ngModel)]=\"option_applyCurrentFilters_selected\" [options]=\"option_applyCurrentFilters\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\" [disabled]=\"filterSelectorDisabled()\"/>\r\n        </div>\r\n\r\n        <div style=\"justify-self: end;\">\r\n            Sorts to apply\r\n        </div>\r\n        <div style=\"justify-self: start;\">\r\n            <p-selectButton [(ngModel)]=\"option_applyCurrentSorts_selected\" [options]=\"option_applyCurrentSorts\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\"/>\r\n        </div>\r\n\r\n        @if(rowCheckboxSelectorActive){\r\n            <div style=\"justify-self: end;\">\r\n                Selected rows\r\n            </div>\r\n            <div style=\"justify-self: start;\">\r\n                <p-selectButton [(ngModel)]=\"option_selectedRowsExport_selected\" [options]=\"option_selectedRowsExport\" optionLabel=\"label\" optionValue=\"value\" allowEmpty=\"false\" (onChange)=\"onChangeExportRows($event)\"/>\r\n            </div>\r\n        }\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\" severity=\"danger\" [style]=\"{'margin-top': '20px'}\"/>\r\n        <p-button (click)=\"getExcelReport()\" label=\"Export\" severity=\"success\" [style]=\"{'margin-top': '20px'}\"/>\r\n    </ng-template>\r\n</p-dialog>", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$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: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$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", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ExportExcel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ExportExcel, decorators: [{
             type: Component,
             args: [{ selector: 'ecs-export-excel', imports: [
                         DialogModule,
@@ -792,6 +1031,7 @@ class ViewsManagement {
     onViewSelect = new EventEmitter();
     onViewDelete = new EventEmitter();
     onViewUpdateData = new EventEmitter();
+    onViewUpdateActiveStartup = new EventEmitter();
     onViewEditAlias = new EventEmitter();
     onViewCreate = new EventEmitter();
     visibleChange = new EventEmitter();
@@ -807,6 +1047,9 @@ class ViewsManagement {
     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) {
@@ -838,10 +1081,10 @@ class ViewsManagement {
             this.createView(this.newViewAlias);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ViewsManagement, deps: [{ token: ECSPrimengTableNotificationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ViewsManagement, isStandalone: true, selector: "ecs-views-management", inputs: { visible: "visible", tableViews_menuItems: "tableViews_menuItems" }, outputs: { onViewSelect: "onViewSelect", onViewDelete: "onViewDelete", onViewUpdateData: "onViewUpdateData", 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</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 #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\" severity=\"success\" (click)=\"showViewEditor()\" pTooltip=\"New view\" tooltipPosition=\"top\" [showDelay]=\"700\"/>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template #header>\r\n                <tr>\r\n                    <th style=\"text-align: center;\">View name</th>\r\n                    <th style=\"text-align: center; max-width: 300px; min-width: 300px; width: 300px;\">Actions</th>\r\n                </tr>\r\n            </ng-template>\r\n            <ng-template #body let-rowData>\r\n                <tr>\r\n                    <td>\r\n                        {{rowData.label}}\r\n                    </td>\r\n                    <td style=\"max-width: 300px; min-width: 300px; width: 300px; 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\" 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\" 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\" 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\" 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 #emptymessage>\r\n                <tr>\r\n                    <td colspan=\"999\">There are no views</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 {{tableViews_menuItems ? tableViews_menuItems.length : 0}} views\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' }}</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<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\" severity=\"danger\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n        <p-button (click)=\"createOrUpdateTableView()\" [label]=\"editingViewAlias !== '' ? 'Update' : 'Create'\" severity=\"success\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n    </ng-template>\r\n</p-dialog>", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$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: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ViewsManagement, deps: [{ token: ECSPrimengTableNotificationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", 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</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 #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\" (click)=\"showViewEditor()\" pTooltip=\"New view\" tooltipPosition=\"top\" [showDelay]=\"700\"/>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template #header>\r\n                <tr>\r\n                    <th style=\"text-align: center;\">View name</th>\r\n                    <th style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">Load on startup</th>\r\n                    <th style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">Actions</th>\r\n                </tr>\r\n            </ng-template>\r\n            <ng-template #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)\"/>\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\" 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\" 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\" 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\" 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 #emptymessage>\r\n                <tr>\r\n                    <td colspan=\"999\">There are no views</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 {{tableViews_menuItems ? tableViews_menuItems.length : 0}} views\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' }}</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<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\" severity=\"danger\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n        <p-button (click)=\"createOrUpdateTableView()\" [label]=\"editingViewAlias !== '' ? 'Update' : 'Create'\" severity=\"success\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n    </ng-template>\r\n</p-dialog>", dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$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: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ViewsManagement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ViewsManagement, decorators: [{
             type: Component,
             args: [{ selector: 'ecs-views-management', imports: [
                         DialogModule,
@@ -850,8 +1093,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         CommonModule,
                         FormsModule,
                         TooltipModule,
-                        InputTextModule
-                    ], 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</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 #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\" severity=\"success\" (click)=\"showViewEditor()\" pTooltip=\"New view\" tooltipPosition=\"top\" [showDelay]=\"700\"/>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template #header>\r\n                <tr>\r\n                    <th style=\"text-align: center;\">View name</th>\r\n                    <th style=\"text-align: center; max-width: 300px; min-width: 300px; width: 300px;\">Actions</th>\r\n                </tr>\r\n            </ng-template>\r\n            <ng-template #body let-rowData>\r\n                <tr>\r\n                    <td>\r\n                        {{rowData.label}}\r\n                    </td>\r\n                    <td style=\"max-width: 300px; min-width: 300px; width: 300px; 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\" 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\" 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\" 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\" 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 #emptymessage>\r\n                <tr>\r\n                    <td colspan=\"999\">There are no views</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 {{tableViews_menuItems ? tableViews_menuItems.length : 0}} views\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' }}</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<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\" severity=\"danger\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n        <p-button (click)=\"createOrUpdateTableView()\" [label]=\"editingViewAlias !== '' ? 'Update' : 'Create'\" severity=\"success\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n    </ng-template>\r\n</p-dialog>" }]
+                        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</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 #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\" (click)=\"showViewEditor()\" pTooltip=\"New view\" tooltipPosition=\"top\" [showDelay]=\"700\"/>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template #header>\r\n                <tr>\r\n                    <th style=\"text-align: center;\">View name</th>\r\n                    <th style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">Load on startup</th>\r\n                    <th style=\"text-align: center; max-width: 220px; min-width: 220px; width: 220px;\">Actions</th>\r\n                </tr>\r\n            </ng-template>\r\n            <ng-template #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)\"/>\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\" 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\" 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\" 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\" 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 #emptymessage>\r\n                <tr>\r\n                    <td colspan=\"999\">There are no views</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 {{tableViews_menuItems ? tableViews_menuItems.length : 0}} views\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' }}</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<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\" severity=\"danger\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n        <p-button (click)=\"createOrUpdateTableView()\" [label]=\"editingViewAlias !== '' ? 'Update' : 'Create'\" severity=\"success\" [style]=\"{'margin-top': '20px'}\"></p-button>\r\n    </ng-template>\r\n</p-dialog>" }]
         }], ctorParameters: () => [{ type: ECSPrimengTableNotificationService }], propDecorators: { visible: [{
                 type: Input
             }], tableViews_menuItems: [{
@@ -862,6 +1106,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }], onViewUpdateData: [{
                 type: Output
+            }], onViewUpdateActiveStartup: [{
+                type: Output
             }], onViewEditAlias: [{
                 type: Output
             }], onViewCreate: [{
@@ -873,51 +1119,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class ECSPrimengTable {
     tableService;
     notification;
-    resizeObserver;
     constructor(tableService, notification) {
         this.tableService = tableService;
         this.notification = notification;
     }
-    isActive = true;
-    data = []; // The array of data to be displayed
-    columnsToShow = []; // The combination of the non-selectable columns + selected columns that must be shown
-    computeScrollHeight = true; // If true, the table will try not to grow more than the total height of the window vertically
-    globalSearchEnabled = true; // Used to enable or disable the global search (by default enabled)
-    globalSearchMaxLength = 50; // The maximun number of characters that can be input in the global filter
-    globalSearchPlaceholder = "Search keyword"; // The placeholder text to show if global search is enabled
-    columnEditorEnabled = true; // If the user can modify the columns thorugh the column editor
-    urlColumnsSource; // The source URL to get data from columns
-    urlDataSource; // The URL to fetch data from
-    urlExcelReport = null;
-    predifinedFiltersCollection = {}; // Contains a collection of the values that need to be shown for predifined column filters
-    predifinedFiltersNoSelectionPlaceholder = "Any value"; // A text to be displayed in the dropdown if no value has been selected in a column that uses predifined filters
-    predifinedFiltersCollectionSelectedValuesText = "items selected"; // A text to display in the predifined filters dropdown footer indicating the number of items that have been selected
-    rowActionButtons = []; // A list that contains all buttons that will appear in the actions column
-    headerActionButtons = []; // A list that contains all buttons that will appear in the right side of the header of the table
-    copyCellDataToClipboardTimeSecs = 0.5; // The amount of time since mouse down in a cell for its content to be copied to the clipboard. If you want to disable this functionality, put it to a value less than or equal to 0.
-    actionsColumnAligmentRight = true; // If actions column is put at the right end of the table (or false if its at the left)
-    actionsColumnWidth = 150; // The amount in pixels for the size of the actions column
-    actionsColumnFrozen = true; // If the actions column should be frozen
-    rowSelectorColumnActive = false; // By default false. If true, a column will be shown to the user that includes a checkbox per row. This selection and filtering that the user can do is all managed by the table component. You can fetch the selected rows through the output selectedRowsCheckbox.
-    rowSelectorColumName = "Selected"; // The title of the row selection column. By default is "Selected"
-    rowSelectorColumnAligmentRight = true; // By default true. If true, the row selector column is put at the right end of the table (or false if its at the left).
-    rowSelectorColumnWidth = 150; // The amount in pixels for the size of the selector column
-    rowSelectorColumnFrozen = true; // By default true. If true, the row selector column will be frozen.
-    actionsColumnResizable = false; // If the action column can be resized by the user
-    actionColumnName = "Actions"; // The column name were the action buttons will appear
-    rowselectorColumnResizable = false;
-    noDataFoundText = "No data found for the current filter criteria."; // The text to be shown when no data has been returned
-    showClearSortAndFilters = true;
-    excelReportTitleDefault = "Report";
-    excelReportTitleAllowUserEdit = false;
-    tableViewSaveAs = TableViewSaveMode.noone; // How the table view will be saved
-    tableViewSaveKey = ""; // The key used to save the table views
-    viewsGetSourceURL = "";
-    viewsSaveSourceURL = "";
-    maxTableViews = 10; // The maximun number of views that can be saved
+    tableOptions = DEFAULT_TABLE_OPTIONS;
     onRowCheckboxChange = new EventEmitter(); // Emitter that returns the column selected and if it was selected or unselected
     onRowSelect = new EventEmitter;
     onRowUnselect = new EventEmitter;
+    onDataEndUpdate = new EventEmitter();
     viewsModalShow = false;
     tableViewCurrentSelectedAlias = null;
     tableViewsFirstFetchDone = false;
@@ -927,7 +1137,6 @@ class ECSPrimengTable {
     selectedRowsCheckbox = []; // An array to keep all the selected rows
     dt; // Get the reference to the object table
     showRefreshData = true;
-    scrollHeight = "0px"; // Used to get the table height
     globalSearchText = null; // The text used by the global search
     tableViewsList = [];
     tableViews_menuItems = [];
@@ -951,10 +1160,13 @@ class ECSPrimengTable {
     columnsSelected = [];
     columnModalData = [];
     filteredColumnData = [];
-    predifinedFiltersSelectedValuesCollection = {}; // Contains a collection of the predifined column filters selection (possible values come from 'predifinedFiltersCollection')
+    initialColumnWidths;
+    initialTableWidth;
+    predefinedFiltersSelectedValuesCollection = {}; // Contains a collection of the predefined column filters selection (possible values come from 'predefinedFiltersCollection')
     copyCellDataTimer; // A timer that handles the amount of time left to copy the cell data to the clipboard
     tableLazyLoadEventInformation = {}; // Data of the last lazy load event of the table
     initialConfigurationFetched = false;
+    maxViews = 0;
     ngOnInit() {
         this.fetchTableConfiguration();
     }
@@ -962,48 +1174,37 @@ class ECSPrimengTable {
     headerContainer;
     paginatorContainer;
     ngAfterViewInit() {
-        if (this.computeScrollHeight) {
-            this.resizeObserver = new ResizeObserver(() => {
-                this.calculateScrollHeight();
-            });
-            this.resizeObserver.observe(this.tableContainer.nativeElement);
-            window.addEventListener('resize', this.onWindowResize);
-            this.calculateScrollHeight();
-        }
+        this.calculateScrollHeight();
+    }
+    onResize() {
+        this.calculateScrollHeight();
     }
-    onWindowResize = () => {
-        clearTimeout(this._resizeTimeout);
-        this._resizeTimeout = setTimeout(() => {
-            this.calculateScrollHeight();
-        }, 100);
-    };
     calculateScrollHeight() {
-        if (this.tableContainer && this.paginatorContainer && this.headerContainer) {
+        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.scrollHeight = `${(viewportHeight - topOffset - paginatorHeight - headerHeight) - 45}px`;
-            //const containerHeight = this.tableContainer.nativeElement.offsetHeight;
-            //const headerHeight = this.headerContainer.nativeElement.offsetHeight;
-            //const paginatorHeight = this.paginatorContainer.nativeElement.offsetHeight || 50; // fallback
-            //this.scrollHeight = `${containerHeight - headerHeight - paginatorHeight}px`;
-            //console.log(this.scrollHeight)
+            this.tableOptions.verticalScroll.height = (viewportHeight - topOffset - paginatorHeight - headerHeight) - 60;
         }
     }
-    ngOnDestroy() {
-        this.resizeObserver?.disconnect();
-        window.removeEventListener('resize', this.onWindowResize);
+    get scrollHeightValue() {
+        if (this.tableOptions.verticalScroll?.cssFormula) {
+            return this.tableOptions.verticalScroll.cssFormula;
+        }
+        const height = this.tableOptions.verticalScroll?.height;
+        return height && height > 0 ? `${height}px` : '';
     }
     /**
-     * Used to update the data of a table externally outside the component. Use this method instead of 'updateData' to force the data updata of a table
+     * Used to update the data of a table externally outside the component.
      *
-     * @param {(optionalData?: any) => void} [continueAction] - Optional action to execute after data retrieval if it succeeded.
-     * @param {boolean} [uponContinueActionEndModalHttp=false] - Optional flag to set the loading indicator to inactive after data retrieval.
      */
-    updateData(continueAction, uponContinueActionEndModalHttp = false) {
-        this.isActive = true; // Indicate that the table is now enabled to perform actions
+    updateData() {
+        this.tableOptions.isActive = true; // Indicate that the table is now enabled to perform actions
         if (!this.initialConfigurationFetched) {
             this.fetchTableConfiguration();
         }
@@ -1011,44 +1212,80 @@ class ECSPrimengTable {
             this.fetchTableData(this.tableLazyLoadEventInformation);
         }
     }
-    fetchTableConfiguration() {
-        if (!this.isActive) {
+    canFetchData() {
+        return !!this.tableOptions.isActive
+            && !!this.tableOptions.urlTableConfiguration?.trim()
+            && !!this.tableOptions.urlTableData?.trim();
+    }
+    fetchTableConfiguration(resetTableView = false) {
+        if (!this.canFetchData()) {
             return;
         }
-        this.tableService.fetchTableConfiguration(this.urlColumnsSource).subscribe({
+        this.tableService.fetchTableConfiguration(this.tableOptions.urlTableConfiguration).subscribe({
             next: (response) => {
-                this.handleTableConfigurationResponse(response.body);
-                this.fetchTableViews();
+                this.handleTableConfigurationResponse(response.body, resetTableView);
             },
             error: (err) => this.tableService.handleTableError(err, 'Columns Error')
         });
     }
-    handleTableConfigurationResponse(body) {
+    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.columnsSelected = this.columns.filter((col) => !col.startHidden && col.canBeHidden); // Selected columns that are not hidden by default
-        this.columnsToShow = this.tableService.orderColumnsWithFrozens(this.columnsCantBeHidden.concat(this.columnsSelected));
+        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.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;
+        }
+        else {
+            setTimeout(() => {
+                this.initialColumnWidths = this.tableService.computeColumnWidths(this.dt);
+                this.initialTableWidth = this.tableService.computeTableWidth(this.dt);
+            }, 0);
+            this.fetchTableViews();
+        }
     }
     refreshData(event) {
         this.fetchTableData(this.tableLazyLoadEventInformation);
     }
     tableViewsEnabled() {
-        return (this.tableViewSaveAs !== TableViewSaveMode.noone &&
-            this.tableViewSaveKey !== '');
+        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.fetchTableData(this.tableLazyLoadEventInformation);
             return;
         }
-        const tableViews = this.tableService.fetchTableViews(this.tableViewSaveAs, this.viewsGetSourceURL, this.tableViewSaveKey);
+        const tableViews = this.tableService.fetchTableViews(this.tableOptions.views.saveMode, this.tableOptions.views.urlGet, this.tableOptions.views.saveKey);
         if (tableViews instanceof Observable) {
             tableViews.subscribe({
                 next: (response) => {
@@ -1091,15 +1328,15 @@ class ECSPrimengTable {
             .map(data => this.columns.find((col) => col.field === data.field))
             .filter((col) => col !== undefined)
             .filter(col => !this.columnsCantBeHidden.includes(col));
-        this.columnsToShow = this.tableService.orderColumnsWithFrozens(this.columnsCantBeHidden.concat(this.columnsSelected));
+        this.tableOptions.columns.shown = this.tableService.orderColumnsWithFrozens(this.columnsCantBeHidden.concat(this.columnsSelected));
         this.currentPage = viewData.currentPage;
         this.currentRowsPerPage = viewData.currentRowsPerPage;
         this.globalSearchText = viewData.globalSearchText;
         this.tableLazyLoadEventInformation.multiSortMeta = [...(viewData.multiSortMeta ?? [])];
         this.dt.multiSortMeta = [...(viewData.multiSortMeta ?? [])];
-        this.isActive = false;
+        this.tableOptions.isActive = false;
         this.dt.sortMultiple();
-        this.isActive = true;
+        this.tableOptions.isActive = true;
         this.tableLazyLoadEventInformation.filters = { ...viewData.filters };
         this.dt.filters = { ...viewData.filters };
         this.dt.tableWidthState = viewData.tableWidth;
@@ -1110,6 +1347,10 @@ class ECSPrimengTable {
         this.fetchTableData(this.tableLazyLoadEventInformation);
     }
     viewCreate(viewAlias) {
+        if (this.tableViewsList.length >= this.maxViews) {
+            this.notification.showToast("error", "NO MORE VIEWS ALLOWED", "You have created the maximum number of allowed views for this table");
+            return;
+        }
         let viewData = this.tableService.viewGenerateData(this.dt, this.globalSearchText, this.currentPage, this.currentRowsPerPage, this.modifyFiltersWithoutGlobalAndSelectedRows.bind(this));
         let newView = {
             lastActive: false,
@@ -1119,47 +1360,69 @@ class ECSPrimengTable {
         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", "Table view delete failed", `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", "Table view alias change failed", `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", "Table view not found", `The table view to update data from was not found.`);
+            return;
         }
         let viewData = this.tableService.viewGenerateData(this.dt, this.globalSearchText, this.currentPage, this.currentRowsPerPage, this.modifyFiltersWithoutGlobalAndSelectedRows.bind(this));
         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", "Table view not found", `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.tableViewSaveAs) {
-            case TableViewSaveMode.sessionStorage:
-                sessionStorage.setItem(this.tableViewSaveKey, tableView);
+        switch (this.tableOptions.views.saveMode) {
+            case TableViewSaveMode.SessionStorage:
+                sessionStorage.setItem(this.tableOptions.views.saveKey, tableView);
                 break;
-            case TableViewSaveMode.localStorage:
-                localStorage.setItem(this.tableViewSaveKey, tableView);
+            case TableViewSaveMode.LocalStorage:
+                localStorage.setItem(this.tableOptions.views.saveKey, tableView);
                 break;
-            case TableViewSaveMode.databaseStorage:
-                const saveObsv = this.tableService.viewsSaveToDatabase(this.tableViewsList, this.viewsSaveSourceURL, this.tableViewSaveKey);
+            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);
@@ -1188,10 +1451,13 @@ class ECSPrimengTable {
             case 3: // DELETE VIEW
                 this.notification.showToast("info", "Table view delete", `The table view was deleted.`);
                 break;
+            case 4: // DELETE VIEW
+                this.notification.showToast("info", "Table view active on startup", `Changed the view that will be active on startup.`);
+                break;
         }
     }
     fetchTableData(event) {
-        if (!this.isActive) {
+        if (!this.canFetchData()) {
             return;
         }
         if (!this.initialConfigurationFetched) {
@@ -1212,12 +1478,16 @@ class ECSPrimengTable {
             sort: this.tableLazyLoadEventInformation.multiSortMeta, // Set the sorting information
             filter: filtersWithoutGlobalAndSelectedRows, // Set the filters excluding the global filter
             globalFilter: this.globalSearchText, // Set the global filter text
-            columns: this.columnsToShow.map(col => col.field), // Set the columns to show
+            columns: this.tableOptions.columns.shown.map(col => col.field), // Set the columns to show
             dateFormat: this.dateFormat,
             dateTimezone: this.dateTimezone,
             dateCulture: this.dateCulture
         };
-        this.tableService.fetchTableData(this.urlDataSource, requestData).subscribe({
+        this.tableService.fetchTableData(this.tableOptions.urlTableData, requestData)
+            .pipe(finalize(() => {
+            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')
         });
@@ -1233,6 +1503,10 @@ class ECSPrimengTable {
         this.selectorRowFilterBuilder(filtersWithoutGlobalAndSelectedRows, overrideOption);
         return filtersWithoutGlobalAndSelectedRows; // Return the filters without global array
     }
+    resetTableView() {
+        this.tableViewCurrentSelectedAlias = '';
+        this.fetchTableConfiguration(true);
+    }
     selectorRowFilterBuilder(filtersWithoutGlobalAndSelectedRows, overrideOption = -1) {
         if (filtersWithoutGlobalAndSelectedRows.hasOwnProperty('selector')) {
             const selectorFilter = filtersWithoutGlobalAndSelectedRows['selector'][0];
@@ -1279,7 +1553,7 @@ class ECSPrimengTable {
         }
     }
     revertDateTimeZoneFilters(inputFilter) {
-        this.columnsToShow.forEach((column) => {
+        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;
@@ -1293,7 +1567,7 @@ class ECSPrimengTable {
         return inputFilter;
     }
     handleTableDataResponse(body) {
-        this.data = body.data; // Update the table data
+        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
@@ -1302,7 +1576,7 @@ class ECSPrimengTable {
         let hasToClear = this.hasToClearFilters(dt, this.globalSearchText, force);
         if (hasToClear) {
             if (!onlyGlobalFilter) {
-                this.predifinedFiltersSelectedValuesCollection = {};
+                this.predefinedFiltersSelectedValuesCollection = {};
                 for (const key in dt.filters) {
                     if (dt.filters.hasOwnProperty(key)) {
                         const filters = dt.filters[key];
@@ -1376,8 +1650,8 @@ class ECSPrimengTable {
     getColumnStyle(col, headerCols = false) {
         return this.tableService.getColumnStyle(col, headerCols);
     }
-    getPredifinedFilterValues(columnKeyName) {
-        return this.predifinedFiltersCollection[columnKeyName] || []; // Return the predefined filter values or an empty array if the option name does not exist
+    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);
@@ -1389,9 +1663,9 @@ class ECSPrimengTable {
      * 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 {IPrimengPredifinedFilter[]} selectedValues - An array of selected predefined filter values.
+     * @param {IPrimengPredefinedFilter[]} selectedValues - An array of selected predefined filter values.
      */
-    onPredifinedFilterChange(filterName, selectedValues) {
+    onPredefinedFilterChange(filterName, selectedValues) {
         const filters = { ...this.dt.filters }; // Create a shallow copy of the current filters to avoid mutating the original filters directly
         if (Array.isArray(filters[filterName])) { // Check if the filter for the given filterName is an array
             filters[filterName].forEach(criteria => {
@@ -1414,15 +1688,12 @@ class ECSPrimengTable {
      * @param {string} columnKeyName - The key name of the column for which to retrieve the number of selected values.
      * @returns {string} A string indicating the number of selected values for the specified column.
      */
-    predifinedFiltersSelectedValuesText(columnKeyName) {
+    predefinedFiltersSelectedValuesText(columnKeyName) {
         let numbItemsSelected = 0; // Initialize the count of selected items to zero
-        if (this.predifinedFiltersSelectedValuesCollection[columnKeyName]) { // Check if there are selected values for the specified column key
-            numbItemsSelected = this.predifinedFiltersSelectedValuesCollection[columnKeyName].length; // Get the number of selected items
+        if (this.predefinedFiltersSelectedValuesCollection[columnKeyName]) { // Check if there are selected values for the specified column key
+            numbItemsSelected = this.predefinedFiltersSelectedValuesCollection[columnKeyName].length; // Get the number of selected items
         }
-        return `${numbItemsSelected} ${this.predifinedFiltersCollectionSelectedValuesText}`; // Return the number of selected items concatenated with the predefined text
-    }
-    handleButtonsClick(action, rowData = null) {
-        this.tableService.handleButtonsClick(action, rowData);
+        return `${numbItemsSelected} items selected`; // Return the number of selected items concatenated with the predefined text
     }
     /**
      * Checks if the provided column metadata matches a specific style of the predefined filters
@@ -1433,14 +1704,14 @@ class ECSPrimengTable {
      * @returns {any} The matching predefined filter value if found, otherwise null.
      */
     getPredfinedFilterMatch(colMetadata, value) {
-        if (colMetadata.filterPredifinedValuesName && colMetadata.filterPredifinedValuesName.length > 0) { // Check if the column uses predefined filter values
-            const options = this.getPredifinedFilterValues(colMetadata.filterPredifinedValuesName); // Get the predefined filter values based on the name
+        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.copyCellDataToClipboardTimeSecs > 0) {
+        if ((this.tableOptions.copyToClipboardTime ?? 0) > 0) {
             const cellContent = event.target.innerText;
             this.copyCellDataTimer = setTimeout(() => {
                 navigator.clipboard.writeText(cellContent).then(() => {
@@ -1450,11 +1721,11 @@ class ECSPrimengTable {
                     this.notification.clearToasts();
                     this.notification.showToast("error", "CELL CONTENT COPIED", `The cell content failed to copy to your clipboard with error: ${err}`);
                 });
-            }, this.copyCellDataToClipboardTimeSecs * 1000);
+            }, (this.tableOptions.copyToClipboardTime ?? 0) * 1000);
         }
     }
     copyToClipboardCancel() {
-        if (this.copyCellDataToClipboardTimeSecs > 0) {
+        if ((this.tableOptions.copyToClipboardTime ?? 0) > 0) {
             clearTimeout(this.copyCellDataTimer);
         }
     }
@@ -1538,23 +1809,23 @@ class ECSPrimengTable {
                 finalColumns.push(matchingColumn);
             }
         });
-        let prevColsToShow = this.columnsToShow;
-        this.columnsToShow = this.tableService.orderColumnsWithFrozens(finalColumns);
-        let sameColumnsAsBefore = prevColsToShow.length === this.columnsToShow.length &&
-            prevColsToShow.every((prevCol, index) => prevCol.field === this.columnsToShow[index].field);
-        this.columnsSelected = this.columnsToShow.filter(column => !this.columnsCantBeHidden.some(nonSelectable => nonSelectable.field === column.field));
+        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.isActive = false;
+            this.tableOptions.isActive = false;
             this.clearSorts(this.dt, true);
             setTimeout(() => {
-                this.isActive = true;
+                this.tableOptions.isActive = true;
                 this.clearSorts(this.dt, true);
             }, 1);
         }
     }
     updateColumnsSpecialProperties(columnsSource) {
-        const allColumns = [this.columns, this.columnsToShow, this.columnsSelected, this.columnsCantBeHidden];
+        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,
@@ -1578,13 +1849,15 @@ class ECSPrimengTable {
         });
     }
     openExcelExport() {
-        this.excelReportTitle =
-            (!this.excelReportTitleDefault || this.excelReportTitleDefault.trim().length === 0) && !this.excelReportTitleAllowUserEdit
-                ? 'Report'
-                : this.excelReportTitleDefault;
+        const defaultTitle = this.tableOptions.excelReport?.defaultTitle?.trim();
+        const allowEdit = this.tableOptions.excelReport?.titleAllowUserEdit === true;
+        this.excelReportTitle = (!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)
@@ -1596,7 +1869,7 @@ class ECSPrimengTable {
             sort: this.tableLazyLoadEventInformation.multiSortMeta, // Set the sorting information
             filter: filtersWithoutGlobalAndSelectedRows, // Set the filters excluding the global filter
             globalFilter: this.globalSearchText, // Set the global filter text
-            columns: this.columnsToShow.map(col => col.field), // Set the columns to show
+            columns: this.tableOptions.columns.shown.map(col => col.field), // Set the columns to show
             dateFormat: this.dateFormat,
             dateTimezone: this.dateTimezone,
             dateCulture: this.dateCulture,
@@ -1605,7 +1878,7 @@ class ECSPrimengTable {
             applySorts: event.applySorts,
             filename: event.filename
         };
-        this.tableService.fetchExcelReport(this.urlExcelReport, requestData).subscribe({
+        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;
@@ -1613,10 +1886,35 @@ class ECSPrimengTable {
             error: (err) => this.tableService.handleTableError(err, 'Excel export error')
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ECSPrimengTable, deps: [{ token: ECSPrimengTableService }, { token: ECSPrimengTableNotificationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ECSPrimengTable, isStandalone: true, selector: "ecs-primeng-table", inputs: { isActive: "isActive", data: "data", columnsToShow: "columnsToShow", computeScrollHeight: "computeScrollHeight", globalSearchEnabled: "globalSearchEnabled", globalSearchMaxLength: "globalSearchMaxLength", globalSearchPlaceholder: "globalSearchPlaceholder", columnEditorEnabled: "columnEditorEnabled", urlColumnsSource: "urlColumnsSource", urlDataSource: "urlDataSource", urlExcelReport: "urlExcelReport", predifinedFiltersCollection: "predifinedFiltersCollection", predifinedFiltersNoSelectionPlaceholder: "predifinedFiltersNoSelectionPlaceholder", predifinedFiltersCollectionSelectedValuesText: "predifinedFiltersCollectionSelectedValuesText", rowActionButtons: "rowActionButtons", headerActionButtons: "headerActionButtons", copyCellDataToClipboardTimeSecs: "copyCellDataToClipboardTimeSecs", actionsColumnAligmentRight: "actionsColumnAligmentRight", actionsColumnWidth: "actionsColumnWidth", actionsColumnFrozen: "actionsColumnFrozen", rowSelectorColumnActive: "rowSelectorColumnActive", rowSelectorColumName: "rowSelectorColumName", rowSelectorColumnAligmentRight: "rowSelectorColumnAligmentRight", rowSelectorColumnWidth: "rowSelectorColumnWidth", rowSelectorColumnFrozen: "rowSelectorColumnFrozen", actionsColumnResizable: "actionsColumnResizable", actionColumnName: "actionColumnName", rowselectorColumnResizable: "rowselectorColumnResizable", noDataFoundText: "noDataFoundText", showClearSortAndFilters: "showClearSortAndFilters", excelReportTitleDefault: "excelReportTitleDefault", excelReportTitleAllowUserEdit: "excelReportTitleAllowUserEdit", tableViewSaveAs: "tableViewSaveAs", tableViewSaveKey: "tableViewSaveKey", viewsGetSourceURL: "viewsGetSourceURL", viewsSaveSourceURL: "viewsSaveSourceURL", maxTableViews: "maxTableViews" }, outputs: { onRowCheckboxChange: "onRowCheckboxChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect" }, 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 }], ngImport: i0, template: "<div #tableContainer>\r\n    <p-table #dt\r\n        size=\"small\" showGridlines stripedRows \r\n        sortMode=\"multiple\"\r\n        [resizableColumns]=\"true\" columnResizeMode=\"expand\"\r\n        [reorderableColumns]=\"true\"\r\n        [scrollable]=\"true\" [scrollHeight]=\"computeScrollHeight ? scrollHeight : ''\"\r\n        [columns]=\"columnsToShow\" [value]=\"data\" dataKey=\"rowID\" \r\n        [paginator]=\"true\" [first]=\"currentPage * currentRowsPerPage\" [rows]=\"currentRowsPerPage\" [totalRecords]=\"totalRecords\"\r\n        [rowsPerPageOptions]=\"allowedRowsPerPage\" [showCurrentPageReport]=\"false\" (onPage)=\"pageChange($event)\"\r\n        [metaKeySelection]=\"true\" selectionMode=\"single\" [(selection)]=\"rowSelection\" (onRowSelect)=\"rowSelect($event)\" (onRowUnselect)=\"rowUnselect($event)\"\r\n        [lazy]=\"true\" (onLazyLoad)=\"fetchTableData($event)\">\r\n\r\n        <!--TEMPLATE FOR THE ACTIONS HEADER COLUMN-->\r\n        <ng-template #actionColumnHeaderTemplate>\r\n            @if (rowActionButtons.length > 0) {\r\n                <th [ngStyle]=\"{'max-width': actionsColumnWidth + 'px','min-width': actionsColumnWidth + 'px','width': actionsColumnWidth + 'px'}\"\r\n                    pResizableColumn [pResizableColumnDisabled]=\"!actionsColumnResizable\" pFrozenColumn [frozen]=\"actionsColumnFrozen\"\r\n                    [alignFrozen]=\"getFrozenColumnAlignAsText(actionsColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\" id=\"actions-header\"\r\n                    [attr.scope]=\"'col'\" style=\"text-align: center;\">\r\n                    {{ actionColumnName }}\r\n                </th>\r\n            }\r\n        </ng-template>\r\n\r\n        <!--TEMPLATE FOR THE ACTIONS ROW COLUMN-->\r\n        <ng-template #actionColumnTemplate let-rowData=\"rowData\">\r\n            @if (rowActionButtons.length > 0) {\r\n                <td \r\n                    [ngStyle]=\"{'max-width': actionsColumnWidth + 'px','min-width': actionsColumnWidth + 'px','width': actionsColumnWidth + 'px'}\"\r\n                    style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"actionsColumnFrozen\"\r\n                    [alignFrozen]=\"getFrozenColumnAlignAsText(actionsColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n                    @for (button of rowActionButtons; track button; let last = $last) {\r\n                        <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\" (clicked)=\"handleButtonsClick($event, rowData)\"/>\r\n                    }\r\n                </td>\r\n            }\r\n        </ng-template>\r\n\r\n        <!-- TEMPLATE FOR THE ROW CHECKBOX SELECTOR HEADER COLUMN -->\r\n        <ng-template #rowSelectorColumnHeaderTemplate>\r\n            <th \r\n                [ngStyle]=\"{'max-width': rowSelectorColumnWidth + 'px','min-width': rowSelectorColumnWidth + 'px','width': rowSelectorColumnWidth + 'px'}\"\r\n                id=\"rowSelector-header\"  [attr.scope]=\"'col'\" pResizableColumn [pResizableColumnDisabled]=\"!rowselectorColumnResizable\" pFrozenColumn \r\n                [frozen]=\"rowSelectorColumnFrozen\" [alignFrozen]=\"getFrozenColumnAlignAsText(rowSelectorColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\"\r\n                style=\"text-align: center; vertical-align: middle;\">\r\n                    <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                        {{ rowSelectorColumName }}\r\n                        <p-columnFilter type=\"boolean\" field=\"selector\" display=\"menu\" [showButtons]=\"false\"/>\r\n                    </div>\r\n            </th>\r\n        </ng-template>\r\n\r\n        <!--TEMPLATE FOR THE ROW CHECKBOX SELECTOR COLUMN-->\r\n        <ng-template #rowSelectorColumnTemplate let-rowData=\"rowData\">\r\n            <td \r\n            [ngStyle]=\"{\r\n                'max-width': rowSelectorColumnWidth + 'px', \r\n                'min-width': rowSelectorColumnWidth + 'px', \r\n                'width': rowSelectorColumnWidth + 'px'\r\n            }\"\r\n            style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"rowSelectorColumnFrozen\" \r\n            [alignFrozen]=\"getFrozenColumnAlignAsText(rowSelectorColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n            <p-checkbox \r\n                [binary]=\"true\"\r\n                [ngModel]=\"isRowCheckboxSelected(rowData.rowID)\"\r\n                (onChange)=\"onRowChekboxChange($event, rowData.rowID)\"/>\r\n            </td>\r\n        </ng-template>\r\n\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE ACTIONS ABOVE THE HEADER -->\r\n        <ng-template #caption>\r\n            <div #headerContainer style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <!--CHOOSE COLUMNS TO SHOW-->\r\n                    @if (columnEditorEnabled) {\r\n                        <p-button icon=\"pi pi-info\" (onClick)=\"columnSelectorShow()\" pTooltip=\"Modify columns\"\r\n                            [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                    <!--CLEAR SORTS AND FILTERS-->\r\n                    @if (showClearSortAndFilters) {\r\n                        <p-button icon=\"pi pi-sort-alt-slash\" (onClick)=\"clearSorts(dt)\" [disabled]=\"!hasToClearSorts(dt)\"\r\n                            pTooltip=\"Clear sorts\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                        <p-button\r\n                            icon=\"pi pi-filter-slash\" (onClick)=\"clearFilters(dt)\" [disabled]=\"!hasToClearFilters(dt, globalSearchText)\"\r\n                            pTooltip=\"Clear filters\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                </div>\r\n\r\n                <!--TABLE VIEWS-->\r\n                @if(tableViewsEnabled()){\r\n                    <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                        <p-buttongroup>\r\n                            <p-button (click)=\"viewsModalShow=true;\" [label]=\"tableViewCurrentSelectedAlias ? tableViewCurrentSelectedAlias : '--- Select a view ---'\" class=\"viewButton\"/>\r\n                            <p-button icon=\"pi pi-refresh\" (click)=\"viewLoad(tableViewCurrentSelectedAlias!)\" [disabled]=\"!tableViewCurrentSelectedAlias\" pTooltip=\"Apply view again\" [showDelay]=\"700\" tooltipPosition=\"top\"/>\r\n                            <p-button icon=\"pi pi-eraser\" [disabled]=\"!tableViewCurrentSelectedAlias\" pTooltip=\"Reset table view\" [showDelay]=\"700\" tooltipPosition=\"top\"/><!--resetTableView()-->\r\n                        </p-buttongroup>\r\n                    </div>\r\n                }\r\n\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <!--GLOBAL FILTER-->\r\n                    @if (globalSearchEnabled) {\r\n                        <p-iconField iconPosition=\"left\" class=\"ml-auto\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n                            <p-inputIcon>\r\n                                <i class=\"pi pi-search\"></i>\r\n                            </p-inputIcon>\r\n                            <input pInputText type=\"text\" \r\n                                (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\"  autocomplete=\"off\" \r\n                                [maxlength]=\"globalSearchMaxLength\" [placeholder]=\"globalSearchPlaceholder\" [(ngModel)]=\"globalSearchText\"\r\n                                style=\"width: 220px;\"/>\r\n                            <!-- Right icon (only if there is text) -->\r\n                            @if (globalSearchText) {\r\n                                <p-inputIcon position=\"right\">\r\n                                    <i class=\"pi pi-times\" style=\"cursor: pointer;\"  (click)=\"clearFilters(dt, true, true); $event.stopPropagation()\"></i>\r\n                                </p-inputIcon>\r\n                            }\r\n                        </p-iconField>\r\n                    }\r\n\r\n                    <!--EXPORT DATA-->\r\n                    @if (urlExcelReport && urlExcelReport.trim().length > 0) {\r\n                        <p-button icon=\"pi pi-file-excel\" (onClick)=\"openExcelExport()\"\r\n                            pTooltip=\"Export to Excel\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n\r\n                    <!--REFRESH DATA-->\r\n                    @if (showRefreshData) {\r\n                        <p-button icon=\"pi pi-refresh\" (onClick)=\"refreshData($event)\" pTooltip=\"Refresh data\" [showDelay]=\"700\"\r\n                            tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                    \r\n                    <!-- HEADER ACTION BUTTONS -->\r\n                    @if (headerActionButtons.length > 0) {\r\n                        <td style=\"display: flex; justify-content: center; align-items: center;\">\r\n                            @for (button of headerActionButtons; track $index) {\r\n                                <ecs-table-button [button]=\"button\" [rowData]=\"null\" (clicked)=\"handleButtonsClick($event, null)\"/>\r\n                            }\r\n                        </td>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE HEADERS -->\r\n        <ng-template #header let-columns>\r\n            <tr>\r\n                @if (!actionsColumnAligmentRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @if (rowSelectorColumnActive && !rowSelectorColumnAligmentRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @for (col of columns; track col.header) {\r\n                    <th [ngStyle]=\"getColumnStyle(col, true)\"\r\n                        pResizableColumn [pResizableColumnDisabled]=\"!col.canBeResized ? true : false\"\r\n                        pReorderableColumn [pReorderableColumnDisabled]=\"!col.canBeReordered ? true : false\"\r\n                        pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\"\r\n                        [pSortableColumn]=\"col.field\" [pSortableColumnDisabled]=\"!col.canBeSorted ? true : false\"\r\n                        style=\"text-align: center;\"\r\n                        [id]=\"col.field + '-header'\" [attr.scope]=\"'col'\">\r\n                        <div style=\"display: flex; justify-content: space-between; align-items: center; width: 100%;\">\r\n                            <div style=\"margin-right: 15px;\">\r\n                                <span>{{ col.header }}</span>\r\n                            </div>\r\n                            <div style=\"display: flex; align-items: center; gap: 5px;\">\r\n                                @if (col.canBeSorted) {\r\n                                    <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n                                }\r\n                                @if(col.canBeFiltered){\r\n                                    @if (!col.filterPredifinedValuesName || col.filterPredifinedValuesName.length === 0) {\r\n                                        <p-columnFilter [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\" [showButtons]=\"false\"/>\r\n                                    } @else {\r\n                                        <p-columnFilter\r\n                                            type=\"{{getDataTypeAsText(col.dataType)}}\" field=\"{{col.field}}\" display=\"menu\"\r\n                                            [showButtons]=\"false\" matchMode=\"in\" operator=\"or\" [showMatchModes]=\"false\"\r\n                                            [showOperator]=\"false\" [showAddButton]=\"false\" [showClearButton]=\"false\" [showApplyButton]=\"false\">\r\n                                            <ng-template #filter>\r\n                                                <p-multiSelect\r\n                                                    [style]=\"{ minWidth: '400px' }\" [(ngModel)]=\"predifinedFiltersSelectedValuesCollection[col.filterPredifinedValuesName]\"\r\n                                                    [options]=\"getPredifinedFilterValues(col.filterPredifinedValuesName)\" [placeholder]=\"predifinedFiltersNoSelectionPlaceholder\"\r\n                                                    (onChange)=\"onPredifinedFilterChange(col.field, $event.value)\" optionLabel=\"name\">\r\n                                                        <ng-template #selectedItems>\r\n                                                        @if (predifinedFiltersSelectedValuesCollection[col.filterPredifinedValuesName].length > 0) {\r\n                                                            <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\r\n                                                                <div>\r\n                                                                    {{predifinedFiltersSelectedValuesText(col.filterPredifinedValuesName)}}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        } @else {\r\n                                                            <div>{{ predifinedFiltersNoSelectionPlaceholder }}</div>\r\n                                                        }\r\n                                                        </ng-template>\r\n                                                        <ng-template let-option pTemplate=\"item\">\r\n                                                            <div style=\"display: inline-block; vertical-align: middle;\">\r\n                                                                <ecs-table-predifined-filters [option]=\"option\" [col]=\"col\"/>\r\n                                                            </div>\r\n                                                        </ng-template>\r\n                                                </p-multiSelect>\r\n                                            </ng-template>\r\n                                        </p-columnFilter>\r\n                                    }\r\n                                }\r\n                                @if (col.columnDescription && col.columnDescription.length > 0) {\r\n                                    <i [pTooltip]=\"col.columnDescription\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                    </th>\r\n                }\r\n                @if (rowSelectorColumnActive && rowSelectorColumnAligmentRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @if (actionsColumnAligmentRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n                }\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS CONTENTS -->\r\n        <ng-template #body let-rowData let-columns=\"columns\"> \r\n            <tr [pSelectableRow]=\"rowData\">\r\n                @if (!actionsColumnAligmentRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n                }\r\n                @if (rowSelectorColumnActive && !rowSelectorColumnAligmentRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n                }\r\n                @for (col of columns; track col.field) {\r\n                    <td (mousedown)=\"col.dataType !== DataType.Boolean && copyToClipboardStart($event)\" (mouseup)=\"copyToClipboardCancel()\"\r\n                        [ngStyle]=\"getColumnStyle(col)\" pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" \r\n                        [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\" [style.text-align]=\"getDataAlignHorizontalAsText(col.dataAlignHorizontal)\" [style.vertical-align]=\"getDataAlignVerticalAsText(col.dataAlignVertical)\">\r\n                        <ecs-table-cell [col]=\"col\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\" \r\n                            [dateFormat]=\"dateFormat\" [dateTimezone]=\"dateTimezone\" [dateCulture]=\"dateCulture\"\r\n                            [predifinedFiltersCollection]=\"predifinedFiltersCollection\"/>\r\n                    </td>\r\n                }\r\n                @if (rowSelectorColumnActive && rowSelectorColumnAligmentRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n                }\r\n                @if (actionsColumnAligmentRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n                }\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS NO CONTENTS -->\r\n        <ng-template #emptymessage>\r\n            <tr>\r\n                <td colspan=\"999\">{{noDataFoundText}}</td>\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- SHOW CUSTOM RECORDS REPORT -->\r\n        <ng-template #paginatorleft>\r\n            <div #paginatorContainer>\r\n                Showing {{totalRecords}} records of {{totalRecordsNotFiltered}} available records\r\n            </div>\r\n        </ng-template>\r\n    </p-table>\r\n</div>\r\n<ecs-column-selector [visible]=\"showColumnSelector\" [columnModalData]=\"columnModalData\" [filteredColumnData]=\"filteredColumnData\" (visibleChange)=\"showColumnSelector=false\" (applyChanges)=\"applyColumnModalChanges($event)\"/>\r\n<ecs-export-excel [visible]=\"showExportModal\" [rowCheckboxSelectorActive]=\"rowSelectorColumnActive\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"excelReportTitleAllowUserEdit\" (visibleChange)=\"showExportModal=false\" (exportToExcel)=\"generateExcelReport($event)\"/>\r\n<ecs-views-management [visible]=\"viewsModalShow\" [tableViews_menuItems]=\"tableViews_menuItems\" \r\n    (onViewSelect)=\"viewLoad($event)\" (onViewCreate)=\"viewCreate($event)\" (onViewDelete)=\"viewDelete($event)\" (onViewEditAlias)=\"viewEditAlias($event)\" (onViewUpdateData)=\"viewUpdateData($event)\"\r\n    (visibleChange)=\"viewsModalShow=false\"/>", styles: [".highlighted-text{background-color:#ff0}.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}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$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: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i5$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i5$1.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i5$1.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i5$1.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i5$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i5$1.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i9.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i12.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: TableCell, selector: "ecs-table-cell", inputs: ["col", "rowData", "globalSearchText", "predifinedFiltersCollection", "dateFormat", "dateTimezone", "dateCulture"] }, { kind: "component", type: TablePredifinedFilters, selector: "ecs-table-predifined-filters", inputs: ["option", "col"] }, { kind: "component", type: TableButton, selector: "ecs-table-button", inputs: ["button", "rowData", "isActionButton", "isLastActionButton"], outputs: ["clicked"] }, { kind: "component", type: ColumnSelector, selector: "ecs-column-selector", inputs: ["visible", "columnModalData", "filteredColumnData"], outputs: ["visibleChange", "applyChanges"] }, { kind: "component", type: ExportExcel, selector: "ecs-export-excel", inputs: ["visible", "rowCheckboxSelectorActive", "excelReportTitle", "allowTitleUserEdit"], outputs: ["exportToExcel", "visibleChange"] }, { kind: "ngmodule", type: ButtonGroupModule }, { kind: "component", type: i14.ButtonGroup, selector: "p-buttonGroup, p-buttongroup, p-button-group" }, { kind: "component", type: ViewsManagement, selector: "ecs-views-management", inputs: ["visible", "tableViews_menuItems"], outputs: ["onViewSelect", "onViewDelete", "onViewUpdateData", "onViewEditAlias", "onViewCreate", "visibleChange"] }], encapsulation: i0.ViewEncapsulation.None });
+    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);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ECSPrimengTable, deps: [{ token: ECSPrimengTableService }, { token: ECSPrimengTableNotificationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ECSPrimengTable, isStandalone: true, selector: "ecs-primeng-table", inputs: { tableOptions: "tableOptions" }, outputs: { onRowCheckboxChange: "onRowCheckboxChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onDataEndUpdate: "onDataEndUpdate" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }, { propertyName: "paginatorContainer", first: true, predicate: ["paginatorContainer"], descendants: true }], ngImport: i0, template: "<div #tableContainer>\r\n    <p-table #dt\r\n        size=\"small\" showGridlines stripedRows \r\n        sortMode=\"multiple\"\r\n        [resizableColumns]=\"true\" columnResizeMode=\"expand\"\r\n        [reorderableColumns]=\"true\"\r\n        [scrollable]=\"true\" [scrollHeight]=\"scrollHeightValue\"\r\n        [columns]=\"tableOptions.columns?.shown ?? []\" [value]=\"tableOptions.data ?? []\" dataKey=\"rowID\" \r\n        [paginator]=\"true\" [first]=\"currentPage * currentRowsPerPage\" [rows]=\"currentRowsPerPage\" [totalRecords]=\"totalRecords\"\r\n        [rowsPerPageOptions]=\"allowedRowsPerPage\" [showCurrentPageReport]=\"false\" (onPage)=\"pageChange($event)\"\r\n        [metaKeySelection]=\"true\" [selectionMode]=\"tableOptions.rows?.singleSelector?.enabled ? 'single' : null\" [metaKeySelection]=\"tableOptions.rows?.singleSelector?.metakey\" [(selection)]=\"rowSelection\" (onRowSelect)=\"rowSelect($event)\" (onRowUnselect)=\"rowUnselect($event)\"\r\n        [lazy]=\"true\" (onLazyLoad)=\"fetchTableData($event)\">\r\n\r\n        <!--TEMPLATE FOR THE ACTIONS HEADER COLUMN-->\r\n        <ng-template #actionColumnHeaderTemplate>\r\n            @if ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0) {\r\n                <th [ngStyle]=\"{'max-width': (tableOptions.rows?.action?.width ?? 150) + 'px','min-width': (tableOptions.rows?.action?.width ?? 150) + 'px','width': (tableOptions.rows?.action?.width ?? 150) + 'px'}\"\r\n                    pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows?.action?.resizable\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\"\r\n                    [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.action?.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\" id=\"actions-header\"\r\n                    [attr.scope]=\"'col'\" style=\"text-align: center;\">\r\n                    {{ tableOptions.rows?.action?.header ?? ''}}\r\n                </th>\r\n            }\r\n        </ng-template>\r\n\r\n        <!--TEMPLATE FOR THE ACTIONS ROW COLUMN-->\r\n        <ng-template #actionColumnTemplate let-rowData=\"rowData\">\r\n            @if ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0) {\r\n                <td \r\n                    [ngStyle]=\"{'max-width': (tableOptions.rows?.action?.width ?? 150) + 'px','min-width': (tableOptions.rows?.action?.width ?? 150) + 'px','width': (tableOptions.rows?.action?.width ?? 150) + 'px'}\"\r\n                    style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\"\r\n                    [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.action?.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n                    @for (button of tableOptions.rows?.action?.buttons; track button; let last = $last) {\r\n                        <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\"/>\r\n                    }\r\n                </td>\r\n            }\r\n        </ng-template>\r\n\r\n        <!-- TEMPLATE FOR THE ROW CHECKBOX SELECTOR HEADER COLUMN -->\r\n        <ng-template #rowSelectorColumnHeaderTemplate>\r\n            <th \r\n                [ngStyle]=\"{'max-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px','min-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px','width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px'}\"\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?.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\"\r\n                style=\"text-align: center; vertical-align: middle;\">\r\n                    <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                        {{ tableOptions.rows?.checkboxSelector?.header ?? '' }}\r\n                        <p-columnFilter type=\"boolean\" field=\"selector\" display=\"menu\" [showButtons]=\"false\"/>\r\n                    </div>\r\n            </th>\r\n        </ng-template>\r\n\r\n        <!--TEMPLATE FOR THE ROW CHECKBOX SELECTOR COLUMN-->\r\n        <ng-template #rowSelectorColumnTemplate let-rowData=\"rowData\">\r\n            <td \r\n            [ngStyle]=\"{'max-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px', 'min-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px', 'width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px'}\"\r\n            style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" \r\n            [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.checkboxSelector?.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n            <p-checkbox \r\n                [disabled]=\"!(tableOptions.rows?.checkboxSelector?.enabledCondition?.(rowData) ?? true)\"\r\n                [binary]=\"true\"\r\n                [ngModel]=\"isRowCheckboxSelected(rowData.rowID)\"\r\n                (onChange)=\"onRowChekboxChange($event, rowData.rowID)\"/>\r\n            </td>\r\n        </ng-template>\r\n\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE ACTIONS ABOVE THE HEADER -->\r\n        <ng-template #caption>\r\n            <div #headerContainer style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <!--CHOOSE COLUMNS TO SHOW-->\r\n                    @if (tableOptions.columns?.selectorEnabled) {\r\n                        <p-button [icon]=\"tableOptions.columns?.selectorIcon ?? 'pi pi-pen-to-square'\" (onClick)=\"columnSelectorShow()\" pTooltip=\"Modify columns\"\r\n                            [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                    <!--CLEAR SORTS AND FILTERS-->\r\n                    @if (tableOptions.header?.clearSortsEnabled) {\r\n                        <p-button [icon]=\"tableOptions.header?.clearSortsIcon ?? 'pi pi-sort-alt-slash'\" (onClick)=\"clearSorts(dt)\" [disabled]=\"!hasToClearSorts(dt)\"\r\n                            pTooltip=\"Clear sorts\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                    @if (tableOptions.header?.clearFiltersEnabled) {\r\n                        <p-button\r\n                            [icon]=\"tableOptions.header?.clearFiltersIcon ?? 'pi pi-filter-slash'\" (onClick)=\"clearFilters(dt)\" [disabled]=\"!hasToClearFilters(dt, globalSearchText)\"\r\n                            pTooltip=\"Clear filters\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                </div>\r\n\r\n                <!--TABLE VIEWS-->\r\n                @if(tableViewsEnabled()){\r\n                    <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                        <p-buttongroup>\r\n                            <p-button (click)=\"viewsModalShow=true;\" [label]=\"tableViewCurrentSelectedAlias ? tableViewCurrentSelectedAlias : '--- Select a view ---'\" class=\"viewButton\"/>\r\n                            <p-button icon=\"pi pi-refresh\" (click)=\"viewLoad(tableViewCurrentSelectedAlias!)\" [disabled]=\"!tableViewCurrentSelectedAlias\" pTooltip=\"Apply view again\" [showDelay]=\"700\" tooltipPosition=\"top\"/>\r\n                            <p-button icon=\"pi pi-eraser\" (click)=\"resetTableView()\" pTooltip=\"Reset table view\" [showDelay]=\"700\" tooltipPosition=\"top\"/>\r\n                        </p-buttongroup>\r\n                    </div>\r\n                }\r\n\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <!--GLOBAL FILTER-->\r\n                    @if (tableOptions.globalFilter?.enabled) {\r\n                        <p-iconField iconPosition=\"left\" class=\"ml-auto\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n                            <p-inputIcon>\r\n                                <i class=\"pi pi-search\"></i>\r\n                            </p-inputIcon>\r\n                            <input pInputText type=\"text\" \r\n                                (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\"  autocomplete=\"off\" \r\n                                [maxlength]=\"tableOptions.globalFilter?.maxLength ?? null\" placeholder='Search keyword' [(ngModel)]=\"globalSearchText\"\r\n                                style=\"width: 220px;\"/>\r\n                            <!-- Right icon (only if there is text) -->\r\n                            @if (globalSearchText) {\r\n                                <p-inputIcon position=\"right\">\r\n                                    <i class=\"pi pi-times\" style=\"cursor: pointer;\"  (click)=\"clearFilters(dt, true, true); $event.stopPropagation()\"></i>\r\n                                </p-inputIcon>\r\n                            }\r\n                        </p-iconField>\r\n                    }\r\n\r\n                    <!--EXPORT DATA-->\r\n                    @if (tableOptions.excelReport?.url?.trim()) {\r\n                        <p-button icon=\"pi pi-file-excel\" (onClick)=\"openExcelExport()\"\r\n                            pTooltip=\"Export to Excel\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n\r\n                    <!--REFRESH DATA-->\r\n                    @if (showRefreshData) {\r\n                        <p-button icon=\"pi pi-refresh\" (onClick)=\"refreshData($event)\" pTooltip=\"Refresh data\" [showDelay]=\"700\"\r\n                            tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                    \r\n                    <!-- HEADER ACTION BUTTONS -->\r\n                    @if ((tableOptions.header?.buttons?.length ?? 0) > 0) {\r\n                        <td style=\"display: flex; justify-content: center; align-items: center;\">\r\n                            @for (button of tableOptions.header?.buttons; track $index) {\r\n                                <ecs-table-button [button]=\"button\" [rowData]=\"null\"/>\r\n                            }\r\n                        </td>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE HEADERS -->\r\n        <ng-template #header let-columns>\r\n            <tr>\r\n                @if (!tableOptions.rows?.action?.alignmentRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.alignmentRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @for (col of columns; track col.header) {\r\n                    <th [ngStyle]=\"getColumnStyle(col, true)\"\r\n                        pResizableColumn [pResizableColumnDisabled]=\"!col.canBeResized ? true : false\"\r\n                        pReorderableColumn [pReorderableColumnDisabled]=\"!col.canBeReordered ? true : false\"\r\n                        pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\"\r\n                        [pSortableColumn]=\"col.field\" [pSortableColumnDisabled]=\"!col.canBeSorted ? true : false\"\r\n                        style=\"text-align: center;\"\r\n                        [id]=\"col.field + '-header'\" [attr.scope]=\"'col'\">\r\n                        <div style=\"display: flex; justify-content: space-between; align-items: center; width: 100%;\">\r\n                            <div style=\"margin-right: 15px;\">\r\n                                <span>{{ col.header }}</span>\r\n                            </div>\r\n                            <div style=\"display: flex; align-items: center; gap: 5px;\">\r\n                                @if (col.canBeSorted) {\r\n                                    <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n                                }\r\n                                @if(col.canBeFiltered){\r\n                                    @if (!col.filterPredefinedValuesName || col.filterPredefinedValuesName.length === 0) {\r\n                                        <p-columnFilter [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\" [showButtons]=\"false\"/>\r\n                                    } @else {\r\n                                        <p-columnFilter\r\n                                            type=\"{{getDataTypeAsText(col.dataType)}}\" field=\"{{col.field}}\" display=\"menu\"\r\n                                            [showButtons]=\"false\" matchMode=\"in\" operator=\"or\" [showMatchModes]=\"false\"\r\n                                            [showOperator]=\"false\" [showAddButton]=\"false\" [showClearButton]=\"false\" [showApplyButton]=\"false\">\r\n                                            <ng-template #filter>\r\n                                                <p-multiSelect\r\n                                                    [style]=\"{ minWidth: '400px' }\" [(ngModel)]=\"predefinedFiltersSelectedValuesCollection[col.filterPredefinedValuesName]\"\r\n                                                    [options]=\"getPredefinedFilterValues(col.filterPredefinedValuesName)\" placeholder=\"Any value\"\r\n                                                    (onChange)=\"onPredefinedFilterChange(col.field, $event.value)\" optionLabel=\"name\">\r\n                                                        <ng-template #selectedItems>\r\n                                                        @if (predefinedFiltersSelectedValuesCollection[col.filterPredefinedValuesName].length > 0) {\r\n                                                            <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\r\n                                                                <div>\r\n                                                                    {{predefinedFiltersSelectedValuesText(col.filterPredefinedValuesName)}}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        } @else {\r\n                                                            <div>Any value</div>\r\n                                                        }\r\n                                                        </ng-template>\r\n                                                        <ng-template let-option pTemplate=\"item\">\r\n                                                            <div style=\"display: inline-block; vertical-align: middle;\">\r\n                                                                <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\" [selectable]=\"false\" [rowData]=\"null\"/>\r\n                                                            </div>\r\n                                                        </ng-template>\r\n                                                </p-multiSelect>\r\n                                            </ng-template>\r\n                                        </p-columnFilter>\r\n                                    }\r\n                                }\r\n                                @if (col.columnDescription && col.columnDescription.length > 0) {\r\n                                    <i [pTooltip]=\"col.columnDescription\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                    </th>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.alignmentRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.action?.alignmentRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n                }\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS CONTENTS -->\r\n        <ng-template #body let-rowData let-columns=\"columns\"> \r\n            <tr [pSelectableRow]=\"rowData\" [ngClass]=\"tableOptions.rows?.class?.(rowData)\" [ngStyle]=\"tableOptions.rows?.style?.(rowData)\">\r\n                @if (!tableOptions.rows?.action?.alignmentRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.alignmentRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n                }\r\n                @for (col of columns; track col.field) {\r\n                    <td (mousedown)=\"col.dataType !== DataType.Boolean && copyToClipboardStart($event)\" (mouseup)=\"copyToClipboardCancel()\"\r\n                        [ngStyle]=\"getColumnStyle(col)\" pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" \r\n                        [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\" [style.text-align]=\"getDataAlignHorizontalAsText(col.dataAlignHorizontal)\" [style.vertical-align]=\"getDataAlignVerticalAsText(col.dataAlignVertical)\">\r\n                        <ecs-table-cell [col]=\"col\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\" \r\n                            [dateFormat]=\"dateFormat\" [dateTimezone]=\"dateTimezone\" [dateCulture]=\"dateCulture\"\r\n                            [predefinedFiltersCollection]=\"tableOptions.predefinedFilters\"/>\r\n                    </td>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.alignmentRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.action?.alignmentRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n                }\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS NO CONTENTS -->\r\n        <ng-template #emptymessage>\r\n            <tr>\r\n                <td colspan=\"999\">No data found for the current filter criteria.</td>\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- SHOW CUSTOM RECORDS REPORT -->\r\n        <ng-template #paginatorleft>\r\n            <div #paginatorContainer>\r\n                Showing {{totalRecords}} records of {{totalRecordsNotFiltered}} available records\r\n            </div>\r\n        </ng-template>\r\n    </p-table>\r\n</div>\r\n<ecs-column-selector [visible]=\"showColumnSelector\" [columnModalData]=\"columnModalData\" [filteredColumnData]=\"filteredColumnData\" (visibleChange)=\"showColumnSelector=false\" (applyChanges)=\"applyColumnModalChanges($event)\"/>\r\n<ecs-export-excel [visible]=\"showExportModal\" [rowCheckboxSelectorActive]=\"tableOptions.rows?.checkboxSelector?.enabled ?? false\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"tableOptions.excelReport?.titleAllowUserEdit ?? false\" (visibleChange)=\"showExportModal=false\" (exportToExcel)=\"generateExcelReport($event)\"/>\r\n<ecs-views-management [visible]=\"viewsModalShow\" [tableViews_menuItems]=\"tableViews_menuItems\" \r\n    (onViewSelect)=\"viewLoad($event)\" (onViewCreate)=\"viewCreate($event)\" (onViewDelete)=\"viewDelete($event)\" (onViewEditAlias)=\"viewEditAlias($event)\" (onViewUpdateData)=\"viewUpdateData($event)\" (onViewUpdateActiveStartup)=\"viewUpdateActiveStartup($event)\"\r\n    (visibleChange)=\"viewsModalShow=false\"/>", styles: [".highlighted-text{background-color:#ff0}.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}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8$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: i8$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i5$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i5$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i5$1.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "directive", type: i5$1.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i5$1.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i5$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i5$1.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i9$1.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i12.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i9.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: TableCell, selector: "ecs-table-cell", inputs: ["col", "rowData", "globalSearchText", "predefinedFiltersCollection", "dateFormat", "dateTimezone", "dateCulture"] }, { kind: "component", type: TablePredefinedFilters, selector: "ecs-table-predefined-filters", inputs: ["option", "col", "selectable", "rowData"] }, { kind: "component", type: TableButton, selector: "ecs-table-button", inputs: ["button", "rowData", "isActionButton", "isLastActionButton"] }, { kind: "component", type: ColumnSelector, selector: "ecs-column-selector", inputs: ["visible", "columnModalData", "filteredColumnData"], outputs: ["visibleChange", "applyChanges"] }, { kind: "component", type: ExportExcel, selector: "ecs-export-excel", inputs: ["visible", "rowCheckboxSelectorActive", "excelReportTitle", "allowTitleUserEdit"], outputs: ["exportToExcel", "visibleChange"] }, { kind: "ngmodule", type: ButtonGroupModule }, { kind: "component", type: i14.ButtonGroup, selector: "p-buttonGroup, p-buttongroup, p-button-group" }, { kind: "component", type: ViewsManagement, selector: "ecs-views-management", inputs: ["visible", "tableViews_menuItems"], outputs: ["onViewSelect", "onViewDelete", "onViewUpdateData", "onViewUpdateActiveStartup", "onViewEditAlias", "onViewCreate", "visibleChange"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ECSPrimengTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ECSPrimengTable, decorators: [{
             type: Component,
             args: [{ selector: 'ecs-primeng-table', imports: [
                         CommonModule,
@@ -1631,86 +1929,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         CheckboxModule,
                         PaginatorModule,
                         TableCell,
-                        TablePredifinedFilters,
+                        TablePredefinedFilters,
                         TableButton,
                         ColumnSelector,
                         ExportExcel,
                         ButtonGroupModule,
                         ViewsManagement
-                    ], standalone: true, encapsulation: ViewEncapsulation.None, template: "<div #tableContainer>\r\n    <p-table #dt\r\n        size=\"small\" showGridlines stripedRows \r\n        sortMode=\"multiple\"\r\n        [resizableColumns]=\"true\" columnResizeMode=\"expand\"\r\n        [reorderableColumns]=\"true\"\r\n        [scrollable]=\"true\" [scrollHeight]=\"computeScrollHeight ? scrollHeight : ''\"\r\n        [columns]=\"columnsToShow\" [value]=\"data\" dataKey=\"rowID\" \r\n        [paginator]=\"true\" [first]=\"currentPage * currentRowsPerPage\" [rows]=\"currentRowsPerPage\" [totalRecords]=\"totalRecords\"\r\n        [rowsPerPageOptions]=\"allowedRowsPerPage\" [showCurrentPageReport]=\"false\" (onPage)=\"pageChange($event)\"\r\n        [metaKeySelection]=\"true\" selectionMode=\"single\" [(selection)]=\"rowSelection\" (onRowSelect)=\"rowSelect($event)\" (onRowUnselect)=\"rowUnselect($event)\"\r\n        [lazy]=\"true\" (onLazyLoad)=\"fetchTableData($event)\">\r\n\r\n        <!--TEMPLATE FOR THE ACTIONS HEADER COLUMN-->\r\n        <ng-template #actionColumnHeaderTemplate>\r\n            @if (rowActionButtons.length > 0) {\r\n                <th [ngStyle]=\"{'max-width': actionsColumnWidth + 'px','min-width': actionsColumnWidth + 'px','width': actionsColumnWidth + 'px'}\"\r\n                    pResizableColumn [pResizableColumnDisabled]=\"!actionsColumnResizable\" pFrozenColumn [frozen]=\"actionsColumnFrozen\"\r\n                    [alignFrozen]=\"getFrozenColumnAlignAsText(actionsColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\" id=\"actions-header\"\r\n                    [attr.scope]=\"'col'\" style=\"text-align: center;\">\r\n                    {{ actionColumnName }}\r\n                </th>\r\n            }\r\n        </ng-template>\r\n\r\n        <!--TEMPLATE FOR THE ACTIONS ROW COLUMN-->\r\n        <ng-template #actionColumnTemplate let-rowData=\"rowData\">\r\n            @if (rowActionButtons.length > 0) {\r\n                <td \r\n                    [ngStyle]=\"{'max-width': actionsColumnWidth + 'px','min-width': actionsColumnWidth + 'px','width': actionsColumnWidth + 'px'}\"\r\n                    style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"actionsColumnFrozen\"\r\n                    [alignFrozen]=\"getFrozenColumnAlignAsText(actionsColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n                    @for (button of rowActionButtons; track button; let last = $last) {\r\n                        <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\" (clicked)=\"handleButtonsClick($event, rowData)\"/>\r\n                    }\r\n                </td>\r\n            }\r\n        </ng-template>\r\n\r\n        <!-- TEMPLATE FOR THE ROW CHECKBOX SELECTOR HEADER COLUMN -->\r\n        <ng-template #rowSelectorColumnHeaderTemplate>\r\n            <th \r\n                [ngStyle]=\"{'max-width': rowSelectorColumnWidth + 'px','min-width': rowSelectorColumnWidth + 'px','width': rowSelectorColumnWidth + 'px'}\"\r\n                id=\"rowSelector-header\"  [attr.scope]=\"'col'\" pResizableColumn [pResizableColumnDisabled]=\"!rowselectorColumnResizable\" pFrozenColumn \r\n                [frozen]=\"rowSelectorColumnFrozen\" [alignFrozen]=\"getFrozenColumnAlignAsText(rowSelectorColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\"\r\n                style=\"text-align: center; vertical-align: middle;\">\r\n                    <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                        {{ rowSelectorColumName }}\r\n                        <p-columnFilter type=\"boolean\" field=\"selector\" display=\"menu\" [showButtons]=\"false\"/>\r\n                    </div>\r\n            </th>\r\n        </ng-template>\r\n\r\n        <!--TEMPLATE FOR THE ROW CHECKBOX SELECTOR COLUMN-->\r\n        <ng-template #rowSelectorColumnTemplate let-rowData=\"rowData\">\r\n            <td \r\n            [ngStyle]=\"{\r\n                'max-width': rowSelectorColumnWidth + 'px', \r\n                'min-width': rowSelectorColumnWidth + 'px', \r\n                'width': rowSelectorColumnWidth + 'px'\r\n            }\"\r\n            style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"rowSelectorColumnFrozen\" \r\n            [alignFrozen]=\"getFrozenColumnAlignAsText(rowSelectorColumnAligmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n            <p-checkbox \r\n                [binary]=\"true\"\r\n                [ngModel]=\"isRowCheckboxSelected(rowData.rowID)\"\r\n                (onChange)=\"onRowChekboxChange($event, rowData.rowID)\"/>\r\n            </td>\r\n        </ng-template>\r\n\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE ACTIONS ABOVE THE HEADER -->\r\n        <ng-template #caption>\r\n            <div #headerContainer style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <!--CHOOSE COLUMNS TO SHOW-->\r\n                    @if (columnEditorEnabled) {\r\n                        <p-button icon=\"pi pi-info\" (onClick)=\"columnSelectorShow()\" pTooltip=\"Modify columns\"\r\n                            [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                    <!--CLEAR SORTS AND FILTERS-->\r\n                    @if (showClearSortAndFilters) {\r\n                        <p-button icon=\"pi pi-sort-alt-slash\" (onClick)=\"clearSorts(dt)\" [disabled]=\"!hasToClearSorts(dt)\"\r\n                            pTooltip=\"Clear sorts\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                        <p-button\r\n                            icon=\"pi pi-filter-slash\" (onClick)=\"clearFilters(dt)\" [disabled]=\"!hasToClearFilters(dt, globalSearchText)\"\r\n                            pTooltip=\"Clear filters\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                </div>\r\n\r\n                <!--TABLE VIEWS-->\r\n                @if(tableViewsEnabled()){\r\n                    <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                        <p-buttongroup>\r\n                            <p-button (click)=\"viewsModalShow=true;\" [label]=\"tableViewCurrentSelectedAlias ? tableViewCurrentSelectedAlias : '--- Select a view ---'\" class=\"viewButton\"/>\r\n                            <p-button icon=\"pi pi-refresh\" (click)=\"viewLoad(tableViewCurrentSelectedAlias!)\" [disabled]=\"!tableViewCurrentSelectedAlias\" pTooltip=\"Apply view again\" [showDelay]=\"700\" tooltipPosition=\"top\"/>\r\n                            <p-button icon=\"pi pi-eraser\" [disabled]=\"!tableViewCurrentSelectedAlias\" pTooltip=\"Reset table view\" [showDelay]=\"700\" tooltipPosition=\"top\"/><!--resetTableView()-->\r\n                        </p-buttongroup>\r\n                    </div>\r\n                }\r\n\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <!--GLOBAL FILTER-->\r\n                    @if (globalSearchEnabled) {\r\n                        <p-iconField iconPosition=\"left\" class=\"ml-auto\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n                            <p-inputIcon>\r\n                                <i class=\"pi pi-search\"></i>\r\n                            </p-inputIcon>\r\n                            <input pInputText type=\"text\" \r\n                                (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\"  autocomplete=\"off\" \r\n                                [maxlength]=\"globalSearchMaxLength\" [placeholder]=\"globalSearchPlaceholder\" [(ngModel)]=\"globalSearchText\"\r\n                                style=\"width: 220px;\"/>\r\n                            <!-- Right icon (only if there is text) -->\r\n                            @if (globalSearchText) {\r\n                                <p-inputIcon position=\"right\">\r\n                                    <i class=\"pi pi-times\" style=\"cursor: pointer;\"  (click)=\"clearFilters(dt, true, true); $event.stopPropagation()\"></i>\r\n                                </p-inputIcon>\r\n                            }\r\n                        </p-iconField>\r\n                    }\r\n\r\n                    <!--EXPORT DATA-->\r\n                    @if (urlExcelReport && urlExcelReport.trim().length > 0) {\r\n                        <p-button icon=\"pi pi-file-excel\" (onClick)=\"openExcelExport()\"\r\n                            pTooltip=\"Export to Excel\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n\r\n                    <!--REFRESH DATA-->\r\n                    @if (showRefreshData) {\r\n                        <p-button icon=\"pi pi-refresh\" (onClick)=\"refreshData($event)\" pTooltip=\"Refresh data\" [showDelay]=\"700\"\r\n                            tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                    \r\n                    <!-- HEADER ACTION BUTTONS -->\r\n                    @if (headerActionButtons.length > 0) {\r\n                        <td style=\"display: flex; justify-content: center; align-items: center;\">\r\n                            @for (button of headerActionButtons; track $index) {\r\n                                <ecs-table-button [button]=\"button\" [rowData]=\"null\" (clicked)=\"handleButtonsClick($event, null)\"/>\r\n                            }\r\n                        </td>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE HEADERS -->\r\n        <ng-template #header let-columns>\r\n            <tr>\r\n                @if (!actionsColumnAligmentRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @if (rowSelectorColumnActive && !rowSelectorColumnAligmentRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @for (col of columns; track col.header) {\r\n                    <th [ngStyle]=\"getColumnStyle(col, true)\"\r\n                        pResizableColumn [pResizableColumnDisabled]=\"!col.canBeResized ? true : false\"\r\n                        pReorderableColumn [pReorderableColumnDisabled]=\"!col.canBeReordered ? true : false\"\r\n                        pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\"\r\n                        [pSortableColumn]=\"col.field\" [pSortableColumnDisabled]=\"!col.canBeSorted ? true : false\"\r\n                        style=\"text-align: center;\"\r\n                        [id]=\"col.field + '-header'\" [attr.scope]=\"'col'\">\r\n                        <div style=\"display: flex; justify-content: space-between; align-items: center; width: 100%;\">\r\n                            <div style=\"margin-right: 15px;\">\r\n                                <span>{{ col.header }}</span>\r\n                            </div>\r\n                            <div style=\"display: flex; align-items: center; gap: 5px;\">\r\n                                @if (col.canBeSorted) {\r\n                                    <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n                                }\r\n                                @if(col.canBeFiltered){\r\n                                    @if (!col.filterPredifinedValuesName || col.filterPredifinedValuesName.length === 0) {\r\n                                        <p-columnFilter [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\" [showButtons]=\"false\"/>\r\n                                    } @else {\r\n                                        <p-columnFilter\r\n                                            type=\"{{getDataTypeAsText(col.dataType)}}\" field=\"{{col.field}}\" display=\"menu\"\r\n                                            [showButtons]=\"false\" matchMode=\"in\" operator=\"or\" [showMatchModes]=\"false\"\r\n                                            [showOperator]=\"false\" [showAddButton]=\"false\" [showClearButton]=\"false\" [showApplyButton]=\"false\">\r\n                                            <ng-template #filter>\r\n                                                <p-multiSelect\r\n                                                    [style]=\"{ minWidth: '400px' }\" [(ngModel)]=\"predifinedFiltersSelectedValuesCollection[col.filterPredifinedValuesName]\"\r\n                                                    [options]=\"getPredifinedFilterValues(col.filterPredifinedValuesName)\" [placeholder]=\"predifinedFiltersNoSelectionPlaceholder\"\r\n                                                    (onChange)=\"onPredifinedFilterChange(col.field, $event.value)\" optionLabel=\"name\">\r\n                                                        <ng-template #selectedItems>\r\n                                                        @if (predifinedFiltersSelectedValuesCollection[col.filterPredifinedValuesName].length > 0) {\r\n                                                            <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\r\n                                                                <div>\r\n                                                                    {{predifinedFiltersSelectedValuesText(col.filterPredifinedValuesName)}}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        } @else {\r\n                                                            <div>{{ predifinedFiltersNoSelectionPlaceholder }}</div>\r\n                                                        }\r\n                                                        </ng-template>\r\n                                                        <ng-template let-option pTemplate=\"item\">\r\n                                                            <div style=\"display: inline-block; vertical-align: middle;\">\r\n                                                                <ecs-table-predifined-filters [option]=\"option\" [col]=\"col\"/>\r\n                                                            </div>\r\n                                                        </ng-template>\r\n                                                </p-multiSelect>\r\n                                            </ng-template>\r\n                                        </p-columnFilter>\r\n                                    }\r\n                                }\r\n                                @if (col.columnDescription && col.columnDescription.length > 0) {\r\n                                    <i [pTooltip]=\"col.columnDescription\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                    </th>\r\n                }\r\n                @if (rowSelectorColumnActive && rowSelectorColumnAligmentRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @if (actionsColumnAligmentRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n                }\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS CONTENTS -->\r\n        <ng-template #body let-rowData let-columns=\"columns\"> \r\n            <tr [pSelectableRow]=\"rowData\">\r\n                @if (!actionsColumnAligmentRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n                }\r\n                @if (rowSelectorColumnActive && !rowSelectorColumnAligmentRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n                }\r\n                @for (col of columns; track col.field) {\r\n                    <td (mousedown)=\"col.dataType !== DataType.Boolean && copyToClipboardStart($event)\" (mouseup)=\"copyToClipboardCancel()\"\r\n                        [ngStyle]=\"getColumnStyle(col)\" pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" \r\n                        [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\" [style.text-align]=\"getDataAlignHorizontalAsText(col.dataAlignHorizontal)\" [style.vertical-align]=\"getDataAlignVerticalAsText(col.dataAlignVertical)\">\r\n                        <ecs-table-cell [col]=\"col\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\" \r\n                            [dateFormat]=\"dateFormat\" [dateTimezone]=\"dateTimezone\" [dateCulture]=\"dateCulture\"\r\n                            [predifinedFiltersCollection]=\"predifinedFiltersCollection\"/>\r\n                    </td>\r\n                }\r\n                @if (rowSelectorColumnActive && rowSelectorColumnAligmentRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n                }\r\n                @if (actionsColumnAligmentRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n                }\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS NO CONTENTS -->\r\n        <ng-template #emptymessage>\r\n            <tr>\r\n                <td colspan=\"999\">{{noDataFoundText}}</td>\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- SHOW CUSTOM RECORDS REPORT -->\r\n        <ng-template #paginatorleft>\r\n            <div #paginatorContainer>\r\n                Showing {{totalRecords}} records of {{totalRecordsNotFiltered}} available records\r\n            </div>\r\n        </ng-template>\r\n    </p-table>\r\n</div>\r\n<ecs-column-selector [visible]=\"showColumnSelector\" [columnModalData]=\"columnModalData\" [filteredColumnData]=\"filteredColumnData\" (visibleChange)=\"showColumnSelector=false\" (applyChanges)=\"applyColumnModalChanges($event)\"/>\r\n<ecs-export-excel [visible]=\"showExportModal\" [rowCheckboxSelectorActive]=\"rowSelectorColumnActive\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"excelReportTitleAllowUserEdit\" (visibleChange)=\"showExportModal=false\" (exportToExcel)=\"generateExcelReport($event)\"/>\r\n<ecs-views-management [visible]=\"viewsModalShow\" [tableViews_menuItems]=\"tableViews_menuItems\" \r\n    (onViewSelect)=\"viewLoad($event)\" (onViewCreate)=\"viewCreate($event)\" (onViewDelete)=\"viewDelete($event)\" (onViewEditAlias)=\"viewEditAlias($event)\" (onViewUpdateData)=\"viewUpdateData($event)\"\r\n    (visibleChange)=\"viewsModalShow=false\"/>", styles: [".highlighted-text{background-color:#ff0}.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}.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}\n"] }]
-        }], ctorParameters: () => [{ type: ECSPrimengTableService }, { type: ECSPrimengTableNotificationService }], propDecorators: { isActive: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], columnsToShow: [{
-                type: Input
-            }], computeScrollHeight: [{
-                type: Input
-            }], globalSearchEnabled: [{
-                type: Input
-            }], globalSearchMaxLength: [{
-                type: Input
-            }], globalSearchPlaceholder: [{
-                type: Input
-            }], columnEditorEnabled: [{
-                type: Input
-            }], urlColumnsSource: [{
-                type: Input
-            }], urlDataSource: [{
-                type: Input
-            }], urlExcelReport: [{
-                type: Input
-            }], predifinedFiltersCollection: [{
-                type: Input
-            }], predifinedFiltersNoSelectionPlaceholder: [{
-                type: Input
-            }], predifinedFiltersCollectionSelectedValuesText: [{
-                type: Input
-            }], rowActionButtons: [{
-                type: Input
-            }], headerActionButtons: [{
-                type: Input
-            }], copyCellDataToClipboardTimeSecs: [{
-                type: Input
-            }], actionsColumnAligmentRight: [{
-                type: Input
-            }], actionsColumnWidth: [{
-                type: Input
-            }], actionsColumnFrozen: [{
-                type: Input
-            }], rowSelectorColumnActive: [{
-                type: Input
-            }], rowSelectorColumName: [{
-                type: Input
-            }], rowSelectorColumnAligmentRight: [{
-                type: Input
-            }], rowSelectorColumnWidth: [{
-                type: Input
-            }], rowSelectorColumnFrozen: [{
-                type: Input
-            }], actionsColumnResizable: [{
-                type: Input
-            }], actionColumnName: [{
-                type: Input
-            }], rowselectorColumnResizable: [{
-                type: Input
-            }], noDataFoundText: [{
-                type: Input
-            }], showClearSortAndFilters: [{
-                type: Input
-            }], excelReportTitleDefault: [{
-                type: Input
-            }], excelReportTitleAllowUserEdit: [{
-                type: Input
-            }], tableViewSaveAs: [{
-                type: Input
-            }], tableViewSaveKey: [{
-                type: Input
-            }], viewsGetSourceURL: [{
-                type: Input
-            }], viewsSaveSourceURL: [{
-                type: Input
-            }], maxTableViews: [{
+                    ], standalone: true, encapsulation: ViewEncapsulation.None, template: "<div #tableContainer>\r\n    <p-table #dt\r\n        size=\"small\" showGridlines stripedRows \r\n        sortMode=\"multiple\"\r\n        [resizableColumns]=\"true\" columnResizeMode=\"expand\"\r\n        [reorderableColumns]=\"true\"\r\n        [scrollable]=\"true\" [scrollHeight]=\"scrollHeightValue\"\r\n        [columns]=\"tableOptions.columns?.shown ?? []\" [value]=\"tableOptions.data ?? []\" dataKey=\"rowID\" \r\n        [paginator]=\"true\" [first]=\"currentPage * currentRowsPerPage\" [rows]=\"currentRowsPerPage\" [totalRecords]=\"totalRecords\"\r\n        [rowsPerPageOptions]=\"allowedRowsPerPage\" [showCurrentPageReport]=\"false\" (onPage)=\"pageChange($event)\"\r\n        [metaKeySelection]=\"true\" [selectionMode]=\"tableOptions.rows?.singleSelector?.enabled ? 'single' : null\" [metaKeySelection]=\"tableOptions.rows?.singleSelector?.metakey\" [(selection)]=\"rowSelection\" (onRowSelect)=\"rowSelect($event)\" (onRowUnselect)=\"rowUnselect($event)\"\r\n        [lazy]=\"true\" (onLazyLoad)=\"fetchTableData($event)\">\r\n\r\n        <!--TEMPLATE FOR THE ACTIONS HEADER COLUMN-->\r\n        <ng-template #actionColumnHeaderTemplate>\r\n            @if ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0) {\r\n                <th [ngStyle]=\"{'max-width': (tableOptions.rows?.action?.width ?? 150) + 'px','min-width': (tableOptions.rows?.action?.width ?? 150) + 'px','width': (tableOptions.rows?.action?.width ?? 150) + 'px'}\"\r\n                    pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows?.action?.resizable\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\"\r\n                    [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.action?.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\" id=\"actions-header\"\r\n                    [attr.scope]=\"'col'\" style=\"text-align: center;\">\r\n                    {{ tableOptions.rows?.action?.header ?? ''}}\r\n                </th>\r\n            }\r\n        </ng-template>\r\n\r\n        <!--TEMPLATE FOR THE ACTIONS ROW COLUMN-->\r\n        <ng-template #actionColumnTemplate let-rowData=\"rowData\">\r\n            @if ((tableOptions.rows?.action?.buttons?.length ?? 0) > 0) {\r\n                <td \r\n                    [ngStyle]=\"{'max-width': (tableOptions.rows?.action?.width ?? 150) + 'px','min-width': (tableOptions.rows?.action?.width ?? 150) + 'px','width': (tableOptions.rows?.action?.width ?? 150) + 'px'}\"\r\n                    style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"tableOptions.rows?.action?.frozen ?? false\"\r\n                    [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.action?.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n                    @for (button of tableOptions.rows?.action?.buttons; track button; let last = $last) {\r\n                        <ecs-table-button [button]=\"button\" [rowData]=\"rowData\" [isActionButton]=\"true\" [isLastActionButton]=\"last\"/>\r\n                    }\r\n                </td>\r\n            }\r\n        </ng-template>\r\n\r\n        <!-- TEMPLATE FOR THE ROW CHECKBOX SELECTOR HEADER COLUMN -->\r\n        <ng-template #rowSelectorColumnHeaderTemplate>\r\n            <th \r\n                [ngStyle]=\"{'max-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px','min-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px','width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px'}\"\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?.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\"\r\n                style=\"text-align: center; vertical-align: middle;\">\r\n                    <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                        {{ tableOptions.rows?.checkboxSelector?.header ?? '' }}\r\n                        <p-columnFilter type=\"boolean\" field=\"selector\" display=\"menu\" [showButtons]=\"false\"/>\r\n                    </div>\r\n            </th>\r\n        </ng-template>\r\n\r\n        <!--TEMPLATE FOR THE ROW CHECKBOX SELECTOR COLUMN-->\r\n        <ng-template #rowSelectorColumnTemplate let-rowData=\"rowData\">\r\n            <td \r\n            [ngStyle]=\"{'max-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px', 'min-width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px', 'width': (tableOptions.rows?.checkboxSelector?.width ?? 150) + 'px'}\"\r\n            style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"tableOptions.rows?.checkboxSelector?.frozen ?? false\" \r\n            [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows?.checkboxSelector?.alignmentRight ? FrozenColumnAlign.Right : FrozenColumnAlign.Left)\">\r\n            <p-checkbox \r\n                [disabled]=\"!(tableOptions.rows?.checkboxSelector?.enabledCondition?.(rowData) ?? true)\"\r\n                [binary]=\"true\"\r\n                [ngModel]=\"isRowCheckboxSelected(rowData.rowID)\"\r\n                (onChange)=\"onRowChekboxChange($event, rowData.rowID)\"/>\r\n            </td>\r\n        </ng-template>\r\n\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE ACTIONS ABOVE THE HEADER -->\r\n        <ng-template #caption>\r\n            <div #headerContainer style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <!--CHOOSE COLUMNS TO SHOW-->\r\n                    @if (tableOptions.columns?.selectorEnabled) {\r\n                        <p-button [icon]=\"tableOptions.columns?.selectorIcon ?? 'pi pi-pen-to-square'\" (onClick)=\"columnSelectorShow()\" pTooltip=\"Modify columns\"\r\n                            [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                    <!--CLEAR SORTS AND FILTERS-->\r\n                    @if (tableOptions.header?.clearSortsEnabled) {\r\n                        <p-button [icon]=\"tableOptions.header?.clearSortsIcon ?? 'pi pi-sort-alt-slash'\" (onClick)=\"clearSorts(dt)\" [disabled]=\"!hasToClearSorts(dt)\"\r\n                            pTooltip=\"Clear sorts\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                    @if (tableOptions.header?.clearFiltersEnabled) {\r\n                        <p-button\r\n                            [icon]=\"tableOptions.header?.clearFiltersIcon ?? 'pi pi-filter-slash'\" (onClick)=\"clearFilters(dt)\" [disabled]=\"!hasToClearFilters(dt, globalSearchText)\"\r\n                            pTooltip=\"Clear filters\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                </div>\r\n\r\n                <!--TABLE VIEWS-->\r\n                @if(tableViewsEnabled()){\r\n                    <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                        <p-buttongroup>\r\n                            <p-button (click)=\"viewsModalShow=true;\" [label]=\"tableViewCurrentSelectedAlias ? tableViewCurrentSelectedAlias : '--- Select a view ---'\" class=\"viewButton\"/>\r\n                            <p-button icon=\"pi pi-refresh\" (click)=\"viewLoad(tableViewCurrentSelectedAlias!)\" [disabled]=\"!tableViewCurrentSelectedAlias\" pTooltip=\"Apply view again\" [showDelay]=\"700\" tooltipPosition=\"top\"/>\r\n                            <p-button icon=\"pi pi-eraser\" (click)=\"resetTableView()\" pTooltip=\"Reset table view\" [showDelay]=\"700\" tooltipPosition=\"top\"/>\r\n                        </p-buttongroup>\r\n                    </div>\r\n                }\r\n\r\n                <div style=\"display: flex; align-items: center; gap: 10px;\">\r\n                    <!--GLOBAL FILTER-->\r\n                    @if (tableOptions.globalFilter?.enabled) {\r\n                        <p-iconField iconPosition=\"left\" class=\"ml-auto\" [ngClass]=\"{'p-input-icon-right': globalSearchText}\">\r\n                            <p-inputIcon>\r\n                                <i class=\"pi pi-search\"></i>\r\n                            </p-inputIcon>\r\n                            <input pInputText type=\"text\" \r\n                                (input)=\"dt.filterGlobal($any($event.target).value, 'contains')\"  autocomplete=\"off\" \r\n                                [maxlength]=\"tableOptions.globalFilter?.maxLength ?? null\" placeholder='Search keyword' [(ngModel)]=\"globalSearchText\"\r\n                                style=\"width: 220px;\"/>\r\n                            <!-- Right icon (only if there is text) -->\r\n                            @if (globalSearchText) {\r\n                                <p-inputIcon position=\"right\">\r\n                                    <i class=\"pi pi-times\" style=\"cursor: pointer;\"  (click)=\"clearFilters(dt, true, true); $event.stopPropagation()\"></i>\r\n                                </p-inputIcon>\r\n                            }\r\n                        </p-iconField>\r\n                    }\r\n\r\n                    <!--EXPORT DATA-->\r\n                    @if (tableOptions.excelReport?.url?.trim()) {\r\n                        <p-button icon=\"pi pi-file-excel\" (onClick)=\"openExcelExport()\"\r\n                            pTooltip=\"Export to Excel\" [showDelay]=\"700\" tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n\r\n                    <!--REFRESH DATA-->\r\n                    @if (showRefreshData) {\r\n                        <p-button icon=\"pi pi-refresh\" (onClick)=\"refreshData($event)\" pTooltip=\"Refresh data\" [showDelay]=\"700\"\r\n                            tooltipPosition=\"top\" styleClass=\"p-button-icon-only\"/>\r\n                    }\r\n                    \r\n                    <!-- HEADER ACTION BUTTONS -->\r\n                    @if ((tableOptions.header?.buttons?.length ?? 0) > 0) {\r\n                        <td style=\"display: flex; justify-content: center; align-items: center;\">\r\n                            @for (button of tableOptions.header?.buttons; track $index) {\r\n                                <ecs-table-button [button]=\"button\" [rowData]=\"null\"/>\r\n                            }\r\n                        </td>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE HEADERS -->\r\n        <ng-template #header let-columns>\r\n            <tr>\r\n                @if (!tableOptions.rows?.action?.alignmentRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.alignmentRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @for (col of columns; track col.header) {\r\n                    <th [ngStyle]=\"getColumnStyle(col, true)\"\r\n                        pResizableColumn [pResizableColumnDisabled]=\"!col.canBeResized ? true : false\"\r\n                        pReorderableColumn [pReorderableColumnDisabled]=\"!col.canBeReordered ? true : false\"\r\n                        pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\"\r\n                        [pSortableColumn]=\"col.field\" [pSortableColumnDisabled]=\"!col.canBeSorted ? true : false\"\r\n                        style=\"text-align: center;\"\r\n                        [id]=\"col.field + '-header'\" [attr.scope]=\"'col'\">\r\n                        <div style=\"display: flex; justify-content: space-between; align-items: center; width: 100%;\">\r\n                            <div style=\"margin-right: 15px;\">\r\n                                <span>{{ col.header }}</span>\r\n                            </div>\r\n                            <div style=\"display: flex; align-items: center; gap: 5px;\">\r\n                                @if (col.canBeSorted) {\r\n                                    <p-sortIcon [field]=\"col.field\"></p-sortIcon>\r\n                                }\r\n                                @if(col.canBeFiltered){\r\n                                    @if (!col.filterPredefinedValuesName || col.filterPredefinedValuesName.length === 0) {\r\n                                        <p-columnFilter [type]=\"getDataTypeAsText(col.dataType)\" [field]=\"col.field\" display=\"menu\" [showButtons]=\"false\"/>\r\n                                    } @else {\r\n                                        <p-columnFilter\r\n                                            type=\"{{getDataTypeAsText(col.dataType)}}\" field=\"{{col.field}}\" display=\"menu\"\r\n                                            [showButtons]=\"false\" matchMode=\"in\" operator=\"or\" [showMatchModes]=\"false\"\r\n                                            [showOperator]=\"false\" [showAddButton]=\"false\" [showClearButton]=\"false\" [showApplyButton]=\"false\">\r\n                                            <ng-template #filter>\r\n                                                <p-multiSelect\r\n                                                    [style]=\"{ minWidth: '400px' }\" [(ngModel)]=\"predefinedFiltersSelectedValuesCollection[col.filterPredefinedValuesName]\"\r\n                                                    [options]=\"getPredefinedFilterValues(col.filterPredefinedValuesName)\" placeholder=\"Any value\"\r\n                                                    (onChange)=\"onPredefinedFilterChange(col.field, $event.value)\" optionLabel=\"name\">\r\n                                                        <ng-template #selectedItems>\r\n                                                        @if (predefinedFiltersSelectedValuesCollection[col.filterPredefinedValuesName].length > 0) {\r\n                                                            <div style=\"display: flex; align-items: center; gap: 0.5rem;\">\r\n                                                                <div>\r\n                                                                    {{predefinedFiltersSelectedValuesText(col.filterPredefinedValuesName)}}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        } @else {\r\n                                                            <div>Any value</div>\r\n                                                        }\r\n                                                        </ng-template>\r\n                                                        <ng-template let-option pTemplate=\"item\">\r\n                                                            <div style=\"display: inline-block; vertical-align: middle;\">\r\n                                                                <ecs-table-predefined-filters [option]=\"option\" [col]=\"col\" [selectable]=\"false\" [rowData]=\"null\"/>\r\n                                                            </div>\r\n                                                        </ng-template>\r\n                                                </p-multiSelect>\r\n                                            </ng-template>\r\n                                        </p-columnFilter>\r\n                                    }\r\n                                }\r\n                                @if (col.columnDescription && col.columnDescription.length > 0) {\r\n                                    <i [pTooltip]=\"col.columnDescription\" tooltipPosition=\"top\" class=\"pi pi-info-circle\"></i>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                    </th>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.alignmentRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnHeaderTemplate\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.action?.alignmentRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnHeaderTemplate\"></ng-container>\r\n                }\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS CONTENTS -->\r\n        <ng-template #body let-rowData let-columns=\"columns\"> \r\n            <tr [pSelectableRow]=\"rowData\" [ngClass]=\"tableOptions.rows?.class?.(rowData)\" [ngStyle]=\"tableOptions.rows?.style?.(rowData)\">\r\n                @if (!tableOptions.rows?.action?.alignmentRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && !tableOptions.rows?.checkboxSelector?.alignmentRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n                }\r\n                @for (col of columns; track col.field) {\r\n                    <td (mousedown)=\"col.dataType !== DataType.Boolean && copyToClipboardStart($event)\" (mouseup)=\"copyToClipboardCancel()\"\r\n                        [ngStyle]=\"getColumnStyle(col)\" pFrozenColumn [frozen]=\"col.frozenColumnAlign === FrozenColumnAlign.Left || col.frozenColumnAlign === FrozenColumnAlign.Right\" \r\n                        [alignFrozen]=\"getFrozenColumnAlignAsText(col.frozenColumnAlign)\" [style.text-align]=\"getDataAlignHorizontalAsText(col.dataAlignHorizontal)\" [style.vertical-align]=\"getDataAlignVerticalAsText(col.dataAlignVertical)\">\r\n                        <ecs-table-cell [col]=\"col\" [rowData]=\"rowData\" [globalSearchText]=\"globalSearchText\" \r\n                            [dateFormat]=\"dateFormat\" [dateTimezone]=\"dateTimezone\" [dateCulture]=\"dateCulture\"\r\n                            [predefinedFiltersCollection]=\"tableOptions.predefinedFilters\"/>\r\n                    </td>\r\n                }\r\n                @if (tableOptions.rows?.checkboxSelector?.enabled && tableOptions.rows?.checkboxSelector?.alignmentRight) {\r\n                    <ng-container [ngTemplateOutlet]=\"rowSelectorColumnTemplate\" [ngTemplateOutletContext]=\"{ rowData: rowData }\"></ng-container>\r\n                }\r\n                @if (tableOptions.rows?.action?.alignmentRight) {\r\n                    <ng-container *ngTemplateOutlet=\"actionColumnTemplate; context: { rowData: rowData }\"></ng-container>\r\n                }\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- LOGIC FOR DRAWING TABLE DATA WHEN THERE IS NO CONTENTS -->\r\n        <ng-template #emptymessage>\r\n            <tr>\r\n                <td colspan=\"999\">No data found for the current filter criteria.</td>\r\n            </tr>\r\n        </ng-template>\r\n\r\n        <!-- SHOW CUSTOM RECORDS REPORT -->\r\n        <ng-template #paginatorleft>\r\n            <div #paginatorContainer>\r\n                Showing {{totalRecords}} records of {{totalRecordsNotFiltered}} available records\r\n            </div>\r\n        </ng-template>\r\n    </p-table>\r\n</div>\r\n<ecs-column-selector [visible]=\"showColumnSelector\" [columnModalData]=\"columnModalData\" [filteredColumnData]=\"filteredColumnData\" (visibleChange)=\"showColumnSelector=false\" (applyChanges)=\"applyColumnModalChanges($event)\"/>\r\n<ecs-export-excel [visible]=\"showExportModal\" [rowCheckboxSelectorActive]=\"tableOptions.rows?.checkboxSelector?.enabled ?? false\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"tableOptions.excelReport?.titleAllowUserEdit ?? false\" (visibleChange)=\"showExportModal=false\" (exportToExcel)=\"generateExcelReport($event)\"/>\r\n<ecs-views-management [visible]=\"viewsModalShow\" [tableViews_menuItems]=\"tableViews_menuItems\" \r\n    (onViewSelect)=\"viewLoad($event)\" (onViewCreate)=\"viewCreate($event)\" (onViewDelete)=\"viewDelete($event)\" (onViewEditAlias)=\"viewEditAlias($event)\" (onViewUpdateData)=\"viewUpdateData($event)\" (onViewUpdateActiveStartup)=\"viewUpdateActiveStartup($event)\"\r\n    (visibleChange)=\"viewsModalShow=false\"/>", styles: [".highlighted-text{background-color:#ff0}.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}.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}\n"] }]
+        }], ctorParameters: () => [{ type: ECSPrimengTableService }, { type: ECSPrimengTableNotificationService }], propDecorators: { tableOptions: [{
                 type: Input
             }], onRowCheckboxChange: [{
                 type: Output
@@ -1718,6 +1944,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }], onRowUnselect: [{
                 type: Output
+            }], onDataEndUpdate: [{
+                type: Output
             }], dt: [{
                 type: ViewChild,
                 args: ['dt']
@@ -1730,6 +1958,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }], paginatorContainer: [{
                 type: ViewChild,
                 args: ['paginatorContainer', { static: false }]
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
 /*
@@ -1741,5 +1972,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CellOverflowBehaviour, DataAlignHorizontal, DataAlignVertical, DataType, ECSPrimengTable, ECSPrimengTableHttpService, ECSPrimengTableNotificationService, ECSPrimengTableService, FrozenColumnAlign, TableViewSaveMode };
+export { CellOverflowBehaviour, DEFAULT_TABLE_OPTIONS, DataAlignHorizontal, DataAlignVertical, DataType, ECSPrimengTable, ECSPrimengTableHttpService, ECSPrimengTableNotificationService, ECSPrimengTableService, FrozenColumnAlign, TableViewSaveMode, createTableOptions };
 //# sourceMappingURL=eternalcodestudio-primeng-table.mjs.map