ng-prime-tools 1.0.32 → 1.0.33

package/fesm2022/ng-prime-tools.mjs

@@ -49,6 +49,7 @@ import * as i3$6 from 'primeng/breadcrumb';
 import { BreadcrumbModule } from 'primeng/breadcrumb';
 import * as i4$2 from 'primeng/confirmdialog';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import * as i2$3 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i2$2 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
@@ -172,6 +173,11 @@ class PTAdvancedPrimeTableComponent {
         this.hasExportPDF = false;
         this.hasColumnFilter = false;
         this.isPaginated = false;
+        /**
+         * Actions configuration.
+         * - code 'edit' / 'delete' garde l'ancien comportement.
+         * - tout autre code = action custom, gérée uniquement dans le parent.
+         */
         this.actions = [];
         this.isSortable = false;
         this.loading = false;
@@ -188,21 +194,23 @@ class PTAdvancedPrimeTableComponent {
         this.validCurrencyCodes = ['USD', 'EUR', 'MAD'];
         this.iconWidth = 77;
         // Component state properties
+        this.rows = 0;
+        this.hasGroupedColumns = false;
+        // Flags / handlers for built-in edit/delete support
         this.isDelete = false;
         this.isEdit = false;
-        this.rows = 0;
+        this.Delete = () => { };
+        this.initEditableRow = () => { };
+        this.saveEditableRow = () => { };
+        this.cancelEditableRow = () => { };
+        // Extra custom actions (codes other than 'edit'/'delete')
+        this.customActions = [];
         // Data management properties
         this.dataMap = new Map();
         this.map = new Map();
         this.optionEntries = new Map();
         this.optionValues = [];
         this.globalFilterFields = [];
-        // CRUD operation handlers
-        this.Delete = () => { };
-        this.initEditableRow = () => { };
-        this.saveEditableRow = () => { };
-        this.cancelEditableRow = () => { };
-        this.hasGroupedColumns = false;
     }
     ngOnInit() {
         console.log('PTAdvancedPrimeTable columns:', this.columns);
@@ -237,10 +245,56 @@ class PTAdvancedPrimeTableComponent {
             }
         });
     }
