ng-prime-tools 1.0.37 → 1.0.39

package/fesm2022/ng-prime-tools.mjs

@@ -189,6 +189,7 @@ class PTAdvancedPrimeTableComponent {
         this.exportPdfEvent = new EventEmitter();
         this.pageChange = new EventEmitter();
         this.TableTypeEnum = TableTypeEnum;
+        this.AlignEnum = AlignEnum; // if needed in template
         this.searchValue = '';
         this.filters = {};
         this.validCurrencyCodes = ['USD', 'EUR', 'MAD'];
@@ -245,6 +246,47 @@ class PTAdvancedPrimeTableComponent {
             }
         });
     }
+    // ---------- HEADER + BODY ALIGNMENT HELPERS ----------
+    /** CSS class for the header title span (inside header-container) */
+    getHeaderTitleClass(col) {
+        const align = col.headerAlign ?? AlignEnum.LEFT;
+        switch (align) {
+            case AlignEnum.CENTER:
+                return 'header-title-center';
+            case AlignEnum.RIGHT:
+                return 'header-title-right';
+            default:
+                return 'header-title-left';
+        }
+    }
+    /** CSS class for grouped headers (<th> with colspan) */
+    getHeaderAlignClass(col) {
+        const align = col.headerAlign ?? AlignEnum.LEFT;
+        switch (align) {
+            case AlignEnum.CENTER:
+                return 'header-align-center';
+            case AlignEnum.RIGHT:
+                return 'header-align-right';
+            default:
+                return 'header-align-left';
+        }
+    }
+    /** CSS class for body cells (<td>) based on dataAlign (default LEFT) */
+    getDataAlignClass(col) {
+        // optional: default right alignment for numeric/amount when not specified
+        const effectiveAlign = col.dataAlign ??
+            (col.type === TableTypeEnum.NUMBER || col.type === TableTypeEnum.AMOUNT
+                ? AlignEnum.RIGHT
+                : AlignEnum.LEFT);
+        switch (effectiveAlign) {
+            case AlignEnum.CENTER:
+                return 'cell-align-center';
+            case AlignEnum.RIGHT:
+                return 'cell-align-right';
+            default:
+                return 'cell-align-left';
+        }
+    }
     // ---------- ACTIONS INITIALIZATION ----------
     initializeActions() {
         // reset state
@@ -376,10 +418,12 @@ class PTAdvancedPrimeTableComponent {
         return `${totalWidth}px`;
     }
     getHeaderWidth(col) {
-        const base = col.width ?? this.calculateColumnWidth(col);
-        const widthWithoutPx = parseInt(base.replace('px', '') || '0', 10);
-        const headerWidth = widthWithoutPx + 20;
-        return `${headerWidth}px`;
+        // ✅ If a width is configured (ex: '410px'), use it directly
+        if (col.width) {
+            return col.width;
+        }
+        // otherwise compute it automatically
+        return this.calculateColumnWidth(col);
     }
     clear(table) {
         table.clear();
@@ -605,11 +649,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 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          <!-- SIMPLE COLUMNS (no children) -->\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- EDITABLE CELL -->\n            <td\n              *ngIf=\"\n                isEditable(col.code!) && col.type !== TableTypeEnum.ACTION;\n                else normalTD\n              \"\n              [style.width]=\"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)=\"changeHandler(data.id, col.code, $event)\"\n                      [options]=\"optionValues\"\n                    ></p-multiSelect>\n                  </ng-template>\n                  <ng-template pTemplate=\"output\">\n                    <div class=\"multi-select-container\">\n                      <ng-container *ngFor=\"let rec of data[col.code!]\">\n                        <p-tag [value]=\"rec\"></p-tag>\n                      </ng-container>\n                    </div>\n                  </ng-template>\n                </p-cellEditor>\n              </ng-container>\n\n              <ng-template #datePicker>\n                <ng-container *ngIf=\"isDatePicker(col.code); else normalInput\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-calendar\n                        [inputId]=\"data[col.code!]\"\n                        [ngModel]=\"data[col.code!]\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [dateFormat]=\"'dd/mm/yy'\"\n                      ></p-calendar>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      {{ data[col.code!] | customDate }}\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n              </ng-template>\n\n              <ng-template #normalInput>\n                <p-cellEditor>\n                  <ng-template pTemplate=\"input\">\n                    <input\n                      pInputText\n                      type=\"text\"\n                      [ngModel]=\"data[col.code!]\"\n                      (change)=\"onChange($event, data.id, col.code)\"\n                    />\n                  </ng-template>\n                  <ng-template pTemplate=\"output\">\n                    <ng-container\n                      *ngIf=\"\n                        col.type === TableTypeEnum.AMOUNT;\n                        else normalOutput\n                      \"\n                    >\n                      {{\n                        data[col.code!]\n                          | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                      }}\n                    </ng-container>\n                    <ng-template #normalOutput>\n                      {{ data[col.code!] }}\n                    </ng-template>\n                  </ng-template>\n                </p-cellEditor>\n              </ng-template>\n            </td>\n\n            <!-- NON-EDITABLE CELL (ALWAYS RENDERED) -->\n            <ng-template #normalTD>\n              <td [style.width]=\"getHeaderWidth(col)\">\n                <!-- ACTION column: built-in edit/delete + custom actions -->\n                <ng-container\n                  *ngIf=\"col.type === TableTypeEnum.ACTION; else nonActionCell\"\n                >\n                  <div class=\"action-buttons-container\">\n                    <!-- built-in delete -->\n                    <button\n                      *ngIf=\"isDelete\"\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-trash\"\n                      (click)=\"Delete(data.id)\"\n                      class=\"p-button-rounded p-button-text\"\n                    ></button>\n\n                    <!-- built-in inline edit (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(col.composedStyles?.[composedName])\n                            \"\n                          />\n                        </ng-container>\n\n                        <!-- STRING -->\n                        <ng-container\n                          *ngIf=\"\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.STRING\n                          \"\n                        >\n                          <span\n                            class=\"composed-text\"\n                            [ngStyle]=\"\n                              getTitleStyle(\n                                col.composedStyles?.[composedName]\n                              )\n                            \"\n                          >\n                            {{ data[col.code!]?.[composedName] }}\n                          </span>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </ng-container>\n\n                  <ng-template #nonComposed>\n                    <!-- AMOUNT-->\n                    <ng-container\n                      *ngIf=\"col.type === TableTypeEnum.AMOUNT; else nonAmount\"\n                    >\n                      {{\n                        data[col.code!]\n                          | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                      }}\n                    </ng-container>\n\n                    <ng-template #nonAmount>\n                      <!-- NUMBER-->\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.NUMBER;\n                          else nonNumber\n                        \"\n                      >\n                        {{\n                          formatNumber(\n                            data[col.code!],\n                            col.decimalPlaces,\n                            col.thousandSeparator,\n                            col.decimalSeparator\n                          )\n                        }}\n                      </ng-container>\n\n                      <ng-template #nonNumber>\n                        <!-- DATE -->\n                        <ng-container\n                          *ngIf=\"\n                            col.type === TableTypeEnum.DATE;\n                            else normalTypes\n                          \"\n                        >\n                          {{ formatDate(data[col.code!]) }}\n                        </ng-container>\n\n                        <ng-template #normalTypes>\n                          <!-- STRING, MULTISELECT-->\n                          <ng-container\n                            *ngIf=\"\n                              [\n                                TableTypeEnum.STRING,\n                                TableTypeEnum.MULTISELECT\n                              ].includes(col.type!)\n                            \"\n                          >\n                            {{ data[col.code!] }}\n                          </ng-container>\n                        </ng-template>\n                      </ng-template>\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </td>\n            </ng-template>\n          </ng-container>\n\n          <!-- CHILD COLUMNS -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <td [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]=\"child.code ? data[child.code] : null\"\n                        (change)=\"onChange($event, data.id, child.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      {{ child.code ? data[child.code] : \"\" }}\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <ng-template #childNormalTD>\n                  {{ child.code ? data[child.code] : \"\" }}\n                </ng-template>\n              </td>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:block;width:100%}.pt-advanced-prime-table .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" }] }); }
+    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    <!-- COLGROUP: sync header/body widths (incl. Actions 410px) -->\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        <col\n          *ngFor=\"let col of columns\"\n          [style.width]=\"col.width || getHeaderWidth(col)\"\n        />\n      </colgroup>\n    </ng-template>\n\n    <!-- CAPTION -->\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          <!-- Clear filters -->\n          <button\n            *ngIf=\"hasSearchFilter\"\n            pButton\n            icon=\"pi pi-filter-slash\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"clear(dt)\"\n            title=\"Clear filters\"\n          ></button>\n\n          <!-- Export to Excel Button -->\n          <button\n            *ngIf=\"hasExportExcel\"\n            pButton\n            icon=\"pi pi-file-excel\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportExcel()\"\n            title=\"Export to Excel\"\n          ></button>\n\n          <!-- Export to PDF Button -->\n          <button\n            *ngIf=\"hasExportPDF\"\n            pButton\n            icon=\"pi pi-file-pdf\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportPdf()\"\n            title=\"Export to PDF\"\n          ></button>\n        </div>\n\n        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n            />\n          </p-iconField>\n        </div>\n      </div>\n    </ng-template>\n\n    <!-- HEADER -->\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        <ng-container *ngFor=\"let col of columns\">\n          <th\n            *ngIf=\"!col.children; else groupHeader\"\n            pSortableColumn=\"{{ col.code }}\"\n            [style.width]=\"col.width || getHeaderWidth(col)\"\n            [style.padding]=\"'0px'\"\n            [ngClass]=\"[\n              getHeaderAlignClass(col),\n              col.type === TableTypeEnum.ACTION ? 'action-column' : ''\n            ]\"\n            colspan=\"1\"\n          >\n            <!-- SORTABLE HEADER -->\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <div\n                class=\"header-container d-flex align-items-center justify-content-between\"\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [style.padding]=\"'0px'\"\n                [style.margin]=\"'10px'\"\n              >\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n                <div\n                  class=\"icons d-flex align-items-center\"\n                  [style.width]=\"'77px'\"\n                >\n                  <p-sortIcon field=\"{{ col.code }}\" />\n                  <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]=\"filters[composedName]?.placeholder\"\n                              [display]=\"'chip'\"\n                            >\n                              <ng-template let-item pTemplate=\"item\">\n                                <div class=\"custom-multiselect-item\">\n                                  <img\n                                    *ngIf=\"item.image\"\n                                    [src]=\"item.image\"\n                                    alt=\"icon\"\n                                    class=\"filter-image\"\n                                  />\n                                  <span>{{ item.label }}</span>\n                                </div>\n                              </ng-template>\n                            </p-multiSelect>\n                          </ng-container>\n                        </div>\n\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            </ng-container>\n\n            <!-- NON-SORTABLE HEADER -->\n            <ng-template #noSortHeader>\n              <div\n                class=\"header-container d-flex align-items-center justify-content-between\"\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [style.padding]=\"'0px'\"\n                [style.margin]=\"'10px'\"\n              >\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n                <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            </ng-template>\n          </th>\n\n          <!-- GROUPED HEADER -->\n          <ng-template #groupHeader>\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          </ng-template>\n        </ng-container>\n      </tr>\n\n      <!-- CHILD HEADERS -->\n      <tr *ngIf=\"hasGroupedColumns\">\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.children\">\n            <th\n              *ngFor=\"let child of col.children\"\n              [style.width]=\"child.width || getHeaderWidth(child)\"\n              [style.padding]=\"'0px'\"\n            ></th>\n          </ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n\n    <!-- EMPTY MESSAGE -->\n    <ng-template pTemplate=\"emptymessage\">\n      <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          <!-- SIMPLE COLUMNS (no children) -->\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- EDITABLE CELL -->\n            <td\n              *ngIf=\"\n                isEditable(col.code!) && col.type !== TableTypeEnum.ACTION;\n                else normalTD\n              \"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngClass]=\"getDataAlignClass(col)\"\n            >\n              <!-- Editable input for NUMBER/DATE/STRING/MULTISELECT -->\n              <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                <p-cellEditor>\n                  <ng-template pTemplate=\"input\">\n                    <p-multiSelect\n                      appendTo=\"body\"\n                      [ngModel]=\"data[col.code!]\"\n                      [style]=\"{ width: '100%' }\"\n                      (ngModelChange)=\"changeHandler(data.id, col.code, $event)\"\n                      [options]=\"optionValues\"\n                    ></p-multiSelect>\n                  </ng-template>\n                  <ng-template pTemplate=\"output\">\n                    <div class=\"multi-select-container\">\n                      <ng-container *ngFor=\"let rec of data[col.code!]\">\n                        <p-tag [value]=\"rec\"></p-tag>\n                      </ng-container>\n                    </div>\n                  </ng-template>\n                </p-cellEditor>\n              </ng-container>\n\n              <ng-template #datePicker>\n                <ng-container *ngIf=\"isDatePicker(col.code); else normalInput\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-calendar\n                        [inputId]=\"data[col.code!]\"\n                        [ngModel]=\"data[col.code!]\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [dateFormat]=\"'dd/mm/yy'\"\n                      ></p-calendar>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      {{ data[col.code!] | customDate }}\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n              </ng-template>\n\n              <ng-template #normalInput>\n                <p-cellEditor>\n                  <ng-template pTemplate=\"input\">\n                    <input\n                      pInputText\n                      type=\"text\"\n                      [ngModel]=\"data[col.code!]\"\n                      (change)=\"onChange($event, data.id, col.code)\"\n                    />\n                  </ng-template>\n                  <ng-template pTemplate=\"output\">\n                    <ng-container\n                      *ngIf=\"\n                        col.type === TableTypeEnum.AMOUNT;\n                        else normalOutput\n                      \"\n                    >\n                      {{\n                        data[col.code!]\n                          | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                      }}\n                    </ng-container>\n                    <ng-template #normalOutput>\n                      {{ data[col.code!] }}\n                    </ng-template>\n                  </ng-template>\n                </p-cellEditor>\n              </ng-template>\n            </td>\n\n            <!-- NON-EDITABLE CELL (ALWAYS RENDERED) -->\n            <ng-template #normalTD>\n              <td\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [ngClass]=\"[\n                  getDataAlignClass(col),\n                  col.type === TableTypeEnum.ACTION ? 'action-column' : ''\n                ]\"\n              >\n                <!-- ACTION column: built-in edit/delete + custom actions -->\n                <ng-container\n                  *ngIf=\"col.type === TableTypeEnum.ACTION; else nonActionCell\"\n                >\n                  <div class=\"action-buttons-container\">\n                    <!-- built-in delete -->\n                    <button\n                      *ngIf=\"isDelete\"\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-trash\"\n                      (click)=\"Delete(data.id)\"\n                      class=\"p-button-rounded p-button-text\"\n                    ></button>\n\n                    <!-- built-in inline edit (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(col.composedStyles?.[composedName])\n                            \"\n                          />\n                        </ng-container>\n\n                        <!-- STRING -->\n                        <ng-container\n                          *ngIf=\"\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.STRING\n                          \"\n                        >\n                          <span\n                            class=\"composed-text\"\n                            [ngStyle]=\"\n                              getTitleStyle(\n                                col.composedStyles?.[composedName]\n                              )\n                            \"\n                          >\n                            {{ data[col.code!]?.[composedName] }}\n                          </span>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </ng-container>\n\n                  <ng-template #nonComposed>\n                    <!-- AMOUNT-->\n                    <ng-container\n                      *ngIf=\"col.type === TableTypeEnum.AMOUNT; else nonAmount\"\n                    >\n                      {{\n                        data[col.code!]\n                          | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                      }}\n                    </ng-container>\n\n                    <ng-template #nonAmount>\n                      <!-- NUMBER-->\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.NUMBER;\n                          else nonNumber\n                        \"\n                      >\n                        {{\n                          formatNumber(\n                            data[col.code!],\n                            col.decimalPlaces,\n                            col.thousandSeparator,\n                            col.decimalSeparator\n                          )\n                        }}\n                      </ng-container>\n\n                      <ng-template #nonNumber>\n                        <!-- DATE -->\n                        <ng-container\n                          *ngIf=\"\n                            col.type === TableTypeEnum.DATE;\n                            else normalTypes\n                          \"\n                        >\n                          {{ formatDate(data[col.code!]) }}\n                        </ng-container>\n\n                        <ng-template #normalTypes>\n                          <!-- STRING, MULTISELECT-->\n                          <ng-container\n                            *ngIf=\"\n                              [\n                                TableTypeEnum.STRING,\n                                TableTypeEnum.MULTISELECT\n                              ].includes(col.type!)\n                            \"\n                          >\n                            {{ data[col.code!] }}\n                          </ng-container>\n                        </ng-template>\n                      </ng-template>\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </td>\n            </ng-template>\n          </ng-container>\n\n          <!-- CHILD COLUMNS -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <td\n                [style.width]=\"child.width || getHeaderWidth(child)\"\n                [ngClass]=\"getDataAlignClass(child)\"\n              >\n                <ng-container\n                  *ngIf=\"isEditable(child.code); else childNormalTD\"\n                >\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText\n                        type=\"text\"\n                        [ngModel]=\"child.code ? data[child.code] : null\"\n                        (change)=\"onChange($event, data.id, child.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      {{ child.code ? data[child.code] : \"\" }}\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <ng-template #childNormalTD>\n                  {{ child.code ? data[child.code] : \"\" }}\n                </ng-template>\n              </td>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{flex:1}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:block;width:100%}.pt-advanced-prime-table .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}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{text-align:center!important;justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;padding:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container{width:100%;display:flex;justify-content:center!important;align-items:center!important;gap:.35rem}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{padding:.25rem!important;min-width:22px!important;height:22px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i6.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.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 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          <!-- SIMPLE COLUMNS (no children) -->\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- EDITABLE CELL -->\n            <td\n              *ngIf=\"\n                isEditable(col.code!) && col.type !== TableTypeEnum.ACTION;\n                else normalTD\n              \"\n              [style.width]=\"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)=\"changeHandler(data.id, col.code, $event)\"\n                      [options]=\"optionValues\"\n                    ></p-multiSelect>\n                  </ng-template>\n                  <ng-template pTemplate=\"output\">\n                    <div class=\"multi-select-container\">\n                      <ng-container *ngFor=\"let rec of data[col.code!]\">\n                        <p-tag [value]=\"rec\"></p-tag>\n                      </ng-container>\n                    </div>\n                  </ng-template>\n                </p-cellEditor>\n              </ng-container>\n\n              <ng-template #datePicker>\n                <ng-container *ngIf=\"isDatePicker(col.code); else normalInput\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-calendar\n                        [inputId]=\"data[col.code!]\"\n                        [ngModel]=\"data[col.code!]\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [dateFormat]=\"'dd/mm/yy'\"\n                      ></p-calendar>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      {{ data[col.code!] | customDate }}\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n              </ng-template>\n\n              <ng-template #normalInput>\n                <p-cellEditor>\n                  <ng-template pTemplate=\"input\">\n                    <input\n                      pInputText\n                      type=\"text\"\n                      [ngModel]=\"data[col.code!]\"\n                      (change)=\"onChange($event, data.id, col.code)\"\n                    />\n                  </ng-template>\n                  <ng-template pTemplate=\"output\">\n                    <ng-container\n                      *ngIf=\"\n                        col.type === TableTypeEnum.AMOUNT;\n                        else normalOutput\n                      \"\n                    >\n                      {{\n                        data[col.code!]\n                          | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                      }}\n                    </ng-container>\n                    <ng-template #normalOutput>\n                      {{ data[col.code!] }}\n                    </ng-template>\n                  </ng-template>\n                </p-cellEditor>\n              </ng-template>\n            </td>\n\n            <!-- NON-EDITABLE CELL (ALWAYS RENDERED) -->\n            <ng-template #normalTD>\n              <td [style.width]=\"getHeaderWidth(col)\">\n                <!-- ACTION column: built-in edit/delete + custom actions -->\n                <ng-container\n                  *ngIf=\"col.type === TableTypeEnum.ACTION; else nonActionCell\"\n                >\n                  <div class=\"action-buttons-container\">\n                    <!-- built-in delete -->\n                    <button\n                      *ngIf=\"isDelete\"\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-trash\"\n                      (click)=\"Delete(data.id)\"\n                      class=\"p-button-rounded p-button-text\"\n                    ></button>\n\n                    <!-- built-in inline edit (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(col.composedStyles?.[composedName])\n                            \"\n                          />\n                        </ng-container>\n\n                        <!-- STRING -->\n                        <ng-container\n                          *ngIf=\"\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.STRING\n                          \"\n                        >\n                          <span\n                            class=\"composed-text\"\n                            [ngStyle]=\"\n                              getTitleStyle(\n                                col.composedStyles?.[composedName]\n                              )\n                            \"\n                          >\n                            {{ data[col.code!]?.[composedName] }}\n                          </span>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </ng-container>\n\n                  <ng-template #nonComposed>\n                    <!-- AMOUNT-->\n                    <ng-container\n                      *ngIf=\"col.type === TableTypeEnum.AMOUNT; else nonAmount\"\n                    >\n                      {{\n                        data[col.code!]\n                          | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                      }}\n                    </ng-container>\n\n                    <ng-template #nonAmount>\n                      <!-- NUMBER-->\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.NUMBER;\n                          else nonNumber\n                        \"\n                      >\n                        {{\n                          formatNumber(\n                            data[col.code!],\n                            col.decimalPlaces,\n                            col.thousandSeparator,\n                            col.decimalSeparator\n                          )\n                        }}\n                      </ng-container>\n\n                      <ng-template #nonNumber>\n                        <!-- DATE -->\n                        <ng-container\n                          *ngIf=\"\n                            col.type === TableTypeEnum.DATE;\n                            else normalTypes\n                          \"\n                        >\n                          {{ formatDate(data[col.code!]) }}\n                        </ng-container>\n\n                        <ng-template #normalTypes>\n                          <!-- STRING, MULTISELECT-->\n                          <ng-container\n                            *ngIf=\"\n                              [\n                                TableTypeEnum.STRING,\n                                TableTypeEnum.MULTISELECT\n                              ].includes(col.type!)\n                            \"\n                          >\n                            {{ data[col.code!] }}\n                          </ng-container>\n                        </ng-template>\n                      </ng-template>\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </td>\n            </ng-template>\n          </ng-container>\n\n          <!-- CHILD COLUMNS -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <td [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]=\"child.code ? data[child.code] : null\"\n                        (change)=\"onChange($event, data.id, child.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      {{ child.code ? data[child.code] : \"\" }}\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <ng-template #childNormalTD>\n                  {{ child.code ? data[child.code] : \"\" }}\n                </ng-template>\n              </td>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:block;width:100%}.pt-advanced-prime-table .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    <!-- COLGROUP: sync header/body widths (incl. Actions 410px) -->\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        <col\n          *ngFor=\"let col of columns\"\n          [style.width]=\"col.width || getHeaderWidth(col)\"\n        />\n      </colgroup>\n    </ng-template>\n\n    <!-- CAPTION -->\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          <!-- Clear filters -->\n          <button\n            *ngIf=\"hasSearchFilter\"\n            pButton\n            icon=\"pi pi-filter-slash\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"clear(dt)\"\n            title=\"Clear filters\"\n          ></button>\n\n          <!-- Export to Excel Button -->\n          <button\n            *ngIf=\"hasExportExcel\"\n            pButton\n            icon=\"pi pi-file-excel\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportExcel()\"\n            title=\"Export to Excel\"\n          ></button>\n\n          <!-- Export to PDF Button -->\n          <button\n            *ngIf=\"hasExportPDF\"\n            pButton\n            icon=\"pi pi-file-pdf\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportPdf()\"\n            title=\"Export to PDF\"\n          ></button>\n        </div>\n\n        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n            />\n          </p-iconField>\n        </div>\n      </div>\n    </ng-template>\n\n    <!-- HEADER -->\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        <ng-container *ngFor=\"let col of columns\">\n          <th\n            *ngIf=\"!col.children; else groupHeader\"\n            pSortableColumn=\"{{ col.code }}\"\n            [style.width]=\"col.width || getHeaderWidth(col)\"\n            [style.padding]=\"'0px'\"\n            [ngClass]=\"[\n              getHeaderAlignClass(col),\n              col.type === TableTypeEnum.ACTION ? 'action-column' : ''\n            ]\"\n            colspan=\"1\"\n          >\n            <!-- SORTABLE HEADER -->\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <div\n                class=\"header-container d-flex align-items-center justify-content-between\"\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [style.padding]=\"'0px'\"\n                [style.margin]=\"'10px'\"\n              >\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n                <div\n                  class=\"icons d-flex align-items-center\"\n                  [style.width]=\"'77px'\"\n                >\n                  <p-sortIcon field=\"{{ col.code }}\" />\n                  <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]=\"filters[composedName]?.placeholder\"\n                              [display]=\"'chip'\"\n                            >\n                              <ng-template let-item pTemplate=\"item\">\n                                <div class=\"custom-multiselect-item\">\n                                  <img\n                                    *ngIf=\"item.image\"\n                                    [src]=\"item.image\"\n                                    alt=\"icon\"\n                                    class=\"filter-image\"\n                                  />\n                                  <span>{{ item.label }}</span>\n                                </div>\n                              </ng-template>\n                            </p-multiSelect>\n                          </ng-container>\n                        </div>\n\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            </ng-container>\n\n            <!-- NON-SORTABLE HEADER -->\n            <ng-template #noSortHeader>\n              <div\n                class=\"header-container d-flex align-items-center justify-content-between\"\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [style.padding]=\"'0px'\"\n                [style.margin]=\"'10px'\"\n              >\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n                <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            </ng-template>\n          </th>\n\n          <!-- GROUPED HEADER -->\n          <ng-template #groupHeader>\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          </ng-template>\n        </ng-container>\n      </tr>\n\n      <!-- CHILD HEADERS -->\n      <tr *ngIf=\"hasGroupedColumns\">\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.children\">\n            <th\n              *ngFor=\"let child of col.children\"\n              [style.width]=\"child.width || getHeaderWidth(child)\"\n              [style.padding]=\"'0px'\"\n            ></th>\n          </ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n\n    <!-- EMPTY MESSAGE -->\n    <ng-template pTemplate=\"emptymessage\">\n      <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          <!-- SIMPLE COLUMNS (no children) -->\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- EDITABLE CELL -->\n            <td\n              *ngIf=\"\n                isEditable(col.code!) && col.type !== TableTypeEnum.ACTION;\n                else normalTD\n              \"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngClass]=\"getDataAlignClass(col)\"\n            >\n              <!-- Editable input for NUMBER/DATE/STRING/MULTISELECT -->\n              <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                <p-cellEditor>\n                  <ng-template pTemplate=\"input\">\n                    <p-multiSelect\n                      appendTo=\"body\"\n                      [ngModel]=\"data[col.code!]\"\n                      [style]=\"{ width: '100%' }\"\n                      (ngModelChange)=\"changeHandler(data.id, col.code, $event)\"\n                      [options]=\"optionValues\"\n                    ></p-multiSelect>\n                  </ng-template>\n                  <ng-template pTemplate=\"output\">\n                    <div class=\"multi-select-container\">\n                      <ng-container *ngFor=\"let rec of data[col.code!]\">\n                        <p-tag [value]=\"rec\"></p-tag>\n                      </ng-container>\n                    </div>\n                  </ng-template>\n                </p-cellEditor>\n              </ng-container>\n\n              <ng-template #datePicker>\n                <ng-container *ngIf=\"isDatePicker(col.code); else normalInput\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-calendar\n                        [inputId]=\"data[col.code!]\"\n                        [ngModel]=\"data[col.code!]\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [dateFormat]=\"'dd/mm/yy'\"\n                      ></p-calendar>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      {{ data[col.code!] | customDate }}\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n              </ng-template>\n\n              <ng-template #normalInput>\n                <p-cellEditor>\n                  <ng-template pTemplate=\"input\">\n                    <input\n                      pInputText\n                      type=\"text\"\n                      [ngModel]=\"data[col.code!]\"\n                      (change)=\"onChange($event, data.id, col.code)\"\n                    />\n                  </ng-template>\n                  <ng-template pTemplate=\"output\">\n                    <ng-container\n                      *ngIf=\"\n                        col.type === TableTypeEnum.AMOUNT;\n                        else normalOutput\n                      \"\n                    >\n                      {{\n                        data[col.code!]\n                          | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                      }}\n                    </ng-container>\n                    <ng-template #normalOutput>\n                      {{ data[col.code!] }}\n                    </ng-template>\n                  </ng-template>\n                </p-cellEditor>\n              </ng-template>\n            </td>\n\n            <!-- NON-EDITABLE CELL (ALWAYS RENDERED) -->\n            <ng-template #normalTD>\n              <td\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [ngClass]=\"[\n                  getDataAlignClass(col),\n                  col.type === TableTypeEnum.ACTION ? 'action-column' : ''\n                ]\"\n              >\n                <!-- ACTION column: built-in edit/delete + custom actions -->\n                <ng-container\n                  *ngIf=\"col.type === TableTypeEnum.ACTION; else nonActionCell\"\n                >\n                  <div class=\"action-buttons-container\">\n                    <!-- built-in delete -->\n                    <button\n                      *ngIf=\"isDelete\"\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-trash\"\n                      (click)=\"Delete(data.id)\"\n                      class=\"p-button-rounded p-button-text\"\n                    ></button>\n\n                    <!-- built-in inline edit (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(col.composedStyles?.[composedName])\n                            \"\n                          />\n                        </ng-container>\n\n                        <!-- STRING -->\n                        <ng-container\n                          *ngIf=\"\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.STRING\n                          \"\n                        >\n                          <span\n                            class=\"composed-text\"\n                            [ngStyle]=\"\n                              getTitleStyle(\n                                col.composedStyles?.[composedName]\n                              )\n                            \"\n                          >\n                            {{ data[col.code!]?.[composedName] }}\n                          </span>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </ng-container>\n\n                  <ng-template #nonComposed>\n                    <!-- AMOUNT-->\n                    <ng-container\n                      *ngIf=\"col.type === TableTypeEnum.AMOUNT; else nonAmount\"\n                    >\n                      {{\n                        data[col.code!]\n                          | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                      }}\n                    </ng-container>\n\n                    <ng-template #nonAmount>\n                      <!-- NUMBER-->\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.NUMBER;\n                          else nonNumber\n                        \"\n                      >\n                        {{\n                          formatNumber(\n                            data[col.code!],\n                            col.decimalPlaces,\n                            col.thousandSeparator,\n                            col.decimalSeparator\n                          )\n                        }}\n                      </ng-container>\n\n                      <ng-template #nonNumber>\n                        <!-- DATE -->\n                        <ng-container\n                          *ngIf=\"\n                            col.type === TableTypeEnum.DATE;\n                            else normalTypes\n                          \"\n                        >\n                          {{ formatDate(data[col.code!]) }}\n                        </ng-container>\n\n                        <ng-template #normalTypes>\n                          <!-- STRING, MULTISELECT-->\n                          <ng-container\n                            *ngIf=\"\n                              [\n                                TableTypeEnum.STRING,\n                                TableTypeEnum.MULTISELECT\n                              ].includes(col.type!)\n                            \"\n                          >\n                            {{ data[col.code!] }}\n                          </ng-container>\n                        </ng-template>\n                      </ng-template>\n                    </ng-template>\n                  </ng-template>\n                </ng-template>\n              </td>\n            </ng-template>\n          </ng-container>\n\n          <!-- CHILD COLUMNS -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <td\n                [style.width]=\"child.width || getHeaderWidth(child)\"\n                [ngClass]=\"getDataAlignClass(child)\"\n              >\n                <ng-container\n                  *ngIf=\"isEditable(child.code); else childNormalTD\"\n                >\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText\n                        type=\"text\"\n                        [ngModel]=\"child.code ? data[child.code] : null\"\n                        (change)=\"onChange($event, data.id, child.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      {{ child.code ? data[child.code] : \"\" }}\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <ng-template #childNormalTD>\n                  {{ child.code ? data[child.code] : \"\" }}\n                </ng-template>\n              </td>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{flex:1}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:block;width:100%}.pt-advanced-prime-table .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}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{text-align:center!important;justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;padding:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container{width:100%;display:flex;justify-content:center!important;align-items:center!important;gap:.35rem}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{padding:.25rem!important;min-width:22px!important;height:22px!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -896,6 +940,14 @@ var SeverityEnum;
     SeverityEnum["INFO"] = "info";
 })(SeverityEnum || (SeverityEnum = {}));
 
+// projects/ng-prime-tools/src/lib/enums/align.enum.ts
+var AlignEnum;
+(function (AlignEnum) {
+    AlignEnum["LEFT"] = "left";
+    AlignEnum["CENTER"] = "center";
+    AlignEnum["RIGHT"] = "right";
+})(AlignEnum || (AlignEnum = {}));
+
 // projects/ng-prime-tools/src/lib/enums/public_api.ts
 
 class MultiSearchCriteriaComponent {
@@ -4892,5 +4944,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, 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 };
+export { AlignEnum, 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