ng-prime-tools 1.0.31 → 1.0.32

package/fesm2022/ng-prime-tools.mjs

@@ -7,7 +7,7 @@ import { FormControl, Validators, ReactiveFormsModule, FormsModule, FormGroup }
 import * as i2 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import * as i1$1 from 'primeng/api';
-import { ConfirmEventType, ConfirmationService, MessageService } from 'primeng/api';
+import { ConfirmationService, MessageService } from 'primeng/api';
 import * as i4 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i3 from 'primeng/button';
@@ -47,7 +47,7 @@ import { filter } from 'rxjs/operators';
 import { BehaviorSubject } from 'rxjs';
 import * as i3$6 from 'primeng/breadcrumb';
 import { BreadcrumbModule } from 'primeng/breadcrumb';
-import * as i3$7 from 'primeng/confirmdialog';
+import * as i4$2 from 'primeng/confirmdialog';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i2$2 from 'primeng/toast';
@@ -181,6 +181,7 @@ class PTAdvancedPrimeTableComponent {
         this.search = new EventEmitter();
         this.exportExcelEvent = new EventEmitter();
         this.exportPdfEvent = new EventEmitter();
+        this.pageChange = new EventEmitter();
         this.TableTypeEnum = TableTypeEnum;
         this.searchValue = '';
         this.filters = {};
@@ -204,13 +205,15 @@ class PTAdvancedPrimeTableComponent {
         this.hasGroupedColumns = false;
     }
     ngOnInit() {
+        console.log('PTAdvancedPrimeTable columns:', this.columns);
+        console.log('PTAdvancedPrimeTable totalRecords input:', this.totalRecords);
         this.hasGroupedColumns = this.columns.some((col) => col.children && col.children.length > 0);
         this.globalFilterFields = this.columns
             .filter((col) => col.code !== undefined && col.isFilter !== false)
             .map((col) => col.code);
         this.initializePagination();
         this.initializeActions();
-        // Set default value for isSortable
+        // Set default value for isSortable / isEditable + widths
         this.columns.forEach((col) => {
             if (col.type === TableTypeEnum.ACTION) {
                 col.isEditable = false;
@@ -242,85 +245,81 @@ class PTAdvancedPrimeTableComponent {
                 options: col.filterOptions,
                 value: [],
                 label: 'Filter by ' + composedName,
-                placeholder: 'Select options for ' + composedName,
+                placeholder: 'Select option',
             };
         });
     }
     // Get the column type for composed fields (STRING, IMAGE, etc.)
     getComposedFieldType(col, composedName) {
-        // Ensure that col.composedNames and col.composedTypes are valid arrays
         if (col.composedNames && col.composedTypes) {
             const index = col.composedNames.indexOf(composedName);
-            // Check if index is a valid number (not -1) and within bounds of composedTypes array
             if (index >= 0 && index < col.composedTypes.length) {
-                return col.composedTypes[index]; // Safe access of composedTypes array
+                return col.composedTypes[index];
             }
         }
-        return undefined; // Return undefined if no valid index is found or composedNames/composedTypes are not valid
+        return undefined;
     }
-    onComposedFilterChange(composedName, selectedValues) {
-        console.log('Selected Values:', selectedValues);
-        console.log('Data Before Filtering:', this.data);
-        // Update the filter value with the selected values
+    onComposedFilterChange(col, composedName, selectedValues) {
         this.filters[composedName].value = selectedValues;
-        // Emit the filter event to notify the parent component (if needed)
         this.filter.emit(this.filters);
-        // Get the filter value (joining array into a string)
         const filterValue = selectedValues.join(',');
-        console.log('Filter Values to be Applied:', filterValue);
-        // Apply global filter using PrimeNG's filterGlobal method
+        let matchResults = [];
+        selectedValues.forEach((value) => {
+            const matches = this.dt.value.filter((row) => {
+                return row[col.code]?.[composedName]
+                    ?.toString()
+                    .toLowerCase()
+                    .includes(value.toLowerCase());
+            });
+            matchResults = [...matchResults, ...matches];
+        });
+        matchResults = Array.from(new Set(matchResults));
+        this.dt.filteredValue = matchResults;
         this.dt.filterGlobal(filterValue, 'contains');
     }
+    // ⛔ Don't override totalRecords here – we are in server-side mode
     onFilter(event) {
-        this.totalRecords = event.filteredValue?.length || 0;
+        this.filter.emit(event);
+        // this.totalRecords = event.filteredValue?.length || 0;  // removed
+    }
+    onPageChange(event) {
+        const page = event.page ?? Math.floor((event.first || 0) / event.rows);
+        const rows = event.rows;
+        this.rows = rows;
+        this.pageChange.emit({ page, rows });
     }
     onCalendarFilterChange(event, columnCode, filterCallback) {
-        // Log the data's date format for debugging
-        console.log('Data Before Filtering:', this.data.map((item) => item[columnCode]));
-        console.log('event : ' + event);
-        // Convert the event value to a string (in the desired date format)
         const filterValue = event ? new Date(event) : null;
-        console.log('filterValue : ' + filterValue);
-        // If the filterValue is empty, do not trigger filterCallback
         if (!filterValue) {
             return;
         }
-        // Manually trigger the filterCallback after updating the value (passing the string value)
         filterCallback(filterValue);
         const filterValueString = event ? this.formatDate(event) : '';
-        // Call the onFilter event to update totalRecords
         this.onFilter({
             filteredValue: this.data.filter((item) => {
                 const columnValue = item[columnCode];
-                // If the column value is a string, use it as is for comparison
                 if (columnValue) {
-                    // Convert the item value to a string (in the same format)
                     const itemDateString = this.formatDate(new Date(columnValue));
-                    return itemDateString === filterValueString; // Compare the string dates
+                    return itemDateString === filterValueString;
                 }
                 return false;
             }),
         });
     }
-    // Filter logic for composed columns (to check against multi-select values)
     filterComposedData(item, composedName, value) {
         if (Array.isArray(value) && value.length > 0) {
             return value.some((filterValue) => item[composedName]?.toLowerCase().includes(filterValue.toLowerCase()));
         }
         return true;
     }
-    // Function to calculate column width based on text in header and data
     calculateColumnWidth(col) {
         const calculatedWidth = calculateTextWidth(col, col.title);
         const totalWidth = calculatedWidth + this.iconWidth + 20;
         return `${totalWidth}px`;
     }
     getHeaderWidth(col) {
-        // Remove 'px' from col.width and convert it to a number
         const widthWithoutPx = parseInt(col.width?.replace('px', '') || '0', 10);
-        // Add 20 to the calculated width
         const headerWidth = widthWithoutPx + 20;
-        // Return the new width in 'px'
         return `${headerWidth}px`;
     }
     clear(table) {
@@ -330,7 +329,6 @@ class PTAdvancedPrimeTableComponent {
     parseDate(dateString) {
         const parts = dateString.split('/');
         if (parts.length === 3) {
-            // Assuming date format is DD/MM/YYYY
             const day = parseInt(parts[0], 10);
             const month = parseInt(parts[1], 10) - 1;
             const year = parseInt(parts[2], 10);
@@ -341,7 +339,6 @@ class PTAdvancedPrimeTableComponent {
     }
     initializePagination() {
         if (this.isPaginated) {
-            // Check if rowsPerPage is undefined or an empty array
             if (!this.rowsPerPage || this.rowsPerPage.length === 0) {
                 this.rowsPerPage = [20, 30, 40];
             }
@@ -422,7 +419,6 @@ class PTAdvancedPrimeTableComponent {
                 return 'text';
         }
     }
-    // State Check Methods
     isEditable(key) {
         let column = this.columns.find((item) => item.code === key);
         return column?.isEditable !== false;
@@ -444,7 +440,6 @@ class PTAdvancedPrimeTableComponent {
         return (this.columns.find((item) => item.code === key)?.type ===
             TableTypeEnum.DATE);
     }
-    // Utility Methods
     dateConverter(value) {
         return new Date(value).toLocaleDateString('en-US');
     }
@@ -461,14 +456,12 @@ class PTAdvancedPrimeTableComponent {
     filterGlobal(event) {
         const target = event.target;
         const value = target.value.toLowerCase();
-        // Create a new filtered dataset
         const filteredData = this.data.filter((item) => {
             return this.globalFilterFields.some((field) => {
                 const column = this.columns.find((col) => col.code === field);
                 if (!column) {
                     return false;
                 }
-                // Handle different column types
                 if (column.type === TableTypeEnum.DATE) {
                     const itemDate = this.formatDate(item[field]);
                     return itemDate && itemDate.includes(value);
@@ -478,7 +471,6 @@ class PTAdvancedPrimeTableComponent {
                     return (item[field] && item[field].toString().toLowerCase().includes(value));
                 }
                 else if (column.type === TableTypeEnum.COMPOSED) {
-                    // Handle composed type by searching for text in the composed cells
                     return this.filterComposedColumn(item[field], value);
                 }
                 else {
@@ -486,14 +478,12 @@ class PTAdvancedPrimeTableComponent {
                 }
             });
         });
-        // Update the table's value
         this.dt.value = filteredData;
-        // After filtering, update the totalRecords
-        this.totalRecords = filteredData.length ?? 0;
+        // ⛔ do NOT override totalRecords in server-side mode
+        // this.totalRecords = filteredData.length ?? 0;
     }
     filterComposedColumn(composedData, value) {
         if (composedData) {
-            // Iterate over composed keys and check if any key's value contains the search text
             return Object.keys(composedData).some((key) => {
                 const cellValue = composedData[key];
                 if (typeof cellValue === 'string') {
@@ -508,20 +498,17 @@ class PTAdvancedPrimeTableComponent {
         if (!date)
             return '';
         if (date instanceof Date) {
-            // Handle Date object
             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') {
-            // Handle string date
             const parts = date.split('/');
             if (parts.length === 3) {
                 return `${parts[0]}/${parts[1]}/${parts[2]}`;
             }
             else {
-                // Handle partial dates
                 return date;
             }
         }
@@ -539,7 +526,6 @@ class PTAdvancedPrimeTableComponent {
                 width: style.width || 'auto',
                 height: style.height || 'auto',
             };
-            // Fallback to empty string if margin, marginLeft, or marginRight are undefined
             if (style.margin) {
                 imageStyle.margin = style.margin;
             }
@@ -572,15 +558,12 @@ class PTAdvancedPrimeTableComponent {
     formatNumber(value, decimalPlaces, thousandSeparator = 'comma', decimalSeparator = 'dot') {
         if (value === null || value === undefined || isNaN(value))
             return '';
-        // Convert the number to a string with full precision if decimalPlaces is undefined
         let formattedNumber = decimalPlaces !== undefined
             ? value.toFixed(decimalPlaces)
             : value.toString();
-        // Replace decimal separator (default is "dot")
         if (decimalSeparator === 'comma') {
             formattedNumber = formattedNumber.replace('.', ',');
         }
-        // Apply thousand separator only if the number is >= 1000
         if (thousandSeparator && Math.abs(value) >= 1000) {
             const parts = formattedNumber.split(decimalSeparator === 'comma' ? ',' : '.');
             parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator === 'comma' ? ',' : ' ');
@@ -589,11 +572,11 @@ 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: { filter: "filter", search: "search", exportExcelEvent: "exportExcelEvent", exportPdfEvent: "exportPdfEvent" }, 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    dataKey=\"id\"\n    styleClass=\"p-datatable-gridlines\"\n    styleClass=\"p-datatable-striped\"\n    editMode=\"row\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onFilter)=\"onFilter($event)\"\n  >\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        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <!-- Add this wrapper div with ml-auto class -->\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    <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            [style.width]=\"getHeaderWidth(col)\"\n            [style.padding]=\"'0px'\"\n            colspan=\"1\"\n          >\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <th\n                pSortableColumn=\"{{ col.code }}\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width\"\n                  [style.padding]=\"'0px'\"\n                  [style.margin]=\"'10px'\"\n                >\n                  <span>{{ col.title }}</span>\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon field=\"{{ col.code }}\" />\n                    <ng-container *ngIf=\"col.isFilter !== false\">\n                      <p-columnFilter\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        display=\"menu\"\n                        [type]=\"getColumnFilterType(col)\"\n                        *ngIf=\"col.type === TableTypeEnum.COMPOSED\"\n                        showClearButton=\"false\"\n                        showApplyButton=\"false\"\n                      >\n                        <!-- TableTypeEnum.COMPOSED -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          (onFilter)=\"onFilter($event)\"\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                                [ngModel]=\"filters[composedName]?.value\"\n                                [options]=\"filters[composedName]?.options\"\n                                (onChange)=\"\n                                  onComposedFilterChange(\n                                    composedName,\n                                    $event.value\n                                  )\n                                \"\n                                [placeholder]=\"\n                                  filters[composedName]?.placeholder\n                                \"\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\n                          <!-- Define itemTemplate here -->\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                        </ng-template>\n                      </p-columnFilter>\n\n                      <!-- other TableTypeEnum.XXX -->\n                      <p-columnFilter\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        display=\"menu\"\n                        [type]=\"getColumnFilterType(col)\"\n                        *ngIf=\"col.type !== TableTypeEnum.COMPOSED\"\n                        hideOnClear=\"true\"\n                      >\n                        <!-- TableTypeEnum.NUMBER -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"col.type === TableTypeEnum.NUMBER\"\n                          (onFilter)=\"onFilter($event)\"\n                        >\n                          <input\n                            pInputText\n                            type=\"number\"\n                            [step]=\"\n                              col.decimalPlaces\n                                ? '0.' + '1'.padEnd(col.decimalPlaces, '0')\n                                : 'any'\n                            \"\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            [placeholder]=\"'Enter a number'\"\n                          />\n                        </ng-template>\n\n                        <!-- TableTypeEnum.DATE -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"col.type === TableTypeEnum.DATE\"\n                          (onFilter)=\"onFilter($event)\"\n                        >\n                          <p-calendar\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"\n                              onCalendarFilterChange(\n                                $event,\n                                col.code!,\n                                filterCallback\n                              )\n                            \"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                            [placeholder]=\"'Choose a date'\"\n                          ></p-calendar>\n                        </ng-template>\n\n                        <!-- TableTypeEnum.MULTISELECT -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"col.type === TableTypeEnum.MULTISELECT\"\n                          (onFilter)=\"onFilter($event)\"\n                        >\n                          <p-multiSelect\n                            [options]=\"col.filterOptions\"\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\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              </th>\n            </ng-container>\n            <ng-template #noSortHeader>\n              <th>\n                <div class=\"header-container\">\n                  <span>{{ col.title }}</span>\n                  <ng-container *ngIf=\"col.isFilter !== false\">\n                    <p-columnFilter\n                      *ngIf=\"col.type === 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                    ></p-columnFilter>\n\n                    <p-columnFilter\n                      *ngIf=\"col.type !== 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\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              </th>\n            </ng-template>\n          </th>\n          <!-- Grouped headers -->\n          <ng-template #groupHeader>\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"getHeaderWidth(col)\"\n              [style.text-align]=\"'center'\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          </ng-template>\n        </ng-container>\n      </tr>\n      <!-- Child headers (Second Row) -->\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]=\"getHeaderWidth(child)\"\n              [style.padding]=\"'0px'\"\n            >\n              <!-- Sortable/Filterable header logic for child columns -->\n            </th>\n          </ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n\n    <!-- Empty message template -->\n    <ng-template pTemplate=\"emptymessage\">\n      <div class=\"empty-message\">\n        <i class=\"pi pi-info-circle\"></i>\n        <p>No records available to display.</p>\n      </div>\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      <!-- Render a table row and make it editable if `isEdit` is true -->\n      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <!-- Loop through each column -->\n        <ng-container *ngFor=\"let col of columns\">\n          <!-- Check if the column has children -->\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- Render a single cell for columns without children -->\n            <ng-container\n              *ngIf=\"col.code !== undefined && data[col.code] !== undefined\"\n            >\n              <td\n                *ngIf=\"isEditable(col.code); else normalTD\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <!-- Editable input for the column -->\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)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\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\n                    *ngIf=\"isDatePicker(col.code); else normalInput\"\n                  >\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              <ng-template #normalTD>\n                <td [style.width]=\"getHeaderWidth(col)\">\n                  <!-- COMPOSED -->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.COMPOSED\">\n                    <div class=\"composed-cell\">\n                      <ng-container\n                        *ngFor=\"\n                          let composedName of col.composedNames;\n                          let i = index\n                        \"\n                      >\n                        <!-- Check if the composedType is 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]=\"getImageStyle(col.composedStyles?.[composedName])\"\n                          />\n                        </ng-container>\n\n                        <!-- Check if the composedType is 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]=\"getTitleStyle(col.composedStyles?.[composedName])\"\n                          >\n                            {{ data[col.code][composedName] }}\n                          </span>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </ng-container>\n\n                  <!-- AMOUNT-->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.AMOUNT\">\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                  <!-- NUMBER-->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.NUMBER\">\n                    {{\n                      formatNumber(\n                        data[col.code],\n                        col.decimalPlaces,\n                        col.thousandSeparator,\n                        col.decimalSeparator\n                      )\n                    }}\n                  </ng-container>\n\n                  <!-- DATE -->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.DATE\">\n                    <!-- Format the date using your formatDate method -->\n                    {{ formatDate(data[col.code]) }}\n                  </ng-container>\n\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                </td>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n\n          <!-- Render child columns if the column has children -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <ng-container\n                *ngIf=\"\n                  child.code !== undefined && data[child.code] !== undefined\n                \"\n              >\n                <td [style.width]=\"getHeaderWidth(child)\">\n                  <!-- Render editable or normal cells for child columns -->\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]=\"data[child.code]\"\n                          (change)=\"onChange($event, data.id, child.code)\"\n                        />\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[child.code] }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n\n                  <ng-template #childNormalTD>\n                    {{ data[child.code] }}\n                  </ng-template>\n                </td>\n              </ng-container>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n\n        <!-- Render action buttons if there are any actions defined -->\n        <td *ngIf=\"actions?.length\">\n          <div class=\"action-buttons-container\">\n            <div *ngIf=\"isDelete\">\n              <button\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            </div>\n            <div>\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          </div>\n        </td>\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 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:flex;flex-direction:column;height:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable{display:flex;flex-direction:column;width:100%;border-collapse:collapse;table-layout:fixed}.pt-advanced-prime-table ::ng-deep .p-datatable thead{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tfoot{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tbody{display:block;overflow-y:auto;overflow-x:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable tbody tr{display:table;width:100%;table-layout:fixed}.pt-advanced-prime-table .empty-message{text-align:center;padding:2rem;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}\n"], dependencies: [{ 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: { filter: "filter", search: "search", exportExcelEvent: "exportExcelEvent", exportPdfEvent: "exportPdfEvent", pageChange: "pageChange" }, 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]=\"true\"\n    dataKey=\"id\"\n    styleClass=\"p-datatable-gridlines\"\n    styleClass=\"p-datatable-striped\"\n    editMode=\"row\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onFilter)=\"onFilter($event)\"\n    (onPage)=\"onPageChange($event)\"\n  >\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        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <!-- Add this wrapper div with ml-auto class -->\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    <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            [style.width]=\"getHeaderWidth(col)\"\n            [style.padding]=\"'0px'\"\n            colspan=\"1\"\n          >\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <th\n                pSortableColumn=\"{{ col.code }}\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width\"\n                  [style.padding]=\"'0px'\"\n                  [style.margin]=\"'10px'\"\n                >\n                  <span>{{ col.title }}</span>\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon field=\"{{ col.code }}\" />\n                    <ng-container *ngIf=\"col.isFilter !== false\">\n                      <p-columnFilter\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        display=\"menu\"\n                        [type]=\"getColumnFilterType(col)\"\n                        *ngIf=\"col.type === TableTypeEnum.COMPOSED\"\n                        showClearButton=\"false\"\n                        showApplyButton=\"false\"\n                      >\n                        <!-- TableTypeEnum.COMPOSED -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          (onFilter)=\"onFilter($event)\"\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                                [ngModel]=\"filters[composedName]?.value\"\n                                [options]=\"filters[composedName]?.options\"\n                                (onChange)=\"\n                                  onComposedFilterChange(\n                                    col,\n                                    composedName,\n                                    $event.value\n                                  )\n                                \"\n                                [placeholder]=\"\n                                  filters[composedName]?.placeholder\n                                \"\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\n                          <!-- Define itemTemplate here -->\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                        </ng-template>\n                      </p-columnFilter>\n\n                      <!-- other TableTypeEnum.XXX -->\n                      <p-columnFilter\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        display=\"menu\"\n                        [type]=\"getColumnFilterType(col)\"\n                        *ngIf=\"col.type !== TableTypeEnum.COMPOSED\"\n                        hideOnClear=\"true\"\n                      >\n                        <!-- TableTypeEnum.NUMBER -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"col.type === TableTypeEnum.NUMBER\"\n                          (onFilter)=\"onFilter($event)\"\n                        >\n                          <input\n                            pInputText\n                            type=\"number\"\n                            [step]=\"\n                              col.decimalPlaces\n                                ? '0.' + '1'.padEnd(col.decimalPlaces, '0')\n                                : 'any'\n                            \"\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            [placeholder]=\"'Enter a number'\"\n                          />\n                        </ng-template>\n\n                        <!-- TableTypeEnum.DATE -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"col.type === TableTypeEnum.DATE\"\n                          (onFilter)=\"onFilter($event)\"\n                        >\n                          <p-calendar\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"\n                              onCalendarFilterChange(\n                                $event,\n                                col.code!,\n                                filterCallback\n                              )\n                            \"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                            [placeholder]=\"'Choose a date'\"\n                          ></p-calendar>\n                        </ng-template>\n\n                        <!-- TableTypeEnum.MULTISELECT -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"\n                            col.type === TableTypeEnum.MULTISELECT &&\n                            col.filterOptions &&\n                            col.filterOptions.length > 0\n                          \"\n                          (onFilter)=\"onFilter($event)\"\n                        >\n                          <p-multiSelect\n                            [options]=\"col.filterOptions\"\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\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              </th>\n            </ng-container>\n            <ng-template #noSortHeader>\n              <th>\n                <div class=\"header-container\">\n                  <span>{{ col.title }}</span>\n                  <ng-container *ngIf=\"col.isFilter !== false\">\n                    <p-columnFilter\n                      *ngIf=\"col.type === 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                    ></p-columnFilter>\n\n                    <p-columnFilter\n                      *ngIf=\"col.type !== 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\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              </th>\n            </ng-template>\n          </th>\n          <!-- Grouped headers -->\n          <ng-template #groupHeader>\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"getHeaderWidth(col)\"\n              [style.text-align]=\"'center'\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          </ng-template>\n        </ng-container>\n      </tr>\n      <!-- Child headers (Second Row) -->\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]=\"getHeaderWidth(child)\"\n              [style.padding]=\"'0px'\"\n            >\n              <!-- Sortable/Filterable header logic for child columns -->\n            </th>\n          </ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n\n    <!-- Empty message template -->\n    <ng-template pTemplate=\"emptymessage\">\n      <div class=\"empty-message\">\n        <i class=\"pi pi-info-circle\"></i>\n        <p>No records available to display.</p>\n      </div>\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      <!-- Render a table row and make it editable if `isEdit` is true -->\n      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <!-- Loop through each column -->\n        <ng-container *ngFor=\"let col of columns\">\n          <!-- Check if the column has children -->\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- Render a single cell for columns without children -->\n            <ng-container\n              *ngIf=\"col.code !== undefined && data[col.code] !== undefined\"\n            >\n              <td\n                *ngIf=\"isEditable(col.code); else normalTD\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <!-- Editable input for the column -->\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)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\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\n                    *ngIf=\"isDatePicker(col.code); else normalInput\"\n                  >\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              <ng-template #normalTD>\n                <td [style.width]=\"getHeaderWidth(col)\">\n                  <!-- COMPOSED -->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.COMPOSED\">\n                    <div class=\"composed-cell\">\n                      <ng-container\n                        *ngFor=\"\n                          let composedName of col.composedNames;\n                          let i = index\n                        \"\n                      >\n                        <!-- Check if the composedType is 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]=\"getImageStyle(col.composedStyles?.[composedName])\"\n                          />\n                        </ng-container>\n\n                        <!-- Check if the composedType is 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]=\"getTitleStyle(col.composedStyles?.[composedName])\"\n                          >\n                            {{ data[col.code][composedName] }}\n                          </span>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </ng-container>\n\n                  <!-- AMOUNT-->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.AMOUNT\">\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                  <!-- NUMBER-->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.NUMBER\">\n                    {{\n                      formatNumber(\n                        data[col.code],\n                        col.decimalPlaces,\n                        col.thousandSeparator,\n                        col.decimalSeparator\n                      )\n                    }}\n                  </ng-container>\n\n                  <!-- DATE -->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.DATE\">\n                    <!-- Format the date using your formatDate method -->\n                    {{ formatDate(data[col.code]) }}\n                  </ng-container>\n\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                </td>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n\n          <!-- Render child columns if the column has children -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <ng-container\n                *ngIf=\"\n                  child.code !== undefined && data[child.code] !== undefined\n                \"\n              >\n                <td [style.width]=\"getHeaderWidth(child)\">\n                  <!-- Render editable or normal cells for child columns -->\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]=\"data[child.code]\"\n                          (change)=\"onChange($event, data.id, child.code)\"\n                        />\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[child.code] }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n\n                  <ng-template #childNormalTD>\n                    {{ data[child.code] }}\n                  </ng-template>\n                </td>\n              </ng-container>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n\n        <!-- Render action buttons if there are any actions defined -->\n        <td *ngIf=\"actions?.length\">\n          <div class=\"action-buttons-container\">\n            <div *ngIf=\"isDelete\">\n              <button\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            </div>\n            <div>\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          </div>\n        </td>\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 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:flex;flex-direction:column;height:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable{display:flex;flex-direction:column;width:100%;border-collapse:collapse;table-layout:fixed}.pt-advanced-prime-table ::ng-deep .p-datatable thead{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tfoot{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tbody{display:block;overflow-y:auto;overflow-x:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable tbody tr{display:table;width:100%;table-layout:fixed}.pt-advanced-prime-table .empty-message{text-align:center;padding:2rem;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}\n"], dependencies: [{ 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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    dataKey=\"id\"\n    styleClass=\"p-datatable-gridlines\"\n    styleClass=\"p-datatable-striped\"\n    editMode=\"row\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onFilter)=\"onFilter($event)\"\n  >\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        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <!-- Add this wrapper div with ml-auto class -->\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    <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            [style.width]=\"getHeaderWidth(col)\"\n            [style.padding]=\"'0px'\"\n            colspan=\"1\"\n          >\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <th\n                pSortableColumn=\"{{ col.code }}\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width\"\n                  [style.padding]=\"'0px'\"\n                  [style.margin]=\"'10px'\"\n                >\n                  <span>{{ col.title }}</span>\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon field=\"{{ col.code }}\" />\n                    <ng-container *ngIf=\"col.isFilter !== false\">\n                      <p-columnFilter\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        display=\"menu\"\n                        [type]=\"getColumnFilterType(col)\"\n                        *ngIf=\"col.type === TableTypeEnum.COMPOSED\"\n                        showClearButton=\"false\"\n                        showApplyButton=\"false\"\n                      >\n                        <!-- TableTypeEnum.COMPOSED -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          (onFilter)=\"onFilter($event)\"\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                                [ngModel]=\"filters[composedName]?.value\"\n                                [options]=\"filters[composedName]?.options\"\n                                (onChange)=\"\n                                  onComposedFilterChange(\n                                    composedName,\n                                    $event.value\n                                  )\n                                \"\n                                [placeholder]=\"\n                                  filters[composedName]?.placeholder\n                                \"\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\n                          <!-- Define itemTemplate here -->\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                        </ng-template>\n                      </p-columnFilter>\n\n                      <!-- other TableTypeEnum.XXX -->\n                      <p-columnFilter\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        display=\"menu\"\n                        [type]=\"getColumnFilterType(col)\"\n                        *ngIf=\"col.type !== TableTypeEnum.COMPOSED\"\n                        hideOnClear=\"true\"\n                      >\n                        <!-- TableTypeEnum.NUMBER -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"col.type === TableTypeEnum.NUMBER\"\n                          (onFilter)=\"onFilter($event)\"\n                        >\n                          <input\n                            pInputText\n                            type=\"number\"\n                            [step]=\"\n                              col.decimalPlaces\n                                ? '0.' + '1'.padEnd(col.decimalPlaces, '0')\n                                : 'any'\n                            \"\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            [placeholder]=\"'Enter a number'\"\n                          />\n                        </ng-template>\n\n                        <!-- TableTypeEnum.DATE -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"col.type === TableTypeEnum.DATE\"\n                          (onFilter)=\"onFilter($event)\"\n                        >\n                          <p-calendar\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"\n                              onCalendarFilterChange(\n                                $event,\n                                col.code!,\n                                filterCallback\n                              )\n                            \"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                            [placeholder]=\"'Choose a date'\"\n                          ></p-calendar>\n                        </ng-template>\n\n                        <!-- TableTypeEnum.MULTISELECT -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"col.type === TableTypeEnum.MULTISELECT\"\n                          (onFilter)=\"onFilter($event)\"\n                        >\n                          <p-multiSelect\n                            [options]=\"col.filterOptions\"\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\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              </th>\n            </ng-container>\n            <ng-template #noSortHeader>\n              <th>\n                <div class=\"header-container\">\n                  <span>{{ col.title }}</span>\n                  <ng-container *ngIf=\"col.isFilter !== false\">\n                    <p-columnFilter\n                      *ngIf=\"col.type === 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                    ></p-columnFilter>\n\n                    <p-columnFilter\n                      *ngIf=\"col.type !== 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\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              </th>\n            </ng-template>\n          </th>\n          <!-- Grouped headers -->\n          <ng-template #groupHeader>\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"getHeaderWidth(col)\"\n              [style.text-align]=\"'center'\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          </ng-template>\n        </ng-container>\n      </tr>\n      <!-- Child headers (Second Row) -->\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]=\"getHeaderWidth(child)\"\n              [style.padding]=\"'0px'\"\n            >\n              <!-- Sortable/Filterable header logic for child columns -->\n            </th>\n          </ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n\n    <!-- Empty message template -->\n    <ng-template pTemplate=\"emptymessage\">\n      <div class=\"empty-message\">\n        <i class=\"pi pi-info-circle\"></i>\n        <p>No records available to display.</p>\n      </div>\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      <!-- Render a table row and make it editable if `isEdit` is true -->\n      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <!-- Loop through each column -->\n        <ng-container *ngFor=\"let col of columns\">\n          <!-- Check if the column has children -->\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- Render a single cell for columns without children -->\n            <ng-container\n              *ngIf=\"col.code !== undefined && data[col.code] !== undefined\"\n            >\n              <td\n                *ngIf=\"isEditable(col.code); else normalTD\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <!-- Editable input for the column -->\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)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\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\n                    *ngIf=\"isDatePicker(col.code); else normalInput\"\n                  >\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              <ng-template #normalTD>\n                <td [style.width]=\"getHeaderWidth(col)\">\n                  <!-- COMPOSED -->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.COMPOSED\">\n                    <div class=\"composed-cell\">\n                      <ng-container\n                        *ngFor=\"\n                          let composedName of col.composedNames;\n                          let i = index\n                        \"\n                      >\n                        <!-- Check if the composedType is 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]=\"getImageStyle(col.composedStyles?.[composedName])\"\n                          />\n                        </ng-container>\n\n                        <!-- Check if the composedType is 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]=\"getTitleStyle(col.composedStyles?.[composedName])\"\n                          >\n                            {{ data[col.code][composedName] }}\n                          </span>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </ng-container>\n\n                  <!-- AMOUNT-->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.AMOUNT\">\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                  <!-- NUMBER-->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.NUMBER\">\n                    {{\n                      formatNumber(\n                        data[col.code],\n                        col.decimalPlaces,\n                        col.thousandSeparator,\n                        col.decimalSeparator\n                      )\n                    }}\n                  </ng-container>\n\n                  <!-- DATE -->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.DATE\">\n                    <!-- Format the date using your formatDate method -->\n                    {{ formatDate(data[col.code]) }}\n                  </ng-container>\n\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                </td>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n\n          <!-- Render child columns if the column has children -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <ng-container\n                *ngIf=\"\n                  child.code !== undefined && data[child.code] !== undefined\n                \"\n              >\n                <td [style.width]=\"getHeaderWidth(child)\">\n                  <!-- Render editable or normal cells for child columns -->\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]=\"data[child.code]\"\n                          (change)=\"onChange($event, data.id, child.code)\"\n                        />\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[child.code] }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n\n                  <ng-template #childNormalTD>\n                    {{ data[child.code] }}\n                  </ng-template>\n                </td>\n              </ng-container>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n\n        <!-- Render action buttons if there are any actions defined -->\n        <td *ngIf=\"actions?.length\">\n          <div class=\"action-buttons-container\">\n            <div *ngIf=\"isDelete\">\n              <button\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            </div>\n            <div>\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          </div>\n        </td>\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 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:flex;flex-direction:column;height:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable{display:flex;flex-direction:column;width:100%;border-collapse:collapse;table-layout:fixed}.pt-advanced-prime-table ::ng-deep .p-datatable thead{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tfoot{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tbody{display:block;overflow-y:auto;overflow-x:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable tbody tr{display:table;width:100%;table-layout:fixed}.pt-advanced-prime-table .empty-message{text-align:center;padding:2rem;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}\n"] }]
+            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]=\"true\"\n    dataKey=\"id\"\n    styleClass=\"p-datatable-gridlines\"\n    styleClass=\"p-datatable-striped\"\n    editMode=\"row\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onFilter)=\"onFilter($event)\"\n    (onPage)=\"onPageChange($event)\"\n  >\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        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <!-- Add this wrapper div with ml-auto class -->\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    <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            [style.width]=\"getHeaderWidth(col)\"\n            [style.padding]=\"'0px'\"\n            colspan=\"1\"\n          >\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <th\n                pSortableColumn=\"{{ col.code }}\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width\"\n                  [style.padding]=\"'0px'\"\n                  [style.margin]=\"'10px'\"\n                >\n                  <span>{{ col.title }}</span>\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon field=\"{{ col.code }}\" />\n                    <ng-container *ngIf=\"col.isFilter !== false\">\n                      <p-columnFilter\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        display=\"menu\"\n                        [type]=\"getColumnFilterType(col)\"\n                        *ngIf=\"col.type === TableTypeEnum.COMPOSED\"\n                        showClearButton=\"false\"\n                        showApplyButton=\"false\"\n                      >\n                        <!-- TableTypeEnum.COMPOSED -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          (onFilter)=\"onFilter($event)\"\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                                [ngModel]=\"filters[composedName]?.value\"\n                                [options]=\"filters[composedName]?.options\"\n                                (onChange)=\"\n                                  onComposedFilterChange(\n                                    col,\n                                    composedName,\n                                    $event.value\n                                  )\n                                \"\n                                [placeholder]=\"\n                                  filters[composedName]?.placeholder\n                                \"\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\n                          <!-- Define itemTemplate here -->\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                        </ng-template>\n                      </p-columnFilter>\n\n                      <!-- other TableTypeEnum.XXX -->\n                      <p-columnFilter\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        display=\"menu\"\n                        [type]=\"getColumnFilterType(col)\"\n                        *ngIf=\"col.type !== TableTypeEnum.COMPOSED\"\n                        hideOnClear=\"true\"\n                      >\n                        <!-- TableTypeEnum.NUMBER -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"col.type === TableTypeEnum.NUMBER\"\n                          (onFilter)=\"onFilter($event)\"\n                        >\n                          <input\n                            pInputText\n                            type=\"number\"\n                            [step]=\"\n                              col.decimalPlaces\n                                ? '0.' + '1'.padEnd(col.decimalPlaces, '0')\n                                : 'any'\n                            \"\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            [placeholder]=\"'Enter a number'\"\n                          />\n                        </ng-template>\n\n                        <!-- TableTypeEnum.DATE -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"col.type === TableTypeEnum.DATE\"\n                          (onFilter)=\"onFilter($event)\"\n                        >\n                          <p-calendar\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"\n                              onCalendarFilterChange(\n                                $event,\n                                col.code!,\n                                filterCallback\n                              )\n                            \"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                            [placeholder]=\"'Choose a date'\"\n                          ></p-calendar>\n                        </ng-template>\n\n                        <!-- TableTypeEnum.MULTISELECT -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"\n                            col.type === TableTypeEnum.MULTISELECT &&\n                            col.filterOptions &&\n                            col.filterOptions.length > 0\n                          \"\n                          (onFilter)=\"onFilter($event)\"\n                        >\n                          <p-multiSelect\n                            [options]=\"col.filterOptions\"\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\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              </th>\n            </ng-container>\n            <ng-template #noSortHeader>\n              <th>\n                <div class=\"header-container\">\n                  <span>{{ col.title }}</span>\n                  <ng-container *ngIf=\"col.isFilter !== false\">\n                    <p-columnFilter\n                      *ngIf=\"col.type === 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                    ></p-columnFilter>\n\n                    <p-columnFilter\n                      *ngIf=\"col.type !== 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\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              </th>\n            </ng-template>\n          </th>\n          <!-- Grouped headers -->\n          <ng-template #groupHeader>\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"getHeaderWidth(col)\"\n              [style.text-align]=\"'center'\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          </ng-template>\n        </ng-container>\n      </tr>\n      <!-- Child headers (Second Row) -->\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]=\"getHeaderWidth(child)\"\n              [style.padding]=\"'0px'\"\n            >\n              <!-- Sortable/Filterable header logic for child columns -->\n            </th>\n          </ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n\n    <!-- Empty message template -->\n    <ng-template pTemplate=\"emptymessage\">\n      <div class=\"empty-message\">\n        <i class=\"pi pi-info-circle\"></i>\n        <p>No records available to display.</p>\n      </div>\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      <!-- Render a table row and make it editable if `isEdit` is true -->\n      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <!-- Loop through each column -->\n        <ng-container *ngFor=\"let col of columns\">\n          <!-- Check if the column has children -->\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- Render a single cell for columns without children -->\n            <ng-container\n              *ngIf=\"col.code !== undefined && data[col.code] !== undefined\"\n            >\n              <td\n                *ngIf=\"isEditable(col.code); else normalTD\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <!-- Editable input for the column -->\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)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\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\n                    *ngIf=\"isDatePicker(col.code); else normalInput\"\n                  >\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              <ng-template #normalTD>\n                <td [style.width]=\"getHeaderWidth(col)\">\n                  <!-- COMPOSED -->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.COMPOSED\">\n                    <div class=\"composed-cell\">\n                      <ng-container\n                        *ngFor=\"\n                          let composedName of col.composedNames;\n                          let i = index\n                        \"\n                      >\n                        <!-- Check if the composedType is 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]=\"getImageStyle(col.composedStyles?.[composedName])\"\n                          />\n                        </ng-container>\n\n                        <!-- Check if the composedType is 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]=\"getTitleStyle(col.composedStyles?.[composedName])\"\n                          >\n                            {{ data[col.code][composedName] }}\n                          </span>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </ng-container>\n\n                  <!-- AMOUNT-->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.AMOUNT\">\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                  <!-- NUMBER-->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.NUMBER\">\n                    {{\n                      formatNumber(\n                        data[col.code],\n                        col.decimalPlaces,\n                        col.thousandSeparator,\n                        col.decimalSeparator\n                      )\n                    }}\n                  </ng-container>\n\n                  <!-- DATE -->\n                  <ng-container *ngIf=\"col.type === TableTypeEnum.DATE\">\n                    <!-- Format the date using your formatDate method -->\n                    {{ formatDate(data[col.code]) }}\n                  </ng-container>\n\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                </td>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n\n          <!-- Render child columns if the column has children -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <ng-container\n                *ngIf=\"\n                  child.code !== undefined && data[child.code] !== undefined\n                \"\n              >\n                <td [style.width]=\"getHeaderWidth(child)\">\n                  <!-- Render editable or normal cells for child columns -->\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]=\"data[child.code]\"\n                          (change)=\"onChange($event, data.id, child.code)\"\n                        />\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[child.code] }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n\n                  <ng-template #childNormalTD>\n                    {{ data[child.code] }}\n                  </ng-template>\n                </td>\n              </ng-container>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n\n        <!-- Render action buttons if there are any actions defined -->\n        <td *ngIf=\"actions?.length\">\n          <div class=\"action-buttons-container\">\n            <div *ngIf=\"isDelete\">\n              <button\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            </div>\n            <div>\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          </div>\n        </td>\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 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:flex;flex-direction:column;height:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable{display:flex;flex-direction:column;width:100%;border-collapse:collapse;table-layout:fixed}.pt-advanced-prime-table ::ng-deep .p-datatable thead{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tfoot{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tbody{display:block;overflow-y:auto;overflow-x:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable tbody tr{display:table;width:100%;table-layout:fixed}.pt-advanced-prime-table .empty-message{text-align:center;padding:2rem;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}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -628,6 +611,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Output
             }], exportPdfEvent: [{
                 type: Output
+            }], pageChange: [{
+                type: Output
             }], dt: [{
                 type: ViewChild,
                 args: ['dt', { static: false }]
@@ -3368,6 +3353,7 @@ class PTButtonComponent {
                 fontColor: '#000',
                 backgroundColor: '#fff',
                 borderColor: '#000',
+                outlined: false,
             };
         }
     }
@@ -3381,7 +3367,7 @@ class PTButtonComponent {
                     JSON.stringify({ ...prev, disabled: undefined }) ===
                         JSON.stringify({ ...curr, disabled: undefined });
                 if (onlyDisabledChanged) {
-                    this.updateDisabledStyles(curr.disabled);
+                    this.updateDisabledStyles(curr.disabled ?? false);
                 }
                 else {
                     this.applyButtonStyles();
@@ -3393,14 +3379,6 @@ class PTButtonComponent {
             }
         }
     }
-    updateDisabledStyles(isDisabled) {
-        const buttonElement = this.el.nativeElement.querySelector('button.p-element');
-        if (buttonElement) {
-            this.renderer.setStyle(buttonElement, 'color', isDisabled ? '#999' : this.buttonConfig.fontColor);
-            this.renderer.setStyle(buttonElement, 'background-color', isDisabled ? '#e0e0e0' : this.buttonConfig.backgroundColor);
-            this.renderer.setStyle(buttonElement, 'border-color', isDisabled ? '#bdbdbd' : this.buttonConfig.borderColor);
-        }
-    }
     ngAfterViewInit() {
         this.applyButtonStyles();
     }
@@ -3410,23 +3388,58 @@ class PTButtonComponent {
     getType() {
         return this.buttonConfig.type || 'button';
     }
+    updateDisabledStyles(isDisabled) {
+        const buttonElement = this.el.nativeElement.querySelector('button.p-element');
+        if (buttonElement) {
+            this.renderer.setStyle(buttonElement, 'color', isDisabled ? '#999' : this.buttonConfig.fontColor);
+            this.renderer.setStyle(buttonElement, 'background-color', isDisabled ? '#e0e0e0' : this.buttonConfig.backgroundColor);
+            this.renderer.setStyle(buttonElement, 'border-color', isDisabled ? '#bdbdbd' : this.buttonConfig.borderColor);
+        }
+    }
+    /**
+     * We delegate colors to PrimeNG theme when:
+     * - outlined = true
+     * - and no manual color is provided (no backgroundColor, borderColor, fontColor)
+     */
+    shouldUseThemeColors() {
+        if (!this.buttonConfig) {
+            return false;
+        }
+        const outlined = !!this.buttonConfig.outlined; // ✅ coerce to boolean
+        return (outlined &&
+            !this.buttonConfig.backgroundColor &&
+            !this.buttonConfig.borderColor &&
+            !this.buttonConfig.fontColor);
+    }
     applyButtonStyles() {
         const buttonElement = this.el.nativeElement.querySelector('button.p-element');
-        if (buttonElement && this.buttonConfig) {
-            const isDisabled = this.buttonConfig.disabled;
+        if (!buttonElement || !this.buttonConfig) {
+            return;
+        }
+        const isDisabled = !!this.buttonConfig.disabled;
+        const useThemeColors = this.shouldUseThemeColors();
+        // Width / height always applied
+        this.renderer.setStyle(buttonElement, 'width', this.buttonConfig.width || 'auto');
+        this.renderer.setStyle(buttonElement, 'height', this.buttonConfig.height || 'auto');
+        // ✅ Only override colors when we are NOT delegating to PrimeNG theme
+        if (!useThemeColors) {
             this.renderer.setStyle(buttonElement, 'color', isDisabled ? '#999' : this.buttonConfig.fontColor);
             this.renderer.setStyle(buttonElement, 'background-color', isDisabled ? '#e0e0e0' : this.buttonConfig.backgroundColor);
             this.renderer.setStyle(buttonElement, 'border-color', isDisabled ? '#bdbdbd' : this.buttonConfig.borderColor);
-            this.renderer.setStyle(buttonElement, 'width', this.buttonConfig.width || 'auto');
-            this.renderer.setStyle(buttonElement, 'height', this.buttonConfig.height || 'auto');
+        }
+        else {
+            // If we delegate to theme, clear any inline overrides
+            this.renderer.removeStyle(buttonElement, 'color');
+            this.renderer.removeStyle(buttonElement, 'background-color');
+            this.renderer.removeStyle(buttonElement, 'border-color');
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTButtonComponent, selector: "pt-button", inputs: { buttonConfig: "buttonConfig" }, usesOnChanges: true, ngImport: i0, template: "<p-button\n  [label]=\"buttonConfig.label\"\n  [icon]=\"buttonConfig.icon || ''\"\n  [iconPos]=\"getIconPos()\"\n  [disabled]=\"buttonConfig.disabled\"\n  [loading]=\"buttonConfig.loading\"\n  [class]=\"buttonConfig.styleClass || ''\"\n  [type]=\"getType()\"\n></p-button>\n", styles: ["::ng-deep p-button{display:block}\n"], dependencies: [{ kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTButtonComponent, selector: "pt-button", inputs: { buttonConfig: "buttonConfig" }, usesOnChanges: true, ngImport: i0, template: "<p-button\n  [label]=\"buttonConfig.label\"\n  [icon]=\"buttonConfig.icon || ''\"\n  [iconPos]=\"getIconPos()\"\n  [disabled]=\"buttonConfig.disabled\"\n  [loading]=\"buttonConfig.loading\"\n  [class]=\"buttonConfig.styleClass || ''\"\n  [type]=\"getType()\"\n  [severity]=\"buttonConfig.severity\"\n  [outlined]=\"buttonConfig.outlined\"\n></p-button>\n", styles: ["::ng-deep p-button{display:block}\n"], dependencies: [{ kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-button', template: "<p-button\n  [label]=\"buttonConfig.label\"\n  [icon]=\"buttonConfig.icon || ''\"\n  [iconPos]=\"getIconPos()\"\n  [disabled]=\"buttonConfig.disabled\"\n  [loading]=\"buttonConfig.loading\"\n  [class]=\"buttonConfig.styleClass || ''\"\n  [type]=\"getType()\"\n></p-button>\n", styles: ["::ng-deep p-button{display:block}\n"] }]
+            args: [{ selector: 'pt-button', template: "<p-button\n  [label]=\"buttonConfig.label\"\n  [icon]=\"buttonConfig.icon || ''\"\n  [iconPos]=\"getIconPos()\"\n  [disabled]=\"buttonConfig.disabled\"\n  [loading]=\"buttonConfig.loading\"\n  [class]=\"buttonConfig.styleClass || ''\"\n  [type]=\"getType()\"\n  [severity]=\"buttonConfig.severity\"\n  [outlined]=\"buttonConfig.outlined\"\n></p-button>\n", styles: ["::ng-deep p-button{display:block}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { buttonConfig: [{
                 type: Input
             }] } });
@@ -3668,49 +3681,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 }]
         }] });
 
-// Default Styles for Different Dialog Types
+/**
+ * Styles per severity:
+ *  - Only header (text/color) is provided here.
+ *  - No default "content" text anymore.
+ */
 const DIALOG_STYLES = {
     [SeverityEnum.WARNING]: {
-        header: { text: 'Warning', color: '#d98300' },
-        content: { text: 'This is a warning message!', color: '#d98300' },
-        confirmButtonConfig: { backgroundColor: '#d98300', fontColor: '#fff' },
-        cancelButtonConfig: { backgroundColor: '#6c757d', fontColor: '#fff' },
+        header: { text: 'Avertissement', color: '#8a4b00' },
     },
     [SeverityEnum.SUCCESS]: {
-        header: { text: 'Success', color: '#28a745' },
-        content: { text: 'Operation was successful!', color: '#28a745' },
-        confirmButtonConfig: { backgroundColor: '#28a745', fontColor: '#fff' },
-        cancelButtonConfig: { backgroundColor: '#6c757d', fontColor: '#fff' },
+        header: { text: 'Succès', color: '#166534' },
     },
     [SeverityEnum.DANGER]: {
-        header: { text: 'Error', color: '#dc3545' },
-        content: { text: 'An error occurred!', color: '#dc3545' },
-        confirmButtonConfig: { backgroundColor: '#dc3545', fontColor: '#fff' },
-        cancelButtonConfig: { backgroundColor: '#6c757d', fontColor: '#fff' },
+        header: { text: 'Erreur', color: '#7f1d1d' },
     },
     [SeverityEnum.INFO]: {
-        header: { text: 'Information', color: '#007bff' },
-        content: { text: 'Here is some important information.', color: '#007bff' },
-        confirmButtonConfig: { backgroundColor: '#007bff', fontColor: '#fff' },
-        cancelButtonConfig: { backgroundColor: '#6c757d', fontColor: '#fff' },
+        header: { text: 'Information', color: '#2563eb' },
     },
 };
-// Centralized Default Values
+/**
+ * Default config:
+ *  - content is now empty string (no default message).
+ */
 const DEFAULT_DIALOG_CONFIG = {
     header: { text: 'Confirmation' },
     visible: false,
-    width: '400px',
+    width: '720px',
     height: 'auto',
-    content: 'Do you want to proceed?',
+    content: '', // no default message
     confirmButtonConfig: {
-        label: 'Confirm',
-        fontColor: '#fff',
-        backgroundColor: '#007bff',
+        label: 'Confirmer',
     },
     cancelButtonConfig: {
-        label: 'Cancel',
-        fontColor: '#fff',
-        backgroundColor: '#6c757d',
+        label: 'Annuler',
     },
     dialogStyle: SeverityEnum.INFO,
 };
@@ -3723,11 +3727,13 @@ class PTDialogComponent {
         this.dialogConfig = { ...DEFAULT_DIALOG_CONFIG };
         this.confirm = new EventEmitter();
         this.cancel = new EventEmitter();
+        this.SeverityEnum = SeverityEnum;
     }
     ngOnChanges(changes) {
         if (changes['dialogConfig']) {
-            if (changes['dialogConfig'].currentValue?.dialogStyle !==
-                changes['dialogConfig'].previousValue?.dialogStyle) {
+            const current = changes['dialogConfig'].currentValue;
+            if (changes['dialogConfig'].previousValue?.dialogStyle !==
+                current?.dialogStyle) {
                 this.applyDialogStyle();
             }
             if (this.dialogConfig.visible) {
@@ -3735,80 +3741,124 @@ class PTDialogComponent {
             }
         }
     }
+    /**
+     * Merge defaults + current config + severity style.
+     * We are careful NOT to spread header (it can be string or object).
+     */
     applyDialogStyle() {
         const dialogStyle = this.dialogConfig.dialogStyle || SeverityEnum.INFO;
         const styleConfig = DIALOG_STYLES[dialogStyle] || {};
+        const current = this.dialogConfig;
+        // Decide which header to use without spreading non-object types
+        const mergedHeader = current.header !== undefined
+            ? current.header
+            : styleConfig.header !== undefined
+                ? styleConfig.header
+                : DEFAULT_DIALOG_CONFIG.header;
         this.dialogConfig = {
             ...DEFAULT_DIALOG_CONFIG,
+            ...current,
             ...styleConfig,
+            header: mergedHeader,
             confirmButtonConfig: {
                 ...DEFAULT_DIALOG_CONFIG.confirmButtonConfig,
-                ...styleConfig.confirmButtonConfig,
+                ...current.confirmButtonConfig,
             },
             cancelButtonConfig: {
                 ...DEFAULT_DIALOG_CONFIG.cancelButtonConfig,
-                ...styleConfig.cancelButtonConfig,
+                ...current.cancelButtonConfig,
             },
+            visible: current.visible,
+        };
+    }
+    getSeverityClass() {
+        const style = this.dialogConfig.dialogStyle ?? SeverityEnum.INFO;
+        switch (style) {
+            case SeverityEnum.DANGER:
+                return 'pt-dialog-danger';
+            case SeverityEnum.WARNING:
+                return 'pt-dialog-warning';
+            case SeverityEnum.SUCCESS:
+                return 'pt-dialog-success';
+            case SeverityEnum.INFO:
+            default:
+                return 'pt-dialog-info';
+        }
+    }
+    /** SUCCESS & INFO share same behaviour, only color differs */
+    getSeverityColors() {
+        const style = this.dialogConfig.dialogStyle ?? SeverityEnum.INFO;
+        switch (style) {
+            case SeverityEnum.DANGER:
+                return { header: '#b91c1c', message: '#4b5563' };
+            case SeverityEnum.WARNING:
+                return { header: '#b45309', message: '#92400e' };
+            case SeverityEnum.SUCCESS:
+                return { header: '#15803d', message: '#166534' };
+            case SeverityEnum.INFO:
+            default:
+                return { header: '#2563eb', message: '#2563eb' };
+        }
+    }
+    // ───────────── Button models for pt-button ─────────────
+    get confirmButtonModel() {
+        const style = this.dialogConfig.dialogStyle ?? SeverityEnum.INFO;
+        const confirmSeverity = style === SeverityEnum.DANGER
+            ? SeverityEnum.DANGER
+            : style === SeverityEnum.WARNING
+                ? SeverityEnum.WARNING
+                : style === SeverityEnum.SUCCESS
+                    ? SeverityEnum.SUCCESS
+                    : SeverityEnum.INFO;
+        return {
+            label: this.dialogConfig.confirmButtonConfig?.label ?? 'Confirmer',
+            icon: this.dialogConfig.confirmButtonConfig?.icon ?? 'pi pi-check',
+            iconPos: 'left',
+            type: 'button',
+            outlined: true,
+            severity: confirmSeverity,
+            styleClass: (this.dialogConfig.confirmButtonConfig?.styleClass || '') +
+                ' pt-dialog-confirm-btn',
+            width: 'auto',
+        };
+    }
+    get cancelButtonModel() {
+        return {
+            label: this.dialogConfig.cancelButtonConfig?.label ?? 'Annuler',
+            icon: this.dialogConfig.cancelButtonConfig?.icon ?? 'pi pi-times',
+            iconPos: 'left',
+            type: 'button',
+            outlined: true,
+            severity: SeverityEnum.INFO,
+            styleClass: (this.dialogConfig.cancelButtonConfig?.styleClass || '') +
+                ' pt-dialog-cancel-btn',
+            width: 'auto',
         };
     }
     showDialog() {
         this.confirmationService.confirm({
-            header: this.getDialogHeaderText(),
+            header: '',
+            // message is not really used visually, but kept here
             message: this.getDialogContentText(),
-            acceptLabel: this.dialogConfig.confirmButtonConfig?.label || 'Confirm',
-            rejectLabel: this.dialogConfig.cancelButtonConfig?.label || 'Cancel',
-            acceptButtonStyleClass: this.getButtonStyle(this.dialogConfig.confirmButtonConfig, true),
-            rejectButtonStyleClass: this.getButtonStyle(this.dialogConfig.cancelButtonConfig, false),
-            acceptIcon: this.dialogConfig.confirmButtonConfig?.icon || 'pi pi-check',
-            rejectIcon: this.dialogConfig.cancelButtonConfig?.icon || 'pi pi-times',
-            accept: () => {
-                this.confirm.emit();
-                if (this.dialogConfig.toastOnConfirm) {
-                }
-            },
-            reject: (type) => {
-                this.cancel.emit();
-                if (type === ConfirmEventType.REJECT &&
-                    this.dialogConfig.toastOnCancel) {
-                }
-            },
+            accept: () => this.confirm.emit(),
+            reject: (_type) => this.cancel.emit(),
         });
-        // Use renderer to apply dynamic styles
         setTimeout(() => {
-            const dialogElement = this.el.nativeElement.querySelector('.p-dialog');
+            const dialogElement = document.querySelector('.p-confirm-dialog');
             if (dialogElement) {
-                this.renderer.setStyle(dialogElement, 'width', this.dialogConfig.width || '400px');
+                this.renderer.addClass(dialogElement, 'pt-dialog-overlay');
+                this.renderer.removeClass(dialogElement, 'pt-dialog-danger');
+                this.renderer.removeClass(dialogElement, 'pt-dialog-warning');
+                this.renderer.removeClass(dialogElement, 'pt-dialog-success');
+                this.renderer.removeClass(dialogElement, 'pt-dialog-info');
+                const severityClass = this.getSeverityClass();
+                this.renderer.addClass(dialogElement, severityClass);
+                this.renderer.setStyle(dialogElement, 'width', this.dialogConfig.width || '720px');
                 this.renderer.setStyle(dialogElement, 'height', this.dialogConfig.height || 'auto');
             }
         }, 0);
     }
-    getButtonStyle(buttonConfig, isConfirm = false) {
-        let styleClass = buttonConfig?.styleClass ?? 'p-button-sm';
-        // ✅ Apply width dynamically if provided, otherwise default to 100%
-        const buttonWidth = buttonConfig?.width ?? '100%';
-        // ✅ Set default severity: SUCCESS for confirm, SECONDARY for cancel
-        const defaultSeverity = isConfirm ? SeverityEnum.DANGER : SeverityEnum.INFO;
-        const severity = buttonConfig?.severity ?? defaultSeverity;
-        // ✅ Apply severity-based styles only if no custom background color is set
-        if (!buttonConfig?.backgroundColor) {
-            switch (severity) {
-                case SeverityEnum.WARNING:
-                    styleClass += ' p-button-warning';
-                    break;
-                case SeverityEnum.DANGER:
-                    styleClass += ' p-button-danger';
-                    break;
-                case SeverityEnum.SUCCESS:
-                    styleClass += ' p-button-success';
-                    break;
-                case SeverityEnum.INFO:
-                default:
-                    styleClass += ' p-button-secondary';
-                    break;
-            }
-        }
-        return `${styleClass.trim()} width-${buttonWidth.replace('%', '')}`;
-    }
+    // ── header / icon / content helpers ───────────────────────────────
     getDialogHeaderText() {
         const header = this.dialogConfig.header;
         const dialogStyle = this.dialogConfig.dialogStyle ?? SeverityEnum.INFO;
@@ -3821,88 +3871,85 @@ class PTDialogComponent {
                     styleHeader !== null &&
                     'text' in styleHeader
                     ? styleHeader.text
-                    : 'Confirmation'; // ✅ Default value
+                    : 'Confirmation';
     }
     getDialogHeaderStyle() {
         const header = this.dialogConfig.header;
-        const dialogStyle = this.dialogConfig.dialogStyle ?? SeverityEnum.INFO;
-        const styleHeader = DIALOG_STYLES[dialogStyle]?.header;
-        return typeof header === 'object' && header !== null
-            ? {
-                color: header.color ||
-                    (typeof styleHeader === 'object' ? styleHeader?.color : '#333'),
-                fontSize: header.fontSize || '25px',
-            }
-            : {
-                color: typeof styleHeader === 'object' ? styleHeader?.color : '#333',
-                fontSize: '25px',
-            };
+        const { header: color } = this.getSeverityColors();
+        const fontSize = typeof header === 'object' && header !== null && header.fontSize
+            ? header.fontSize
+            : '20px';
+        return {
+            color,
+            fontSize,
+            fontWeight: 700,
+        };
     }
     getDialogIconClass() {
         const header = this.dialogConfig.header;
-        const dialogStyle = this.dialogConfig.dialogStyle ?? SeverityEnum.INFO; // ✅ Ensure dialogStyle is always defined
-        const styleHeader = DIALOG_STYLES[dialogStyle]?.header; // ✅ Store the style header separately
-        // ✅ Ensure header.icon exists and is an object before accessing .code
+        const dialogStyle = this.dialogConfig.dialogStyle ?? SeverityEnum.INFO;
+        const styleHeader = DIALOG_STYLES[dialogStyle]?.header;
         const icon = typeof header === 'object' && header !== null && 'icon' in header
             ? header.icon
             : typeof styleHeader === 'object' && 'icon' in styleHeader
                 ? styleHeader.icon
                 : undefined;
-        // ✅ If `icon` is an object, extract `.code`, otherwise return as string or default value
         return typeof icon === 'string'
             ? icon
             : icon?.code || 'pi pi-exclamation-circle';
     }
     getDialogIconStyle() {
         const header = this.dialogConfig.header;
-        const dialogStyle = this.dialogConfig.dialogStyle ?? SeverityEnum.INFO;
-        const styleHeader = DIALOG_STYLES[dialogStyle]?.header;
+        const { header: defaultColor } = this.getSeverityColors();
         const icon = typeof header === 'object' && header !== null && 'icon' in header
             ? header.icon
             : undefined;
         return {
-            color: icon?.color ||
-                (typeof styleHeader === 'object' ? styleHeader?.color : '#f39c12'),
-            fontSize: icon?.fontSize || '1.5rem',
-            backgroundColor: icon?.backgroundColor || 'transparent',
-            borderRadius: icon?.shape === 'circular' ? '50%' : '4px',
-            padding: '5px',
+            color: icon?.color || defaultColor,
+            fontSize: icon?.fontSize || '2.2rem',
         };
     }
+    /**
+     * No default text anymore.
+     * - If dialogConfig.content is a string, we return it.
+     * - If it is an object with text, we use that.
+     * - Otherwise we return '' (empty) so the body is blank.
+     */
     getDialogContentText() {
         const content = this.dialogConfig.content;
-        const dialogStyle = this.dialogConfig.dialogStyle ?? SeverityEnum.INFO;
-        const styleContent = DIALOG_STYLES[dialogStyle]?.content;
-        return typeof content === 'string'
-            ? content
-            : content?.text ||
-                (typeof styleContent === 'object'
-                    ? styleContent?.text
-                    : 'Are you sure?');
+        if (typeof content === 'string') {
+            return content;
+        }
+        if (content && typeof content === 'object' && 'text' in content) {
+            return content.text ?? '';
+        }
+        return '';
     }
     getDialogContentStyle() {
         const content = this.dialogConfig.content;
-        const dialogStyle = this.dialogConfig.dialogStyle ?? SeverityEnum.INFO;
-        const styleContent = DIALOG_STYLES[dialogStyle]?.content;
-        return typeof content === 'object' && content !== null
-            ? {
-                color: content.color ||
-                    (typeof styleContent === 'object' ? styleContent?.color : '#333'),
-                fontSize: content.fontSize || '20px',
-                textAlign: content.position || 'left',
+        const { message } = this.getSeverityColors();
+        let fontSize = '18px';
+        let textAlign;
+        if (typeof content === 'object' && content !== null) {
+            if (content.fontSize) {
+                fontSize = content.fontSize;
             }
-            : {
-                color: typeof styleContent === 'object' ? styleContent?.color : '#333',
-                fontSize: '20px',
-                textAlign: 'left',
-            };
+            if (content.position) {
+                textAlign = content.position;
+            }
+        }
+        return {
+            color: message,
+            fontSize,
+            ...(textAlign ? { textAlign } : {}),
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogComponent, deps: [{ token: i1$1.ConfirmationService }, { token: i1$1.MessageService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTDialogComponent, selector: "pt-dialog", inputs: { dialogConfig: "dialogConfig" }, outputs: { confirm: "confirm", cancel: "cancel" }, providers: [ConfirmationService, MessageService], usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-dialog\">\n  <p-confirmDialog>\n    <!-- Header with Icon and Title aligned horizontally -->\n    <ng-template pTemplate=\"header\">\n      <div class=\"popup-header bordered-section\">\n        <i [class]=\"getDialogIconClass()\" [ngStyle]=\"getDialogIconStyle()\"></i>\n        <span class=\"popup-title\" [ngStyle]=\"getDialogHeaderStyle()\">\n          {{ getDialogHeaderText() }}\n        </span>\n      </div>\n    </ng-template>\n\n    <!-- Message Content with Divider -->\n    <ng-template pTemplate=\"message\" let-message>\n      <div\n        class=\"popup-content bordered-section\"\n        [ngStyle]=\"getDialogContentStyle()\"\n      >\n        <p>{{ getDialogContentText() }}</p>\n      </div>\n    </ng-template>\n  </p-confirmDialog>\n</div>\n", styles: ["::ng-deep .pt-dialog .p-dialog .p-dialog-header{padding-bottom:0}::ng-deep .pt-dialog .p-dialog .p-dialog-content{padding:0}::ng-deep .pt-dialog .full-width-button{width:100%;display:block;text-align:center}::ng-deep .pt-dialog .p-dialog-footer{display:flex;justify-content:center;gap:10px;width:100%;padding:10px}::ng-deep .pt-dialog .p-confirm-dialog-accept,::ng-deep .pt-dialog .p-confirm-dialog-reject{flex:1;max-width:50%;text-align:center;display:flex;justify-content:center;align-items:center;height:40px}::ng-deep .pt-dialog .p-confirm-dialog-accept i,::ng-deep .pt-dialog .p-confirm-dialog-reject i{margin-right:5px}::ng-deep .pt-dialog .p-confirm-dialog-accept .p-button-label,::ng-deep .pt-dialog .p-confirm-dialog-reject .p-button-label{font-weight:700;flex-grow:1;text-align:center}.pt-dialog .popup-header{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:700;padding-bottom:10px;width:100%}.pt-dialog .popup-title{color:#333;font-size:1.2rem}.pt-dialog .bordered-section{width:100%;border-bottom:1px solid rgba(0,0,0,.2);padding-bottom:10px;margin-bottom:10px}.pt-dialog .popup-content{display:flex;justify-content:center;text-align:center;padding:15px;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$7.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTDialogComponent, selector: "pt-dialog", inputs: { dialogConfig: "dialogConfig" }, outputs: { confirm: "confirm", cancel: "cancel" }, providers: [ConfirmationService, MessageService], usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-dialog\">\n  <p-confirmDialog #cd>\n    <ng-template pTemplate=\"header\"></ng-template>\n\n    <ng-template pTemplate=\"message\">\n      <div class=\"pt-dialog-card\">\n        <div class=\"pt-dialog-card-top\">\n          <div class=\"pt-dialog-icon-wrapper\">\n            <i\n              class=\"pt-dialog-icon\"\n              [class]=\"getDialogIconClass()\"\n              [ngStyle]=\"getDialogIconStyle()\"\n            ></i>\n          </div>\n\n          <div class=\"pt-dialog-text-wrapper\">\n            <div class=\"pt-dialog-title\" [ngStyle]=\"getDialogHeaderStyle()\">\n              {{ getDialogHeaderText() }}\n            </div>\n\n            <div class=\"pt-dialog-message\" [ngStyle]=\"getDialogContentStyle()\">\n              {{ getDialogContentText() }}\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n      <div class=\"pt-dialog-footer-buttons\">\n        <pt-button\n          *ngIf=\"dialogConfig.cancelButtonConfig\"\n          [buttonConfig]=\"cancelButtonModel\"\n          (click)=\"cd.reject()\"\n        ></pt-button>\n\n        <pt-button\n          *ngIf=\"dialogConfig.confirmButtonConfig\"\n          [buttonConfig]=\"confirmButtonModel\"\n          (click)=\"cd.accept()\"\n        ></pt-button>\n      </div>\n    </ng-template>\n  </p-confirmDialog>\n</div>\n", styles: ["::ng-deep .p-confirm-dialog.pt-dialog-overlay{border-radius:18px;overflow:hidden;box-shadow:0 20px 45px #0f172a59}::ng-deep .p-confirm-dialog.pt-dialog-overlay .p-dialog-header{display:none!important;padding:0!important;border:0!important}::ng-deep .p-confirm-dialog.pt-dialog-overlay .p-dialog-content{padding:0;background:transparent;border-top-left-radius:18px;border-top-right-radius:18px}.pt-dialog-card{border-radius:18px 18px 0 0;overflow:hidden}.pt-dialog-card-top{padding:28px 40px;display:flex;align-items:flex-start}::ng-deep .p-confirm-dialog.pt-dialog-danger .pt-dialog-card{background-color:#fde4e4}::ng-deep .p-confirm-dialog.pt-dialog-warning .pt-dialog-card{background-color:#fff4d1}::ng-deep .p-confirm-dialog.pt-dialog-success .pt-dialog-card{background-color:#dcfce7}::ng-deep .p-confirm-dialog.pt-dialog-info .pt-dialog-card{background-color:#e0f2fe}.pt-dialog-icon-wrapper{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:18px;box-sizing:border-box}.pt-dialog-icon{font-size:30px;line-height:1;color:#b91c1c}.pt-dialog-text-wrapper{flex:1}.pt-dialog-title{font-size:22px;font-weight:700;margin-bottom:8px;color:#b91c1c}.pt-dialog-message{font-size:18px;line-height:1.5;color:#4b5563}::ng-deep .p-confirm-dialog.pt-dialog-overlay .p-dialog-footer{background:#fff;border-top:1px solid rgba(148,163,184,.25);padding:16px 32px 22px}.pt-dialog-footer-buttons{display:flex;justify-content:center;gap:16px}::ng-deep .p-confirm-dialog .p-dialog-footer .p-button{border-radius:9999px;padding:.75rem 1.8rem;font-weight:600}::ng-deep .p-confirm-dialog .p-dialog-footer .p-button i.pi{margin-right:.5rem}::ng-deep .p-confirm-dialog.pt-dialog-danger .p-dialog-footer .p-button{background:#fff!important;border-color:#dc2626!important;color:#dc2626!important}::ng-deep .p-confirm-dialog.pt-dialog-warning .p-dialog-footer .p-button{background:#fff!important;border-color:#d97706!important;color:#b45309!important}::ng-deep .p-confirm-dialog.pt-dialog-success .p-dialog-footer .p-button{background:#fff!important;border-color:#16a34a!important;color:#15803d!important}::ng-deep .p-confirm-dialog.pt-dialog-info .p-dialog-footer .p-button{background:#fff!important;border-color:#2563eb!important;color:#2563eb!important}::ng-deep .p-confirm-dialog.pt-dialog-info .p-dialog-footer .p-button:hover{background:#eff6ff!important}::ng-deep .p-confirm-dialog.pt-dialog-overlay .p-dialog-content{padding:0;background:transparent;border-top-left-radius:18px;border-top-right-radius:18px;display:block}.pt-dialog-card{border-radius:18px 18px 0 0;overflow:hidden;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }, { kind: "component", type: i4$2.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-dialog', providers: [ConfirmationService, MessageService], template: "<div class=\"pt-dialog\">\n  <p-confirmDialog>\n    <!-- Header with Icon and Title aligned horizontally -->\n    <ng-template pTemplate=\"header\">\n      <div class=\"popup-header bordered-section\">\n        <i [class]=\"getDialogIconClass()\" [ngStyle]=\"getDialogIconStyle()\"></i>\n        <span class=\"popup-title\" [ngStyle]=\"getDialogHeaderStyle()\">\n          {{ getDialogHeaderText() }}\n        </span>\n      </div>\n    </ng-template>\n\n    <!-- Message Content with Divider -->\n    <ng-template pTemplate=\"message\" let-message>\n      <div\n        class=\"popup-content bordered-section\"\n        [ngStyle]=\"getDialogContentStyle()\"\n      >\n        <p>{{ getDialogContentText() }}</p>\n      </div>\n    </ng-template>\n  </p-confirmDialog>\n</div>\n", styles: ["::ng-deep .pt-dialog .p-dialog .p-dialog-header{padding-bottom:0}::ng-deep .pt-dialog .p-dialog .p-dialog-content{padding:0}::ng-deep .pt-dialog .full-width-button{width:100%;display:block;text-align:center}::ng-deep .pt-dialog .p-dialog-footer{display:flex;justify-content:center;gap:10px;width:100%;padding:10px}::ng-deep .pt-dialog .p-confirm-dialog-accept,::ng-deep .pt-dialog .p-confirm-dialog-reject{flex:1;max-width:50%;text-align:center;display:flex;justify-content:center;align-items:center;height:40px}::ng-deep .pt-dialog .p-confirm-dialog-accept i,::ng-deep .pt-dialog .p-confirm-dialog-reject i{margin-right:5px}::ng-deep .pt-dialog .p-confirm-dialog-accept .p-button-label,::ng-deep .pt-dialog .p-confirm-dialog-reject .p-button-label{font-weight:700;flex-grow:1;text-align:center}.pt-dialog .popup-header{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:700;padding-bottom:10px;width:100%}.pt-dialog .popup-title{color:#333;font-size:1.2rem}.pt-dialog .bordered-section{width:100%;border-bottom:1px solid rgba(0,0,0,.2);padding-bottom:10px;margin-bottom:10px}.pt-dialog .popup-content{display:flex;justify-content:center;text-align:center;padding:15px;width:100%}\n"] }]
+            args: [{ selector: 'pt-dialog', providers: [ConfirmationService, MessageService], template: "<div class=\"pt-dialog\">\n  <p-confirmDialog #cd>\n    <ng-template pTemplate=\"header\"></ng-template>\n\n    <ng-template pTemplate=\"message\">\n      <div class=\"pt-dialog-card\">\n        <div class=\"pt-dialog-card-top\">\n          <div class=\"pt-dialog-icon-wrapper\">\n            <i\n              class=\"pt-dialog-icon\"\n              [class]=\"getDialogIconClass()\"\n              [ngStyle]=\"getDialogIconStyle()\"\n            ></i>\n          </div>\n\n          <div class=\"pt-dialog-text-wrapper\">\n            <div class=\"pt-dialog-title\" [ngStyle]=\"getDialogHeaderStyle()\">\n              {{ getDialogHeaderText() }}\n            </div>\n\n            <div class=\"pt-dialog-message\" [ngStyle]=\"getDialogContentStyle()\">\n              {{ getDialogContentText() }}\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n      <div class=\"pt-dialog-footer-buttons\">\n        <pt-button\n          *ngIf=\"dialogConfig.cancelButtonConfig\"\n          [buttonConfig]=\"cancelButtonModel\"\n          (click)=\"cd.reject()\"\n        ></pt-button>\n\n        <pt-button\n          *ngIf=\"dialogConfig.confirmButtonConfig\"\n          [buttonConfig]=\"confirmButtonModel\"\n          (click)=\"cd.accept()\"\n        ></pt-button>\n      </div>\n    </ng-template>\n  </p-confirmDialog>\n</div>\n", styles: ["::ng-deep .p-confirm-dialog.pt-dialog-overlay{border-radius:18px;overflow:hidden;box-shadow:0 20px 45px #0f172a59}::ng-deep .p-confirm-dialog.pt-dialog-overlay .p-dialog-header{display:none!important;padding:0!important;border:0!important}::ng-deep .p-confirm-dialog.pt-dialog-overlay .p-dialog-content{padding:0;background:transparent;border-top-left-radius:18px;border-top-right-radius:18px}.pt-dialog-card{border-radius:18px 18px 0 0;overflow:hidden}.pt-dialog-card-top{padding:28px 40px;display:flex;align-items:flex-start}::ng-deep .p-confirm-dialog.pt-dialog-danger .pt-dialog-card{background-color:#fde4e4}::ng-deep .p-confirm-dialog.pt-dialog-warning .pt-dialog-card{background-color:#fff4d1}::ng-deep .p-confirm-dialog.pt-dialog-success .pt-dialog-card{background-color:#dcfce7}::ng-deep .p-confirm-dialog.pt-dialog-info .pt-dialog-card{background-color:#e0f2fe}.pt-dialog-icon-wrapper{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:18px;box-sizing:border-box}.pt-dialog-icon{font-size:30px;line-height:1;color:#b91c1c}.pt-dialog-text-wrapper{flex:1}.pt-dialog-title{font-size:22px;font-weight:700;margin-bottom:8px;color:#b91c1c}.pt-dialog-message{font-size:18px;line-height:1.5;color:#4b5563}::ng-deep .p-confirm-dialog.pt-dialog-overlay .p-dialog-footer{background:#fff;border-top:1px solid rgba(148,163,184,.25);padding:16px 32px 22px}.pt-dialog-footer-buttons{display:flex;justify-content:center;gap:16px}::ng-deep .p-confirm-dialog .p-dialog-footer .p-button{border-radius:9999px;padding:.75rem 1.8rem;font-weight:600}::ng-deep .p-confirm-dialog .p-dialog-footer .p-button i.pi{margin-right:.5rem}::ng-deep .p-confirm-dialog.pt-dialog-danger .p-dialog-footer .p-button{background:#fff!important;border-color:#dc2626!important;color:#dc2626!important}::ng-deep .p-confirm-dialog.pt-dialog-warning .p-dialog-footer .p-button{background:#fff!important;border-color:#d97706!important;color:#b45309!important}::ng-deep .p-confirm-dialog.pt-dialog-success .p-dialog-footer .p-button{background:#fff!important;border-color:#16a34a!important;color:#15803d!important}::ng-deep .p-confirm-dialog.pt-dialog-info .p-dialog-footer .p-button{background:#fff!important;border-color:#2563eb!important;color:#2563eb!important}::ng-deep .p-confirm-dialog.pt-dialog-info .p-dialog-footer .p-button:hover{background:#eff6ff!important}::ng-deep .p-confirm-dialog.pt-dialog-overlay .p-dialog-content{padding:0;background:transparent;border-top-left-radius:18px;border-top-right-radius:18px;display:block}.pt-dialog-card{border-radius:18px 18px 0 0;overflow:hidden;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.ConfirmationService }, { type: i1$1.MessageService }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { dialogConfig: [{
                 type: Input
             }], confirm: [{