+    // ---------- ACTIONS INITIALIZATION ----------
+    initializeActions() {
+        // reset state
+        this.isDelete = false;
+        this.isEdit = false;
+        this.Delete = () => { };
+        this.initEditableRow = () => { };
+        this.saveEditableRow = () => { };
+        this.cancelEditableRow = () => { };
+        this.customActions = [];
+        if (!this.actions || this.actions.length === 0) {
+            return;
+        }
+        this.actions.forEach((action) => {
+            switch (action.code) {
+                case 'delete':
+                    this.isDelete = true;
+                    this.Delete = (value) => action.action(value);
+                    break;
+                case 'edit':
+                    this.initializeEditActions(action);
+                    break;
+                default:
+                    // any other code is a pure custom action
+                    this.customActions.push(action);
+                    break;
+            }
+        });
+    }
+    initializeEditActions(action) {
+        this.isEdit = true;
+        this.initEditableRow = (data) => action.action.init(data);
+        this.saveEditableRow = (data) => {
+            const record = this.map.get(data.id);
+            action.action.save(data, record);
+            this.dataMap.clear();
+        };
+        this.cancelEditableRow = (item) => console.log(item);
+    }
+    /** Called when a custom action button is clicked */
+    onCustomActionClick(action, row) {
+        if (action && typeof action.action === 'function') {
+            action.action(row);
+        }
+    }
     // Initialize filters for composed columns
     initializeComposedFilters(col) {
         col.composedNames?.forEach((composedName) => {
-            this.globalFilterFields.push(col.code + '.' + composedName);
+            const code = col.code || '';
+            this.globalFilterFields.push(code + '.' + composedName);
             this.filters[composedName] = {
                 options: col.filterOptions,
                 value: [],
@@ -264,9 +318,10 @@ class PTAdvancedPrimeTableComponent {
         this.filter.emit(this.filters);
         const filterValue = selectedValues.join(',');
         let matchResults = [];
+        const colCode = col.code;
         selectedValues.forEach((value) => {
             const matches = this.dt.value.filter((row) => {
-                return row[col.code]?.[composedName]
+                return row[colCode]?.[composedName]
                     ?.toString()
                     .toLowerCase()
                     .includes(value.toLowerCase());
@@ -318,7 +373,8 @@ class PTAdvancedPrimeTableComponent {
         return `${totalWidth}px`;
     }
     getHeaderWidth(col) {
-        const widthWithoutPx = parseInt(col.width?.replace('px', '') || '0', 10);
+        const base = col.width ?? this.calculateColumnWidth(col);
+        const widthWithoutPx = parseInt(base.replace('px', '') || '0', 10);
         const headerWidth = widthWithoutPx + 20;
         return `${headerWidth}px`;
     }
@@ -345,43 +401,15 @@ class PTAdvancedPrimeTableComponent {
             this.rows = this.rowsPerPage[0];
         }
     }
-    initializeActions() {
-        if (this.actions) {
-            this.actions.forEach((action) => {
-                switch (action.code) {
-                    case 'delete':
-                        this.isDelete = true;
-                        this.Delete = (value) => action.action(value);
-                        break;
-                    case 'edit':
-                        this.initializeEditActions(action);
-                        break;
-                    default:
-                        this.isDelete = false;
-                        this.isEdit = false;
-                }
-            });
-        }
-    }
-    initializeEditActions(action) {
-        this.isEdit = true;
-        this.initEditableRow = (data) => action.action.init(data);
-        this.saveEditableRow = (data) => {
-            const record = this.map.get(data.id);
-            action.action.save(data, record);
-            this.dataMap.clear();
-        };
-        this.cancelEditableRow = (item) => console.log(item);
-    }
     onChange(event, id, key) {
         const target = event.target;
         this.changeHandler(id, key, target.value);
     }
     changeHandler(id, key, value) {
-        let column = this.columns.find((item) => item.code === key);
+        const column = this.columns.find((item) => item.code === key);
         if (!this.map.get(id)) {
             if (column?.type === TableTypeEnum.DATE) {
-                let date = this.parseDate(value);
+                const date = this.parseDate(value);
                 this.dataMap.set(key, date);
             }
             else {
@@ -390,9 +418,9 @@ class PTAdvancedPrimeTableComponent {
             this.map.set(id, new Map(this.dataMap));
         }
         else {
-            let mapItem = this.map.get(id);
+            const mapItem = this.map.get(id);
             if (column?.type === TableTypeEnum.DATE) {
-                let date = this.parseDate(value);
+                const date = this.parseDate(value);
                 mapItem.set(key, date);
             }
             else {
@@ -420,11 +448,13 @@ class PTAdvancedPrimeTableComponent {
         }
     }
     isEditable(key) {
-        let column = this.columns.find((item) => item.code === key);
+        if (!key)
+            return false;
+        const column = this.columns.find((item) => item.code === key);
         return column?.isEditable !== false;
     }
     isMultiSelect(key) {
-        let column = this.columns.find((item) => item.code === key);
+        const column = this.columns.find((item) => item.code === key);
         if (column?.type === TableTypeEnum.MULTISELECT &&
             column.options &&
             column.code !== undefined) {
@@ -479,7 +509,7 @@ class PTAdvancedPrimeTableComponent {
             });
         });
         this.dt.value = filteredData;
-        // ⛔ do NOT override totalRecords in server-side mode
+        // ⛔ ne pas toucher à totalRecords en mode serveur
         // this.totalRecords = filteredData.length ?? 0;
     }
     filterComposedColumn(composedData, value) {
@@ -572,11 +602,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", 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" }] }); }
+    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 p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onFilter)=\"onFilter($event)\"\n    (onPage)=\"onPageChange($event)\"\n  >\n    <!-- CAPTION -->\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          <!-- Clear filters -->\n          <button\n            *ngIf=\"hasSearchFilter\"\n            pButton\n            icon=\"pi pi-filter-slash\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"clear(dt)\"\n            title=\"Clear filters\"\n          ></button>\n\n          <!-- Export to Excel Button -->\n          <button\n            *ngIf=\"hasExportExcel\"\n            pButton\n            icon=\"pi pi-file-excel\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportExcel()\"\n            title=\"Export to Excel\"\n          ></button>\n\n          <!-- Export to PDF Button -->\n          <button\n            *ngIf=\"hasExportPDF\"\n            pButton\n            icon=\"pi pi-file-pdf\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportPdf()\"\n            title=\"Export to PDF\"\n          ></button>\n        </div>\n\n        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n            />\n          </p-iconField>\n        </div>\n      </div>\n    </ng-template>\n\n    <!-- HEADER -->\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        <ng-container *ngFor=\"let col of columns\">\n          <th\n            *ngIf=\"!col.children; else groupHeader\"\n            [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                      <!-- COMPOSED FILTER -->\n                      <p-columnFilter\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        [type]=\"getColumnFilterType(col)\"\n                        *ngIf=\"col.type === TableTypeEnum.COMPOSED\"\n                        showClearButton=\"false\"\n                        showApplyButton=\"false\"\n                      >\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                          <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 TYPES -->\n                      <p-columnFilter\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        [type]=\"getColumnFilterType(col)\"\n                        *ngIf=\"col.type !== TableTypeEnum.COMPOSED\"\n                        hideOnClear=\"true\"\n                      >\n                        <!-- 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                        <!-- 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                        <!-- 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\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\n          <!-- GROUPED HEADER -->\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\n      <!-- CHILD HEADERS -->\n      <tr *ngIf=\"hasGroupedColumns\">\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.children\">\n            <th\n              *ngFor=\"let child of col.children\"\n              [style.width]=\"getHeaderWidth(child)\"\n              [style.padding]=\"'0px'\"\n            ></th>\n          </ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n\n    <!-- EMPTY MESSAGE -->\n    <ng-template pTemplate=\"emptymessage\">\n      <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      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- show cell when:\n                 - ACTION column (no value needed)\n                 - OR normal col with value present -->\n            <ng-container\n              *ngIf=\"\n                col.type === TableTypeEnum.ACTION ||\n                (col.code !== undefined && data[col.code!] !== undefined)\n              \"\n            >\n              <td\n                *ngIf=\"\n                  isEditable(col.code!) && col.type !== TableTypeEnum.ACTION;\n                  else normalTD\n                \"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <!-- Editable input for NUMBER/DATE/STRING/MULTISELECT -->\n                <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-multiSelect\n                        appendTo=\"body\"\n                        [ngModel]=\"data[col.code!]\"\n                        [style]=\"{ width: '100%' }\"\n                        (ngModelChange)=\"\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                  <!-- ACTION column: built-in edit/delete + custom actions -->\n                  <ng-container\n                    *ngIf=\"\n                      col.type === TableTypeEnum.ACTION;\n                      else nonActionCell\n                    \"\n                  >\n                    <div class=\"action-buttons-container\">\n                      <!-- built-in delete -->\n                      <button\n                        *ngIf=\"isDelete\"\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        icon=\"pi pi-trash\"\n                        (click)=\"Delete(data.id)\"\n                        class=\"p-button-rounded p-button-text\"\n                      ></button>\n\n                      <!-- built-in inline edit (old behaviour) -->\n                      <div *ngIf=\"isEdit\">\n                        <button\n                          pInitEditableRow\n                          *ngIf=\"!editing\"\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-pencil\"\n                          (click)=\"initEditableRow(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                        <button\n                          *ngIf=\"editing\"\n                          pSaveEditableRow\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-check\"\n                          (click)=\"saveEditableRow(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                        <button\n                          *ngIf=\"editing\"\n                          pCancelEditableRow\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-times\"\n                          (click)=\"cancelEditableRow(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                      </div>\n\n                      <!-- custom actions -->\n                      <button\n                        *ngFor=\"let act of customActions\"\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        class=\"p-button-rounded p-button-text\"\n                        [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                        [ngClass]=\"act.styleClass\"\n                        (click)=\"onCustomActionClick(act, data)\"\n                      ></button>\n                    </div>\n                  </ng-container>\n\n                  <!-- NON-ACTION cells -->\n                  <ng-template #nonActionCell>\n                    <!-- COMPOSED -->\n                    <ng-container\n                      *ngIf=\"\n                        col.type === TableTypeEnum.COMPOSED;\n                        else nonComposed\n                      \"\n                    >\n                      <div class=\"composed-cell\">\n                        <ng-container\n                          *ngFor=\"\n                            let composedName of col.composedNames;\n                            let i = index\n                          \"\n                        >\n                          <!-- IMAGE -->\n                          <ng-container\n                            *ngIf=\"\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.IMAGE\n                            \"\n                          >\n                            <img\n                              [src]=\"data[col.code!][composedName]\"\n                              alt=\"composed-img\"\n                              class=\"composed-image\"\n                              [ngStyle]=\"\n                                getImageStyle(\n                                  col.composedStyles?.[composedName]\n                                )\n                              \"\n                            />\n                          </ng-container>\n\n                          <!-- STRING -->\n                          <ng-container\n                            *ngIf=\"\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.STRING\n                            \"\n                          >\n                            <span\n                              class=\"composed-text\"\n                              [ngStyle]=\"\n                                getTitleStyle(\n                                  col.composedStyles?.[composedName]\n                                )\n                              \"\n                            >\n                              {{ data[col.code!][composedName] }}\n                            </span>\n                          </ng-container>\n                        </ng-container>\n                      </div>\n                    </ng-container>\n\n                    <ng-template #nonComposed>\n                      <!-- AMOUNT-->\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.AMOUNT;\n                          else nonAmount\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\n                      <ng-template #nonAmount>\n                        <!-- NUMBER-->\n                        <ng-container\n                          *ngIf=\"\n                            col.type === TableTypeEnum.NUMBER;\n                            else nonNumber\n                          \"\n                        >\n                          {{\n                            formatNumber(\n                              data[col.code!],\n                              col.decimalPlaces,\n                              col.thousandSeparator,\n                              col.decimalSeparator\n                            )\n                          }}\n                        </ng-container>\n\n                        <ng-template #nonNumber>\n                          <!-- DATE -->\n                          <ng-container\n                            *ngIf=\"\n                              col.type === TableTypeEnum.DATE;\n                              else normalTypes\n                            \"\n                          >\n                            {{ formatDate(data[col.code!]) }}\n                          </ng-container>\n\n                          <ng-template #normalTypes>\n                            <!-- STRING, MULTISELECT-->\n                            <ng-container\n                              *ngIf=\"\n                                [\n                                  TableTypeEnum.STRING,\n                                  TableTypeEnum.MULTISELECT\n                                ].includes(col.type!)\n                              \"\n                            >\n                              {{ data[col.code!] }}\n                            </ng-container>\n                          </ng-template>\n                        </ng-template>\n                      </ng-template>\n                    </ng-template>\n                  </ng-template>\n                </td>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n\n          <!-- CHILD COLUMNS -->\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                  <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      </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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i6.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.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    [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"] }]
+            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 p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onFilter)=\"onFilter($event)\"\n    (onPage)=\"onPageChange($event)\"\n  >\n    <!-- CAPTION -->\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          <!-- Clear filters -->\n          <button\n            *ngIf=\"hasSearchFilter\"\n            pButton\n            icon=\"pi pi-filter-slash\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"clear(dt)\"\n            title=\"Clear filters\"\n          ></button>\n\n          <!-- Export to Excel Button -->\n          <button\n            *ngIf=\"hasExportExcel\"\n            pButton\n            icon=\"pi pi-file-excel\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportExcel()\"\n            title=\"Export to Excel\"\n          ></button>\n\n          <!-- Export to PDF Button -->\n          <button\n            *ngIf=\"hasExportPDF\"\n            pButton\n            icon=\"pi pi-file-pdf\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportPdf()\"\n            title=\"Export to PDF\"\n          ></button>\n        </div>\n\n        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n            />\n          </p-iconField>\n        </div>\n      </div>\n    </ng-template>\n\n    <!-- HEADER -->\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        <ng-container *ngFor=\"let col of columns\">\n          <th\n            *ngIf=\"!col.children; else groupHeader\"\n            [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                      <!-- COMPOSED FILTER -->\n                      <p-columnFilter\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        [type]=\"getColumnFilterType(col)\"\n                        *ngIf=\"col.type === TableTypeEnum.COMPOSED\"\n                        showClearButton=\"false\"\n                        showApplyButton=\"false\"\n                      >\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                          <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 TYPES -->\n                      <p-columnFilter\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        [type]=\"getColumnFilterType(col)\"\n                        *ngIf=\"col.type !== TableTypeEnum.COMPOSED\"\n                        hideOnClear=\"true\"\n                      >\n                        <!-- 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                        <!-- 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                        <!-- 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\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\n          <!-- GROUPED HEADER -->\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\n      <!-- CHILD HEADERS -->\n      <tr *ngIf=\"hasGroupedColumns\">\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.children\">\n            <th\n              *ngFor=\"let child of col.children\"\n              [style.width]=\"getHeaderWidth(child)\"\n              [style.padding]=\"'0px'\"\n            ></th>\n          </ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n\n    <!-- EMPTY MESSAGE -->\n    <ng-template pTemplate=\"emptymessage\">\n      <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      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- show cell when:\n                 - ACTION column (no value needed)\n                 - OR normal col with value present -->\n            <ng-container\n              *ngIf=\"\n                col.type === TableTypeEnum.ACTION ||\n                (col.code !== undefined && data[col.code!] !== undefined)\n              \"\n            >\n              <td\n                *ngIf=\"\n                  isEditable(col.code!) && col.type !== TableTypeEnum.ACTION;\n                  else normalTD\n                \"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <!-- Editable input for NUMBER/DATE/STRING/MULTISELECT -->\n                <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-multiSelect\n                        appendTo=\"body\"\n                        [ngModel]=\"data[col.code!]\"\n                        [style]=\"{ width: '100%' }\"\n                        (ngModelChange)=\"\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                  <!-- ACTION column: built-in edit/delete + custom actions -->\n                  <ng-container\n                    *ngIf=\"\n                      col.type === TableTypeEnum.ACTION;\n                      else nonActionCell\n                    \"\n                  >\n                    <div class=\"action-buttons-container\">\n                      <!-- built-in delete -->\n                      <button\n                        *ngIf=\"isDelete\"\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        icon=\"pi pi-trash\"\n                        (click)=\"Delete(data.id)\"\n                        class=\"p-button-rounded p-button-text\"\n                      ></button>\n\n                      <!-- built-in inline edit (old behaviour) -->\n                      <div *ngIf=\"isEdit\">\n                        <button\n                          pInitEditableRow\n                          *ngIf=\"!editing\"\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-pencil\"\n                          (click)=\"initEditableRow(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                        <button\n                          *ngIf=\"editing\"\n                          pSaveEditableRow\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-check\"\n                          (click)=\"saveEditableRow(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                        <button\n                          *ngIf=\"editing\"\n                          pCancelEditableRow\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-times\"\n                          (click)=\"cancelEditableRow(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                      </div>\n\n                      <!-- custom actions -->\n                      <button\n                        *ngFor=\"let act of customActions\"\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        class=\"p-button-rounded p-button-text\"\n                        [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                        [ngClass]=\"act.styleClass\"\n                        (click)=\"onCustomActionClick(act, data)\"\n                      ></button>\n                    </div>\n                  </ng-container>\n\n                  <!-- NON-ACTION cells -->\n                  <ng-template #nonActionCell>\n                    <!-- COMPOSED -->\n                    <ng-container\n                      *ngIf=\"\n                        col.type === TableTypeEnum.COMPOSED;\n                        else nonComposed\n                      \"\n                    >\n                      <div class=\"composed-cell\">\n                        <ng-container\n                          *ngFor=\"\n                            let composedName of col.composedNames;\n                            let i = index\n                          \"\n                        >\n                          <!-- IMAGE -->\n                          <ng-container\n                            *ngIf=\"\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.IMAGE\n                            \"\n                          >\n                            <img\n                              [src]=\"data[col.code!][composedName]\"\n                              alt=\"composed-img\"\n                              class=\"composed-image\"\n                              [ngStyle]=\"\n                                getImageStyle(\n                                  col.composedStyles?.[composedName]\n                                )\n                              \"\n                            />\n                          </ng-container>\n\n                          <!-- STRING -->\n                          <ng-container\n                            *ngIf=\"\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.STRING\n                            \"\n                          >\n                            <span\n                              class=\"composed-text\"\n                              [ngStyle]=\"\n                                getTitleStyle(\n                                  col.composedStyles?.[composedName]\n                                )\n                              \"\n                            >\n                              {{ data[col.code!][composedName] }}\n                            </span>\n                          </ng-container>\n                        </ng-container>\n                      </div>\n                    </ng-container>\n\n                    <ng-template #nonComposed>\n                      <!-- AMOUNT-->\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.AMOUNT;\n                          else nonAmount\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\n                      <ng-template #nonAmount>\n                        <!-- NUMBER-->\n                        <ng-container\n                          *ngIf=\"\n                            col.type === TableTypeEnum.NUMBER;\n                            else nonNumber\n                          \"\n                        >\n                          {{\n                            formatNumber(\n                              data[col.code!],\n                              col.decimalPlaces,\n                              col.thousandSeparator,\n                              col.decimalSeparator\n                            )\n                          }}\n                        </ng-container>\n\n                        <ng-template #nonNumber>\n                          <!-- DATE -->\n                          <ng-container\n                            *ngIf=\"\n                              col.type === TableTypeEnum.DATE;\n                              else normalTypes\n                            \"\n                          >\n                            {{ formatDate(data[col.code!]) }}\n                          </ng-container>\n\n                          <ng-template #normalTypes>\n                            <!-- STRING, MULTISELECT-->\n                            <ng-container\n                              *ngIf=\"\n                                [\n                                  TableTypeEnum.STRING,\n                                  TableTypeEnum.MULTISELECT\n                                ].includes(col.type!)\n                              \"\n                            >\n                              {{ data[col.code!] }}\n                            </ng-container>\n                          </ng-template>\n                        </ng-template>\n                      </ng-template>\n                    </ng-template>\n                  </ng-template>\n                </td>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n\n          <!-- CHILD COLUMNS -->\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                  <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      </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: [{
@@ -803,6 +833,7 @@ var FormInputTypeEnum;
 (function (FormInputTypeEnum) {
     FormInputTypeEnum["DATE"] = "DATE";
     FormInputTypeEnum["TEXT"] = "TEXT";
+    FormInputTypeEnum["EMAIL"] = "EMAIL";
     FormInputTypeEnum["TEXTAREA"] = "TEXTAREA";
     FormInputTypeEnum["AMOUNT"] = "AMOUNT";
     FormInputTypeEnum["NUMBER"] = "NUMBER";
@@ -830,6 +861,7 @@ var InputValidationEnum;
     InputValidationEnum["ONLY_NUMBERS"] = "^[0-9]+$";
     InputValidationEnum["LETTERS_AND_NUMBERS"] = "^[A-Za-z0-9 ]+$";
     InputValidationEnum["PHONE_NUMBER"] = "^[0-9 ]+$";
+    InputValidationEnum["EMAIL"] = "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[A-Za-z]{2,}$";
 })(InputValidationEnum || (InputValidationEnum = {}));
 
 var BadgeType;
@@ -1686,11 +1718,11 @@ class PTDynamicFormFieldComponent {
         return field;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDynamicFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTDynamicFormFieldComponent, selector: "pt-dynamic-form-field", inputs: { field: "field", form: "form", inputWidth: "inputWidth" }, ngImport: i0, template: "<div\n  [formGroup]=\"form\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width:\n      field.type !== FormInputTypeEnum.CHECKBOX &&\n      field.type !== FormInputTypeEnum.SWITCH\n        ? field.width || inputWidth\n        : 'auto'\n  }\"\n>\n  <ng-container [ngSwitch]=\"field.type\">\n    <pt-text-input\n      *ngSwitchCase=\"FormInputTypeEnum.TEXT\"\n      [formGroup]=\"form\"\n      [formField]=\"asTextField(field)\"\n    ></pt-text-input>\n    <pt-number-input\n      *ngSwitchCase=\"FormInputTypeEnum.NUMBER\"\n      [formGroup]=\"form\"\n      [formField]=\"asNumberField(field)\"\n    ></pt-number-input>\n    <pt-number-input\n      *ngSwitchCase=\"FormInputTypeEnum.AMOUNT\"\n      [formGroup]=\"form\"\n      [formField]=\"asNumberField(field)\"\n    ></pt-number-input>\n    <pt-text-area-input\n      *ngSwitchCase=\"FormInputTypeEnum.TEXTAREA\"\n      [formGroup]=\"form\"\n      [formField]=\"asTextAreaField(field)\"\n    ></pt-text-area-input>\n    <pt-date-input\n      *ngSwitchCase=\"FormInputTypeEnum.DATE\"\n      [formGroup]=\"form\"\n      [formField]=\"asDateField(field)\"\n    ></pt-date-input>\n    <pt-multi-select\n      *ngSwitchCase=\"FormInputTypeEnum.MULTISELECT\"\n      [formGroup]=\"form\"\n      [formField]=\"asMultiSelectField(field)\"\n    ></pt-multi-select>\n    <pt-dropdown\n      *ngSwitchCase=\"FormInputTypeEnum.SELECT\"\n      [formGroup]=\"form\"\n      [formField]=\"asSelectField(field)\"\n    ></pt-dropdown>\n    <pt-check-box-input\n      *ngSwitchCase=\"FormInputTypeEnum.CHECKBOX\"\n      [formGroup]=\"form\"\n      [formField]=\"asCheckboxField(field)\"\n    ></pt-check-box-input>\n    <pt-switch-input\n      *ngSwitchCase=\"FormInputTypeEnum.SWITCH\"\n      [formGroup]=\"form\"\n      [formField]=\"asSwitchField(field)\"\n    ></pt-switch-input>\n  </ng-container>\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PTCheckBoxInputComponent, selector: "pt-check-box-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDateInputComponent, selector: "pt-date-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTNumberInputComponent, selector: "pt-number-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTSwitchInputComponent, selector: "pt-switch-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTTextAreaInputComponent, selector: "pt-text-area-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDropdownComponent, selector: "pt-dropdown", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTMultiSelectComponent, selector: "pt-multi-select", inputs: ["formGroup", "formField"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTDynamicFormFieldComponent, selector: "pt-dynamic-form-field", inputs: { field: "field", form: "form", inputWidth: "inputWidth" }, ngImport: i0, template: "<div\n  [formGroup]=\"form\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width:\n      field.type !== FormInputTypeEnum.CHECKBOX &&\n      field.type !== FormInputTypeEnum.SWITCH\n        ? field.width || inputWidth\n        : 'auto'\n  }\"\n>\n  <ng-container [ngSwitch]=\"field.type\">\n    <!-- TEXT -->\n    <pt-text-input\n      *ngSwitchCase=\"FormInputTypeEnum.TEXT\"\n      [formGroup]=\"form\"\n      [formField]=\"asTextField(field)\"\n    ></pt-text-input>\n\n    <!-- EMAIL (NEW) -->\n    <pt-text-input\n      *ngSwitchCase=\"FormInputTypeEnum.EMAIL\"\n      [formGroup]=\"form\"\n      [formField]=\"asTextField(field)\"\n    ></pt-text-input>\n\n    <!-- NUMBER -->\n    <pt-number-input\n      *ngSwitchCase=\"FormInputTypeEnum.NUMBER\"\n      [formGroup]=\"form\"\n      [formField]=\"asNumberField(field)\"\n    ></pt-number-input>\n\n    <!-- AMOUNT -->\n    <pt-number-input\n      *ngSwitchCase=\"FormInputTypeEnum.AMOUNT\"\n      [formGroup]=\"form\"\n      [formField]=\"asNumberField(field)\"\n    ></pt-number-input>\n\n    <!-- TEXTAREA -->\n    <pt-text-area-input\n      *ngSwitchCase=\"FormInputTypeEnum.TEXTAREA\"\n      [formGroup]=\"form\"\n      [formField]=\"asTextAreaField(field)\"\n    ></pt-text-area-input>\n\n    <!-- DATE -->\n    <pt-date-input\n      *ngSwitchCase=\"FormInputTypeEnum.DATE\"\n      [formGroup]=\"form\"\n      [formField]=\"asDateField(field)\"\n    ></pt-date-input>\n\n    <!-- MULTISELECT -->\n    <pt-multi-select\n      *ngSwitchCase=\"FormInputTypeEnum.MULTISELECT\"\n      [formGroup]=\"form\"\n      [formField]=\"asMultiSelectField(field)\"\n    ></pt-multi-select>\n\n    <!-- SELECT -->\n    <pt-dropdown\n      *ngSwitchCase=\"FormInputTypeEnum.SELECT\"\n      [formGroup]=\"form\"\n      [formField]=\"asSelectField(field)\"\n    ></pt-dropdown>\n\n    <!-- CHECKBOX -->\n    <pt-check-box-input\n      *ngSwitchCase=\"FormInputTypeEnum.CHECKBOX\"\n      [formGroup]=\"form\"\n      [formField]=\"asCheckboxField(field)\"\n    ></pt-check-box-input>\n\n    <!-- SWITCH -->\n    <pt-switch-input\n      *ngSwitchCase=\"FormInputTypeEnum.SWITCH\"\n      [formGroup]=\"form\"\n      [formField]=\"asSwitchField(field)\"\n    ></pt-switch-input>\n  </ng-container>\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PTCheckBoxInputComponent, selector: "pt-check-box-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDateInputComponent, selector: "pt-date-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTNumberInputComponent, selector: "pt-number-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTSwitchInputComponent, selector: "pt-switch-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTTextAreaInputComponent, selector: "pt-text-area-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDropdownComponent, selector: "pt-dropdown", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTMultiSelectComponent, selector: "pt-multi-select", inputs: ["formGroup", "formField"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDynamicFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-dynamic-form-field', template: "<div\n  [formGroup]=\"form\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width:\n      field.type !== FormInputTypeEnum.CHECKBOX &&\n      field.type !== FormInputTypeEnum.SWITCH\n        ? field.width || inputWidth\n        : 'auto'\n  }\"\n>\n  <ng-container [ngSwitch]=\"field.type\">\n    <pt-text-input\n      *ngSwitchCase=\"FormInputTypeEnum.TEXT\"\n      [formGroup]=\"form\"\n      [formField]=\"asTextField(field)\"\n    ></pt-text-input>\n    <pt-number-input\n      *ngSwitchCase=\"FormInputTypeEnum.NUMBER\"\n      [formGroup]=\"form\"\n      [formField]=\"asNumberField(field)\"\n    ></pt-number-input>\n    <pt-number-input\n      *ngSwitchCase=\"FormInputTypeEnum.AMOUNT\"\n      [formGroup]=\"form\"\n      [formField]=\"asNumberField(field)\"\n    ></pt-number-input>\n    <pt-text-area-input\n      *ngSwitchCase=\"FormInputTypeEnum.TEXTAREA\"\n      [formGroup]=\"form\"\n      [formField]=\"asTextAreaField(field)\"\n    ></pt-text-area-input>\n    <pt-date-input\n      *ngSwitchCase=\"FormInputTypeEnum.DATE\"\n      [formGroup]=\"form\"\n      [formField]=\"asDateField(field)\"\n    ></pt-date-input>\n    <pt-multi-select\n      *ngSwitchCase=\"FormInputTypeEnum.MULTISELECT\"\n      [formGroup]=\"form\"\n      [formField]=\"asMultiSelectField(field)\"\n    ></pt-multi-select>\n    <pt-dropdown\n      *ngSwitchCase=\"FormInputTypeEnum.SELECT\"\n      [formGroup]=\"form\"\n      [formField]=\"asSelectField(field)\"\n    ></pt-dropdown>\n    <pt-check-box-input\n      *ngSwitchCase=\"FormInputTypeEnum.CHECKBOX\"\n      [formGroup]=\"form\"\n      [formField]=\"asCheckboxField(field)\"\n    ></pt-check-box-input>\n    <pt-switch-input\n      *ngSwitchCase=\"FormInputTypeEnum.SWITCH\"\n      [formGroup]=\"form\"\n      [formField]=\"asSwitchField(field)\"\n    ></pt-switch-input>\n  </ng-container>\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"] }]
+            args: [{ selector: 'pt-dynamic-form-field', template: "<div\n  [formGroup]=\"form\"\n  class=\"form-field\"\n  [ngStyle]=\"{\n    width:\n      field.type !== FormInputTypeEnum.CHECKBOX &&\n      field.type !== FormInputTypeEnum.SWITCH\n        ? field.width || inputWidth\n        : 'auto'\n  }\"\n>\n  <ng-container [ngSwitch]=\"field.type\">\n    <!-- TEXT -->\n    <pt-text-input\n      *ngSwitchCase=\"FormInputTypeEnum.TEXT\"\n      [formGroup]=\"form\"\n      [formField]=\"asTextField(field)\"\n    ></pt-text-input>\n\n    <!-- EMAIL (NEW) -->\n    <pt-text-input\n      *ngSwitchCase=\"FormInputTypeEnum.EMAIL\"\n      [formGroup]=\"form\"\n      [formField]=\"asTextField(field)\"\n    ></pt-text-input>\n\n    <!-- NUMBER -->\n    <pt-number-input\n      *ngSwitchCase=\"FormInputTypeEnum.NUMBER\"\n      [formGroup]=\"form\"\n      [formField]=\"asNumberField(field)\"\n    ></pt-number-input>\n\n    <!-- AMOUNT -->\n    <pt-number-input\n      *ngSwitchCase=\"FormInputTypeEnum.AMOUNT\"\n      [formGroup]=\"form\"\n      [formField]=\"asNumberField(field)\"\n    ></pt-number-input>\n\n    <!-- TEXTAREA -->\n    <pt-text-area-input\n      *ngSwitchCase=\"FormInputTypeEnum.TEXTAREA\"\n      [formGroup]=\"form\"\n      [formField]=\"asTextAreaField(field)\"\n    ></pt-text-area-input>\n\n    <!-- DATE -->\n    <pt-date-input\n      *ngSwitchCase=\"FormInputTypeEnum.DATE\"\n      [formGroup]=\"form\"\n      [formField]=\"asDateField(field)\"\n    ></pt-date-input>\n\n    <!-- MULTISELECT -->\n    <pt-multi-select\n      *ngSwitchCase=\"FormInputTypeEnum.MULTISELECT\"\n      [formGroup]=\"form\"\n      [formField]=\"asMultiSelectField(field)\"\n    ></pt-multi-select>\n\n    <!-- SELECT -->\n    <pt-dropdown\n      *ngSwitchCase=\"FormInputTypeEnum.SELECT\"\n      [formGroup]=\"form\"\n      [formField]=\"asSelectField(field)\"\n    ></pt-dropdown>\n\n    <!-- CHECKBOX -->\n    <pt-check-box-input\n      *ngSwitchCase=\"FormInputTypeEnum.CHECKBOX\"\n      [formGroup]=\"form\"\n      [formField]=\"asCheckboxField(field)\"\n    ></pt-check-box-input>\n\n    <!-- SWITCH -->\n    <pt-switch-input\n      *ngSwitchCase=\"FormInputTypeEnum.SWITCH\"\n      [formGroup]=\"form\"\n      [formField]=\"asSwitchField(field)\"\n    ></pt-switch-input>\n  </ng-container>\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"] }]
         }], propDecorators: { field: [{
                 type: Input
             }], form: [{
@@ -1711,9 +1743,13 @@ class PTFormBuilderComponent {
         this.errorMessages = {
             en: {
                 required: 'is required',
+                email: 'is not a valid email address',
+                pattern: 'is invalid',
             },
             fr: {
                 required: 'est requis',
+                email: "n'est pas une adresse e-mail valide",
+                pattern: 'est invalide',
             },
         };
         this.form = this.fb.group({});
@@ -1723,18 +1759,77 @@ class PTFormBuilderComponent {
     }
     buildFormGroup(group) {
         group.fields?.forEach((field) => {
-            const validators = field.required ? [Validators.required] : [];
+            const validators = this.buildValidators(field);
             this.form.addControl(field.name, this.fb.control(field.value, validators));
         });
         group.groups?.forEach((subGroup) => {
             this.buildFormGroup(subGroup);
         });
     }
+    /**
+     * Build validators depending on field configuration & type.
+     */
+    buildValidators(field) {
+        const validators = [];
+        const anyField = field;
+        // --- Required ---
+        if (field.required) {
+            validators.push(Validators.required);
+        }
+        // --- Length constraints (for text / password / textarea / email) ---
+        if (anyField.minLength) {
+            validators.push(Validators.minLength(anyField.minLength));
+        }
+        if (anyField.maxLength) {
+            validators.push(Validators.maxLength(anyField.maxLength));
+        }
+        // --- InputValidationEnum / custom pattern ---
+        if (anyField.inputValidation) {
+            validators.push(Validators.pattern(new RegExp(anyField.inputValidation)));
+        }
+        else if (anyField.pattern) {
+            validators.push(Validators.pattern(anyField.pattern));
+        }
+        // --- Type specific ---
+        switch (field.type) {
+            case FormInputTypeEnum.EMAIL:
+                // Angular email validator in addition to optional pattern
+                validators.push(Validators.email);
+                break;
+            case FormInputTypeEnum.PASSWORD:
+                // You can keep additional rules here if you want (already covered by minLength/maxLength/pattern above)
+                break;
+            default:
+                // other types: nothing special for now
+                break;
+        }
+        return validators;
+    }
     getErrorMessage(field) {
-        if (this.form.get(field.name)?.hasError('required')) {
+        const control = this.form.get(field.name);
+        if (!control) {
+            return '';
+        }
+        if (control.hasError('required')) {
             return (field.errorText ||
                 `${field.label} ${this.errorMessages[this.language].required}`);
         }
+        if (control.hasError('email')) {
+            return (field.errorText ||
+                `${field.label} ${this.errorMessages[this.language].email}`);
+        }
+        if (control.hasError('pattern')) {
+            return (field.errorText ||
+                `${field.label} ${this.errorMessages[this.language].pattern}`);
+        }
+        if (control.hasError('minlength')) {
+            const requiredLen = control.getError('minlength').requiredLength;
+            return `${field.label} must be at least ${requiredLen} characters`;
+        }
+        if (control.hasError('maxlength')) {
+            const requiredLen = control.getError('maxlength').requiredLength;
+            return `${field.label} must be at most ${requiredLen} characters`;
+        }
         return '';
     }
     onSubmit() {
@@ -3718,7 +3813,7 @@ const DEFAULT_DIALOG_CONFIG = {
     },
     dialogStyle: SeverityEnum.INFO,
 };
-class PTDialogComponent {
+class PTConfirmDialogComponent {
     constructor(confirmationService, messageService, renderer, el) {
         this.confirmationService = confirmationService;
         this.messageService = messageService;
@@ -3775,14 +3870,14 @@ class PTDialogComponent {
         const style = this.dialogConfig.dialogStyle ?? SeverityEnum.INFO;
         switch (style) {
             case SeverityEnum.DANGER:
-                return 'pt-dialog-danger';
+                return 'pt-confirm-dialog-danger';
             case SeverityEnum.WARNING:
-                return 'pt-dialog-warning';
+                return 'pt-confirm-dialog-warning';
             case SeverityEnum.SUCCESS:
-                return 'pt-dialog-success';
+                return 'pt-confirm-dialog-success';
             case SeverityEnum.INFO:
             default:
-                return 'pt-dialog-info';
+                return 'pt-confirm-dialog-info';
         }
     }
     /** SUCCESS & INFO share same behaviour, only color differs */
@@ -3818,7 +3913,7 @@ class PTDialogComponent {
             outlined: true,
             severity: confirmSeverity,
             styleClass: (this.dialogConfig.confirmButtonConfig?.styleClass || '') +
-                ' pt-dialog-confirm-btn',
+                ' pt-confirm-dialog-confirm-btn',
             width: 'auto',
         };
     }
@@ -3831,7 +3926,7 @@ class PTDialogComponent {
             outlined: true,
             severity: SeverityEnum.INFO,
             styleClass: (this.dialogConfig.cancelButtonConfig?.styleClass || '') +
-                ' pt-dialog-cancel-btn',
+                ' pt-confirm-dialog-cancel-btn',
             width: 'auto',
         };
     }
@@ -3846,11 +3941,11 @@ class PTDialogComponent {
         setTimeout(() => {
             const dialogElement = document.querySelector('.p-confirm-dialog');
             if (dialogElement) {
-                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');
+                this.renderer.addClass(dialogElement, 'pt-confirm-dialog-overlay');
+                this.renderer.removeClass(dialogElement, 'pt-confirm-dialog-danger');
+                this.renderer.removeClass(dialogElement, 'pt-confirm-dialog-warning');
+                this.renderer.removeClass(dialogElement, 'pt-confirm-dialog-success');
+                this.renderer.removeClass(dialogElement, 'pt-confirm-dialog-info');
                 const severityClass = this.getSeverityClass();
                 this.renderer.addClass(dialogElement, severityClass);
                 this.renderer.setStyle(dialogElement, 'width', this.dialogConfig.width || '720px');
@@ -3944,12 +4039,12 @@ class PTDialogComponent {
             ...(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 #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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTConfirmDialogComponent, 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: PTConfirmDialogComponent, selector: "pt-confirm-dialog", inputs: { dialogConfig: "dialogConfig" }, outputs: { confirm: "confirm", cancel: "cancel" }, providers: [ConfirmationService, MessageService], usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-confirm-dialog\">\n  <p-confirmDialog #cd>\n    <ng-template pTemplate=\"header\"></ng-template>\n\n    <ng-template pTemplate=\"message\">\n      <div class=\"pt-confirm-dialog-card\">\n        <div class=\"pt-confirm-dialog-card-top\">\n          <div class=\"pt-confirm-dialog-icon-wrapper\">\n            <i\n              class=\"pt-confirm-dialog-icon\"\n              [class]=\"getDialogIconClass()\"\n              [ngStyle]=\"getDialogIconStyle()\"\n            ></i>\n          </div>\n\n          <div class=\"pt-confirm-dialog-text-wrapper\">\n            <div\n              class=\"pt-confirm-dialog-title\"\n              [ngStyle]=\"getDialogHeaderStyle()\"\n            >\n              {{ getDialogHeaderText() }}\n            </div>\n\n            <div\n              class=\"pt-confirm-dialog-message\"\n              [ngStyle]=\"getDialogContentStyle()\"\n            >\n              {{ getDialogContentText() }}\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n      <div class=\"pt-confirm-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-confirm-dialog-overlay{border-radius:18px;overflow:hidden;box-shadow:0 20px 45px #0f172a59}::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay .p-dialog-header{display:none!important;padding:0!important;border:0!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay .p-dialog-content{padding:0;background:transparent;border-top-left-radius:18px;border-top-right-radius:18px}.pt-confirm-dialog-card{border-radius:18px 18px 0 0;overflow:hidden}.pt-confirm-dialog-card-top{padding:28px 40px;display:flex;align-items:flex-start}::ng-deep .p-confirm-dialog.pt-confirm-dialog-danger .pt-confirm-dialog-card{background-color:#fde4e4}::ng-deep .p-confirm-dialog.pt-confirm-dialog-warning .pt-confirm-dialog-card{background-color:#fff4d1}::ng-deep .p-confirm-dialog.pt-confirm-dialog-success .pt-confirm-dialog-card{background-color:#dcfce7}::ng-deep .p-confirm-dialog.pt-confirm-dialog-info .pt-confirm-dialog-card{background-color:#e0f2fe}.pt-confirm-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-confirm-dialog-icon{font-size:30px;line-height:1;color:#b91c1c}.pt-confirm-dialog-text-wrapper{flex:1}.pt-confirm-dialog-title{font-size:22px;font-weight:700;margin-bottom:8px;color:#b91c1c}.pt-confirm-dialog-message{font-size:18px;line-height:1.5;color:#4b5563}::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay .p-dialog-footer{background:#fff;border-top:1px solid rgba(148,163,184,.25);padding:16px 32px 22px}.pt-confirm-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-confirm-dialog-danger .p-dialog-footer .p-button{background:#fff!important;border-color:#dc2626!important;color:#dc2626!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-warning .p-dialog-footer .p-button{background:#fff!important;border-color:#d97706!important;color:#b45309!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-success .p-dialog-footer .p-button{background:#fff!important;border-color:#16a34a!important;color:#15803d!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-info .p-dialog-footer .p-button{background:#fff!important;border-color:#2563eb!important;color:#2563eb!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-info .p-dialog-footer .p-button:hover{background:#eff6ff!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay .p-dialog-content{padding:0;background:transparent;border-top-left-radius:18px;border-top-right-radius:18px;display:block}.pt-confirm-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTConfirmDialogComponent, decorators: [{
             type: Component,
-            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"] }]
+            args: [{ selector: 'pt-confirm-dialog', providers: [ConfirmationService, MessageService], template: "<div class=\"pt-confirm-dialog\">\n  <p-confirmDialog #cd>\n    <ng-template pTemplate=\"header\"></ng-template>\n\n    <ng-template pTemplate=\"message\">\n      <div class=\"pt-confirm-dialog-card\">\n        <div class=\"pt-confirm-dialog-card-top\">\n          <div class=\"pt-confirm-dialog-icon-wrapper\">\n            <i\n              class=\"pt-confirm-dialog-icon\"\n              [class]=\"getDialogIconClass()\"\n              [ngStyle]=\"getDialogIconStyle()\"\n            ></i>\n          </div>\n\n          <div class=\"pt-confirm-dialog-text-wrapper\">\n            <div\n              class=\"pt-confirm-dialog-title\"\n              [ngStyle]=\"getDialogHeaderStyle()\"\n            >\n              {{ getDialogHeaderText() }}\n            </div>\n\n            <div\n              class=\"pt-confirm-dialog-message\"\n              [ngStyle]=\"getDialogContentStyle()\"\n            >\n              {{ getDialogContentText() }}\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"footer\">\n      <div class=\"pt-confirm-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-confirm-dialog-overlay{border-radius:18px;overflow:hidden;box-shadow:0 20px 45px #0f172a59}::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay .p-dialog-header{display:none!important;padding:0!important;border:0!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay .p-dialog-content{padding:0;background:transparent;border-top-left-radius:18px;border-top-right-radius:18px}.pt-confirm-dialog-card{border-radius:18px 18px 0 0;overflow:hidden}.pt-confirm-dialog-card-top{padding:28px 40px;display:flex;align-items:flex-start}::ng-deep .p-confirm-dialog.pt-confirm-dialog-danger .pt-confirm-dialog-card{background-color:#fde4e4}::ng-deep .p-confirm-dialog.pt-confirm-dialog-warning .pt-confirm-dialog-card{background-color:#fff4d1}::ng-deep .p-confirm-dialog.pt-confirm-dialog-success .pt-confirm-dialog-card{background-color:#dcfce7}::ng-deep .p-confirm-dialog.pt-confirm-dialog-info .pt-confirm-dialog-card{background-color:#e0f2fe}.pt-confirm-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-confirm-dialog-icon{font-size:30px;line-height:1;color:#b91c1c}.pt-confirm-dialog-text-wrapper{flex:1}.pt-confirm-dialog-title{font-size:22px;font-weight:700;margin-bottom:8px;color:#b91c1c}.pt-confirm-dialog-message{font-size:18px;line-height:1.5;color:#4b5563}::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay .p-dialog-footer{background:#fff;border-top:1px solid rgba(148,163,184,.25);padding:16px 32px 22px}.pt-confirm-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-confirm-dialog-danger .p-dialog-footer .p-button{background:#fff!important;border-color:#dc2626!important;color:#dc2626!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-warning .p-dialog-footer .p-button{background:#fff!important;border-color:#d97706!important;color:#b45309!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-success .p-dialog-footer .p-button{background:#fff!important;border-color:#16a34a!important;color:#15803d!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-info .p-dialog-footer .p-button{background:#fff!important;border-color:#2563eb!important;color:#2563eb!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-info .p-dialog-footer .p-button:hover{background:#eff6ff!important}::ng-deep .p-confirm-dialog.pt-confirm-dialog-overlay .p-dialog-content{padding:0;background:transparent;border-top-left-radius:18px;border-top-right-radius:18px;display:block}.pt-confirm-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: [{
@@ -3958,17 +4053,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Output
             }] } });
 
-class PTDialogModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTDialogModule, declarations: [PTDialogComponent], imports: [CommonModule, DialogModule, PTButtonModule, ConfirmDialogModule], exports: [PTDialogComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogModule, imports: [CommonModule, DialogModule, PTButtonModule, ConfirmDialogModule] }); }
+class PTConfirmDialogModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTConfirmDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTConfirmDialogModule, declarations: [PTConfirmDialogComponent], imports: [CommonModule, DialogModule, PTButtonModule, ConfirmDialogModule], exports: [PTConfirmDialogComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTConfirmDialogModule, imports: [CommonModule, DialogModule, PTButtonModule, ConfirmDialogModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTConfirmDialogModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [PTDialogComponent],
+                    declarations: [PTConfirmDialogComponent],
                     imports: [CommonModule, DialogModule, PTButtonModule, ConfirmDialogModule],
-                    exports: [PTDialogComponent],
+                    exports: [PTConfirmDialogComponent],
                 }]
         }] });
 
@@ -4012,6 +4107,128 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 }]
         }] });
 
