@eternalcodestudio/primeng-table 20.0.4 → 20.0.6

package/fesm2022/eternalcodestudio-primeng-table.mjs

@@ -145,8 +145,8 @@ var TableViewSaveMode;
 const DEFAULT_TABLE_OPTIONS = {
     isActive: true,
     data: [],
-    urlTableConfiguration: null,
-    urlTableData: null,
+    urlTableConfiguration: undefined,
+    urlTableData: undefined,
     header: {
         buttons: [],
         clearSortsEnabled: true,
@@ -156,6 +156,7 @@ const DEFAULT_TABLE_OPTIONS = {
     },
     columns: {
         selectorEnabled: true,
+        selectorIcon: "pi pi-pen-to-square",
         shown: []
     },
     rows: {
@@ -193,12 +194,12 @@ const DEFAULT_TABLE_OPTIONS = {
     predefinedFilters: {},
     views: {
         saveMode: TableViewSaveMode.None,
-        saveKey: null,
-        urlGet: null,
-        urlSave: null
+        saveKey: undefined,
+        urlGet: undefined,
+        urlSave: undefined
     },
     excelReport: {
-        url: null,
+        url: undefined,
         defaultTitle: "Report",
         titleAllowUserEdit: true
     },
@@ -209,17 +210,40 @@ const DEFAULT_TABLE_OPTIONS = {
  * Deep merge two objects.
  * Recursively copies properties from `source` into `target`.
  */
+/*function deepMerge<T>(target: T, source: Partial<T>): T {
+  for (const key in source) {
+    if (
+      source[key] !== null &&
+      typeof source[key] === 'object' &&
+      !Array.isArray(source[key])
+    ) {
+      if (!target[key]) (target as any)[key] = {};
+      deepMerge((target as any)[key], source[key]);
+    } else {
+      (target as any)[key] = source[key];
+    }
+  }
+  return target;
+}
+*/
+/**
+ * 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) {
-        if (source[key] !== null &&
-            typeof source[key] === 'object' &&
-            !Array.isArray(source[key])) {
+        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], source[key]);
+            deepMerge(target[key], value);
         }
         else {
-            target[key] = source[key];
+            target[key] = value;
         }
     }
     return target;
@@ -227,9 +251,6 @@ function deepMerge(target, source) {
 /**
  * Create table options based on defaults, with optional overrides.
  */
-/*export function createTableOptions(overrides: Partial<ITableOptions> = {}): ITableOptions {
-  return deepMerge(structuredClone(DEFAULT_TABLE_OPTIONS), overrides);
-}*/
 function createTableOptions(overrides = {}) {
     const defaultsCopy = JSON.parse(JSON.stringify(DEFAULT_TABLE_OPTIONS)); // clona solo datos
     const merged = deepMerge(defaultsCopy, overrides);
@@ -365,14 +386,14 @@ class TablePredefinedFilters {
         return this.sanitizer.bypassSecurityTrustUrl(objectURL); // Bypass Angular's security mechanisms to create a SafeUrl
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TablePredefinedFilters, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: TablePredefinedFilters, isStandalone: true, selector: "ecs-table-predefined-filters", inputs: { option: "option", col: "col" }, ngImport: i0, template: "<div style=\"align-items: center; gap: 0.25rem;\">\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?.iconBlob && option?.iconBlobSourceEndpoint) {\r\n    <p-skeleton size=\"28px\"\r\n                style=\"vertical-align: middle;\"/>\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;\"/>\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;\"/>\r\n  }\r\n  @if (option?.displayTag === true) {\r\n    <p-tag [style]=\"option.tagStyle\" style=\"vertical-align: middle;\" [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: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: TablePredefinedFilters, isStandalone: true, selector: "ecs-table-predefined-filters", inputs: { option: "option", col: "col" }, ngImport: i0, template: "<div style=\"align-items: center; gap: 0.25rem;\">\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]=\"option.tagStyle\" style=\"vertical-align: middle;\" [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: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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  @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?.iconBlob && option?.iconBlobSourceEndpoint) {\r\n    <p-skeleton size=\"28px\"\r\n                style=\"vertical-align: middle;\"/>\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;\"/>\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;\"/>\r\n  }\r\n  @if (option?.displayTag === true) {\r\n    <p-tag [style]=\"option.tagStyle\" style=\"vertical-align: middle;\" [value]=\"option.name\"/>\r\n  }\r\n  @if (option?.displayName === true) {\r\n    <span>{{ option.name }}</span>\r\n  }\r\n</div>" }]
+                    ], standalone: true, template: "<div style=\"align-items: center; gap: 0.25rem;\">\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]=\"option.tagStyle\" style=\"vertical-align: middle;\" [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 }], propDecorators: { option: [{
                 type: Input
             }], col: [{
@@ -459,7 +480,7 @@ class TableCell {
         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
+        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);
@@ -726,8 +747,8 @@ class TableButton {
     isActionButton = false;
     isLastActionButton = false;
     clicked = new EventEmitter();
-    isDisabled() {
-        return this.button.condition ? !this.button.condition(this.rowData) : false;
+    currentCondition() {
+        return (this.button.condition?.(this.rowData));
     }
     handleClick() {
         if (this.button.action) {
@@ -735,7 +756,7 @@ class TableButton {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TableButton, deps: [{ token: ECSPrimengTableService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: TableButton, isStandalone: true, selector: "ecs-table-button", inputs: { button: "button", rowData: "rowData", isActionButton: "isActionButton", isLastActionButton: "isLastActionButton" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "@if(!(button.conditionFailHide && currentCondition())){\r\n  <p-button\r\n    [disabled]=\"currentCondition()\"\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", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TableButton, decorators: [{
             type: Component,
@@ -743,7 +764,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                         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 && currentCondition())){\r\n  <p-button\r\n    [disabled]=\"currentCondition()\"\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: [{
@@ -1146,7 +1167,7 @@ class ECSPrimengTable {
         this.calculateScrollHeight();
     }
     calculateScrollHeight() {
-        if (this.tableOptions.verticalScroll.fitToContainer && this.tableContainer && this.paginatorContainer && this.headerContainer) {
+        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;
@@ -1163,11 +1184,11 @@ class ECSPrimengTable {
         }
     }
     get scrollHeightValue() {
-        const height = this.tableOptions.verticalScroll.height;
+        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.
      *
      */
     updateData() {
@@ -1180,7 +1201,9 @@ class ECSPrimengTable {
         }
     }
     canFetchData() {
-        return this.tableOptions.isActive && this.tableOptions.urlTableConfiguration != null && this.tableOptions.urlTableData != null;
+        return !!this.tableOptions.isActive
+            && !!this.tableOptions.urlTableConfiguration?.trim()
+            && !!this.tableOptions.urlTableData?.trim();
     }
     fetchTableConfiguration(resetTableView = false) {
         if (!this.canFetchData()) {
@@ -1229,17 +1252,17 @@ class ECSPrimengTable {
     }
     tableViewsEnabled() {
         const views = this.tableOptions.views;
-        if (views.saveMode === TableViewSaveMode.None) { // saveMode must be different from noone
+        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
+        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()) {
+        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;
             }
         }
@@ -1451,7 +1474,7 @@ class ECSPrimengTable {
         };
         this.tableService.fetchTableData(this.tableOptions.urlTableData, requestData)
             .pipe(finalize(() => {
-            this.onDataEndUpdate.emit(); // Esto siempre se ejecuta
+            this.onDataEndUpdate.emit(); // This is always executed after data update.
         }))
             .subscribe({
             next: (response) => this.handleTableDataResponse(response.body),
@@ -1617,7 +1640,7 @@ class ECSPrimengTable {
         return this.tableService.getColumnStyle(col, headerCols);
     }
     getPredefinedFilterValues(columnKeyName) {
-        return this.tableOptions.predefinedFilters[columnKeyName] || []; // Return the predefined filter values or an empty array if the option name does not exist
+        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);
@@ -1680,7 +1703,7 @@ class ECSPrimengTable {
         return null; // Return null if the column does not use predefined filter values
     }
     copyToClipboardStart(event) {
-        if (this.tableOptions.copyToClipboardTime > 0) {
+        if ((this.tableOptions.copyToClipboardTime ?? 0) > 0) {
             const cellContent = event.target.innerText;
             this.copyCellDataTimer = setTimeout(() => {
                 navigator.clipboard.writeText(cellContent).then(() => {
@@ -1690,11 +1713,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.tableOptions.copyToClipboardTime * 1000);
+            }, (this.tableOptions.copyToClipboardTime ?? 0) * 1000);
         }
     }
     copyToClipboardCancel() {
-        if (this.tableOptions.copyToClipboardTime > 0) {
+        if ((this.tableOptions.copyToClipboardTime ?? 0) > 0) {
             clearTimeout(this.copyCellDataTimer);
         }
     }
@@ -1818,14 +1841,13 @@ class ECSPrimengTable {
         });
     }
     openExcelExport() {
-        this.excelReportTitle =
-            (!this.tableOptions.excelReport.defaultTitle || this.tableOptions.excelReport.defaultTitle.trim().length === 0) && !this.tableOptions.excelReport.titleAllowUserEdit
-                ? 'Report'
-                : this.tableOptions.excelReport.defaultTitle;
+        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()) {
+        if (!this.tableOptions.excelReport?.url?.trim()) {
             return;
         }
         let filtersWithoutGlobalAndSelectedRows = this.modifyFiltersWithoutGlobalAndSelectedRows(this.tableLazyLoadEventInformation.filters, event.selectedRows); // Create filters excluding the global filter
@@ -1857,20 +1879,20 @@ class ECSPrimengTable {
         });
     }
     updateIconBlobsForCollections() {
-        Object.keys(this.tableOptions.predefinedFilters).forEach(key => {
-            const filters = this.tableOptions.predefinedFilters[key];
+        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.iconBlobSourceEndpoint && !filter.iconBlob) {
-                        filter.iconBlob = undefined;
-                        filter.iconBlobSourceEndpointResponseError = false;
-                        this.tableService.getIconBlob(filter.iconBlobSourceEndpoint).subscribe({
+                    if (filter.imageBlobSourceEndpoint && !filter.imageBlob) {
+                        filter.imageBlob = undefined;
+                        filter.imageBlobFetchError = false;
+                        this.tableService.getIconBlob(filter.imageBlobSourceEndpoint).subscribe({
                             next: (response) => {
-                                filter.iconBlob = response.body;
+                                filter.imageBlob = response.body;
                                 this.showExportModal = false;
                             },
                             error: () => {
-                                filter.iconBlobSourceEndpointResponseError = true;
+                                filter.imageBlobFetchError = true;
                             }
                         });
                     }
@@ -1882,7 +1904,7 @@ class ECSPrimengTable {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ECSPrimengTable, deps: [{ token: ECSPrimengTableService }, { token: ECSPrimengTableNotificationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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) {\r\n                <th [ngStyle]=\"{'max-width': tableOptions.rows.action.width + 'px','min-width': tableOptions.rows.action.width + 'px','width': tableOptions.rows.action.width + 'px'}\"\r\n                    pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows.action.resizable\" pFrozenColumn [frozen]=\"tableOptions.rows.action.frozen\"\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) {\r\n                <td \r\n                    [ngStyle]=\"{'max-width': tableOptions.rows.action.width + 'px','min-width': tableOptions.rows.action.width + 'px','width': tableOptions.rows.action.width + 'px'}\"\r\n                    style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"tableOptions.rows.action.frozen\"\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\" (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': tableOptions.rows.checkboxSelector.width + 'px','min-width': tableOptions.rows.checkboxSelector.width + 'px','width': tableOptions.rows.checkboxSelector.width + 'px'}\"\r\n                id=\"rowSelector-header\"  [attr.scope]=\"'col'\" pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows.checkboxSelector.resizable\" pFrozenColumn \r\n                [frozen]=\"tableOptions.rows.checkboxSelector.frozen\" [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 + 'px', 'min-width': tableOptions.rows.checkboxSelector.width + 'px', 'width': tableOptions.rows.checkboxSelector.width + 'px'}\"\r\n            style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"tableOptions.rows.checkboxSelector.frozen\" \r\n            [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows.checkboxSelector.alignmentRight ? 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 (tableOptions.columns.selectorEnabled) {\r\n                        <p-button icon=\"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\" (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\" (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.globalSearch.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.globalSearch.maxLength\" 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) {\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\" (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 (!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\"/>\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\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"tableOptions.excelReport.titleAllowUserEdit\" (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", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "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$1.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, p-column-filter, 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", "filterOn", "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", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { 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", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "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", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], 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", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], 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"] }, { 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", "onViewUpdateActiveStartup", "onViewEditAlias", "onViewCreate", "visibleChange"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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\" (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': (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                [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.globalSearch?.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.globalSearch?.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\" (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 (!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\"/>\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", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "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$1.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, p-column-filter, 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", "filterOn", "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", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i11.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { 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", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "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", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], 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", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], 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"] }, { 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", "onViewUpdateActiveStartup", "onViewEditAlias", "onViewCreate", "visibleChange"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ECSPrimengTable, decorators: [{
             type: Component,
@@ -1905,7 +1927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                         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]=\"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) {\r\n                <th [ngStyle]=\"{'max-width': tableOptions.rows.action.width + 'px','min-width': tableOptions.rows.action.width + 'px','width': tableOptions.rows.action.width + 'px'}\"\r\n                    pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows.action.resizable\" pFrozenColumn [frozen]=\"tableOptions.rows.action.frozen\"\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) {\r\n                <td \r\n                    [ngStyle]=\"{'max-width': tableOptions.rows.action.width + 'px','min-width': tableOptions.rows.action.width + 'px','width': tableOptions.rows.action.width + 'px'}\"\r\n                    style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"tableOptions.rows.action.frozen\"\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\" (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': tableOptions.rows.checkboxSelector.width + 'px','min-width': tableOptions.rows.checkboxSelector.width + 'px','width': tableOptions.rows.checkboxSelector.width + 'px'}\"\r\n                id=\"rowSelector-header\"  [attr.scope]=\"'col'\" pResizableColumn [pResizableColumnDisabled]=\"!tableOptions.rows.checkboxSelector.resizable\" pFrozenColumn \r\n                [frozen]=\"tableOptions.rows.checkboxSelector.frozen\" [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 + 'px', 'min-width': tableOptions.rows.checkboxSelector.width + 'px', 'width': tableOptions.rows.checkboxSelector.width + 'px'}\"\r\n            style=\"text-align: center; vertical-align: middle;\" pFrozenColumn [frozen]=\"tableOptions.rows.checkboxSelector.frozen\" \r\n            [alignFrozen]=\"getFrozenColumnAlignAsText(tableOptions.rows.checkboxSelector.alignmentRight ? 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 (tableOptions.columns.selectorEnabled) {\r\n                        <p-button icon=\"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\" (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\" (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.globalSearch.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.globalSearch.maxLength\" 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) {\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\" (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 (!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\"/>\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\" [excelReportTitle]=\"excelReportTitle\" [allowTitleUserEdit]=\"tableOptions.excelReport.titleAllowUserEdit\" (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"] }]
+                    ], 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\" (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': (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                [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.globalSearch?.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.globalSearch?.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\" (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 (!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\"/>\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: [{