ng-prime-tools 1.0.42 → 1.0.44

package/fesm2022/ng-prime-tools.mjs

@@ -163,7 +163,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
 
 class PTAdvancedPrimeTableComponent {
     constructor() {
-        // Inputs
         this.data = [];
         this.columns = [];
         this.totalRecords = 0;
@@ -177,7 +176,6 @@ class PTAdvancedPrimeTableComponent {
         this.isSortable = false;
         this.loading = false;
         this.maxHeight = null;
-        // Outputs
         this.search = new EventEmitter();
         this.exportExcelEvent = new EventEmitter();
         this.exportPdfEvent = new EventEmitter();
@@ -187,17 +185,13 @@ class PTAdvancedPrimeTableComponent {
         this.TableTypeEnum = TableTypeEnum;
         this.AlignEnum = AlignEnum;
         this.searchValue = '';
-        // used to store composed filter UI state (and options)
         this.filters = {};
-        // store the last filter value per column field (for all filters)
         this.latestFilterValues = {};
         this.clearedFields = new Set();
         this.validCurrencyCodes = ['USD', 'EUR', 'MAD'];
         this.iconWidth = 77;
-        // Component state
         this.rows = 0;
         this.hasGroupedColumns = false;
-        // edit/delete flags
         this.isDelete = false;
         this.isEdit = false;
         this.Delete = () => { };
@@ -205,7 +199,6 @@ class PTAdvancedPrimeTableComponent {
         this.saveEditableRow = () => { };
         this.cancelEditableRow = () => { };
         this.customActions = [];
-        // Data management
         this.dataMap = new Map();
         this.map = new Map();
         this.optionEntries = new Map();
@@ -228,18 +221,15 @@ class PTAdvancedPrimeTableComponent {
             if (col.type === TableTypeEnum.COMPOSED) {
                 this.initializeComposedFilters(col);
             }
-            if (col.isSortable === undefined) {
+            if (col.isSortable === undefined)
                 col.isSortable = true;
-            }
-            if (col.isEditable === undefined) {
+            if (col.isEditable === undefined)
                 col.isEditable = true;
-            }
             if (col.isFilter !== false && col.code !== undefined) {
                 this.globalFilterFields.push(col.code);
             }
-            if (!col.width) {
+            if (!col.width)
                 col.width = this.calculateColumnWidth(col);
-            }
         });
     }
     // ---------- HEADER + BODY ALIGNMENT HELPERS ----------
@@ -288,9 +278,8 @@ class PTAdvancedPrimeTableComponent {
         this.saveEditableRow = () => { };
         this.cancelEditableRow = () => { };
         this.customActions = [];
-        if (!this.actions || this.actions.length === 0) {
+        if (!this.actions || this.actions.length === 0)
             return;
-        }
         this.actions.forEach((action) => {
             switch (action.code) {
                 case 'delete':
@@ -318,16 +307,10 @@ class PTAdvancedPrimeTableComponent {
     }
     onCustomActionClick(action, row) {
         if (action && typeof action.action === 'function') {
-            setTimeout(() => {
-                action.action(row);
-            }, 0);
+            setTimeout(() => action.action(row), 0);
         }
     }
     // ---------- FILTERING / SORTING / PAGINATION ----------
-    /**
-     * For composed columns, we still register filters under filters[composedName]
-     * to keep options & placeholders.
-     */
     initializeComposedFilters(col) {
         col.composedNames?.forEach((composedName) => {
             const code = col.code || '';
@@ -350,23 +333,17 @@ class PTAdvancedPrimeTableComponent {
         return undefined;
     }
     onComposedColumnClear(col) {
-        if (!col.code || !col.composedNames) {
+        if (!col.code || !col.composedNames)
             return;
-        }
         col.composedNames.forEach((name) => {
             const key = `${col.code}.${name}`;
             delete this.latestFilterValues[key];
-            if (this.filters[name]) {
+            if (this.filters[name])
                 this.filters[name].value = [];
-            }
         });
     }
-    /**
-     * COMPOSED: cache UI values only, real filter applied on Apply/Clear.
-     */
     onComposedFilterValueChange(col, composedName, value, filterModel) {
         const key = `${col.code}.${composedName}`;
-        // 1) sync with PrimeNG filter model so Apply/Clear work correctly
         if (filterModel) {
             filterModel.value = value;
             if (Array.isArray(filterModel.constraints) &&
@@ -374,7 +351,6 @@ class PTAdvancedPrimeTableComponent {
                 filterModel.constraints[0].value = value;
             }
         }
-        // 2) keep your local UI model
         if (!this.filters[composedName]) {
             this.filters[composedName] = {
                 options: col.filterOptions,
@@ -383,40 +359,29 @@ class PTAdvancedPrimeTableComponent {
             };
         }
         this.filters[composedName].value = value || [];
-        // 3) cache for server-side `filterColumn`
         const isEmpty = !value || (Array.isArray(value) && value.length === 0);
-        if (isEmpty) {
+        if (isEmpty)
             delete this.latestFilterValues[key];
-        }
-        else {
+        else
             this.latestFilterValues[key] = value;
-        }
     }
     onFilterClear(field) {
-        if (!field) {
+        if (!field)
             return;
-        }
-        // forget cached value for this field
         delete this.latestFilterValues[field];
-        // mark this field as explicitly cleared so filterColumn
-        // doesn't reuse the cached value on the same event
         this.clearedFields.add(field);
     }
     onFilterValueChange(field, filterModel, value) {
-        if (!field) {
+        if (!field)
             return;
-        }
         const isEmpty = value === null ||
             value === undefined ||
             (Array.isArray(value) && value.length === 0);
-        if (isEmpty) {
+        if (isEmpty)
             delete this.latestFilterValues[field];
-        }
-        else {
+        else
             this.latestFilterValues[field] = value;
-        }
         if (filterModel) {
-            // update both places so PrimeNG emits it correctly
             filterModel.value = value;
             if (Array.isArray(filterModel.constraints) &&
                 filterModel.constraints.length > 0) {
@@ -425,25 +390,20 @@ class PTAdvancedPrimeTableComponent {
         }
     }
     onNumberFilterChange(field, value) {
-        if (!field) {
+        if (!field)
             return;
-        }
         const isEmpty = value === null ||
             value === undefined ||
             value === '' ||
             (Array.isArray(value) && value.length === 0);
-        if (isEmpty) {
+        if (isEmpty)
             delete this.latestFilterValues[field];
-        }
-        else {
+        else
             this.latestFilterValues[field] = value;
-        }
     }
-    /** Helper: find column by field. Supports composed fields like "code.prop". */
     findColumnByField(field) {
         return this.columns.find((c) => c.code === field || (c.code && field.startsWith(c.code + '.')));
     }
-    // Fired by PrimeNG when the user clicks Apply / Clear in any filter menu
     filterColumn(event) {
         const filters = event?.filters;
         if (!filters) {
@@ -457,46 +417,33 @@ class PTAdvancedPrimeTableComponent {
             const m = normalizeMeta(meta);
             const col = this.findColumnByField(field);
             const wasCleared = this.clearedFields.has(field);
-            // nothing to do
-            if (!m && !col) {
+            if (!m && !col)
                 return;
-            }
-            // ----------------------------------------------------
-            // 🔹 SPECIAL CASE: COMPOSED COLUMN
-            // ----------------------------------------------------
+            // COMPOSED
             if (col && col.type === TableTypeEnum.COMPOSED) {
                 const composedValues = {};
                 col.composedNames?.forEach((name) => {
                     const key = `${col.code}.${name}`;
                     const val = this.latestFilterValues[key];
                     const empty = isNullish(val) || (Array.isArray(val) && val.length === 0);
-                    if (!empty) {
+                    if (!empty)
                         composedValues[name] = val;
-                    }
                 });
-                // If nothing in cache, treat as "no filter"
                 if (Object.keys(composedValues).length === 0) {
                     if (m) {
                         m.value = null;
-                        if (Array.isArray(m.constraints)) {
+                        if (Array.isArray(m.constraints))
                             m.constraints.forEach((c) => (c.value = null));
-                        }
                     }
                 }
                 else {
-                    // send object { sub1: [...], sub2: [...] } to parent
                     m.value = composedValues;
                 }
-                const wasCleared = this.clearedFields.has(field);
-                return; // composed handled
-            }
-            // ----------------------------------------------------
-            // 🔹 GENERIC CASE: NON-COMPOSED COLUMNS
-            // ----------------------------------------------------
-            if (!m) {
                 return;
             }
-            // If the user clicked Clear for this field, force it to empty
+            if (!m)
+                return;
+            // CLEAR
             if (wasCleared) {
                 delete this.latestFilterValues[field];
                 m.value = null;
@@ -507,14 +454,11 @@ class PTAdvancedPrimeTableComponent {
                 return;
             }
             let value = m.value;
-            // PrimeNG often stores the real value in constraints[0].value
             if (Array.isArray(m.constraints) && m.constraints.length > 0) {
                 const cVal = m.constraints[0].value;
-                if (!isNullish(cVal)) {
+                if (!isNullish(cVal))
                     value = cVal;
-                }
             }
-            // 🔴 NEW: fall back to cached value typed in the input
             const cached = this.latestFilterValues[field];
             const hasCached = !isNullish(cached) && (!Array.isArray(cached) || cached.length > 0);
             if ((isNullish(value) || (Array.isArray(value) && value.length === 0)) &&
@@ -522,7 +466,6 @@ class PTAdvancedPrimeTableComponent {
                 value = cached;
             }
             const isEmpty = isNullish(value) || (Array.isArray(value) && value.length === 0);
-            // CLEAR => remove from cache, reset PrimeNG metadata
             if (isEmpty) {
                 delete this.latestFilterValues[field];
                 m.value = null;
@@ -531,19 +474,22 @@ class PTAdvancedPrimeTableComponent {
                 }
                 return;
             }
-            // NON-EMPTY => cache and normalize
             this.latestFilterValues[field] = value;
             let emitValue = value;
-            // Only DATE columns need "dd/MM/yyyy" format
-            if (col && col.type === TableTypeEnum.DATE && value) {
-                emitValue = this.formatDate(value instanceof Date ? value : new Date(value));
+            // ✅ DATE / DATETIME normalization for server-side filtering
+            if (col &&
+                (col.type === TableTypeEnum.DATE || col.type === TableTypeEnum.DATETIME)) {
+                const d = this.parseAnyDate(value);
+                emitValue =
+                    col.type === TableTypeEnum.DATE
+                        ? this.formatDateWithColumn(d, col)
+                        : this.formatDateTimeWithColumn(d, col);
             }
             m.value = emitValue;
             if (Array.isArray(m.constraints) && m.constraints.length > 0) {
                 m.constraints[0].value = emitValue;
             }
         });
-        // send normalized filters to parent (server-side pagination)
         this.onFilterColumn.emit(event);
     }
     changePage(event) {
@@ -553,93 +499,27 @@ class PTAdvancedPrimeTableComponent {
         this.onPageChange.emit({ page, rows });
     }
     sortColumn(event) {
-        if (!this.isPaginated) {
+        if (!this.isPaginated)
             return;
-        }
         let field = event.field;
         const col = this.columns.find((c) => c.code === field);
         if (col && col.type === TableTypeEnum.COMPOSED) {
             let textProp;
             if (col.composedNames && col.composedTypes) {
                 const idx = col.composedTypes.findIndex((t) => t === TableTypeEnum.STRING);
-                if (idx >= 0 && idx < col.composedNames.length) {
+                if (idx >= 0 && idx < col.composedNames.length)
                     textProp = col.composedNames[idx];
-                }
             }
             if (!textProp && col.composedNames && col.composedNames.length > 0) {
                 textProp = col.composedNames[0];
             }
-            if (textProp) {
+            if (textProp)
                 field = `${field}.${textProp}`;
-            }
         }
-        this.onSortColumn.emit({
-            ...event,
-            field,
-        });
+        this.onSortColumn.emit({ ...event, field });
     }
-    onCalendarFilterChange(event, columnCode, filterCallback) {
-        const filterValue = event ? new Date(event) : null;
-        if (!filterValue) {
-            return;
-        }
-        filterCallback(filterValue);
-        if (this.isPaginated) {
-            this.onFilterColumn.emit({
-                type: 'date',
-                columnCode,
-                value: filterValue,
-            });
-            return;
-        }
-        const filterValueString = event ? this.formatDate(event) : '';
-        this.filterColumn({
-            filteredValue: this.data.filter((item) => {
-                const columnValue = item[columnCode];
-                if (columnValue) {
-                    const itemDateString = this.formatDate(new Date(columnValue));
-                    return itemDateString === filterValueString;
-                }
-                return false;
-            }),
-        });
-    }
-    // ---------- OTHER HELPERS ----------
-    filterComposedData(item, composedName, value) {
-        if (Array.isArray(value) && value.length > 0) {
-            return value.some((filterValue) => item[composedName]?.toLowerCase().includes(filterValue.toLowerCase()));
-        }
-        return true;
-    }
-    calculateColumnWidth(col) {
-        const calculatedWidth = calculateTextWidth(col, col.title);
-        const totalWidth = calculatedWidth + this.iconWidth + 20;
-        return `${totalWidth}px`;
-    }
-    getHeaderWidth(col) {
-        if (col.width) {
-            return col.width;
-        }
-        return this.calculateColumnWidth(col);
-    }
-    clear(table) {
-        // Clear PrimeNG internal filters + UI
-        table.clear();
-        // Clear global search
-        this.searchValue = '';
-        // Clear cached values for normal & composed fields
-        this.latestFilterValues = {};
-        // Clear local models for composed filters
-        Object.keys(this.filters).forEach((key) => {
-            if (this.filters[key]) {
-                this.filters[key].value = [];
-            }
-        });
-        if (this.isPaginated) {
-            this.onFilterColumn.emit({ cleared: true });
-        }
-    }
-    parseDate(dateString) {
+    // ---------- EDIT HELPERS ----------
+    parseDate_ddMMyyyy(dateString) {
         const parts = dateString.split('/');
         if (parts.length === 3) {
             const day = parseInt(parts[0], 10);
@@ -650,14 +530,6 @@ class PTAdvancedPrimeTableComponent {
         }
         return null;
     }
-    initializePagination() {
-        if (this.isPaginated) {
-            if (!this.rowsPerPage || this.rowsPerPage.length === 0) {
-                this.rowsPerPage = [20, 30, 40];
-            }
-            this.rows = this.rowsPerPage[0];
-        }
-    }
     onChange(event, id, key) {
         const target = event.target;
         this.changeHandler(id, key, target.value);
@@ -666,8 +538,7 @@ class PTAdvancedPrimeTableComponent {
         const column = this.columns.find((item) => item.code === key);
         if (!this.map.get(id)) {
             if (column?.type === TableTypeEnum.DATE) {
-                const date = this.parseDate(value);
-                this.dataMap.set(key, date);
+                this.dataMap.set(key, this.parseDate_ddMMyyyy(value));
             }
             else {
                 this.dataMap.set(key, value);
@@ -677,14 +548,14 @@ class PTAdvancedPrimeTableComponent {
         else {
             const mapItem = this.map.get(id);
             if (column?.type === TableTypeEnum.DATE) {
-                const date = this.parseDate(value);
-                mapItem.set(key, date);
+                mapItem.set(key, this.parseDate_ddMMyyyy(value));
             }
             else {
                 mapItem.set(key, value);
             }
         }
     }
+    // ---------- TYPES ----------
     getColumnFilterType(column) {
         switch (column.type) {
             case TableTypeEnum.STRING:
@@ -693,6 +564,7 @@ class PTAdvancedPrimeTableComponent {
             case TableTypeEnum.NUMBER:
                 return 'numeric';
             case TableTypeEnum.DATE:
+            case TableTypeEnum.DATETIME: // ✅ treat like date filter (calendar)
                 return 'date';
             case TableTypeEnum.MULTISELECT:
                 return 'multiSelect';
@@ -724,22 +596,14 @@ class PTAdvancedPrimeTableComponent {
         return false;
     }
     isDatePicker(key) {
-        return (this.columns.find((item) => item.code === key)?.type ===
-            TableTypeEnum.DATE);
-    }
-    dateConverter(value) {
-        return new Date(value).toLocaleDateString('en-US');
-    }
-    getCurrencySymbol(column) {
-        return column.type === TableTypeEnum.AMOUNT &&
-            column.currency &&
-            this.isValidCurrencyCode(column.currency)
-            ? column.currency
-            : undefined;
+        const t = this.columns.find((item) => item.code === key)?.type;
+        return t === TableTypeEnum.DATE || t === TableTypeEnum.DATETIME; // ✅
     }
-    isValidCurrencyCode(currencyCode) {
-        return this.validCurrencyCodes.includes(currencyCode);
+    isDateTimePicker(key) {
+        const t = this.columns.find((item) => item.code === key)?.type;
+        return t === TableTypeEnum.DATETIME;
     }
+    // ---------- SEARCH ----------
     filterGlobal(event) {
         const target = event.target;
         const value = target.value.toLowerCase();
@@ -750,23 +614,26 @@ class PTAdvancedPrimeTableComponent {
         const filteredData = this.data.filter((item) => {
             return this.globalFilterFields.some((field) => {
                 const column = this.columns.find((col) => col.code === field);
-                if (!column) {
+                if (!column)
                     return false;
-                }
                 if (column.type === TableTypeEnum.DATE) {
-                    const itemDate = this.formatDate(item[field]);
-                    return itemDate && itemDate.includes(value);
+                    return this.formatDateWithColumn(this.parseAnyDate(item[field]), column)
+                        .toLowerCase()
+                        .includes(value);
+                }
+                if (column.type === TableTypeEnum.DATETIME) {
+                    return this.formatDateTimeWithColumn(this.parseAnyDate(item[field]), column)
+                        .toLowerCase()
+                        .includes(value);
                 }
-                else if (column.type === TableTypeEnum.AMOUNT ||
+                if (column.type === TableTypeEnum.AMOUNT ||
                     column.type === TableTypeEnum.NUMBER) {
                     return (item[field] && item[field].toString().toLowerCase().includes(value));
                 }
-                else if (column.type === TableTypeEnum.COMPOSED) {
+                if (column.type === TableTypeEnum.COMPOSED) {
                     return this.filterComposedColumn(item[field], value);
                 }
-                else {
-                    return (item[field] && item[field].toString().toLowerCase().includes(value));
-                }
+                return (item[field] && item[field].toString().toLowerCase().includes(value));
             });
         });
         this.dt.value = filteredData;
@@ -775,33 +642,118 @@ class PTAdvancedPrimeTableComponent {
         if (composedData) {
             return Object.keys(composedData).some((key) => {
                 const cellValue = composedData[key];
-                if (typeof cellValue === 'string') {
-                    return cellValue.toLowerCase().includes(value);
-                }
-                return false;
+                return typeof cellValue === 'string'
+                    ? cellValue.toLowerCase().includes(value)
+                    : false;
             });
         }
         return false;
     }
-    formatDate(date) {
-        if (!date)
-            return '';
-        if (date instanceof Date) {
-            const day = date.getDate().toString().padStart(2, '0');
-            const month = (date.getMonth() + 1).toString().padStart(2, '0');
-            const year = date.getFullYear().toString();
-            return `${day}/${month}/${year}`;
-        }
-        else if (typeof date === 'string') {
-            const parts = date.split('/');
-            if (parts.length === 3) {
-                return `${parts[0]}/${parts[1]}/${parts[2]}`;
+    // ---------- ✅ DATE / DATETIME PARSING + FORMATTING ----------
+    /** Accepts Date | ISO string | timestamp | anything reasonable */
+    parseAnyDate(input) {
+        if (input === null || input === undefined || input === '')
+            return null;
+        if (input instanceof Date)
+            return isNaN(input.getTime()) ? null : input;
+        // numeric timestamp
+        if (typeof input === 'number') {
+            const d = new Date(input);
+            return isNaN(d.getTime()) ? null : d;
+        }
+        if (typeof input === 'string') {
+            const s = input.trim();
+            // if already dd/MM/yyyy[ ...], we keep it parseable
+            // (still try ISO first)
+            const isoTry = new Date(s);
+            if (!isNaN(isoTry.getTime()))
+                return isoTry;
+            // fallback: dd/MM/yyyy
+            if (s.includes('/')) {
+                const parts = s.split(' ')[0].split('/');
+                if (parts.length === 3) {
+                    const day = parseInt(parts[0], 10);
+                    const month = parseInt(parts[1], 10) - 1;
+                    const year = parseInt(parts[2], 10);
+                    const d = new Date(year, month, day);
+                    return isNaN(d.getTime()) ? null : d;
+                }
             }
-            else {
-                return date;
+        }
+        return null;
+    }
+    formatWithPattern(d, pattern) {
+        if (!d)
+            return '';
+        const pad2 = (n) => String(n).padStart(2, '0');
+        const map = {
+            dd: pad2(d.getDate()),
+            MM: pad2(d.getMonth() + 1),
+            yyyy: String(d.getFullYear()),
+            HH: pad2(d.getHours()),
+            mm: pad2(d.getMinutes()),
+            ss: pad2(d.getSeconds()),
+        };
+        // Replace longer tokens first
+        return pattern
+            .replace(/yyyy/g, map.yyyy)
+            .replace(/dd/g, map.dd)
+            .replace(/MM/g, map.MM)
+            .replace(/HH/g, map.HH)
+            .replace(/mm/g, map.mm)
+            .replace(/ss/g, map.ss);
+    }
+    formatDate(date) {
+        // keep backward-compat default behavior but FIX ISO display
+        const d = this.parseAnyDate(date);
+        return this.formatWithPattern(d, 'dd/MM/yyyy');
+    }
+    formatDateWithColumn(d, col) {
+        const fmt = col.dateFormat?.trim() || 'dd/MM/yyyy';
+        return this.formatWithPattern(d, fmt);
+    }
+    formatDateTimeWithColumn(d, col) {
+        const fmt = col.dateTimeFormat?.trim() || 'dd/MM/yyyy HH:mm:ss';
+        return this.formatWithPattern(d, fmt);
+    }
+    // ---------- MISC ----------
+    calculateColumnWidth(col) {
+        const calculatedWidth = calculateTextWidth(col, col.title);
+        const totalWidth = calculatedWidth + this.iconWidth + 20;
+        return `${totalWidth}px`;
+    }
+    getHeaderWidth(col) {
+        return col.width ? col.width : this.calculateColumnWidth(col);
+    }
+    clear(table) {
+        table.clear();
+        this.searchValue = '';
+        this.latestFilterValues = {};
+        Object.keys(this.filters).forEach((key) => {
+            if (this.filters[key])
+                this.filters[key].value = [];
+        });
+        if (this.isPaginated) {
+            this.onFilterColumn.emit({ cleared: true });
+        }
+    }
+    initializePagination() {
+        if (this.isPaginated) {
+            if (!this.rowsPerPage || this.rowsPerPage.length === 0) {
+                this.rowsPerPage = [20, 30, 40];
             }
+            this.rows = this.rowsPerPage[0];
         }
-        return '';
+    }
+    getCurrencySymbol(column) {
+        return column.type === TableTypeEnum.AMOUNT &&
+            column.currency &&
+            this.isValidCurrencyCode(column.currency)
+            ? column.currency
+            : undefined;
+    }
+    isValidCurrencyCode(currencyCode) {
+        return this.validCurrencyCodes.includes(currencyCode);
     }
     exportExcel() {
         this.exportExcelEvent.emit();
@@ -810,39 +762,32 @@ class PTAdvancedPrimeTableComponent {
         this.exportPdfEvent.emit();
     }
     getImageStyle(style) {
-        if (style) {
-            const imageStyle = {
-                width: style.width || 'auto',
-                height: style.height || 'auto',
-            };
-            if (style.margin) {
-                imageStyle.margin = style.margin;
-            }
-            if (style.marginLeft) {
-                imageStyle.marginLeft = style.marginLeft;
-            }
-            if (style.marginRight) {
-                imageStyle.marginRight = style.marginRight;
-            }
-            if (style.marginTop) {
-                imageStyle.marginTop = style.marginTop;
-            }
-            if (style.marginBottom) {
-                imageStyle.marginBottom = style.marginBottom;
-            }
-            return imageStyle;
-        }
-        return {};
+        if (!style)
+            return {};
+        const imageStyle = {
+            width: style.width || 'auto',
+            height: style.height || 'auto',
+        };
+        if (style.margin)
+            imageStyle.margin = style.margin;
+        if (style.marginLeft)
+            imageStyle.marginLeft = style.marginLeft;
+        if (style.marginRight)
+            imageStyle.marginRight = style.marginRight;
+        if (style.marginTop)
+            imageStyle.marginTop = style.marginTop;
+        if (style.marginBottom)
+            imageStyle.marginBottom = style.marginBottom;
+        return imageStyle;
     }
     getTitleStyle(style) {
-        if (style) {
-            return {
-                color: style.color || 'inherit',
-                fontSize: style.fontSize || 'inherit',
-                textAlign: style.position || 'left',
-            };
-        }
-        return {};
+        if (!style)
+            return {};
+        return {
+            color: style.color || 'inherit',
+            fontSize: style.fontSize || 'inherit',
+            textAlign: style.position || 'left',
+        };
     }
     formatNumber(value, decimalPlaces, thousandSeparator = 'comma', decimalSeparator = 'dot') {
         if (value === null || value === undefined || isNaN(value))
@@ -861,12 +806,12 @@ class PTAdvancedPrimeTableComponent {
         return formattedNumber;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTAdvancedPrimeTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTAdvancedPrimeTableComponent, selector: "pt-advanced-prime-table", inputs: { data: "data", columns: "columns", totalRecords: "totalRecords", rowsPerPage: "rowsPerPage", hasSearchFilter: "hasSearchFilter", hasExportExcel: "hasExportExcel", hasExportPDF: "hasExportPDF", hasColumnFilter: "hasColumnFilter", isPaginated: "isPaginated", actions: "actions", isSortable: "isSortable", loading: "loading", maxHeight: "maxHeight" }, outputs: { search: "search", exportExcelEvent: "exportExcelEvent", exportPdfEvent: "exportPdfEvent", onPageChange: "onPageChange", onSortColumn: "onSortColumn", onFilterColumn: "onFilterColumn" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<div class=\"pt-advanced-prime-table table-container\">\n  <p-table\n    #dt\n    [value]=\"data\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"isPaginated\"\n    dataKey=\"id\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onFilter)=\"filterColumn($event)\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n  >\n    <!-- COLGROUP: sync header/body widths -->\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        <col\n          *ngFor=\"let col of columns\"\n          [style.width]=\"col.width || getHeaderWidth(col)\"\n        />\n      </colgroup>\n    </ng-template>\n\n    <!-- CAPTION -->\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          <!-- Clear filters -->\n          <button\n            *ngIf=\"hasSearchFilter\"\n            pButton\n            icon=\"pi pi-filter-slash\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"clear(dt)\"\n            title=\"Clear filters\"\n          ></button>\n\n          <!-- Export to Excel Button -->\n          <button\n            *ngIf=\"hasExportExcel\"\n            pButton\n            icon=\"pi pi-file-excel\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportExcel()\"\n            title=\"Export to Excel\"\n          ></button>\n\n          <!-- Export to PDF Button -->\n          <button\n            *ngIf=\"hasExportPDF\"\n            pButton\n            icon=\"pi pi-file-pdf\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportPdf()\"\n            title=\"Export to PDF\"\n          ></button>\n        </div>\n\n        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n            />\n          </p-iconField>\n        </div>\n      </div>\n    </ng-template>\n\n    <!-- HEADER -->\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        <ng-container *ngFor=\"let col of columns\">\n          <th\n            *ngIf=\"!col.children; else groupHeader\"\n            pSortableColumn=\"{{ col.code }}\"\n            [style.width]=\"col.width || getHeaderWidth(col)\"\n            [style.padding]=\"'0px'\"\n            [ngClass]=\"[\n              getHeaderAlignClass(col),\n              col.type === TableTypeEnum.ACTION ? 'action-column' : ''\n            ]\"\n            colspan=\"1\"\n          >\n            <!-- SORTABLE HEADER -->\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <div\n                class=\"header-container d-flex align-items-center justify-content-between\"\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [style.padding]=\"'0px'\"\n                [style.margin]=\"'10px'\"\n              >\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n                <div\n                  class=\"icons d-flex align-items-center\"\n                  [style.width]=\"'77px'\"\n                >\n                  <p-sortIcon field=\"{{ col.code }}\" />\n\n                  <!-- COLUMN FILTERS -->\n                  <ng-container\n                    *ngIf=\"hasColumnFilter && col.isFilter !== false\"\n                  >\n                    <!-- COMPOSED FILTER (uses built-in Apply/Clear) -->\n                    <p-columnFilter\n                      *ngIf=\"col.type === TableTypeEnum.COMPOSED\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      type=\"text\"\n                      [showApplyButton]=\"true\"\n                      [showClearButton]=\"true\"\n                      (onClear)=\"onComposedColumnClear(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-filterModel=\"filterModel\"\n                      >\n                        <div *ngFor=\"let composedName of col.composedNames\">\n                          <ng-container\n                            *ngIf=\"\n                              getComposedFieldType(col, composedName) ===\n                              TableTypeEnum.STRING\n                            \"\n                          >\n                            <p-multiSelect\n                              [options]=\"filters[composedName]?.options\"\n                              [ngModel]=\"filters[composedName]?.value\"\n                              (ngModelChange)=\"\n                                onComposedFilterValueChange(\n                                  col,\n                                  composedName,\n                                  $event,\n                                  filterModel\n                                )\n                              \"\n                              [placeholder]=\"filters[composedName]?.placeholder\"\n                              display=\"chip\"\n                            >\n                              <ng-template let-item pTemplate=\"item\">\n                                <div class=\"custom-multiselect-item\">\n                                  <img\n                                    *ngIf=\"item.image\"\n                                    [src]=\"item.image\"\n                                    alt=\"icon\"\n                                    class=\"filter-image\"\n                                  />\n                                  <span>{{ item.label }}</span>\n                                </div>\n                              </ng-template>\n                            </p-multiSelect>\n                          </ng-container>\n                        </div>\n                      </ng-template>\n                    </p-columnFilter>\n\n                    <!-- OTHER TYPES -->\n                    <p-columnFilter\n                      *ngIf=\"col.type !== TableTypeEnum.COMPOSED\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [showApplyButton]=\"true\"\n                      [showClearButton]=\"true\"\n                      (onClear)=\"onFilterClear(col.code!)\"\n                    >\n                      <!-- NUMBER / AMOUNT: use text input so '.' works -->\n                      <ng-template\n                        pTemplate=\"filter\"\n                        *ngIf=\"\n                          col.type === TableTypeEnum.NUMBER ||\n                          col.type === TableTypeEnum.AMOUNT\n                        \"\n                        let-value\n                      >\n                        <input\n                          pInputText\n                          type=\"text\"\n                          inputmode=\"decimal\"\n                          [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                          (ngModelChange)=\"\n                            onNumberFilterChange(col.code!, $event)\n                          \"\n                          placeholder=\"Enter a number\"\n                        />\n                      </ng-template>\n\n                      <!-- DATE -->\n                      <ng-template\n                        pTemplate=\"filter\"\n                        *ngIf=\"col.type === TableTypeEnum.DATE\"\n                        let-filterModel=\"filterModel\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"\n                            latestFilterValues[col.code!] ?? filterModel?.value\n                          \"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, filterModel, $event)\n                          \"\n                          dateFormat=\"dd/mm/yy\"\n                          placeholder=\"Choose a date\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <!-- MULTISELECT -->\n                      <ng-template\n                        pTemplate=\"filter\"\n                        *ngIf=\"\n                          col.type === TableTypeEnum.MULTISELECT &&\n                          col.filterOptions &&\n                          col.filterOptions.length > 0\n                        \"\n                        let-filterModel=\"filterModel\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"\n                            latestFilterValues[col.code!] ?? filterModel?.value\n                          \"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, filterModel, $event)\n                          \"\n                          display=\"chip\"\n                          placeholder=\"Choose option\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  </ng-container>\n                </div>\n              </div>\n            </ng-container>\n\n            <!-- NON-SORTABLE HEADER -->\n            <ng-template #noSortHeader>\n              <div\n                class=\"header-container d-flex align-items-center justify-content-between\"\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [style.padding]=\"'0px'\"\n                [style.margin]=\"'10px'\"\n              >\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n\n                <ng-container *ngIf=\"hasColumnFilter && col.isFilter !== false\">\n                  <!-- AMOUNT behaves like NUMBER -->\n                  <p-columnFilter\n                    *ngIf=\"col.type === 'AMOUNT'\"\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    [type]=\"getColumnFilterType(col)\"\n                    [currency]=\"getCurrencySymbol(col)\"\n                    [showApplyButton]=\"true\"\n                    [showClearButton]=\"true\"\n                  >\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-filterModel=\"filterModel\"\n                    >\n                      <input\n                        pInputText\n                        type=\"text\"\n                        inputmode=\"decimal\"\n                        [ngModel]=\"\n                          latestFilterValues[col.code!] ?? filterModel?.value\n                        \"\n                        (ngModelChange)=\"\n                          onFilterValueChange(col.code!, filterModel, $event)\n                        \"\n                        placeholder=\"Enter an amount\"\n                      />\n                    </ng-template>\n                  </p-columnFilter>\n\n                  <p-columnFilter\n                    *ngIf=\"col.type !== 'AMOUNT'\"\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    [type]=\"getColumnFilterType(col)\"\n                    [showApplyButton]=\"true\"\n                    [showClearButton]=\"true\"\n                  >\n                    <!-- DATE -->\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-filterModel=\"filterModel\"\n                      *ngIf=\"getColumnFilterType(col) === 'date'\"\n                    >\n                      <p-calendar\n                        [ngModel]=\"\n                          latestFilterValues[col.code!] ?? filterModel?.value\n                        \"\n                        (ngModelChange)=\"\n                          onFilterValueChange(col.code!, filterModel, $event)\n                        \"\n                        dateFormat=\"dd/mm/yy\"\n                      ></p-calendar>\n                    </ng-template>\n\n                    <!-- MULTISELECT -->\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-filterModel=\"filterModel\"\n                      *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                    >\n                      <p-multiSelect\n                        [options]=\"col.filterOptions\"\n                        [ngModel]=\"\n                          latestFilterValues[col.code!] ?? filterModel?.value\n                        \"\n                        (ngModelChange)=\"\n                          onFilterValueChange(col.code!, filterModel, $event)\n                        \"\n                        display=\"chip\"\n                        placeholder=\"Select\"\n                        class=\"custom-multiselect\"\n                      ></p-multiSelect>\n                    </ng-template>\n                  </p-columnFilter>\n                </ng-container>\n              </div>\n            </ng-template>\n          </th>\n\n          <!-- GROUPED HEADER -->\n          <ng-template #groupHeader>\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          </ng-template>\n        </ng-container>\n      </tr>\n\n      <!-- CHILD HEADERS -->\n      <tr *ngIf=\"hasGroupedColumns\">\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.children\">\n            <th\n              *ngFor=\"let child of col.children\"\n              [style.width]=\"child.width || getHeaderWidth(child)\"\n              [style.padding]=\"'0px'\"\n            ></th>\n          </ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n\n    <!-- EMPTY MESSAGE -->\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"p-datatable-emptymessage\">\n        <!-- span all columns -->\n        <td class=\"empty-message-cell\" [attr.colspan]=\"columns.length || 1\">\n          <div class=\"empty-message-wrapper\">\n            <div class=\"empty-message\">\n              <i class=\"pi pi-info-circle\"></i>\n              <p>No records available to display.</p>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n\n    <!-- BODY -->\n    <ng-template\n      pTemplate=\"body\"\n      let-data\n      let-editing=\"editing\"\n      let-ri=\"rowIndex\"\n    >\n      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <ng-container *ngFor=\"let col of columns\">\n          <!-- SIMPLE COLUMNS (no children) -->\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- EDITABLE CELL -->\n            <td\n              *ngIf=\"\n                isEditable(col.code!) && col.type !== TableTypeEnum.ACTION;\n                else normalTD\n              \"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngClass]=\"getDataAlignClass(col)\"\n            >\n              <!-- Editable input for NUMBER/DATE/STRING/MULTISELECT -->\n              <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                <p-cellEditor>\n                  <ng-template pTemplate=\"input\">\n                    <p-multiSelect\n                      appendTo=\"body\"\n                      [ngModel]=\"data[col.code!]\"\n                      [style]=\"{ width: '100%' }\"\n                      (ngModelChange)=\"changeHandler(data.id, col.code, $event)\"\n                      [options]=\"optionValues\"\n                    ></p-multiSelect>\n                  </ng-template>\n                  <ng-template pTemplate=\"output\">\n                    <div class=\"multi-select-container\">\n                      <ng-container *ngFor=\"let rec of data[col.code!]\">\n                        <p-tag [value]=\"rec\"></p-tag>\n                      </ng-container>\n                    </div>\n                  </ng-template>\n                </p-cellEditor>\n              </ng-container>\n\n              <ng-template #datePicker>\n                <ng-container *ngIf=\"isDatePicker(col.code); else normalInput\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-calendar\n                        [inputId]=\"data[col.code!]\"\n                        [ngModel]=\"data[col.code!]\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [dateFormat]=\"'dd/mm/yy'\"\n                      ></p-calendar>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      {{ data[col.code!] | customDate }}\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n              </ng-template>\n\n              <ng-template #normalInput>\n                <p-cellEditor>\n                  <ng-template pTemplate=\"input\">\n                    <input\n                      pInputText\n                      type=\"text\"\n                      [ngModel]=\"data[col.code!]\"\n                      (change)=\"onChange($event, data.id, col.code)\"\n                    />\n                  </ng-template>\n                  <ng-template pTemplate=\"output\">\n                    <ng-container\n                      *ngIf=\"\n                        col.type === TableTypeEnum.AMOUNT;\n                        else normalOutput\n                      \"\n                    >\n                      {{\n                        data[col.code!]\n                          | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                      }}\n                    </ng-container>\n                    <ng-template #normalOutput>\n                      {{ data[col.code!] }}\n                    </ng-template>\n                  </ng-template>\n                </p-cellEditor>\n              </ng-template>\n            </td>\n\n            <!-- NON-EDITABLE CELL (ALWAYS RENDERED) -->\n            <ng-template #normalTD>\n              <td\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [ngClass]=\"[\n                  getDataAlignClass(col),\n                  col.type === TableTypeEnum.ACTION ? 'action-column' : ''\n                ]\"\n              >\n                <!-- ACTION column: built-in edit/delete + custom actions -->\n                <ng-container\n                  *ngIf=\"col.type === TableTypeEnum.ACTION; else nonActionCell\"\n                >\n                  <div class=\"action-buttons-container\">\n                    <!-- built-in delete -->\n                    <button\n                      *ngIf=\"isDelete\"\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-trash\"\n                      (click)=\"Delete(data.id)\"\n                      class=\"p-button-rounded p-button-text\"\n                    ></button>\n\n                    <!-- built-in inline edit -->\n                    <div *ngIf=\"isEdit\">\n                      <button\n                        pInitEditableRow\n                        *ngIf=\"!editing\"\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        icon=\"pi pi-pencil\"\n                        (click)=\"initEditableRow(data)\"\n                        class=\"p-button-rounded p-button-text\"\n                      ></button>\n                      <button\n                        *ngIf=\"editing\"\n                        pSaveEditableRow\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        icon=\"pi pi-check\"\n                        (click)=\"saveEditableRow(data)\"\n                        class=\"p-button-rounded p-button-text\"\n                      ></button>\n                      <button\n                        *ngIf=\"editing\"\n                        pCancelEditableRow\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        icon=\"pi pi-times\"\n                        (click)=\"cancelEditableRow(data)\"\n                        class=\"p-button-rounded p-button-text\"\n                      ></button>\n                    </div>\n\n                    <!-- custom actions -->\n                    <button\n                      *ngFor=\"let act of customActions\"\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      class=\"p-button-rounded p-button-text\"\n                      [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                      [ngClass]=\"act.styleClass\"\n                      (click)=\"onCustomActionClick(act, data)\"\n                    ></button>\n                  </div>\n                </ng-container>\n\n                <!-- NON-ACTION cells -->\n                <ng-template #nonActionCell>\n                  <!-- COMPOSED -->\n                  <ng-container\n                    *ngIf=\"\n                      col.type === TableTypeEnum.COMPOSED;\n                      else nonComposed\n                    \"\n                  >\n                    <div class=\"composed-cell\">\n                      <ng-container\n                        *ngFor=\"\n                          let composedName of col.composedNames;\n                          let i = index\n                        \"\n                      >\n                        <!-- IMAGE -->\n                        <ng-container\n                          *ngIf=\"\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.IMAGE\n                          \"\n                        >\n                          <img\n                            [src]=\"data[col.code!]?.[composedName]\"\n                            alt=\"composed-img\"\n                            class=\"composed-image\"\n                            [ngStyle]=\"\n                              getImageStyle(col.composedStyles?.[composedName])\n                            \"\n                          />\n                        </ng-container>\n\n                        <!-- STRING -->\n                        <ng-container\n                          *ngIf=\"\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.STRING\n                          \"\n                        >\n                          <span\n                            class=\"composed-text\"\n                            [ngStyle]=\"\n                              getTitleStyle(\n                                col.composedStyles?.[composedName]\n                              )\n                            \"\n                          >\n                            {{ data[col.code!]?.[composedName] }}\n                          </span>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </ng-container>\n\n                  <ng-template #nonComposed>\n                    <!-- AMOUNT-->\n                    <ng-container\n                      *ngIf=\"col.type === TableTypeEnum.AMOUNT; else nonAmount\"\n                    >\n                      {{\n                        data[col.code!]\n                          | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                      }}\n                    </ng-container>\n\n                    <ng-template #nonAmount>\n                      <!-- NUMBER-->\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.NUMBER;\n                          else nonNumber\n                        \"\n                      >\n                        {{\n                          formatNumber(\n                            data[col.code!],\n                            col.decimalPlaces,\n                            col.thousandSeparator,\n                            col.decimalSeparator\n                          )\n                        }}\n                      </ng-container>\n\n                      <ng-template #nonNumber>\n                        <!-- DATE -->\n                        <ng-container\n                          *ngIf=\"\n                            col.type === TableTypeEnum.DATE;\n                            else normalTypes\n                          \"\n                        >\n                          {{ formatDate(data[col.code!]) }}\n                        </ng-container>\n\n                        <ng-template #normalTypes>\n                          <!-- STRING, MULTISELECT-->\n                          <ng-container\n                            *ngIf=\"\n                              [\n                                TableTypeEnum.STRING,\n                                TableTypeEnum.MULTISELECT\n                              ].includes(col.type!)\n                            \"\n                          >\n                            {{ data[col.code!] }}\n                          </ng-container>\n                        </ng-template>\n                      </ng-template>\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </td>\n            </ng-template>\n          </ng-container>\n\n          <!-- CHILD COLUMNS -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <td\n                [style.width]=\"child.width || getHeaderWidth(child)\"\n                [ngClass]=\"getDataAlignClass(child)\"\n              >\n                <ng-container\n                  *ngIf=\"isEditable(child.code); else childNormalTD\"\n                >\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText\n                        type=\"text\"\n                        [ngModel]=\"child.code ? data[child.code] : null\"\n                        (change)=\"onChange($event, data.id, child.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      {{ child.code ? data[child.code] : \"\" }}\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <ng-template #childNormalTD>\n                  {{ child.code ? data[child.code] : \"\" }}\n                </ng-template>\n              </td>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{flex:1}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:block;width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{width:100%;height:100%;min-height:180px;display:flex;align-items:center;justify-content:center}.pt-advanced-prime-table .empty-message{text-align:center;color:#888;font-size:1.2rem}.pt-advanced-prime-table .empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}.pt-advanced-prime-table th{white-space:normal;word-wrap:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{text-align:center!important;justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;padding:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container{width:100%;display:flex;justify-content:center!important;align-items:center!important;gap:.35rem}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{padding:.25rem!important;min-width:22px!important;height:22px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i6.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i2$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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "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", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i10.IconField, selector: "p-iconField", inputs: ["iconPosition"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputIcon", inputs: ["styleClass"] }, { kind: "pipe", type: CustomCurrencyPipe, name: "customCurrency" }, { kind: "pipe", type: CustomDatePipe, name: "customDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTAdvancedPrimeTableComponent, selector: "pt-advanced-prime-table", inputs: { data: "data", columns: "columns", totalRecords: "totalRecords", rowsPerPage: "rowsPerPage", hasSearchFilter: "hasSearchFilter", hasExportExcel: "hasExportExcel", hasExportPDF: "hasExportPDF", hasColumnFilter: "hasColumnFilter", isPaginated: "isPaginated", actions: "actions", isSortable: "isSortable", loading: "loading", maxHeight: "maxHeight" }, outputs: { search: "search", exportExcelEvent: "exportExcelEvent", exportPdfEvent: "exportPdfEvent", onPageChange: "onPageChange", onSortColumn: "onSortColumn", onFilterColumn: "onFilterColumn" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<div class=\"pt-advanced-prime-table table-container\">\n  <p-table\n    #dt\n    [value]=\"data\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"isPaginated\"\n    dataKey=\"id\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onFilter)=\"filterColumn($event)\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n  >\n    <!-- COLGROUP: sync header/body widths -->\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        <col\n          *ngFor=\"let col of columns\"\n          [style.width]=\"col.width || getHeaderWidth(col)\"\n        />\n      </colgroup>\n    </ng-template>\n\n    <!-- CAPTION -->\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          <!-- Clear filters -->\n          <button\n            *ngIf=\"hasSearchFilter\"\n            pButton\n            icon=\"pi pi-filter-slash\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"clear(dt)\"\n            title=\"Clear filters\"\n          ></button>\n\n          <!-- Export to Excel Button -->\n          <button\n            *ngIf=\"hasExportExcel\"\n            pButton\n            icon=\"pi pi-file-excel\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportExcel()\"\n            title=\"Export to Excel\"\n          ></button>\n\n          <!-- Export to PDF Button -->\n          <button\n            *ngIf=\"hasExportPDF\"\n            pButton\n            icon=\"pi pi-file-pdf\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportPdf()\"\n            title=\"Export to PDF\"\n          ></button>\n        </div>\n\n        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n            />\n          </p-iconField>\n        </div>\n      </div>\n    </ng-template>\n\n    <!-- HEADER -->\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        <ng-container *ngFor=\"let col of columns\">\n          <th\n            *ngIf=\"!col.children; else groupHeader\"\n            pSortableColumn=\"{{ col.code }}\"\n            [style.width]=\"col.width || getHeaderWidth(col)\"\n            [style.padding]=\"'0px'\"\n            [ngClass]=\"[\n              getHeaderAlignClass(col),\n              col.type === TableTypeEnum.ACTION ? 'action-column' : ''\n            ]\"\n            colspan=\"1\"\n          >\n            <!-- SORTABLE HEADER -->\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <div\n                class=\"header-container d-flex align-items-center justify-content-between\"\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [style.padding]=\"'0px'\"\n                [style.margin]=\"'10px'\"\n              >\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n                <div\n                  class=\"icons d-flex align-items-center\"\n                  [style.width]=\"'77px'\"\n                >\n                  <p-sortIcon field=\"{{ col.code }}\" />\n\n                  <!-- COLUMN FILTERS -->\n                  <ng-container\n                    *ngIf=\"hasColumnFilter && col.isFilter !== false\"\n                  >\n                    <!-- COMPOSED FILTER (uses built-in Apply/Clear) -->\n                    <p-columnFilter\n                      *ngIf=\"col.type === TableTypeEnum.COMPOSED\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      type=\"text\"\n                      [showApplyButton]=\"true\"\n                      [showClearButton]=\"true\"\n                      (onClear)=\"onComposedColumnClear(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-filterModel=\"filterModel\"\n                      >\n                        <div *ngFor=\"let composedName of col.composedNames\">\n                          <ng-container\n                            *ngIf=\"\n                              getComposedFieldType(col, composedName) ===\n                              TableTypeEnum.STRING\n                            \"\n                          >\n                            <p-multiSelect\n                              [options]=\"filters[composedName]?.options\"\n                              [ngModel]=\"filters[composedName]?.value\"\n                              (ngModelChange)=\"\n                                onComposedFilterValueChange(\n                                  col,\n                                  composedName,\n                                  $event,\n                                  filterModel\n                                )\n                              \"\n                              [placeholder]=\"filters[composedName]?.placeholder\"\n                              display=\"chip\"\n                            >\n                              <ng-template let-item pTemplate=\"item\">\n                                <div class=\"custom-multiselect-item\">\n                                  <img\n                                    *ngIf=\"item.image\"\n                                    [src]=\"item.image\"\n                                    alt=\"icon\"\n                                    class=\"filter-image\"\n                                  />\n                                  <span>{{ item.label }}</span>\n                                </div>\n                              </ng-template>\n                            </p-multiSelect>\n                          </ng-container>\n                        </div>\n                      </ng-template>\n                    </p-columnFilter>\n\n                    <!-- OTHER TYPES -->\n                    <p-columnFilter\n                      *ngIf=\"col.type !== TableTypeEnum.COMPOSED\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [showApplyButton]=\"true\"\n                      [showClearButton]=\"true\"\n                      (onClear)=\"onFilterClear(col.code!)\"\n                    >\n                      <!-- NUMBER / AMOUNT: use text input so '.' works -->\n                      <ng-template\n                        pTemplate=\"filter\"\n                        *ngIf=\"\n                          col.type === TableTypeEnum.NUMBER ||\n                          col.type === TableTypeEnum.AMOUNT\n                        \"\n                        let-value\n                      >\n                        <input\n                          pInputText\n                          type=\"text\"\n                          inputmode=\"decimal\"\n                          [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                          (ngModelChange)=\"\n                            onNumberFilterChange(col.code!, $event)\n                          \"\n                          placeholder=\"Enter a number\"\n                        />\n                      </ng-template>\n\n                      <!-- DATE -->\n                      <ng-template\n                        pTemplate=\"filter\"\n                        *ngIf=\"col.type === TableTypeEnum.DATE\"\n                        let-filterModel=\"filterModel\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"\n                            latestFilterValues[col.code!] ?? filterModel?.value\n                          \"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, filterModel, $event)\n                          \"\n                          dateFormat=\"dd/mm/yy\"\n                          placeholder=\"Choose a date\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <!-- MULTISELECT -->\n                      <ng-template\n                        pTemplate=\"filter\"\n                        *ngIf=\"\n                          col.type === TableTypeEnum.MULTISELECT &&\n                          col.filterOptions &&\n                          col.filterOptions.length > 0\n                        \"\n                        let-filterModel=\"filterModel\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"\n                            latestFilterValues[col.code!] ?? filterModel?.value\n                          \"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, filterModel, $event)\n                          \"\n                          display=\"chip\"\n                          placeholder=\"Choose option\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  </ng-container>\n                </div>\n              </div>\n            </ng-container>\n\n            <!-- NON-SORTABLE HEADER -->\n            <ng-template #noSortHeader>\n              <div\n                class=\"header-container d-flex align-items-center justify-content-between\"\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [style.padding]=\"'0px'\"\n                [style.margin]=\"'10px'\"\n              >\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n\n                <ng-container *ngIf=\"hasColumnFilter && col.isFilter !== false\">\n                  <!-- AMOUNT behaves like NUMBER -->\n                  <p-columnFilter\n                    *ngIf=\"col.type === 'AMOUNT'\"\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    [type]=\"getColumnFilterType(col)\"\n                    [currency]=\"getCurrencySymbol(col)\"\n                    [showApplyButton]=\"true\"\n                    [showClearButton]=\"true\"\n                  >\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-filterModel=\"filterModel\"\n                    >\n                      <input\n                        pInputText\n                        type=\"text\"\n                        inputmode=\"decimal\"\n                        [ngModel]=\"\n                          latestFilterValues[col.code!] ?? filterModel?.value\n                        \"\n                        (ngModelChange)=\"\n                          onFilterValueChange(col.code!, filterModel, $event)\n                        \"\n                        placeholder=\"Enter an amount\"\n                      />\n                    </ng-template>\n                  </p-columnFilter>\n\n                  <p-columnFilter\n                    *ngIf=\"col.type !== 'AMOUNT'\"\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    [type]=\"getColumnFilterType(col)\"\n                    [showApplyButton]=\"true\"\n                    [showClearButton]=\"true\"\n                  >\n                    <!-- DATE -->\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-filterModel=\"filterModel\"\n                      *ngIf=\"getColumnFilterType(col) === 'date'\"\n                    >\n                      <p-calendar\n                        [ngModel]=\"\n                          latestFilterValues[col.code!] ?? filterModel?.value\n                        \"\n                        (ngModelChange)=\"\n                          onFilterValueChange(col.code!, filterModel, $event)\n                        \"\n                        dateFormat=\"dd/mm/yy\"\n                      ></p-calendar>\n                    </ng-template>\n\n                    <!-- MULTISELECT -->\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-filterModel=\"filterModel\"\n                      *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                    >\n                      <p-multiSelect\n                        [options]=\"col.filterOptions\"\n                        [ngModel]=\"\n                          latestFilterValues[col.code!] ?? filterModel?.value\n                        \"\n                        (ngModelChange)=\"\n                          onFilterValueChange(col.code!, filterModel, $event)\n                        \"\n                        display=\"chip\"\n                        placeholder=\"Select\"\n                        class=\"custom-multiselect\"\n                      ></p-multiSelect>\n                    </ng-template>\n                  </p-columnFilter>\n                </ng-container>\n              </div>\n            </ng-template>\n          </th>\n\n          <!-- GROUPED HEADER -->\n          <ng-template #groupHeader>\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          </ng-template>\n        </ng-container>\n      </tr>\n\n      <!-- CHILD HEADERS -->\n      <tr *ngIf=\"hasGroupedColumns\">\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.children\">\n            <th\n              *ngFor=\"let child of col.children\"\n              [style.width]=\"child.width || getHeaderWidth(child)\"\n              [style.padding]=\"'0px'\"\n            ></th>\n          </ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n\n    <!-- EMPTY MESSAGE -->\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"p-datatable-emptymessage\">\n        <!-- span all columns -->\n        <td class=\"empty-message-cell\" [attr.colspan]=\"columns.length || 1\">\n          <div class=\"empty-message-wrapper\">\n            <div class=\"empty-message\">\n              <i class=\"pi pi-info-circle\"></i>\n              <p>No records available to display.</p>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n\n    <!-- BODY -->\n    <ng-template\n      pTemplate=\"body\"\n      let-data\n      let-editing=\"editing\"\n      let-ri=\"rowIndex\"\n    >\n      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <ng-container *ngFor=\"let col of columns\">\n          <!-- SIMPLE COLUMNS (no children) -->\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- EDITABLE CELL -->\n            <td\n              *ngIf=\"\n                isEditable(col.code!) && col.type !== TableTypeEnum.ACTION;\n                else normalTD\n              \"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngClass]=\"getDataAlignClass(col)\"\n            >\n              <!-- Editable input for NUMBER/DATE/STRING/MULTISELECT -->\n              <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                <p-cellEditor>\n                  <ng-template pTemplate=\"input\">\n                    <p-multiSelect\n                      appendTo=\"body\"\n                      [ngModel]=\"data[col.code!]\"\n                      [style]=\"{ width: '100%' }\"\n                      (ngModelChange)=\"changeHandler(data.id, col.code, $event)\"\n                      [options]=\"optionValues\"\n                    ></p-multiSelect>\n                  </ng-template>\n                  <ng-template pTemplate=\"output\">\n                    <div class=\"multi-select-container\">\n                      <ng-container *ngFor=\"let rec of data[col.code!]\">\n                        <p-tag [value]=\"rec\"></p-tag>\n                      </ng-container>\n                    </div>\n                  </ng-template>\n                </p-cellEditor>\n              </ng-container>\n\n              <ng-template #datePicker>\n                <ng-container *ngIf=\"isDatePicker(col.code); else normalInput\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-calendar\n                        [inputId]=\"data[col.code!]\"\n                        [ngModel]=\"data[col.code!]\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [dateFormat]=\"'dd/mm/yy'\"\n                      ></p-calendar>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      {{ data[col.code!] | customDate }}\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n              </ng-template>\n\n              <ng-template #normalInput>\n                <p-cellEditor>\n                  <ng-template pTemplate=\"input\">\n                    <input\n                      pInputText\n                      type=\"text\"\n                      [ngModel]=\"data[col.code!]\"\n                      (change)=\"onChange($event, data.id, col.code)\"\n                    />\n                  </ng-template>\n                  <ng-template pTemplate=\"output\">\n                    <ng-container\n                      *ngIf=\"\n                        col.type === TableTypeEnum.AMOUNT;\n                        else normalOutput\n                      \"\n                    >\n                      {{\n                        data[col.code!]\n                          | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                      }}\n                    </ng-container>\n                    <ng-template #normalOutput>\n                      {{ data[col.code!] }}\n                    </ng-template>\n                  </ng-template>\n                </p-cellEditor>\n              </ng-template>\n            </td>\n\n            <!-- NON-EDITABLE CELL (ALWAYS RENDERED) -->\n            <ng-template #normalTD>\n              <td\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [ngClass]=\"[\n                  getDataAlignClass(col),\n                  col.type === TableTypeEnum.ACTION ? 'action-column' : ''\n                ]\"\n              >\n                <!-- ACTION column: built-in edit/delete + custom actions -->\n                <ng-container\n                  *ngIf=\"col.type === TableTypeEnum.ACTION; else nonActionCell\"\n                >\n                  <div class=\"action-buttons-container\">\n                    <!-- built-in delete -->\n                    <button\n                      *ngIf=\"isDelete\"\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-trash\"\n                      (click)=\"Delete(data.id)\"\n                      class=\"p-button-rounded p-button-text\"\n                    ></button>\n\n                    <!-- built-in inline edit -->\n                    <div *ngIf=\"isEdit\">\n                      <button\n                        pInitEditableRow\n                        *ngIf=\"!editing\"\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        icon=\"pi pi-pencil\"\n                        (click)=\"initEditableRow(data)\"\n                        class=\"p-button-rounded p-button-text\"\n                      ></button>\n                      <button\n                        *ngIf=\"editing\"\n                        pSaveEditableRow\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        icon=\"pi pi-check\"\n                        (click)=\"saveEditableRow(data)\"\n                        class=\"p-button-rounded p-button-text\"\n                      ></button>\n                      <button\n                        *ngIf=\"editing\"\n                        pCancelEditableRow\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        icon=\"pi pi-times\"\n                        (click)=\"cancelEditableRow(data)\"\n                        class=\"p-button-rounded p-button-text\"\n                      ></button>\n                    </div>\n\n                    <!-- custom actions -->\n                    <button\n                      *ngFor=\"let act of customActions\"\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      class=\"p-button-rounded p-button-text\"\n                      [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                      [ngClass]=\"act.styleClass\"\n                      (click)=\"onCustomActionClick(act, data)\"\n                    ></button>\n                  </div>\n                </ng-container>\n\n                <!-- NON-ACTION cells -->\n                <ng-template #nonActionCell>\n                  <!-- COMPOSED -->\n                  <ng-container\n                    *ngIf=\"\n                      col.type === TableTypeEnum.COMPOSED;\n                      else nonComposed\n                    \"\n                  >\n                    <div class=\"composed-cell\">\n                      <ng-container\n                        *ngFor=\"\n                          let composedName of col.composedNames;\n                          let i = index\n                        \"\n                      >\n                        <!-- IMAGE -->\n                        <ng-container\n                          *ngIf=\"\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.IMAGE\n                          \"\n                        >\n                          <img\n                            [src]=\"data[col.code!]?.[composedName]\"\n                            alt=\"composed-img\"\n                            class=\"composed-image\"\n                            [ngStyle]=\"\n                              getImageStyle(col.composedStyles?.[composedName])\n                            \"\n                          />\n                        </ng-container>\n\n                        <!-- STRING -->\n                        <ng-container\n                          *ngIf=\"\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.STRING\n                          \"\n                        >\n                          <span\n                            class=\"composed-text\"\n                            [ngStyle]=\"\n                              getTitleStyle(\n                                col.composedStyles?.[composedName]\n                              )\n                            \"\n                          >\n                            {{ data[col.code!]?.[composedName] }}\n                          </span>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </ng-container>\n\n                  <ng-template #nonComposed>\n                    <!-- AMOUNT-->\n                    <ng-container\n                      *ngIf=\"col.type === TableTypeEnum.AMOUNT; else nonAmount\"\n                    >\n                      {{\n                        data[col.code!]\n                          | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                      }}\n                    </ng-container>\n\n                    <ng-template #nonAmount>\n                      <!-- NUMBER-->\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.NUMBER;\n                          else nonNumber\n                        \"\n                      >\n                        {{\n                          formatNumber(\n                            data[col.code!],\n                            col.decimalPlaces,\n                            col.thousandSeparator,\n                            col.decimalSeparator\n                          )\n                        }}\n                      </ng-container>\n\n                      <ng-template #nonNumber>\n                        <!-- DATE -->\n                        <ng-container\n                          *ngIf=\"\n                            col.type === TableTypeEnum.DATE ||\n                              col.type === TableTypeEnum.DATETIME;\n                            else normalTypes\n                          \"\n                        >\n                          <ng-container *ngIf=\"col.type === TableTypeEnum.DATE\">\n                            {{\n                              formatDateWithColumn(\n                                parseAnyDate(data[col.code!]),\n                                col\n                              )\n                            }}\n                          </ng-container>\n\n                          <ng-container\n                            *ngIf=\"col.type === TableTypeEnum.DATETIME\"\n                          >\n                            {{\n                              formatDateTimeWithColumn(\n                                parseAnyDate(data[col.code!]),\n                                col\n                              )\n                            }}\n                          </ng-container>\n                        </ng-container>\n\n                        <ng-template #normalTypes>\n                          <!-- STRING, MULTISELECT-->\n                          <ng-container\n                            *ngIf=\"\n                              [\n                                TableTypeEnum.STRING,\n                                TableTypeEnum.MULTISELECT\n                              ].includes(col.type!)\n                            \"\n                          >\n                            {{ data[col.code!] }}\n                          </ng-container>\n                        </ng-template>\n                      </ng-template>\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </td>\n            </ng-template>\n          </ng-container>\n\n          <!-- CHILD COLUMNS -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <td\n                [style.width]=\"child.width || getHeaderWidth(child)\"\n                [ngClass]=\"getDataAlignClass(child)\"\n              >\n                <ng-container\n                  *ngIf=\"isEditable(child.code); else childNormalTD\"\n                >\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText\n                        type=\"text\"\n                        [ngModel]=\"child.code ? data[child.code] : null\"\n                        (change)=\"onChange($event, data.id, child.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      {{ child.code ? data[child.code] : \"\" }}\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <ng-template #childNormalTD>\n                  {{ child.code ? data[child.code] : \"\" }}\n                </ng-template>\n              </td>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{flex:1}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:block;width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{width:100%;height:100%;min-height:180px;display:flex;align-items:center;justify-content:center}.pt-advanced-prime-table .empty-message{text-align:center;color:#888;font-size:1.2rem}.pt-advanced-prime-table .empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}.pt-advanced-prime-table th{white-space:normal;word-wrap:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{text-align:center!important;justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;padding:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container{width:100%;display:flex;justify-content:center!important;align-items:center!important;gap:.35rem}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{padding:.25rem!important;min-width:22px!important;height:22px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i6.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i2$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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "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", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i10.IconField, selector: "p-iconField", inputs: ["iconPosition"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputIcon", inputs: ["styleClass"] }, { kind: "pipe", type: CustomCurrencyPipe, name: "customCurrency" }, { kind: "pipe", type: CustomDatePipe, name: "customDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTAdvancedPrimeTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-advanced-prime-table', template: "<div class=\"pt-advanced-prime-table table-container\">\n  <p-table\n    #dt\n    [value]=\"data\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"isPaginated\"\n    dataKey=\"id\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onFilter)=\"filterColumn($event)\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n  >\n    <!-- COLGROUP: sync header/body widths -->\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        <col\n          *ngFor=\"let col of columns\"\n          [style.width]=\"col.width || getHeaderWidth(col)\"\n        />\n      </colgroup>\n    </ng-template>\n\n    <!-- CAPTION -->\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          <!-- Clear filters -->\n          <button\n            *ngIf=\"hasSearchFilter\"\n            pButton\n            icon=\"pi pi-filter-slash\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"clear(dt)\"\n            title=\"Clear filters\"\n          ></button>\n\n          <!-- Export to Excel Button -->\n          <button\n            *ngIf=\"hasExportExcel\"\n            pButton\n            icon=\"pi pi-file-excel\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportExcel()\"\n            title=\"Export to Excel\"\n          ></button>\n\n          <!-- Export to PDF Button -->\n          <button\n            *ngIf=\"hasExportPDF\"\n            pButton\n            icon=\"pi pi-file-pdf\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportPdf()\"\n            title=\"Export to PDF\"\n          ></button>\n        </div>\n\n        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n            />\n          </p-iconField>\n        </div>\n      </div>\n    </ng-template>\n\n    <!-- HEADER -->\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        <ng-container *ngFor=\"let col of columns\">\n          <th\n            *ngIf=\"!col.children; else groupHeader\"\n            pSortableColumn=\"{{ col.code }}\"\n            [style.width]=\"col.width || getHeaderWidth(col)\"\n            [style.padding]=\"'0px'\"\n            [ngClass]=\"[\n              getHeaderAlignClass(col),\n              col.type === TableTypeEnum.ACTION ? 'action-column' : ''\n            ]\"\n            colspan=\"1\"\n          >\n            <!-- SORTABLE HEADER -->\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <div\n                class=\"header-container d-flex align-items-center justify-content-between\"\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [style.padding]=\"'0px'\"\n                [style.margin]=\"'10px'\"\n              >\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n                <div\n                  class=\"icons d-flex align-items-center\"\n                  [style.width]=\"'77px'\"\n                >\n                  <p-sortIcon field=\"{{ col.code }}\" />\n\n                  <!-- COLUMN FILTERS -->\n                  <ng-container\n                    *ngIf=\"hasColumnFilter && col.isFilter !== false\"\n                  >\n                    <!-- COMPOSED FILTER (uses built-in Apply/Clear) -->\n                    <p-columnFilter\n                      *ngIf=\"col.type === TableTypeEnum.COMPOSED\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      type=\"text\"\n                      [showApplyButton]=\"true\"\n                      [showClearButton]=\"true\"\n                      (onClear)=\"onComposedColumnClear(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-filterModel=\"filterModel\"\n                      >\n                        <div *ngFor=\"let composedName of col.composedNames\">\n                          <ng-container\n                            *ngIf=\"\n                              getComposedFieldType(col, composedName) ===\n                              TableTypeEnum.STRING\n                            \"\n                          >\n                            <p-multiSelect\n                              [options]=\"filters[composedName]?.options\"\n                              [ngModel]=\"filters[composedName]?.value\"\n                              (ngModelChange)=\"\n                                onComposedFilterValueChange(\n                                  col,\n                                  composedName,\n                                  $event,\n                                  filterModel\n                                )\n                              \"\n                              [placeholder]=\"filters[composedName]?.placeholder\"\n                              display=\"chip\"\n                            >\n                              <ng-template let-item pTemplate=\"item\">\n                                <div class=\"custom-multiselect-item\">\n                                  <img\n                                    *ngIf=\"item.image\"\n                                    [src]=\"item.image\"\n                                    alt=\"icon\"\n                                    class=\"filter-image\"\n                                  />\n                                  <span>{{ item.label }}</span>\n                                </div>\n                              </ng-template>\n                            </p-multiSelect>\n                          </ng-container>\n                        </div>\n                      </ng-template>\n                    </p-columnFilter>\n\n                    <!-- OTHER TYPES -->\n                    <p-columnFilter\n                      *ngIf=\"col.type !== TableTypeEnum.COMPOSED\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [showApplyButton]=\"true\"\n                      [showClearButton]=\"true\"\n                      (onClear)=\"onFilterClear(col.code!)\"\n                    >\n                      <!-- NUMBER / AMOUNT: use text input so '.' works -->\n                      <ng-template\n                        pTemplate=\"filter\"\n                        *ngIf=\"\n                          col.type === TableTypeEnum.NUMBER ||\n                          col.type === TableTypeEnum.AMOUNT\n                        \"\n                        let-value\n                      >\n                        <input\n                          pInputText\n                          type=\"text\"\n                          inputmode=\"decimal\"\n                          [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                          (ngModelChange)=\"\n                            onNumberFilterChange(col.code!, $event)\n                          \"\n                          placeholder=\"Enter a number\"\n                        />\n                      </ng-template>\n\n                      <!-- DATE -->\n                      <ng-template\n                        pTemplate=\"filter\"\n                        *ngIf=\"col.type === TableTypeEnum.DATE\"\n                        let-filterModel=\"filterModel\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"\n                            latestFilterValues[col.code!] ?? filterModel?.value\n                          \"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, filterModel, $event)\n                          \"\n                          dateFormat=\"dd/mm/yy\"\n                          placeholder=\"Choose a date\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <!-- MULTISELECT -->\n                      <ng-template\n                        pTemplate=\"filter\"\n                        *ngIf=\"\n                          col.type === TableTypeEnum.MULTISELECT &&\n                          col.filterOptions &&\n                          col.filterOptions.length > 0\n                        \"\n                        let-filterModel=\"filterModel\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"\n                            latestFilterValues[col.code!] ?? filterModel?.value\n                          \"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, filterModel, $event)\n                          \"\n                          display=\"chip\"\n                          placeholder=\"Choose option\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  </ng-container>\n                </div>\n              </div>\n            </ng-container>\n\n            <!-- NON-SORTABLE HEADER -->\n            <ng-template #noSortHeader>\n              <div\n                class=\"header-container d-flex align-items-center justify-content-between\"\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [style.padding]=\"'0px'\"\n                [style.margin]=\"'10px'\"\n              >\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n\n                <ng-container *ngIf=\"hasColumnFilter && col.isFilter !== false\">\n                  <!-- AMOUNT behaves like NUMBER -->\n                  <p-columnFilter\n                    *ngIf=\"col.type === 'AMOUNT'\"\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    [type]=\"getColumnFilterType(col)\"\n                    [currency]=\"getCurrencySymbol(col)\"\n                    [showApplyButton]=\"true\"\n                    [showClearButton]=\"true\"\n                  >\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-filterModel=\"filterModel\"\n                    >\n                      <input\n                        pInputText\n                        type=\"text\"\n                        inputmode=\"decimal\"\n                        [ngModel]=\"\n                          latestFilterValues[col.code!] ?? filterModel?.value\n                        \"\n                        (ngModelChange)=\"\n                          onFilterValueChange(col.code!, filterModel, $event)\n                        \"\n                        placeholder=\"Enter an amount\"\n                      />\n                    </ng-template>\n                  </p-columnFilter>\n\n                  <p-columnFilter\n                    *ngIf=\"col.type !== 'AMOUNT'\"\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    [type]=\"getColumnFilterType(col)\"\n                    [showApplyButton]=\"true\"\n                    [showClearButton]=\"true\"\n                  >\n                    <!-- DATE -->\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-filterModel=\"filterModel\"\n                      *ngIf=\"getColumnFilterType(col) === 'date'\"\n                    >\n                      <p-calendar\n                        [ngModel]=\"\n                          latestFilterValues[col.code!] ?? filterModel?.value\n                        \"\n                        (ngModelChange)=\"\n                          onFilterValueChange(col.code!, filterModel, $event)\n                        \"\n                        dateFormat=\"dd/mm/yy\"\n                      ></p-calendar>\n                    </ng-template>\n\n                    <!-- MULTISELECT -->\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-filterModel=\"filterModel\"\n                      *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                    >\n                      <p-multiSelect\n                        [options]=\"col.filterOptions\"\n                        [ngModel]=\"\n                          latestFilterValues[col.code!] ?? filterModel?.value\n                        \"\n                        (ngModelChange)=\"\n                          onFilterValueChange(col.code!, filterModel, $event)\n                        \"\n                        display=\"chip\"\n                        placeholder=\"Select\"\n                        class=\"custom-multiselect\"\n                      ></p-multiSelect>\n                    </ng-template>\n                  </p-columnFilter>\n                </ng-container>\n              </div>\n            </ng-template>\n          </th>\n\n          <!-- GROUPED HEADER -->\n          <ng-template #groupHeader>\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          </ng-template>\n        </ng-container>\n      </tr>\n\n      <!-- CHILD HEADERS -->\n      <tr *ngIf=\"hasGroupedColumns\">\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.children\">\n            <th\n              *ngFor=\"let child of col.children\"\n              [style.width]=\"child.width || getHeaderWidth(child)\"\n              [style.padding]=\"'0px'\"\n            ></th>\n          </ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n\n    <!-- EMPTY MESSAGE -->\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"p-datatable-emptymessage\">\n        <!-- span all columns -->\n        <td class=\"empty-message-cell\" [attr.colspan]=\"columns.length || 1\">\n          <div class=\"empty-message-wrapper\">\n            <div class=\"empty-message\">\n              <i class=\"pi pi-info-circle\"></i>\n              <p>No records available to display.</p>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n\n    <!-- BODY -->\n    <ng-template\n      pTemplate=\"body\"\n      let-data\n      let-editing=\"editing\"\n      let-ri=\"rowIndex\"\n    >\n      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <ng-container *ngFor=\"let col of columns\">\n          <!-- SIMPLE COLUMNS (no children) -->\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- EDITABLE CELL -->\n            <td\n              *ngIf=\"\n                isEditable(col.code!) && col.type !== TableTypeEnum.ACTION;\n                else normalTD\n              \"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngClass]=\"getDataAlignClass(col)\"\n            >\n              <!-- Editable input for NUMBER/DATE/STRING/MULTISELECT -->\n              <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                <p-cellEditor>\n                  <ng-template pTemplate=\"input\">\n                    <p-multiSelect\n                      appendTo=\"body\"\n                      [ngModel]=\"data[col.code!]\"\n                      [style]=\"{ width: '100%' }\"\n                      (ngModelChange)=\"changeHandler(data.id, col.code, $event)\"\n                      [options]=\"optionValues\"\n                    ></p-multiSelect>\n                  </ng-template>\n                  <ng-template pTemplate=\"output\">\n                    <div class=\"multi-select-container\">\n                      <ng-container *ngFor=\"let rec of data[col.code!]\">\n                        <p-tag [value]=\"rec\"></p-tag>\n                      </ng-container>\n                    </div>\n                  </ng-template>\n                </p-cellEditor>\n              </ng-container>\n\n              <ng-template #datePicker>\n                <ng-container *ngIf=\"isDatePicker(col.code); else normalInput\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-calendar\n                        [inputId]=\"data[col.code!]\"\n                        [ngModel]=\"data[col.code!]\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [dateFormat]=\"'dd/mm/yy'\"\n                      ></p-calendar>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      {{ data[col.code!] | customDate }}\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n              </ng-template>\n\n              <ng-template #normalInput>\n                <p-cellEditor>\n                  <ng-template pTemplate=\"input\">\n                    <input\n                      pInputText\n                      type=\"text\"\n                      [ngModel]=\"data[col.code!]\"\n                      (change)=\"onChange($event, data.id, col.code)\"\n                    />\n                  </ng-template>\n                  <ng-template pTemplate=\"output\">\n                    <ng-container\n                      *ngIf=\"\n                        col.type === TableTypeEnum.AMOUNT;\n                        else normalOutput\n                      \"\n                    >\n                      {{\n                        data[col.code!]\n                          | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                      }}\n                    </ng-container>\n                    <ng-template #normalOutput>\n                      {{ data[col.code!] }}\n                    </ng-template>\n                  </ng-template>\n                </p-cellEditor>\n              </ng-template>\n            </td>\n\n            <!-- NON-EDITABLE CELL (ALWAYS RENDERED) -->\n            <ng-template #normalTD>\n              <td\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [ngClass]=\"[\n                  getDataAlignClass(col),\n                  col.type === TableTypeEnum.ACTION ? 'action-column' : ''\n                ]\"\n              >\n                <!-- ACTION column: built-in edit/delete + custom actions -->\n                <ng-container\n                  *ngIf=\"col.type === TableTypeEnum.ACTION; else nonActionCell\"\n                >\n                  <div class=\"action-buttons-container\">\n                    <!-- built-in delete -->\n                    <button\n                      *ngIf=\"isDelete\"\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-trash\"\n                      (click)=\"Delete(data.id)\"\n                      class=\"p-button-rounded p-button-text\"\n                    ></button>\n\n                    <!-- built-in inline edit -->\n                    <div *ngIf=\"isEdit\">\n                      <button\n                        pInitEditableRow\n                        *ngIf=\"!editing\"\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        icon=\"pi pi-pencil\"\n                        (click)=\"initEditableRow(data)\"\n                        class=\"p-button-rounded p-button-text\"\n                      ></button>\n                      <button\n                        *ngIf=\"editing\"\n                        pSaveEditableRow\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        icon=\"pi pi-check\"\n                        (click)=\"saveEditableRow(data)\"\n                        class=\"p-button-rounded p-button-text\"\n                      ></button>\n                      <button\n                        *ngIf=\"editing\"\n                        pCancelEditableRow\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        icon=\"pi pi-times\"\n                        (click)=\"cancelEditableRow(data)\"\n                        class=\"p-button-rounded p-button-text\"\n                      ></button>\n                    </div>\n\n                    <!-- custom actions -->\n                    <button\n                      *ngFor=\"let act of customActions\"\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      class=\"p-button-rounded p-button-text\"\n                      [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                      [ngClass]=\"act.styleClass\"\n                      (click)=\"onCustomActionClick(act, data)\"\n                    ></button>\n                  </div>\n                </ng-container>\n\n                <!-- NON-ACTION cells -->\n                <ng-template #nonActionCell>\n                  <!-- COMPOSED -->\n                  <ng-container\n                    *ngIf=\"\n                      col.type === TableTypeEnum.COMPOSED;\n                      else nonComposed\n                    \"\n                  >\n                    <div class=\"composed-cell\">\n                      <ng-container\n                        *ngFor=\"\n                          let composedName of col.composedNames;\n                          let i = index\n                        \"\n                      >\n                        <!-- IMAGE -->\n                        <ng-container\n                          *ngIf=\"\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.IMAGE\n                          \"\n                        >\n                          <img\n                            [src]=\"data[col.code!]?.[composedName]\"\n                            alt=\"composed-img\"\n                            class=\"composed-image\"\n                            [ngStyle]=\"\n                              getImageStyle(col.composedStyles?.[composedName])\n                            \"\n                          />\n                        </ng-container>\n\n                        <!-- STRING -->\n                        <ng-container\n                          *ngIf=\"\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.STRING\n                          \"\n                        >\n                          <span\n                            class=\"composed-text\"\n                            [ngStyle]=\"\n                              getTitleStyle(\n                                col.composedStyles?.[composedName]\n                              )\n                            \"\n                          >\n                            {{ data[col.code!]?.[composedName] }}\n                          </span>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </ng-container>\n\n                  <ng-template #nonComposed>\n                    <!-- AMOUNT-->\n                    <ng-container\n                      *ngIf=\"col.type === TableTypeEnum.AMOUNT; else nonAmount\"\n                    >\n                      {{\n                        data[col.code!]\n                          | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                      }}\n                    </ng-container>\n\n                    <ng-template #nonAmount>\n                      <!-- NUMBER-->\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.NUMBER;\n                          else nonNumber\n                        \"\n                      >\n                        {{\n                          formatNumber(\n                            data[col.code!],\n                            col.decimalPlaces,\n                            col.thousandSeparator,\n                            col.decimalSeparator\n                          )\n                        }}\n                      </ng-container>\n\n                      <ng-template #nonNumber>\n                        <!-- DATE -->\n                        <ng-container\n                          *ngIf=\"\n                            col.type === TableTypeEnum.DATE;\n                            else normalTypes\n                          \"\n                        >\n                          {{ formatDate(data[col.code!]) }}\n                        </ng-container>\n\n                        <ng-template #normalTypes>\n                          <!-- STRING, MULTISELECT-->\n                          <ng-container\n                            *ngIf=\"\n                              [\n                                TableTypeEnum.STRING,\n                                TableTypeEnum.MULTISELECT\n                              ].includes(col.type!)\n                            \"\n                          >\n                            {{ data[col.code!] }}\n                          </ng-container>\n                        </ng-template>\n                      </ng-template>\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </td>\n            </ng-template>\n          </ng-container>\n\n          <!-- CHILD COLUMNS -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <td\n                [style.width]=\"child.width || getHeaderWidth(child)\"\n                [ngClass]=\"getDataAlignClass(child)\"\n              >\n                <ng-container\n                  *ngIf=\"isEditable(child.code); else childNormalTD\"\n                >\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText\n                        type=\"text\"\n                        [ngModel]=\"child.code ? data[child.code] : null\"\n                        (change)=\"onChange($event, data.id, child.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      {{ child.code ? data[child.code] : \"\" }}\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <ng-template #childNormalTD>\n                  {{ child.code ? data[child.code] : \"\" }}\n                </ng-template>\n              </td>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{flex:1}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:block;width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{width:100%;height:100%;min-height:180px;display:flex;align-items:center;justify-content:center}.pt-advanced-prime-table .empty-message{text-align:center;color:#888;font-size:1.2rem}.pt-advanced-prime-table .empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}.pt-advanced-prime-table th{white-space:normal;word-wrap:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{text-align:center!important;justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;padding:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container{width:100%;display:flex;justify-content:center!important;align-items:center!important;gap:.35rem}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{padding:.25rem!important;min-width:22px!important;height:22px!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{
+            args: [{ selector: 'pt-advanced-prime-table', template: "<div class=\"pt-advanced-prime-table table-container\">\n  <p-table\n    #dt\n    [value]=\"data\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"isPaginated\"\n    dataKey=\"id\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onFilter)=\"filterColumn($event)\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n  >\n    <!-- COLGROUP: sync header/body widths -->\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        <col\n          *ngFor=\"let col of columns\"\n          [style.width]=\"col.width || getHeaderWidth(col)\"\n        />\n      </colgroup>\n    </ng-template>\n\n    <!-- CAPTION -->\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          <!-- Clear filters -->\n          <button\n            *ngIf=\"hasSearchFilter\"\n            pButton\n            icon=\"pi pi-filter-slash\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"clear(dt)\"\n            title=\"Clear filters\"\n          ></button>\n\n          <!-- Export to Excel Button -->\n          <button\n            *ngIf=\"hasExportExcel\"\n            pButton\n            icon=\"pi pi-file-excel\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportExcel()\"\n            title=\"Export to Excel\"\n          ></button>\n\n          <!-- Export to PDF Button -->\n          <button\n            *ngIf=\"hasExportPDF\"\n            pButton\n            icon=\"pi pi-file-pdf\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportPdf()\"\n            title=\"Export to PDF\"\n          ></button>\n        </div>\n\n        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n            />\n          </p-iconField>\n        </div>\n      </div>\n    </ng-template>\n\n    <!-- HEADER -->\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        <ng-container *ngFor=\"let col of columns\">\n          <th\n            *ngIf=\"!col.children; else groupHeader\"\n            pSortableColumn=\"{{ col.code }}\"\n            [style.width]=\"col.width || getHeaderWidth(col)\"\n            [style.padding]=\"'0px'\"\n            [ngClass]=\"[\n              getHeaderAlignClass(col),\n              col.type === TableTypeEnum.ACTION ? 'action-column' : ''\n            ]\"\n            colspan=\"1\"\n          >\n            <!-- SORTABLE HEADER -->\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <div\n                class=\"header-container d-flex align-items-center justify-content-between\"\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [style.padding]=\"'0px'\"\n                [style.margin]=\"'10px'\"\n              >\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n                <div\n                  class=\"icons d-flex align-items-center\"\n                  [style.width]=\"'77px'\"\n                >\n                  <p-sortIcon field=\"{{ col.code }}\" />\n\n                  <!-- COLUMN FILTERS -->\n                  <ng-container\n                    *ngIf=\"hasColumnFilter && col.isFilter !== false\"\n                  >\n                    <!-- COMPOSED FILTER (uses built-in Apply/Clear) -->\n                    <p-columnFilter\n                      *ngIf=\"col.type === TableTypeEnum.COMPOSED\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      type=\"text\"\n                      [showApplyButton]=\"true\"\n                      [showClearButton]=\"true\"\n                      (onClear)=\"onComposedColumnClear(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-filterModel=\"filterModel\"\n                      >\n                        <div *ngFor=\"let composedName of col.composedNames\">\n                          <ng-container\n                            *ngIf=\"\n                              getComposedFieldType(col, composedName) ===\n                              TableTypeEnum.STRING\n                            \"\n                          >\n                            <p-multiSelect\n                              [options]=\"filters[composedName]?.options\"\n                              [ngModel]=\"filters[composedName]?.value\"\n                              (ngModelChange)=\"\n                                onComposedFilterValueChange(\n                                  col,\n                                  composedName,\n                                  $event,\n                                  filterModel\n                                )\n                              \"\n                              [placeholder]=\"filters[composedName]?.placeholder\"\n                              display=\"chip\"\n                            >\n                              <ng-template let-item pTemplate=\"item\">\n                                <div class=\"custom-multiselect-item\">\n                                  <img\n                                    *ngIf=\"item.image\"\n                                    [src]=\"item.image\"\n                                    alt=\"icon\"\n                                    class=\"filter-image\"\n                                  />\n                                  <span>{{ item.label }}</span>\n                                </div>\n                              </ng-template>\n                            </p-multiSelect>\n                          </ng-container>\n                        </div>\n                      </ng-template>\n                    </p-columnFilter>\n\n                    <!-- OTHER TYPES -->\n                    <p-columnFilter\n                      *ngIf=\"col.type !== TableTypeEnum.COMPOSED\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [showApplyButton]=\"true\"\n                      [showClearButton]=\"true\"\n                      (onClear)=\"onFilterClear(col.code!)\"\n                    >\n                      <!-- NUMBER / AMOUNT: use text input so '.' works -->\n                      <ng-template\n                        pTemplate=\"filter\"\n                        *ngIf=\"\n                          col.type === TableTypeEnum.NUMBER ||\n                          col.type === TableTypeEnum.AMOUNT\n                        \"\n                        let-value\n                      >\n                        <input\n                          pInputText\n                          type=\"text\"\n                          inputmode=\"decimal\"\n                          [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                          (ngModelChange)=\"\n                            onNumberFilterChange(col.code!, $event)\n                          \"\n                          placeholder=\"Enter a number\"\n                        />\n                      </ng-template>\n\n                      <!-- DATE -->\n                      <ng-template\n                        pTemplate=\"filter\"\n                        *ngIf=\"col.type === TableTypeEnum.DATE\"\n                        let-filterModel=\"filterModel\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"\n                            latestFilterValues[col.code!] ?? filterModel?.value\n                          \"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, filterModel, $event)\n                          \"\n                          dateFormat=\"dd/mm/yy\"\n                          placeholder=\"Choose a date\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <!-- MULTISELECT -->\n                      <ng-template\n                        pTemplate=\"filter\"\n                        *ngIf=\"\n                          col.type === TableTypeEnum.MULTISELECT &&\n                          col.filterOptions &&\n                          col.filterOptions.length > 0\n                        \"\n                        let-filterModel=\"filterModel\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"\n                            latestFilterValues[col.code!] ?? filterModel?.value\n                          \"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, filterModel, $event)\n                          \"\n                          display=\"chip\"\n                          placeholder=\"Choose option\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  </ng-container>\n                </div>\n              </div>\n            </ng-container>\n\n            <!-- NON-SORTABLE HEADER -->\n            <ng-template #noSortHeader>\n              <div\n                class=\"header-container d-flex align-items-center justify-content-between\"\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [style.padding]=\"'0px'\"\n                [style.margin]=\"'10px'\"\n              >\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n\n                <ng-container *ngIf=\"hasColumnFilter && col.isFilter !== false\">\n                  <!-- AMOUNT behaves like NUMBER -->\n                  <p-columnFilter\n                    *ngIf=\"col.type === 'AMOUNT'\"\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    [type]=\"getColumnFilterType(col)\"\n                    [currency]=\"getCurrencySymbol(col)\"\n                    [showApplyButton]=\"true\"\n                    [showClearButton]=\"true\"\n                  >\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-filterModel=\"filterModel\"\n                    >\n                      <input\n                        pInputText\n                        type=\"text\"\n                        inputmode=\"decimal\"\n                        [ngModel]=\"\n                          latestFilterValues[col.code!] ?? filterModel?.value\n                        \"\n                        (ngModelChange)=\"\n                          onFilterValueChange(col.code!, filterModel, $event)\n                        \"\n                        placeholder=\"Enter an amount\"\n                      />\n                    </ng-template>\n                  </p-columnFilter>\n\n                  <p-columnFilter\n                    *ngIf=\"col.type !== 'AMOUNT'\"\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    [type]=\"getColumnFilterType(col)\"\n                    [showApplyButton]=\"true\"\n                    [showClearButton]=\"true\"\n                  >\n                    <!-- DATE -->\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-filterModel=\"filterModel\"\n                      *ngIf=\"getColumnFilterType(col) === 'date'\"\n                    >\n                      <p-calendar\n                        [ngModel]=\"\n                          latestFilterValues[col.code!] ?? filterModel?.value\n                        \"\n                        (ngModelChange)=\"\n                          onFilterValueChange(col.code!, filterModel, $event)\n                        \"\n                        dateFormat=\"dd/mm/yy\"\n                      ></p-calendar>\n                    </ng-template>\n\n                    <!-- MULTISELECT -->\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-filterModel=\"filterModel\"\n                      *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                    >\n                      <p-multiSelect\n                        [options]=\"col.filterOptions\"\n                        [ngModel]=\"\n                          latestFilterValues[col.code!] ?? filterModel?.value\n                        \"\n                        (ngModelChange)=\"\n                          onFilterValueChange(col.code!, filterModel, $event)\n                        \"\n                        display=\"chip\"\n                        placeholder=\"Select\"\n                        class=\"custom-multiselect\"\n                      ></p-multiSelect>\n                    </ng-template>\n                  </p-columnFilter>\n                </ng-container>\n              </div>\n            </ng-template>\n          </th>\n\n          <!-- GROUPED HEADER -->\n          <ng-template #groupHeader>\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          </ng-template>\n        </ng-container>\n      </tr>\n\n      <!-- CHILD HEADERS -->\n      <tr *ngIf=\"hasGroupedColumns\">\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.children\">\n            <th\n              *ngFor=\"let child of col.children\"\n              [style.width]=\"child.width || getHeaderWidth(child)\"\n              [style.padding]=\"'0px'\"\n            ></th>\n          </ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n\n    <!-- EMPTY MESSAGE -->\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"p-datatable-emptymessage\">\n        <!-- span all columns -->\n        <td class=\"empty-message-cell\" [attr.colspan]=\"columns.length || 1\">\n          <div class=\"empty-message-wrapper\">\n            <div class=\"empty-message\">\n              <i class=\"pi pi-info-circle\"></i>\n              <p>No records available to display.</p>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n\n    <!-- BODY -->\n    <ng-template\n      pTemplate=\"body\"\n      let-data\n      let-editing=\"editing\"\n      let-ri=\"rowIndex\"\n    >\n      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <ng-container *ngFor=\"let col of columns\">\n          <!-- SIMPLE COLUMNS (no children) -->\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- EDITABLE CELL -->\n            <td\n              *ngIf=\"\n                isEditable(col.code!) && col.type !== TableTypeEnum.ACTION;\n                else normalTD\n              \"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngClass]=\"getDataAlignClass(col)\"\n            >\n              <!-- Editable input for NUMBER/DATE/STRING/MULTISELECT -->\n              <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                <p-cellEditor>\n                  <ng-template pTemplate=\"input\">\n                    <p-multiSelect\n                      appendTo=\"body\"\n                      [ngModel]=\"data[col.code!]\"\n                      [style]=\"{ width: '100%' }\"\n                      (ngModelChange)=\"changeHandler(data.id, col.code, $event)\"\n                      [options]=\"optionValues\"\n                    ></p-multiSelect>\n                  </ng-template>\n                  <ng-template pTemplate=\"output\">\n                    <div class=\"multi-select-container\">\n                      <ng-container *ngFor=\"let rec of data[col.code!]\">\n                        <p-tag [value]=\"rec\"></p-tag>\n                      </ng-container>\n                    </div>\n                  </ng-template>\n                </p-cellEditor>\n              </ng-container>\n\n              <ng-template #datePicker>\n                <ng-container *ngIf=\"isDatePicker(col.code); else normalInput\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-calendar\n                        [inputId]=\"data[col.code!]\"\n                        [ngModel]=\"data[col.code!]\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [dateFormat]=\"'dd/mm/yy'\"\n                      ></p-calendar>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      {{ data[col.code!] | customDate }}\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n              </ng-template>\n\n              <ng-template #normalInput>\n                <p-cellEditor>\n                  <ng-template pTemplate=\"input\">\n                    <input\n                      pInputText\n                      type=\"text\"\n                      [ngModel]=\"data[col.code!]\"\n                      (change)=\"onChange($event, data.id, col.code)\"\n                    />\n                  </ng-template>\n                  <ng-template pTemplate=\"output\">\n                    <ng-container\n                      *ngIf=\"\n                        col.type === TableTypeEnum.AMOUNT;\n                        else normalOutput\n                      \"\n                    >\n                      {{\n                        data[col.code!]\n                          | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                      }}\n                    </ng-container>\n                    <ng-template #normalOutput>\n                      {{ data[col.code!] }}\n                    </ng-template>\n                  </ng-template>\n                </p-cellEditor>\n              </ng-template>\n            </td>\n\n            <!-- NON-EDITABLE CELL (ALWAYS RENDERED) -->\n            <ng-template #normalTD>\n              <td\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [ngClass]=\"[\n                  getDataAlignClass(col),\n                  col.type === TableTypeEnum.ACTION ? 'action-column' : ''\n                ]\"\n              >\n                <!-- ACTION column: built-in edit/delete + custom actions -->\n                <ng-container\n                  *ngIf=\"col.type === TableTypeEnum.ACTION; else nonActionCell\"\n                >\n                  <div class=\"action-buttons-container\">\n                    <!-- built-in delete -->\n                    <button\n                      *ngIf=\"isDelete\"\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-trash\"\n                      (click)=\"Delete(data.id)\"\n                      class=\"p-button-rounded p-button-text\"\n                    ></button>\n\n                    <!-- built-in inline edit -->\n                    <div *ngIf=\"isEdit\">\n                      <button\n                        pInitEditableRow\n                        *ngIf=\"!editing\"\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        icon=\"pi pi-pencil\"\n                        (click)=\"initEditableRow(data)\"\n                        class=\"p-button-rounded p-button-text\"\n                      ></button>\n                      <button\n                        *ngIf=\"editing\"\n                        pSaveEditableRow\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        icon=\"pi pi-check\"\n                        (click)=\"saveEditableRow(data)\"\n                        class=\"p-button-rounded p-button-text\"\n                      ></button>\n                      <button\n                        *ngIf=\"editing\"\n                        pCancelEditableRow\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        icon=\"pi pi-times\"\n                        (click)=\"cancelEditableRow(data)\"\n                        class=\"p-button-rounded p-button-text\"\n                      ></button>\n                    </div>\n\n                    <!-- custom actions -->\n                    <button\n                      *ngFor=\"let act of customActions\"\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      class=\"p-button-rounded p-button-text\"\n                      [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                      [ngClass]=\"act.styleClass\"\n                      (click)=\"onCustomActionClick(act, data)\"\n                    ></button>\n                  </div>\n                </ng-container>\n\n                <!-- NON-ACTION cells -->\n                <ng-template #nonActionCell>\n                  <!-- COMPOSED -->\n                  <ng-container\n                    *ngIf=\"\n                      col.type === TableTypeEnum.COMPOSED;\n                      else nonComposed\n                    \"\n                  >\n                    <div class=\"composed-cell\">\n                      <ng-container\n                        *ngFor=\"\n                          let composedName of col.composedNames;\n                          let i = index\n                        \"\n                      >\n                        <!-- IMAGE -->\n                        <ng-container\n                          *ngIf=\"\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.IMAGE\n                          \"\n                        >\n                          <img\n                            [src]=\"data[col.code!]?.[composedName]\"\n                            alt=\"composed-img\"\n                            class=\"composed-image\"\n                            [ngStyle]=\"\n                              getImageStyle(col.composedStyles?.[composedName])\n                            \"\n                          />\n                        </ng-container>\n\n                        <!-- STRING -->\n                        <ng-container\n                          *ngIf=\"\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.STRING\n                          \"\n                        >\n                          <span\n                            class=\"composed-text\"\n                            [ngStyle]=\"\n                              getTitleStyle(\n                                col.composedStyles?.[composedName]\n                              )\n                            \"\n                          >\n                            {{ data[col.code!]?.[composedName] }}\n                          </span>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </ng-container>\n\n                  <ng-template #nonComposed>\n                    <!-- AMOUNT-->\n                    <ng-container\n                      *ngIf=\"col.type === TableTypeEnum.AMOUNT; else nonAmount\"\n                    >\n                      {{\n                        data[col.code!]\n                          | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                      }}\n                    </ng-container>\n\n                    <ng-template #nonAmount>\n                      <!-- NUMBER-->\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.NUMBER;\n                          else nonNumber\n                        \"\n                      >\n                        {{\n                          formatNumber(\n                            data[col.code!],\n                            col.decimalPlaces,\n                            col.thousandSeparator,\n                            col.decimalSeparator\n                          )\n                        }}\n                      </ng-container>\n\n                      <ng-template #nonNumber>\n                        <!-- DATE -->\n                        <ng-container\n                          *ngIf=\"\n                            col.type === TableTypeEnum.DATE ||\n                              col.type === TableTypeEnum.DATETIME;\n                            else normalTypes\n                          \"\n                        >\n                          <ng-container *ngIf=\"col.type === TableTypeEnum.DATE\">\n                            {{\n                              formatDateWithColumn(\n                                parseAnyDate(data[col.code!]),\n                                col\n                              )\n                            }}\n                          </ng-container>\n\n                          <ng-container\n                            *ngIf=\"col.type === TableTypeEnum.DATETIME\"\n                          >\n                            {{\n                              formatDateTimeWithColumn(\n                                parseAnyDate(data[col.code!]),\n                                col\n                              )\n                            }}\n                          </ng-container>\n                        </ng-container>\n\n                        <ng-template #normalTypes>\n                          <!-- STRING, MULTISELECT-->\n                          <ng-container\n                            *ngIf=\"\n                              [\n                                TableTypeEnum.STRING,\n                                TableTypeEnum.MULTISELECT\n                              ].includes(col.type!)\n                            \"\n                          >\n                            {{ data[col.code!] }}\n                          </ng-container>\n                        </ng-template>\n                      </ng-template>\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </td>\n            </ng-template>\n          </ng-container>\n\n          <!-- CHILD COLUMNS -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <td\n                [style.width]=\"child.width || getHeaderWidth(child)\"\n                [ngClass]=\"getDataAlignClass(child)\"\n              >\n                <ng-container\n                  *ngIf=\"isEditable(child.code); else childNormalTD\"\n                >\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText\n                        type=\"text\"\n                        [ngModel]=\"child.code ? data[child.code] : null\"\n                        (change)=\"onChange($event, data.id, child.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      {{ child.code ? data[child.code] : \"\" }}\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <ng-template #childNormalTD>\n                  {{ child.code ? data[child.code] : \"\" }}\n                </ng-template>\n              </td>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{flex:1}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:block;width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{width:100%;height:100%;min-height:180px;display:flex;align-items:center;justify-content:center}.pt-advanced-prime-table .empty-message{text-align:center;color:#888;font-size:1.2rem}.pt-advanced-prime-table .empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}.pt-advanced-prime-table th{white-space:normal;word-wrap:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{text-align:center!important;justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;padding:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container{width:100%;display:flex;justify-content:center!important;align-items:center!important;gap:.35rem}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{padding:.25rem!important;min-width:22px!important;height:22px!important}\n"] }]
+        }], propDecorators: { data: [{
                 type: Input
             }], columns: [{
                 type: Input
@@ -1198,6 +1143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
 var TableTypeEnum;
 (function (TableTypeEnum) {
     TableTypeEnum["DATE"] = "DATE";
+    TableTypeEnum["DATETIME"] = "DATETIME";
     TableTypeEnum["STRING"] = "STRING";
     TableTypeEnum["AMOUNT"] = "AMOUNT";
     TableTypeEnum["NUMBER"] = "NUMBER";
@@ -2185,11 +2131,11 @@ class PTDropdownComponent {
         return 'left';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTDropdownComponent, selector: "pt-dropdown", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "<!-- ng-prime-tools/projects/ng-prime-tools/src/lib/pt-dropdown/pt-dropdown.component.html -->\n<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{ width: formField.width || '100%' }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n\n  <p-dropdown\n    [formControlName]=\"formField.name\"\n    [options]=\"formField.options\"\n    [placeholder]=\"formField.placeholder || 'Select an option'\"\n    optionLabel=\"label\"\n  >\n    <!-- Selected value template -->\n    <ng-template pTemplate=\"selectedItem\" let-option>\n      <ng-container *ngIf=\"option; else placeholderTpl\">\n        <div class=\"pt-dropdown-item\">\n          <ng-container *ngIf=\"getResolvedIcon(option) as iconMeta\">\n            <!-- IMAGE ICON -->\n            <img\n              *ngIf=\"iconMeta.type === 'image'\"\n              [src]=\"iconMeta.imageUrl\"\n              [ngStyle]=\"iconMeta.imageStyle\"\n              class=\"pt-dropdown-icon-image\"\n            />\n\n            <!-- FONT ICON (PrimeNG / FontAwesome) -->\n            <i\n              *ngIf=\"iconMeta.type === 'font'\"\n              [ngClass]=\"iconMeta.fontIconClass\"\n              [ngStyle]=\"iconMeta.fontIconStyle\"\n              class=\"pt-dropdown-icon-font\"\n            ></i>\n          </ng-container>\n\n          <span class=\"pt-dropdown-label\">{{ option.label }}</span>\n        </div>\n      </ng-container>\n    </ng-template>\n\n    <!-- Placeholder when no value selected -->\n    <ng-template #placeholderTpl>\n      <span>{{ formField.placeholder || \"Select an option\" }}</span>\n    </ng-template>\n\n    <!-- Items template -->\n    <ng-template pTemplate=\"item\" let-option>\n      <div class=\"pt-dropdown-item\">\n        <ng-container *ngIf=\"getResolvedIcon(option) as iconMeta\">\n          <img\n            *ngIf=\"iconMeta.type === 'image'\"\n            [src]=\"iconMeta.imageUrl\"\n            [ngStyle]=\"iconMeta.imageStyle\"\n            class=\"pt-dropdown-icon-image\"\n          />\n\n          <i\n            *ngIf=\"iconMeta.type === 'font'\"\n            [ngClass]=\"iconMeta.fontIconClass\"\n            [ngStyle]=\"iconMeta.fontIconStyle\"\n            class=\"pt-dropdown-icon-font\"\n          ></i>\n        </ng-container>\n\n        <span class=\"pt-dropdown-label\">{{ option.label }}</span>\n      </div>\n    </ng-template>\n  </p-dropdown>\n\n  <div\n    *ngIf=\"\n      formGroup.get(formField.name)?.invalid &&\n      formGroup.get(formField.name)?.touched\n    \"\n  >\n    <small class=\"p-error\">{{ getErrorMessage() }}</small>\n  </div>\n</div>\n", styles: [".form-field{display:flex;flex-direction:column;gap:.25rem}.pt-dropdown-item{display:flex;align-items:center;gap:.5rem}.pt-dropdown-icon-image{object-fit:cover}.pt-dropdown-icon-font{display:inline-flex;align-items:center;justify-content:center}.pt-dropdown-label{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$5.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTDropdownComponent, selector: "pt-dropdown", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "<!-- ng-prime-tools/projects/ng-prime-tools/src/lib/pt-dropdown/pt-dropdown.component.html -->\n<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{ width: formField.width || '100%' }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n\n  <p-dropdown\n    [formControlName]=\"formField.name\"\n    [options]=\"formField.options\"\n    [placeholder]=\"formField.placeholder || 'Select an option'\"\n    optionLabel=\"label\"\n  >\n    <!-- Selected value template -->\n    <ng-template pTemplate=\"selectedItem\" let-option>\n      <ng-container *ngIf=\"option; else placeholderTpl\">\n        <div class=\"pt-dropdown-item\">\n          <ng-container *ngIf=\"getResolvedIcon(option) as iconMeta\">\n            <!-- IMAGE ICON -->\n            <img\n              *ngIf=\"iconMeta.type === 'image'\"\n              [src]=\"iconMeta.imageUrl\"\n              [ngStyle]=\"iconMeta.imageStyle\"\n              class=\"pt-dropdown-icon-image\"\n            />\n\n            <!-- FONT ICON (PrimeNG / FontAwesome) -->\n            <i\n              *ngIf=\"iconMeta.type === 'font'\"\n              [ngClass]=\"iconMeta.fontIconClass\"\n              [ngStyle]=\"iconMeta.fontIconStyle\"\n              class=\"pt-dropdown-icon-font\"\n            ></i>\n          </ng-container>\n\n          <span class=\"pt-dropdown-label\">{{ option.label }}</span>\n        </div>\n      </ng-container>\n    </ng-template>\n\n    <!-- Placeholder when no value selected -->\n    <ng-template #placeholderTpl>\n      <span>{{ formField.placeholder || \"Select an option\" }}</span>\n    </ng-template>\n\n    <!-- Items template -->\n    <ng-template pTemplate=\"item\" let-option>\n      <div class=\"pt-dropdown-item\">\n        <ng-container *ngIf=\"getResolvedIcon(option) as iconMeta\">\n          <img\n            *ngIf=\"iconMeta.type === 'image'\"\n            [src]=\"iconMeta.imageUrl\"\n            [ngStyle]=\"iconMeta.imageStyle\"\n            class=\"pt-dropdown-icon-image\"\n          />\n\n          <i\n            *ngIf=\"iconMeta.type === 'font'\"\n            [ngClass]=\"iconMeta.fontIconClass\"\n            [ngStyle]=\"iconMeta.fontIconStyle\"\n            class=\"pt-dropdown-icon-font\"\n          ></i>\n        </ng-container>\n\n        <span class=\"pt-dropdown-label\">{{ option.label }}</span>\n      </div>\n    </ng-template>\n  </p-dropdown>\n\n  <div\n    *ngIf=\"\n      formGroup.get(formField.name)?.invalid &&\n      formGroup.get(formField.name)?.touched\n    \"\n  >\n    <small class=\"p-error\">{{ getErrorMessage() }}</small>\n  </div>\n</div>\n", styles: [".form-field{display:flex;flex-direction:column;margin-bottom:1rem;gap:.25rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.pt-dropdown-item{display:flex;align-items:center;gap:.5rem}.pt-dropdown-icon-image{object-fit:cover}.pt-dropdown-icon-font{display:inline-flex;align-items:center;justify-content:center}.pt-dropdown-label{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$5.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-dropdown', template: "<!-- ng-prime-tools/projects/ng-prime-tools/src/lib/pt-dropdown/pt-dropdown.component.html -->\n<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{ width: formField.width || '100%' }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n\n  <p-dropdown\n    [formControlName]=\"formField.name\"\n    [options]=\"formField.options\"\n    [placeholder]=\"formField.placeholder || 'Select an option'\"\n    optionLabel=\"label\"\n  >\n    <!-- Selected value template -->\n    <ng-template pTemplate=\"selectedItem\" let-option>\n      <ng-container *ngIf=\"option; else placeholderTpl\">\n        <div class=\"pt-dropdown-item\">\n          <ng-container *ngIf=\"getResolvedIcon(option) as iconMeta\">\n            <!-- IMAGE ICON -->\n            <img\n              *ngIf=\"iconMeta.type === 'image'\"\n              [src]=\"iconMeta.imageUrl\"\n              [ngStyle]=\"iconMeta.imageStyle\"\n              class=\"pt-dropdown-icon-image\"\n            />\n\n            <!-- FONT ICON (PrimeNG / FontAwesome) -->\n            <i\n              *ngIf=\"iconMeta.type === 'font'\"\n              [ngClass]=\"iconMeta.fontIconClass\"\n              [ngStyle]=\"iconMeta.fontIconStyle\"\n              class=\"pt-dropdown-icon-font\"\n            ></i>\n          </ng-container>\n\n          <span class=\"pt-dropdown-label\">{{ option.label }}</span>\n        </div>\n      </ng-container>\n    </ng-template>\n\n    <!-- Placeholder when no value selected -->\n    <ng-template #placeholderTpl>\n      <span>{{ formField.placeholder || \"Select an option\" }}</span>\n    </ng-template>\n\n    <!-- Items template -->\n    <ng-template pTemplate=\"item\" let-option>\n      <div class=\"pt-dropdown-item\">\n        <ng-container *ngIf=\"getResolvedIcon(option) as iconMeta\">\n          <img\n            *ngIf=\"iconMeta.type === 'image'\"\n            [src]=\"iconMeta.imageUrl\"\n            [ngStyle]=\"iconMeta.imageStyle\"\n            class=\"pt-dropdown-icon-image\"\n          />\n\n          <i\n            *ngIf=\"iconMeta.type === 'font'\"\n            [ngClass]=\"iconMeta.fontIconClass\"\n            [ngStyle]=\"iconMeta.fontIconStyle\"\n            class=\"pt-dropdown-icon-font\"\n          ></i>\n        </ng-container>\n\n        <span class=\"pt-dropdown-label\">{{ option.label }}</span>\n      </div>\n    </ng-template>\n  </p-dropdown>\n\n  <div\n    *ngIf=\"\n      formGroup.get(formField.name)?.invalid &&\n      formGroup.get(formField.name)?.touched\n    \"\n  >\n    <small class=\"p-error\">{{ getErrorMessage() }}</small>\n  </div>\n</div>\n", styles: [".form-field{display:flex;flex-direction:column;gap:.25rem}.pt-dropdown-item{display:flex;align-items:center;gap:.5rem}.pt-dropdown-icon-image{object-fit:cover}.pt-dropdown-icon-font{display:inline-flex;align-items:center;justify-content:center}.pt-dropdown-label{display:inline-block}\n"] }]
+            args: [{ selector: 'pt-dropdown', template: "<!-- ng-prime-tools/projects/ng-prime-tools/src/lib/pt-dropdown/pt-dropdown.component.html -->\n<div\n  [formGroup]=\"formGroup\"\n  class=\"form-field\"\n  [ngStyle]=\"{ width: formField.width || '100%' }\"\n  *ngIf=\"!formField.hidden\"\n>\n  <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n\n  <p-dropdown\n    [formControlName]=\"formField.name\"\n    [options]=\"formField.options\"\n    [placeholder]=\"formField.placeholder || 'Select an option'\"\n    optionLabel=\"label\"\n  >\n    <!-- Selected value template -->\n    <ng-template pTemplate=\"selectedItem\" let-option>\n      <ng-container *ngIf=\"option; else placeholderTpl\">\n        <div class=\"pt-dropdown-item\">\n          <ng-container *ngIf=\"getResolvedIcon(option) as iconMeta\">\n            <!-- IMAGE ICON -->\n            <img\n              *ngIf=\"iconMeta.type === 'image'\"\n              [src]=\"iconMeta.imageUrl\"\n              [ngStyle]=\"iconMeta.imageStyle\"\n              class=\"pt-dropdown-icon-image\"\n            />\n\n            <!-- FONT ICON (PrimeNG / FontAwesome) -->\n            <i\n              *ngIf=\"iconMeta.type === 'font'\"\n              [ngClass]=\"iconMeta.fontIconClass\"\n              [ngStyle]=\"iconMeta.fontIconStyle\"\n              class=\"pt-dropdown-icon-font\"\n            ></i>\n          </ng-container>\n\n          <span class=\"pt-dropdown-label\">{{ option.label }}</span>\n        </div>\n      </ng-container>\n    </ng-template>\n\n    <!-- Placeholder when no value selected -->\n    <ng-template #placeholderTpl>\n      <span>{{ formField.placeholder || \"Select an option\" }}</span>\n    </ng-template>\n\n    <!-- Items template -->\n    <ng-template pTemplate=\"item\" let-option>\n      <div class=\"pt-dropdown-item\">\n        <ng-container *ngIf=\"getResolvedIcon(option) as iconMeta\">\n          <img\n            *ngIf=\"iconMeta.type === 'image'\"\n            [src]=\"iconMeta.imageUrl\"\n            [ngStyle]=\"iconMeta.imageStyle\"\n            class=\"pt-dropdown-icon-image\"\n          />\n\n          <i\n            *ngIf=\"iconMeta.type === 'font'\"\n            [ngClass]=\"iconMeta.fontIconClass\"\n            [ngStyle]=\"iconMeta.fontIconStyle\"\n            class=\"pt-dropdown-icon-font\"\n          ></i>\n        </ng-container>\n\n        <span class=\"pt-dropdown-label\">{{ option.label }}</span>\n      </div>\n    </ng-template>\n  </p-dropdown>\n\n  <div\n    *ngIf=\"\n      formGroup.get(formField.name)?.invalid &&\n      formGroup.get(formField.name)?.touched\n    \"\n  >\n    <small class=\"p-error\">{{ getErrorMessage() }}</small>\n  </div>\n</div>\n", styles: [".form-field{display:flex;flex-direction:column;margin-bottom:1rem;gap:.25rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;font-size:1rem}.pt-dropdown-item{display:flex;align-items:center;gap:.5rem}.pt-dropdown-icon-image{object-fit:cover}.pt-dropdown-icon-font{display:inline-flex;align-items:center;justify-content:center}.pt-dropdown-label{display:inline-block}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], formField: [{
@@ -4556,11 +4502,11 @@ class PTDialogComponent {
         this.visibleChange.emit(v);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTDialogComponent, selector: "pt-dialog", inputs: { config: "config", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<p-dialog\n  [visible]=\"_internalVisible\"\n  (visibleChange)=\"onInternalVisibleChange($event)\"\n  [header]=\"config.header\"\n  [modal]=\"config.modal\"\n  [style]=\"config.style\"\n  [breakpoints]=\"config.breakpoints\"\n  [closable]=\"config.closable\"\n  [draggable]=\"config.draggable\"\n  [resizable]=\"config.resizable\"\n  [maximizable]=\"config.maximizable\"\n  [dismissableMask]=\"config.dismissableMask\"\n  [closeOnEscape]=\"config.closeOnEscape\"\n  [blockScroll]=\"config.blockScroll\"\n  [position]=\"primePosition\"\n  [contentStyle]=\"config.contentStyle\"\n  [styleClass]=\"dialogStyleClass\"\n>\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <div\n      class=\"flex align-items-center justify-content-between w-full px-4 pt-3 pb-2\"\n    >\n      <div class=\"flex align-items-center gap-2\">\n        <i\n          *ngIf=\"config.headerIconClass\"\n          [ngClass]=\"config.headerIconClass\"\n        ></i>\n        <ng-content select=\"[ptDialogHeader]\"></ng-content>\n        <span *ngIf=\"config.header\" class=\"font-bold text-lg\">\n          {{ config.header }}\n        </span>\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- BODY -->\n  <div\n    class=\"surface-50 px-4 py-4 flex flex-column gap-3\"\n    [ngStyle]=\"bodyStyle\"\n  >\n    <ng-content select=\"[ptDialogContent]\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n\n  <!-- FOOTER -->\n  <ng-template pTemplate=\"footer\" *ngIf=\"config.showFooter !== false\">\n    <div class=\"surface-100 px-4 py-2 flex justify-content-end gap-2\">\n      <ng-content select=\"[ptDialogFooter]\"></ng-content>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [":host ::ng-deep .pt-dialog-header-blue .p-dialog-header{background-color:#e0f2ff;border-bottom:0}:host ::ng-deep .pt-dialog-header-blue .p-dialog-footer{background-color:#f5f6f8!important;border-top:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTDialogComponent, selector: "pt-dialog", inputs: { config: "config", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<p-dialog\n  [visible]=\"_internalVisible\"\n  (visibleChange)=\"onInternalVisibleChange($event)\"\n  [header]=\"config.header\"\n  [modal]=\"config.modal\"\n  [style]=\"config.style\"\n  [breakpoints]=\"config.breakpoints\"\n  [closable]=\"config.closable\"\n  [draggable]=\"config.draggable\"\n  [resizable]=\"config.resizable\"\n  [maximizable]=\"config.maximizable\"\n  [dismissableMask]=\"config.dismissableMask\"\n  [closeOnEscape]=\"config.closeOnEscape\"\n  [blockScroll]=\"config.blockScroll\"\n  [position]=\"primePosition\"\n  [contentStyle]=\"config.contentStyle\"\n  [styleClass]=\"dialogStyleClass\"\n>\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <div class=\"pt-dialog-header-inner\">\n      <div class=\"pt-dialog-header-left\">\n        <i\n          *ngIf=\"config.headerIconClass\"\n          class=\"pt-dialog-header-icon\"\n          [ngClass]=\"config.headerIconClass\"\n        ></i>\n\n        <ng-content select=\"[ptDialogHeader]\"></ng-content>\n\n        <span *ngIf=\"config.header\" class=\"pt-dialog-header-title\">\n          {{ config.header }}\n        </span>\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- BODY -->\n  <div class=\"pt-dialog-body\" [ngStyle]=\"bodyStyle\">\n    <div class=\"pt-dialog-body-inner\">\n      <ng-content select=\"[ptDialogContent]\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- FOOTER -->\n  <ng-template pTemplate=\"footer\" *ngIf=\"config.showFooter !== false\">\n    <div class=\"surface-100 px-4 py-2 flex justify-content-end gap-2\">\n      <ng-content select=\"[ptDialogFooter]\"></ng-content>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [":host ::ng-deep .pt-dialog-header-blue .p-dialog-header{background-color:#e0f2ff;border-bottom:0}:host ::ng-deep .pt-dialog-header-blue .p-dialog-footer{background-color:#f5f6f8!important;border-top:0!important}.pt-dialog-header-inner{width:100%;padding:1rem 1rem .75rem;display:flex;align-items:center;justify-content:space-between}.pt-dialog-header-left{display:flex;align-items:center}.pt-dialog-header-icon{margin-right:.5rem}.pt-dialog-header-title{font-weight:700;font-size:1.125rem}.pt-dialog-body{padding:1.25rem 1rem 1rem;display:flex;justify-content:center}.pt-dialog-body-inner{width:100%;max-width:100%;display:flex;flex-direction:column;gap:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-dialog', template: "<p-dialog\n  [visible]=\"_internalVisible\"\n  (visibleChange)=\"onInternalVisibleChange($event)\"\n  [header]=\"config.header\"\n  [modal]=\"config.modal\"\n  [style]=\"config.style\"\n  [breakpoints]=\"config.breakpoints\"\n  [closable]=\"config.closable\"\n  [draggable]=\"config.draggable\"\n  [resizable]=\"config.resizable\"\n  [maximizable]=\"config.maximizable\"\n  [dismissableMask]=\"config.dismissableMask\"\n  [closeOnEscape]=\"config.closeOnEscape\"\n  [blockScroll]=\"config.blockScroll\"\n  [position]=\"primePosition\"\n  [contentStyle]=\"config.contentStyle\"\n  [styleClass]=\"dialogStyleClass\"\n>\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <div\n      class=\"flex align-items-center justify-content-between w-full px-4 pt-3 pb-2\"\n    >\n      <div class=\"flex align-items-center gap-2\">\n        <i\n          *ngIf=\"config.headerIconClass\"\n          [ngClass]=\"config.headerIconClass\"\n        ></i>\n        <ng-content select=\"[ptDialogHeader]\"></ng-content>\n        <span *ngIf=\"config.header\" class=\"font-bold text-lg\">\n          {{ config.header }}\n        </span>\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- BODY -->\n  <div\n    class=\"surface-50 px-4 py-4 flex flex-column gap-3\"\n    [ngStyle]=\"bodyStyle\"\n  >\n    <ng-content select=\"[ptDialogContent]\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n\n  <!-- FOOTER -->\n  <ng-template pTemplate=\"footer\" *ngIf=\"config.showFooter !== false\">\n    <div class=\"surface-100 px-4 py-2 flex justify-content-end gap-2\">\n      <ng-content select=\"[ptDialogFooter]\"></ng-content>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [":host ::ng-deep .pt-dialog-header-blue .p-dialog-header{background-color:#e0f2ff;border-bottom:0}:host ::ng-deep .pt-dialog-header-blue .p-dialog-footer{background-color:#f5f6f8!important;border-top:0!important}\n"] }]
+            args: [{ selector: 'pt-dialog', template: "<p-dialog\n  [visible]=\"_internalVisible\"\n  (visibleChange)=\"onInternalVisibleChange($event)\"\n  [header]=\"config.header\"\n  [modal]=\"config.modal\"\n  [style]=\"config.style\"\n  [breakpoints]=\"config.breakpoints\"\n  [closable]=\"config.closable\"\n  [draggable]=\"config.draggable\"\n  [resizable]=\"config.resizable\"\n  [maximizable]=\"config.maximizable\"\n  [dismissableMask]=\"config.dismissableMask\"\n  [closeOnEscape]=\"config.closeOnEscape\"\n  [blockScroll]=\"config.blockScroll\"\n  [position]=\"primePosition\"\n  [contentStyle]=\"config.contentStyle\"\n  [styleClass]=\"dialogStyleClass\"\n>\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <div class=\"pt-dialog-header-inner\">\n      <div class=\"pt-dialog-header-left\">\n        <i\n          *ngIf=\"config.headerIconClass\"\n          class=\"pt-dialog-header-icon\"\n          [ngClass]=\"config.headerIconClass\"\n        ></i>\n\n        <ng-content select=\"[ptDialogHeader]\"></ng-content>\n\n        <span *ngIf=\"config.header\" class=\"pt-dialog-header-title\">\n          {{ config.header }}\n        </span>\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- BODY -->\n  <div class=\"pt-dialog-body\" [ngStyle]=\"bodyStyle\">\n    <div class=\"pt-dialog-body-inner\">\n      <ng-content select=\"[ptDialogContent]\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- FOOTER -->\n  <ng-template pTemplate=\"footer\" *ngIf=\"config.showFooter !== false\">\n    <div class=\"surface-100 px-4 py-2 flex justify-content-end gap-2\">\n      <ng-content select=\"[ptDialogFooter]\"></ng-content>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [":host ::ng-deep .pt-dialog-header-blue .p-dialog-header{background-color:#e0f2ff;border-bottom:0}:host ::ng-deep .pt-dialog-header-blue .p-dialog-footer{background-color:#f5f6f8!important;border-top:0!important}.pt-dialog-header-inner{width:100%;padding:1rem 1rem .75rem;display:flex;align-items:center;justify-content:space-between}.pt-dialog-header-left{display:flex;align-items:center}.pt-dialog-header-icon{margin-right:.5rem}.pt-dialog-header-title{font-weight:700;font-size:1.125rem}.pt-dialog-body{padding:1.25rem 1rem 1rem;display:flex;justify-content:center}.pt-dialog-body-inner{width:100%;max-width:100%;display:flex;flex-direction:column;gap:.75rem}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], visible: [{