+class PTDialogComponent {
+    constructor() {
+        /** Enable scroll when body exceeds given height/width */
+        this.bodyScrollable = true;
+        /** Control footer visibility (default: true) */
+        this.showFooter = true;
+        this.modal = true;
+        this.closable = true;
+        this.draggable = true;
+        this.resizable = true;
+        this.maximizable = false;
+        this.dismissableMask = false;
+        this.closeOnEscape = true;
+        this.blockScroll = true;
+        this.position = 'center';
+        /** internal visible flag used by p-dialog */
+        this._visible = false;
+        this.visibleChange = new EventEmitter();
+    }
+    get visible() {
+        return this._visible;
+    }
+    set visible(v) {
+        this._visible = v;
+    }
+    /** Final class applied to p-dialog */
+    get dialogStyleClass() {
+        return [
+            'border-round-3xl',
+            'shadow-6',
+            'overflow-hidden',
+            'pt-dialog-header-blue', // for header/footer colors
+            this.styleClass,
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    /** Style applied to the body wrapper */
+    get bodyStyle() {
+        const style = {};
+        if (this.bodyWidth) {
+            style['max-width'] = this.bodyWidth;
+        }
+        if (this.bodyHeight) {
+            style['max-height'] = this.bodyHeight;
+            if (this.bodyScrollable) {
+                style['overflow-y'] = 'auto';
+                style['overflow-x'] = 'auto';
+            }
+        }
+        return style;
+    }
+    onShow() {
+        this.visibleChange.emit(true);
+    }
+    onHide() {
+        this.visibleChange.emit(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTDialogComponent, selector: "pt-dialog", inputs: { header: "header", style: "style", styleClass: "styleClass", headerIconClass: "headerIconClass", bodyWidth: "bodyWidth", bodyHeight: "bodyHeight", bodyScrollable: "bodyScrollable", showFooter: "showFooter", modal: "modal", closable: "closable", draggable: "draggable", resizable: "resizable", maximizable: "maximizable", dismissableMask: "dismissableMask", closeOnEscape: "closeOnEscape", blockScroll: "blockScroll", breakpoints: "breakpoints", position: "position", contentStyle: "contentStyle", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<p-dialog\n  [(visible)]=\"_visible\"\n  [header]=\"header\"\n  [modal]=\"modal\"\n  [style]=\"style\"\n  [breakpoints]=\"breakpoints\"\n  [closable]=\"closable\"\n  [draggable]=\"draggable\"\n  [resizable]=\"resizable\"\n  [maximizable]=\"maximizable\"\n  [dismissableMask]=\"dismissableMask\"\n  [closeOnEscape]=\"closeOnEscape\"\n  [blockScroll]=\"blockScroll\"\n  [position]=\"position\"\n  [contentStyle]=\"contentStyle\"\n  [styleClass]=\"dialogStyleClass\"\n  (onShow)=\"onShow()\"\n  (onHide)=\"onHide()\"\n>\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <div\n      class=\"flex align-items-center justify-content-between w-full px-4 pt-3 pb-2\"\n    >\n      <div class=\"flex align-items-center gap-2\">\n        <!-- optional icon -->\n        <i *ngIf=\"headerIconClass\" [ngClass]=\"headerIconClass\"></i>\n\n        <!-- projected custom header -->\n        <ng-content select=\"[ptDialogHeader]\"></ng-content>\n\n        <!-- fallback header text -->\n        <span *ngIf=\"header\" class=\"font-bold text-lg\">\n          {{ header }}\n        </span>\n      </div>\n      <!-- close icon from PrimeNG (X) is rendered automatically -->\n    </div>\n  </ng-template>\n\n  <!-- BODY -->\n  <div\n    class=\"surface-50 px-4 py-4 flex flex-column gap-3\"\n    [ngStyle]=\"bodyStyle\"\n  >\n    <ng-content select=\"[ptDialogContent]\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n\n  <!-- FOOTER (optional) -->\n  <ng-template pTemplate=\"footer\" *ngIf=\"showFooter\">\n    <div class=\"surface-100 px-4 py-2 flex justify-content-end gap-2\">\n      <ng-content select=\"[ptDialogFooter]\"></ng-content>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [":host ::ng-deep .pt-dialog-header-blue .p-dialog-header{background-color:#e0f2ff;border-bottom:0}:host ::ng-deep .pt-dialog-header-blue .p-dialog-footer{background-color:#f5f6f8!important;border-top:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-dialog', template: "<p-dialog\n  [(visible)]=\"_visible\"\n  [header]=\"header\"\n  [modal]=\"modal\"\n  [style]=\"style\"\n  [breakpoints]=\"breakpoints\"\n  [closable]=\"closable\"\n  [draggable]=\"draggable\"\n  [resizable]=\"resizable\"\n  [maximizable]=\"maximizable\"\n  [dismissableMask]=\"dismissableMask\"\n  [closeOnEscape]=\"closeOnEscape\"\n  [blockScroll]=\"blockScroll\"\n  [position]=\"position\"\n  [contentStyle]=\"contentStyle\"\n  [styleClass]=\"dialogStyleClass\"\n  (onShow)=\"onShow()\"\n  (onHide)=\"onHide()\"\n>\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <div\n      class=\"flex align-items-center justify-content-between w-full px-4 pt-3 pb-2\"\n    >\n      <div class=\"flex align-items-center gap-2\">\n        <!-- optional icon -->\n        <i *ngIf=\"headerIconClass\" [ngClass]=\"headerIconClass\"></i>\n\n        <!-- projected custom header -->\n        <ng-content select=\"[ptDialogHeader]\"></ng-content>\n\n        <!-- fallback header text -->\n        <span *ngIf=\"header\" class=\"font-bold text-lg\">\n          {{ header }}\n        </span>\n      </div>\n      <!-- close icon from PrimeNG (X) is rendered automatically -->\n    </div>\n  </ng-template>\n\n  <!-- BODY -->\n  <div\n    class=\"surface-50 px-4 py-4 flex flex-column gap-3\"\n    [ngStyle]=\"bodyStyle\"\n  >\n    <ng-content select=\"[ptDialogContent]\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n\n  <!-- FOOTER (optional) -->\n  <ng-template pTemplate=\"footer\" *ngIf=\"showFooter\">\n    <div class=\"surface-100 px-4 py-2 flex justify-content-end gap-2\">\n      <ng-content select=\"[ptDialogFooter]\"></ng-content>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [":host ::ng-deep .pt-dialog-header-blue .p-dialog-header{background-color:#e0f2ff;border-bottom:0}:host ::ng-deep .pt-dialog-header-blue .p-dialog-footer{background-color:#f5f6f8!important;border-top:0!important}\n"] }]
+        }], propDecorators: { header: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], headerIconClass: [{
+                type: Input
+            }], bodyWidth: [{
+                type: Input
+            }], bodyHeight: [{
+                type: Input
+            }], bodyScrollable: [{
+                type: Input
+            }], showFooter: [{
+                type: Input
+            }], modal: [{
+                type: Input
+            }], closable: [{
+                type: Input
+            }], draggable: [{
+                type: Input
+            }], resizable: [{
+                type: Input
+            }], maximizable: [{
+                type: Input
+            }], dismissableMask: [{
+                type: Input
+            }], closeOnEscape: [{
+                type: Input
+            }], blockScroll: [{
+                type: Input
+            }], breakpoints: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], contentStyle: [{
+                type: Input
+            }], visible: [{
+                type: Input
+            }], visibleChange: [{
+                type: Output
+            }] } });
+
+class PTDialogModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: PTDialogModule, declarations: [PTDialogComponent], imports: [CommonModule, DialogModule], exports: [PTDialogComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogModule, imports: [CommonModule, DialogModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTDialogComponent],
+                    imports: [CommonModule, DialogModule],
+                    exports: [PTDialogComponent],
+                }]
+        }] });
+
 class NgPrimeToolsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NgPrimeToolsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: NgPrimeToolsModule, imports: [CommonModule,
@@ -4051,7 +4268,7 @@ class NgPrimeToolsModule {
             // Button
             PTButtonModule,
             // Dialog
-            PTDialogModule,
+            PTConfirmDialogModule,
             // Toasts
             PTToastNotifierModule], exports: [PTAdvancedPrimeTableModule,
             MultiSearchCriteriaModule,
@@ -4088,6 +4305,7 @@ class NgPrimeToolsModule {
             // Button
             PTButtonModule,
             // Dialog
+            PTConfirmDialogModule,
             PTDialogModule,
             // Toasts
             PTToastNotifierModule] }); }
@@ -4128,7 +4346,7 @@ class NgPrimeToolsModule {
             // Button
             PTButtonModule,
             // Dialog
-            PTDialogModule,
+            PTConfirmDialogModule,
             // Toasts
             PTToastNotifierModule, PTAdvancedPrimeTableModule,
             MultiSearchCriteriaModule,
@@ -4165,6 +4383,7 @@ class NgPrimeToolsModule {
             // Button
             PTButtonModule,
             // Dialog
+            PTConfirmDialogModule,
             PTDialogModule,
             // Toasts
             PTToastNotifierModule] }); }
@@ -4210,7 +4429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         // Button
                         PTButtonModule,
                         // Dialog
-                        PTDialogModule,
+                        PTConfirmDialogModule,
                         // Toasts
                         PTToastNotifierModule,
                     ],
@@ -4250,6 +4469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         // Button
                         PTButtonModule,
                         // Dialog
+                        PTConfirmDialogModule,
                         PTDialogModule,
                         // Toasts
                         PTToastNotifierModule,
@@ -4693,5 +4913,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeType, BadgeTypeStyles, ButtonColorEnum, DateUtilityService, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgPrimeToolsModule, PTAdvancedPrimeTableComponent, PTAdvancedPrimeTableModule, PTBreadCrumbComponent, PTBreadCrumbModule, PTButtonComponent, PTButtonModule, PTCardComponent, PTCardModule, PTChartComparisonComponent, PTChartComparisonModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTDateInputComponent, PTDateInputModule, PTDialogComponent, PTDialogModule, PTDropdownComponent, PTDropdownModule, PTFooterComponent, PTFooterModule, PTFormBuilderComponent, PTFormBuilderModule, PTGroupComponent, PTGroupModule, PTLineChartComponent, PTLineChartModule, PTLoginPageComponent, PTLoginPageModule, PTMenuComponent, PTMenuFancyComponent, PTMenuFancyModule, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTMetricPanelComponent, PTMetricPanelModule, PTNavbarMenuComponent, PTNavbarMenuModule, PTNumberInputComponent, PTNumberInputModule, PTPageSkeletonComponent, PTPageSkeletonModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, PTToastNotifierComponent, PTToastNotifierModule, SearchCriteriaTypeEnum, SeverityEnum, TableTypeEnum };
+export { BadgeType, BadgeTypeStyles, ButtonColorEnum, DateUtilityService, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgPrimeToolsModule, PTAdvancedPrimeTableComponent, PTAdvancedPrimeTableModule, PTBreadCrumbComponent, PTBreadCrumbModule, PTButtonComponent, PTButtonModule, PTCardComponent, PTCardModule, PTChartComparisonComponent, PTChartComparisonModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTConfirmDialogComponent, PTConfirmDialogModule, PTDateInputComponent, PTDateInputModule, PTDialogComponent, PTDialogModule, PTDropdownComponent, PTDropdownModule, PTFooterComponent, PTFooterModule, PTFormBuilderComponent, PTFormBuilderModule, PTGroupComponent, PTGroupModule, PTLineChartComponent, PTLineChartModule, PTLoginPageComponent, PTLoginPageModule, PTMenuComponent, PTMenuFancyComponent, PTMenuFancyModule, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTMetricPanelComponent, PTMetricPanelModule, PTNavbarMenuComponent, PTNavbarMenuModule, PTNumberInputComponent, PTNumberInputModule, PTPageSkeletonComponent, PTPageSkeletonModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, PTToastNotifierComponent, PTToastNotifierModule, SearchCriteriaTypeEnum, SeverityEnum, TableTypeEnum };
 //# sourceMappingURL=ng-prime-tools.mjs.map