ng-prime-tools 1.0.34 → 1.0.36

package/fesm2022/ng-prime-tools.mjs

@@ -605,11 +605,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          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- show cell when:\n                 - ACTION column (no value needed)\n                 - OR normal col with value present -->\n            <ng-container\n              *ngIf=\"\n                col.type === TableTypeEnum.ACTION ||\n                (col.code !== undefined && data[col.code!] !== undefined)\n              \"\n            >\n              <td\n                *ngIf=\"\n                  isEditable(col.code!) && col.type !== TableTypeEnum.ACTION;\n                  else normalTD\n                \"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <!-- Editable input for NUMBER/DATE/STRING/MULTISELECT -->\n                <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-multiSelect\n                        appendTo=\"body\"\n                        [ngModel]=\"data[col.code!]\"\n                        [style]=\"{ width: '100%' }\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [options]=\"optionValues\"\n                      ></p-multiSelect>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <div class=\"multi-select-container\">\n                        <ng-container *ngFor=\"let rec of data[col.code!]\">\n                          <p-tag [value]=\"rec\"></p-tag>\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <ng-template #datePicker>\n                  <ng-container\n                    *ngIf=\"isDatePicker(col.code); else normalInput\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-calendar\n                          [inputId]=\"data[col.code!]\"\n                          [ngModel]=\"data[col.code!]\"\n                          (ngModelChange)=\"\n                            changeHandler(data.id, col.code, $event)\n                          \"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[col.code!] | customDate }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n                </ng-template>\n\n                <ng-template #normalInput>\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText\n                        type=\"text\"\n                        [ngModel]=\"data[col.code!]\"\n                        (change)=\"onChange($event, data.id, col.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.AMOUNT;\n                          else normalOutput\n                        \"\n                      >\n                        {{\n                          data[col.code!]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      </ng-container>\n                      <ng-template #normalOutput>\n                        {{ data[col.code!] }}\n                      </ng-template>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-template>\n              </td>\n\n              <ng-template #normalTD>\n                <td [style.width]=\"getHeaderWidth(col)\">\n                  <!-- ACTION column: built-in edit/delete + custom actions -->\n                  <ng-container\n                    *ngIf=\"\n                      col.type === TableTypeEnum.ACTION;\n                      else nonActionCell\n                    \"\n                  >\n                    <div class=\"action-buttons-container\">\n                      <!-- built-in delete -->\n                      <button\n                        *ngIf=\"isDelete\"\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        icon=\"pi pi-trash\"\n                        (click)=\"Delete(data.id)\"\n                        class=\"p-button-rounded p-button-text\"\n                      ></button>\n\n                      <!-- built-in inline edit (old behaviour) -->\n                      <div *ngIf=\"isEdit\">\n                        <button\n                          pInitEditableRow\n                          *ngIf=\"!editing\"\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-pencil\"\n                          (click)=\"initEditableRow(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                        <button\n                          *ngIf=\"editing\"\n                          pSaveEditableRow\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-check\"\n                          (click)=\"saveEditableRow(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                        <button\n                          *ngIf=\"editing\"\n                          pCancelEditableRow\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-times\"\n                          (click)=\"cancelEditableRow(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                      </div>\n\n                      <!-- custom actions -->\n                      <button\n                        *ngFor=\"let act of customActions\"\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        class=\"p-button-rounded p-button-text\"\n                        [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                        [ngClass]=\"act.styleClass\"\n                        (click)=\"onCustomActionClick(act, data)\"\n                      ></button>\n                    </div>\n                  </ng-container>\n\n                  <!-- NON-ACTION cells -->\n                  <ng-template #nonActionCell>\n                    <!-- COMPOSED -->\n                    <ng-container\n                      *ngIf=\"\n                        col.type === TableTypeEnum.COMPOSED;\n                        else nonComposed\n                      \"\n                    >\n                      <div class=\"composed-cell\">\n                        <ng-container\n                          *ngFor=\"\n                            let composedName of col.composedNames;\n                            let i = index\n                          \"\n                        >\n                          <!-- IMAGE -->\n                          <ng-container\n                            *ngIf=\"\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.IMAGE\n                            \"\n                          >\n                            <img\n                              [src]=\"data[col.code!][composedName]\"\n                              alt=\"composed-img\"\n                              class=\"composed-image\"\n                              [ngStyle]=\"\n                                getImageStyle(\n                                  col.composedStyles?.[composedName]\n                                )\n                              \"\n                            />\n                          </ng-container>\n\n                          <!-- STRING -->\n                          <ng-container\n                            *ngIf=\"\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.STRING\n                            \"\n                          >\n                            <span\n                              class=\"composed-text\"\n                              [ngStyle]=\"\n                                getTitleStyle(\n                                  col.composedStyles?.[composedName]\n                                )\n                              \"\n                            >\n                              {{ data[col.code!][composedName] }}\n                            </span>\n                          </ng-container>\n                        </ng-container>\n                      </div>\n                    </ng-container>\n\n                    <ng-template #nonComposed>\n                      <!-- AMOUNT-->\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.AMOUNT;\n                          else nonAmount\n                        \"\n                      >\n                        {{\n                          data[col.code!]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      </ng-container>\n\n                      <ng-template #nonAmount>\n                        <!-- NUMBER-->\n                        <ng-container\n                          *ngIf=\"\n                            col.type === TableTypeEnum.NUMBER;\n                            else nonNumber\n                          \"\n                        >\n                          {{\n                            formatNumber(\n                              data[col.code!],\n                              col.decimalPlaces,\n                              col.thousandSeparator,\n                              col.decimalSeparator\n                            )\n                          }}\n                        </ng-container>\n\n                        <ng-template #nonNumber>\n                          <!-- DATE -->\n                          <ng-container\n                            *ngIf=\"\n                              col.type === TableTypeEnum.DATE;\n                              else normalTypes\n                            \"\n                          >\n                            {{ formatDate(data[col.code!]) }}\n                          </ng-container>\n\n                          <ng-template #normalTypes>\n                            <!-- STRING, MULTISELECT-->\n                            <ng-container\n                              *ngIf=\"\n                                [\n                                  TableTypeEnum.STRING,\n                                  TableTypeEnum.MULTISELECT\n                                ].includes(col.type!)\n                              \"\n                            >\n                              {{ data[col.code!] }}\n                            </ng-container>\n                          </ng-template>\n                        </ng-template>\n                      </ng-template>\n                    </ng-template>\n                  </ng-template>\n                </td>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n\n          <!-- CHILD COLUMNS -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <ng-container\n                *ngIf=\"\n                  child.code !== undefined && data[child.code] !== undefined\n                \"\n              >\n                <td [style.width]=\"getHeaderWidth(child)\">\n                  <ng-container\n                    *ngIf=\"isEditable(child.code); else childNormalTD\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <input\n                          pInputText\n                          type=\"text\"\n                          [ngModel]=\"data[child.code]\"\n                          (change)=\"onChange($event, data.id, child.code)\"\n                        />\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[child.code] }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n\n                  <ng-template #childNormalTD>\n                    {{ data[child.code] }}\n                  </ng-template>\n                </td>\n              </ng-container>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:flex;flex-direction:column;height:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable{display:flex;flex-direction:column;width:100%;border-collapse:collapse;table-layout:fixed}.pt-advanced-prime-table ::ng-deep .p-datatable thead{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tfoot{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tbody{display:block;overflow-y:auto;overflow-x:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable tbody tr{display:table;width:100%;table-layout:fixed}.pt-advanced-prime-table .empty-message{text-align:center;padding:2rem;color:#888;font-size:1.2rem}.pt-advanced-prime-table .empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}.pt-advanced-prime-table th{white-space:normal;word-wrap:break-word}.filter-image{width:22px;height:14px;margin-right:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i2.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i2.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i2.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i2.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i2.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i4.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i6.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i10.IconField, selector: "p-iconField", inputs: ["iconPosition"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputIcon", inputs: ["styleClass"] }, { kind: "pipe", type: CustomCurrencyPipe, name: "customCurrency" }, { kind: "pipe", type: CustomDatePipe, name: "customDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTAdvancedPrimeTableComponent, selector: "pt-advanced-prime-table", inputs: { data: "data", columns: "columns", totalRecords: "totalRecords", rowsPerPage: "rowsPerPage", hasSearchFilter: "hasSearchFilter", hasExportExcel: "hasExportExcel", hasExportPDF: "hasExportPDF", hasColumnFilter: "hasColumnFilter", isPaginated: "isPaginated", actions: "actions", isSortable: "isSortable", loading: "loading", maxHeight: "maxHeight" }, outputs: { filter: "filter", search: "search", exportExcelEvent: "exportExcelEvent", exportPdfEvent: "exportPdfEvent", pageChange: "pageChange" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<div class=\"pt-advanced-prime-table table-container\">\n  <p-table\n    #dt\n    [value]=\"data\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"true\"\n    dataKey=\"id\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onFilter)=\"onFilter($event)\"\n    (onPage)=\"onPageChange($event)\"\n  >\n    <!-- CAPTION -->\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          <!-- Clear filters -->\n          <button\n            *ngIf=\"hasSearchFilter\"\n            pButton\n            icon=\"pi pi-filter-slash\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"clear(dt)\"\n            title=\"Clear filters\"\n          ></button>\n\n          <!-- Export to Excel Button -->\n          <button\n            *ngIf=\"hasExportExcel\"\n            pButton\n            icon=\"pi pi-file-excel\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportExcel()\"\n            title=\"Export to Excel\"\n          ></button>\n\n          <!-- Export to PDF Button -->\n          <button\n            *ngIf=\"hasExportPDF\"\n            pButton\n            icon=\"pi pi-file-pdf\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportPdf()\"\n            title=\"Export to PDF\"\n          ></button>\n        </div>\n\n        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n            />\n          </p-iconField>\n        </div>\n      </div>\n    </ng-template>\n\n    <!-- HEADER -->\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        <ng-container *ngFor=\"let col of columns\">\n          <th\n            *ngIf=\"!col.children; else groupHeader\"\n            [style.width]=\"getHeaderWidth(col)\"\n            [style.padding]=\"'0px'\"\n            colspan=\"1\"\n          >\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <th\n                pSortableColumn=\"{{ col.code }}\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width\"\n                  [style.padding]=\"'0px'\"\n                  [style.margin]=\"'10px'\"\n                >\n                  <span>{{ col.title }}</span>\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon field=\"{{ col.code }}\" />\n                    <ng-container *ngIf=\"col.isFilter !== false\">\n                      <!-- COMPOSED FILTER -->\n                      <p-columnFilter\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        [type]=\"getColumnFilterType(col)\"\n                        *ngIf=\"col.type === TableTypeEnum.COMPOSED\"\n                        showClearButton=\"false\"\n                        showApplyButton=\"false\"\n                      >\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          (onFilter)=\"onFilter($event)\"\n                        >\n                          <div *ngFor=\"let composedName of col.composedNames\">\n                            <ng-container\n                              *ngIf=\"\n                                getComposedFieldType(col, composedName) ===\n                                TableTypeEnum.STRING\n                              \"\n                            >\n                              <p-multiSelect\n                                [ngModel]=\"filters[composedName]?.value\"\n                                [options]=\"filters[composedName]?.options\"\n                                (onChange)=\"\n                                  onComposedFilterChange(\n                                    col,\n                                    composedName,\n                                    $event.value\n                                  )\n                                \"\n                                [placeholder]=\"\n                                  filters[composedName]?.placeholder\n                                \"\n                                [display]=\"'chip'\"\n                              >\n                                <ng-template let-item pTemplate=\"item\">\n                                  <div class=\"custom-multiselect-item\">\n                                    <img\n                                      *ngIf=\"item.image\"\n                                      [src]=\"item.image\"\n                                      alt=\"icon\"\n                                      class=\"filter-image\"\n                                    />\n                                    <span>{{ item.label }}</span>\n                                  </div>\n                                </ng-template>\n                              </p-multiSelect>\n                            </ng-container>\n                          </div>\n\n                          <ng-template let-item pTemplate=\"item\">\n                            <div class=\"custom-multiselect-item\">\n                              <img\n                                *ngIf=\"item.image\"\n                                [src]=\"item.image\"\n                                alt=\"icon\"\n                                class=\"filter-image\"\n                              />\n                              <span>{{ item.label }}</span>\n                            </div>\n                          </ng-template>\n                        </ng-template>\n                      </p-columnFilter>\n\n                      <!-- OTHER TYPES -->\n                      <p-columnFilter\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        [type]=\"getColumnFilterType(col)\"\n                        *ngIf=\"col.type !== TableTypeEnum.COMPOSED\"\n                        hideOnClear=\"true\"\n                      >\n                        <!-- NUMBER -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"col.type === TableTypeEnum.NUMBER\"\n                          (onFilter)=\"onFilter($event)\"\n                        >\n                          <input\n                            pInputText\n                            type=\"number\"\n                            [step]=\"\n                              col.decimalPlaces\n                                ? '0.' + '1'.padEnd(col.decimalPlaces, '0')\n                                : 'any'\n                            \"\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            placeholder=\"Enter a number\"\n                          />\n                        </ng-template>\n\n                        <!-- DATE -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"col.type === TableTypeEnum.DATE\"\n                          (onFilter)=\"onFilter($event)\"\n                        >\n                          <p-calendar\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"\n                              onCalendarFilterChange(\n                                $event,\n                                col.code!,\n                                filterCallback\n                              )\n                            \"\n                            dateFormat=\"dd/mm/yy\"\n                            placeholder=\"Choose a date\"\n                          ></p-calendar>\n                        </ng-template>\n\n                        <!-- MULTISELECT -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"\n                            col.type === TableTypeEnum.MULTISELECT &&\n                            col.filterOptions &&\n                            col.filterOptions.length > 0\n                          \"\n                          (onFilter)=\"onFilter($event)\"\n                        >\n                          <p-multiSelect\n                            [options]=\"col.filterOptions\"\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            display=\"chip\"\n                            placeholder=\"Choose option\"\n                            class=\"custom-multiselect\"\n                          ></p-multiSelect>\n                        </ng-template>\n                      </p-columnFilter>\n                    </ng-container>\n                  </div>\n                </div>\n              </th>\n            </ng-container>\n\n            <ng-template #noSortHeader>\n              <th>\n                <div class=\"header-container\">\n                  <span>{{ col.title }}</span>\n                  <ng-container *ngIf=\"col.isFilter !== false\">\n                    <p-columnFilter\n                      *ngIf=\"col.type === 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                    ></p-columnFilter>\n\n                    <p-columnFilter\n                      *ngIf=\"col.type !== 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          dateFormat=\"dd/mm/yy\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          display=\"chip\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  </ng-container>\n                </div>\n              </th>\n            </ng-template>\n          </th>\n\n          <!-- GROUPED HEADER -->\n          <ng-template #groupHeader>\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"getHeaderWidth(col)\"\n              [style.text-align]=\"'center'\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          </ng-template>\n        </ng-container>\n      </tr>\n\n      <!-- CHILD HEADERS -->\n      <tr *ngIf=\"hasGroupedColumns\">\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.children\">\n            <th\n              *ngFor=\"let child of col.children\"\n              [style.width]=\"getHeaderWidth(child)\"\n              [style.padding]=\"'0px'\"\n            ></th>\n          </ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n\n    <!-- EMPTY MESSAGE -->\n    <ng-template pTemplate=\"emptymessage\">\n      <div class=\"empty-message\">\n        <i class=\"pi pi-info-circle\"></i>\n        <p>No records available to display.</p>\n      </div>\n    </ng-template>\n\n    <!-- BODY -->\n    <ng-template\n      pTemplate=\"body\"\n      let-data\n      let-editing=\"editing\"\n      let-ri=\"rowIndex\"\n    >\n      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- show cell when:\n                 - ACTION column (no value needed)\n                 - OR normal col with value present -->\n            <ng-container\n              *ngIf=\"\n                col.type === TableTypeEnum.ACTION ||\n                (col.code !== undefined && data[col.code!] !== undefined)\n              \"\n            >\n              <td\n                *ngIf=\"\n                  isEditable(col.code!) && col.type !== TableTypeEnum.ACTION;\n                  else normalTD\n                \"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <!-- Editable input for NUMBER/DATE/STRING/MULTISELECT -->\n                <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-multiSelect\n                        appendTo=\"body\"\n                        [ngModel]=\"data[col.code!]\"\n                        [style]=\"{ width: '100%' }\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [options]=\"optionValues\"\n                      ></p-multiSelect>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <div class=\"multi-select-container\">\n                        <ng-container *ngFor=\"let rec of data[col.code!]\">\n                          <p-tag [value]=\"rec\"></p-tag>\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <ng-template #datePicker>\n                  <ng-container\n                    *ngIf=\"isDatePicker(col.code); else normalInput\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-calendar\n                          [inputId]=\"data[col.code!]\"\n                          [ngModel]=\"data[col.code!]\"\n                          (ngModelChange)=\"\n                            changeHandler(data.id, col.code, $event)\n                          \"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[col.code!] | customDate }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n                </ng-template>\n\n                <ng-template #normalInput>\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText\n                        type=\"text\"\n                        [ngModel]=\"data[col.code!]\"\n                        (change)=\"onChange($event, data.id, col.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.AMOUNT;\n                          else normalOutput\n                        \"\n                      >\n                        {{\n                          data[col.code!]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      </ng-container>\n                      <ng-template #normalOutput>\n                        {{ data[col.code!] }}\n                      </ng-template>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-template>\n              </td>\n\n              <ng-template #normalTD>\n                <td [style.width]=\"getHeaderWidth(col)\">\n                  <!-- ACTION column: built-in edit/delete + custom actions -->\n                  <ng-container\n                    *ngIf=\"\n                      col.type === TableTypeEnum.ACTION;\n                      else nonActionCell\n                    \"\n                  >\n                    <div class=\"action-buttons-container\">\n                      <!-- built-in delete -->\n                      <button\n                        *ngIf=\"isDelete\"\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        icon=\"pi pi-trash\"\n                        (click)=\"Delete(data.id)\"\n                        class=\"p-button-rounded p-button-text\"\n                      ></button>\n\n                      <!-- built-in inline edit (old behaviour) -->\n                      <div *ngIf=\"isEdit\">\n                        <button\n                          pInitEditableRow\n                          *ngIf=\"!editing\"\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-pencil\"\n                          (click)=\"initEditableRow(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                        <button\n                          *ngIf=\"editing\"\n                          pSaveEditableRow\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-check\"\n                          (click)=\"saveEditableRow(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                        <button\n                          *ngIf=\"editing\"\n                          pCancelEditableRow\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-times\"\n                          (click)=\"cancelEditableRow(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                      </div>\n\n                      <!-- custom actions -->\n                      <button\n                        *ngFor=\"let act of customActions\"\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        class=\"p-button-rounded p-button-text\"\n                        [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                        [ngClass]=\"act.styleClass\"\n                        (click)=\"onCustomActionClick(act, data)\"\n                      ></button>\n                    </div>\n                  </ng-container>\n\n                  <!-- NON-ACTION cells -->\n                  <ng-template #nonActionCell>\n                    <!-- COMPOSED -->\n                    <ng-container\n                      *ngIf=\"\n                        col.type === TableTypeEnum.COMPOSED;\n                        else nonComposed\n                      \"\n                    >\n                      <div class=\"composed-cell\">\n                        <ng-container\n                          *ngFor=\"\n                            let composedName of col.composedNames;\n                            let i = index\n                          \"\n                        >\n                          <!-- IMAGE -->\n                          <ng-container\n                            *ngIf=\"\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.IMAGE\n                            \"\n                          >\n                            <img\n                              [src]=\"data[col.code!][composedName]\"\n                              alt=\"composed-img\"\n                              class=\"composed-image\"\n                              [ngStyle]=\"\n                                getImageStyle(\n                                  col.composedStyles?.[composedName]\n                                )\n                              \"\n                            />\n                          </ng-container>\n\n                          <!-- STRING -->\n                          <ng-container\n                            *ngIf=\"\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.STRING\n                            \"\n                          >\n                            <span\n                              class=\"composed-text\"\n                              [ngStyle]=\"\n                                getTitleStyle(\n                                  col.composedStyles?.[composedName]\n                                )\n                              \"\n                            >\n                              {{ data[col.code!][composedName] }}\n                            </span>\n                          </ng-container>\n                        </ng-container>\n                      </div>\n                    </ng-container>\n\n                    <ng-template #nonComposed>\n                      <!-- AMOUNT-->\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.AMOUNT;\n                          else nonAmount\n                        \"\n                      >\n                        {{\n                          data[col.code!]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      </ng-container>\n\n                      <ng-template #nonAmount>\n                        <!-- NUMBER-->\n                        <ng-container\n                          *ngIf=\"\n                            col.type === TableTypeEnum.NUMBER;\n                            else nonNumber\n                          \"\n                        >\n                          {{\n                            formatNumber(\n                              data[col.code!],\n                              col.decimalPlaces,\n                              col.thousandSeparator,\n                              col.decimalSeparator\n                            )\n                          }}\n                        </ng-container>\n\n                        <ng-template #nonNumber>\n                          <!-- DATE -->\n                          <ng-container\n                            *ngIf=\"\n                              col.type === TableTypeEnum.DATE;\n                              else normalTypes\n                            \"\n                          >\n                            {{ formatDate(data[col.code!]) }}\n                          </ng-container>\n\n                          <ng-template #normalTypes>\n                            <!-- STRING, MULTISELECT-->\n                            <ng-container\n                              *ngIf=\"\n                                [\n                                  TableTypeEnum.STRING,\n                                  TableTypeEnum.MULTISELECT\n                                ].includes(col.type!)\n                              \"\n                            >\n                              {{ data[col.code!] }}\n                            </ng-container>\n                          </ng-template>\n                        </ng-template>\n                      </ng-template>\n                    </ng-template>\n                  </ng-template>\n                </td>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n\n          <!-- CHILD COLUMNS -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <ng-container\n                *ngIf=\"\n                  child.code !== undefined && data[child.code] !== undefined\n                \"\n              >\n                <td [style.width]=\"getHeaderWidth(child)\">\n                  <ng-container\n                    *ngIf=\"isEditable(child.code); else childNormalTD\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <input\n                          pInputText\n                          type=\"text\"\n                          [ngModel]=\"data[child.code]\"\n                          (change)=\"onChange($event, data.id, child.code)\"\n                        />\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[child.code] }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n\n                  <ng-template #childNormalTD>\n                    {{ data[child.code] }}\n                  </ng-template>\n                </td>\n              </ng-container>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display: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" }] }); }
 }
 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          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- show cell when:\n                 - ACTION column (no value needed)\n                 - OR normal col with value present -->\n            <ng-container\n              *ngIf=\"\n                col.type === TableTypeEnum.ACTION ||\n                (col.code !== undefined && data[col.code!] !== undefined)\n              \"\n            >\n              <td\n                *ngIf=\"\n                  isEditable(col.code!) && col.type !== TableTypeEnum.ACTION;\n                  else normalTD\n                \"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <!-- Editable input for NUMBER/DATE/STRING/MULTISELECT -->\n                <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-multiSelect\n                        appendTo=\"body\"\n                        [ngModel]=\"data[col.code!]\"\n                        [style]=\"{ width: '100%' }\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [options]=\"optionValues\"\n                      ></p-multiSelect>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <div class=\"multi-select-container\">\n                        <ng-container *ngFor=\"let rec of data[col.code!]\">\n                          <p-tag [value]=\"rec\"></p-tag>\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <ng-template #datePicker>\n                  <ng-container\n                    *ngIf=\"isDatePicker(col.code); else normalInput\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-calendar\n                          [inputId]=\"data[col.code!]\"\n                          [ngModel]=\"data[col.code!]\"\n                          (ngModelChange)=\"\n                            changeHandler(data.id, col.code, $event)\n                          \"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[col.code!] | customDate }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n                </ng-template>\n\n                <ng-template #normalInput>\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText\n                        type=\"text\"\n                        [ngModel]=\"data[col.code!]\"\n                        (change)=\"onChange($event, data.id, col.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.AMOUNT;\n                          else normalOutput\n                        \"\n                      >\n                        {{\n                          data[col.code!]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      </ng-container>\n                      <ng-template #normalOutput>\n                        {{ data[col.code!] }}\n                      </ng-template>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-template>\n              </td>\n\n              <ng-template #normalTD>\n                <td [style.width]=\"getHeaderWidth(col)\">\n                  <!-- ACTION column: built-in edit/delete + custom actions -->\n                  <ng-container\n                    *ngIf=\"\n                      col.type === TableTypeEnum.ACTION;\n                      else nonActionCell\n                    \"\n                  >\n                    <div class=\"action-buttons-container\">\n                      <!-- built-in delete -->\n                      <button\n                        *ngIf=\"isDelete\"\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        icon=\"pi pi-trash\"\n                        (click)=\"Delete(data.id)\"\n                        class=\"p-button-rounded p-button-text\"\n                      ></button>\n\n                      <!-- built-in inline edit (old behaviour) -->\n                      <div *ngIf=\"isEdit\">\n                        <button\n                          pInitEditableRow\n                          *ngIf=\"!editing\"\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-pencil\"\n                          (click)=\"initEditableRow(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                        <button\n                          *ngIf=\"editing\"\n                          pSaveEditableRow\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-check\"\n                          (click)=\"saveEditableRow(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                        <button\n                          *ngIf=\"editing\"\n                          pCancelEditableRow\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-times\"\n                          (click)=\"cancelEditableRow(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                      </div>\n\n                      <!-- custom actions -->\n                      <button\n                        *ngFor=\"let act of customActions\"\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        class=\"p-button-rounded p-button-text\"\n                        [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                        [ngClass]=\"act.styleClass\"\n                        (click)=\"onCustomActionClick(act, data)\"\n                      ></button>\n                    </div>\n                  </ng-container>\n\n                  <!-- NON-ACTION cells -->\n                  <ng-template #nonActionCell>\n                    <!-- COMPOSED -->\n                    <ng-container\n                      *ngIf=\"\n                        col.type === TableTypeEnum.COMPOSED;\n                        else nonComposed\n                      \"\n                    >\n                      <div class=\"composed-cell\">\n                        <ng-container\n                          *ngFor=\"\n                            let composedName of col.composedNames;\n                            let i = index\n                          \"\n                        >\n                          <!-- IMAGE -->\n                          <ng-container\n                            *ngIf=\"\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.IMAGE\n                            \"\n                          >\n                            <img\n                              [src]=\"data[col.code!][composedName]\"\n                              alt=\"composed-img\"\n                              class=\"composed-image\"\n                              [ngStyle]=\"\n                                getImageStyle(\n                                  col.composedStyles?.[composedName]\n                                )\n                              \"\n                            />\n                          </ng-container>\n\n                          <!-- STRING -->\n                          <ng-container\n                            *ngIf=\"\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.STRING\n                            \"\n                          >\n                            <span\n                              class=\"composed-text\"\n                              [ngStyle]=\"\n                                getTitleStyle(\n                                  col.composedStyles?.[composedName]\n                                )\n                              \"\n                            >\n                              {{ data[col.code!][composedName] }}\n                            </span>\n                          </ng-container>\n                        </ng-container>\n                      </div>\n                    </ng-container>\n\n                    <ng-template #nonComposed>\n                      <!-- AMOUNT-->\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.AMOUNT;\n                          else nonAmount\n                        \"\n                      >\n                        {{\n                          data[col.code!]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      </ng-container>\n\n                      <ng-template #nonAmount>\n                        <!-- NUMBER-->\n                        <ng-container\n                          *ngIf=\"\n                            col.type === TableTypeEnum.NUMBER;\n                            else nonNumber\n                          \"\n                        >\n                          {{\n                            formatNumber(\n                              data[col.code!],\n                              col.decimalPlaces,\n                              col.thousandSeparator,\n                              col.decimalSeparator\n                            )\n                          }}\n                        </ng-container>\n\n                        <ng-template #nonNumber>\n                          <!-- DATE -->\n                          <ng-container\n                            *ngIf=\"\n                              col.type === TableTypeEnum.DATE;\n                              else normalTypes\n                            \"\n                          >\n                            {{ formatDate(data[col.code!]) }}\n                          </ng-container>\n\n                          <ng-template #normalTypes>\n                            <!-- STRING, MULTISELECT-->\n                            <ng-container\n                              *ngIf=\"\n                                [\n                                  TableTypeEnum.STRING,\n                                  TableTypeEnum.MULTISELECT\n                                ].includes(col.type!)\n                              \"\n                            >\n                              {{ data[col.code!] }}\n                            </ng-container>\n                          </ng-template>\n                        </ng-template>\n                      </ng-template>\n                    </ng-template>\n                  </ng-template>\n                </td>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n\n          <!-- CHILD COLUMNS -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <ng-container\n                *ngIf=\"\n                  child.code !== undefined && data[child.code] !== undefined\n                \"\n              >\n                <td [style.width]=\"getHeaderWidth(child)\">\n                  <ng-container\n                    *ngIf=\"isEditable(child.code); else childNormalTD\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <input\n                          pInputText\n                          type=\"text\"\n                          [ngModel]=\"data[child.code]\"\n                          (change)=\"onChange($event, data.id, child.code)\"\n                        />\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[child.code] }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n\n                  <ng-template #childNormalTD>\n                    {{ data[child.code] }}\n                  </ng-template>\n                </td>\n              </ng-container>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:flex;flex-direction:column;height:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable{display:flex;flex-direction:column;width:100%;border-collapse:collapse;table-layout:fixed}.pt-advanced-prime-table ::ng-deep .p-datatable thead{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tfoot{display:table;width:100%;table-layout:fixed;background:#fff;z-index:2}.pt-advanced-prime-table ::ng-deep .p-datatable tbody{display:block;overflow-y:auto;overflow-x:hidden}.pt-advanced-prime-table ::ng-deep .p-datatable tbody tr{display:table;width:100%;table-layout:fixed}.pt-advanced-prime-table .empty-message{text-align:center;padding:2rem;color:#888;font-size:1.2rem}.pt-advanced-prime-table .empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}.pt-advanced-prime-table th{white-space:normal;word-wrap:break-word}.filter-image{width:22px;height:14px;margin-right:5px}\n"] }]
+            args: [{ selector: 'pt-advanced-prime-table', template: "<div class=\"pt-advanced-prime-table table-container\">\n  <p-table\n    #dt\n    [value]=\"data\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"true\"\n    dataKey=\"id\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onFilter)=\"onFilter($event)\"\n    (onPage)=\"onPageChange($event)\"\n  >\n    <!-- CAPTION -->\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          <!-- Clear filters -->\n          <button\n            *ngIf=\"hasSearchFilter\"\n            pButton\n            icon=\"pi pi-filter-slash\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"clear(dt)\"\n            title=\"Clear filters\"\n          ></button>\n\n          <!-- Export to Excel Button -->\n          <button\n            *ngIf=\"hasExportExcel\"\n            pButton\n            icon=\"pi pi-file-excel\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportExcel()\"\n            title=\"Export to Excel\"\n          ></button>\n\n          <!-- Export to PDF Button -->\n          <button\n            *ngIf=\"hasExportPDF\"\n            pButton\n            icon=\"pi pi-file-pdf\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportPdf()\"\n            title=\"Export to PDF\"\n          ></button>\n        </div>\n\n        <div class=\"ml-auto\" *ngIf=\"hasSearchFilter\">\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n            />\n          </p-iconField>\n        </div>\n      </div>\n    </ng-template>\n\n    <!-- HEADER -->\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        <ng-container *ngFor=\"let col of columns\">\n          <th\n            *ngIf=\"!col.children; else groupHeader\"\n            [style.width]=\"getHeaderWidth(col)\"\n            [style.padding]=\"'0px'\"\n            colspan=\"1\"\n          >\n            <ng-container\n              *ngIf=\"isSortable && col.isSortable !== false; else noSortHeader\"\n            >\n              <th\n                pSortableColumn=\"{{ col.code }}\"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width\"\n                  [style.padding]=\"'0px'\"\n                  [style.margin]=\"'10px'\"\n                >\n                  <span>{{ col.title }}</span>\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon field=\"{{ col.code }}\" />\n                    <ng-container *ngIf=\"col.isFilter !== false\">\n                      <!-- COMPOSED FILTER -->\n                      <p-columnFilter\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        [type]=\"getColumnFilterType(col)\"\n                        *ngIf=\"col.type === TableTypeEnum.COMPOSED\"\n                        showClearButton=\"false\"\n                        showApplyButton=\"false\"\n                      >\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          (onFilter)=\"onFilter($event)\"\n                        >\n                          <div *ngFor=\"let composedName of col.composedNames\">\n                            <ng-container\n                              *ngIf=\"\n                                getComposedFieldType(col, composedName) ===\n                                TableTypeEnum.STRING\n                              \"\n                            >\n                              <p-multiSelect\n                                [ngModel]=\"filters[composedName]?.value\"\n                                [options]=\"filters[composedName]?.options\"\n                                (onChange)=\"\n                                  onComposedFilterChange(\n                                    col,\n                                    composedName,\n                                    $event.value\n                                  )\n                                \"\n                                [placeholder]=\"\n                                  filters[composedName]?.placeholder\n                                \"\n                                [display]=\"'chip'\"\n                              >\n                                <ng-template let-item pTemplate=\"item\">\n                                  <div class=\"custom-multiselect-item\">\n                                    <img\n                                      *ngIf=\"item.image\"\n                                      [src]=\"item.image\"\n                                      alt=\"icon\"\n                                      class=\"filter-image\"\n                                    />\n                                    <span>{{ item.label }}</span>\n                                  </div>\n                                </ng-template>\n                              </p-multiSelect>\n                            </ng-container>\n                          </div>\n\n                          <ng-template let-item pTemplate=\"item\">\n                            <div class=\"custom-multiselect-item\">\n                              <img\n                                *ngIf=\"item.image\"\n                                [src]=\"item.image\"\n                                alt=\"icon\"\n                                class=\"filter-image\"\n                              />\n                              <span>{{ item.label }}</span>\n                            </div>\n                          </ng-template>\n                        </ng-template>\n                      </p-columnFilter>\n\n                      <!-- OTHER TYPES -->\n                      <p-columnFilter\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        [type]=\"getColumnFilterType(col)\"\n                        *ngIf=\"col.type !== TableTypeEnum.COMPOSED\"\n                        hideOnClear=\"true\"\n                      >\n                        <!-- NUMBER -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"col.type === TableTypeEnum.NUMBER\"\n                          (onFilter)=\"onFilter($event)\"\n                        >\n                          <input\n                            pInputText\n                            type=\"number\"\n                            [step]=\"\n                              col.decimalPlaces\n                                ? '0.' + '1'.padEnd(col.decimalPlaces, '0')\n                                : 'any'\n                            \"\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            placeholder=\"Enter a number\"\n                          />\n                        </ng-template>\n\n                        <!-- DATE -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"col.type === TableTypeEnum.DATE\"\n                          (onFilter)=\"onFilter($event)\"\n                        >\n                          <p-calendar\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"\n                              onCalendarFilterChange(\n                                $event,\n                                col.code!,\n                                filterCallback\n                              )\n                            \"\n                            dateFormat=\"dd/mm/yy\"\n                            placeholder=\"Choose a date\"\n                          ></p-calendar>\n                        </ng-template>\n\n                        <!-- MULTISELECT -->\n                        <ng-template\n                          pTemplate=\"filter\"\n                          let-value\n                          let-filterCallback=\"filterCallback\"\n                          *ngIf=\"\n                            col.type === TableTypeEnum.MULTISELECT &&\n                            col.filterOptions &&\n                            col.filterOptions.length > 0\n                          \"\n                          (onFilter)=\"onFilter($event)\"\n                        >\n                          <p-multiSelect\n                            [options]=\"col.filterOptions\"\n                            [ngModel]=\"value\"\n                            (ngModelChange)=\"filterCallback($event)\"\n                            display=\"chip\"\n                            placeholder=\"Choose option\"\n                            class=\"custom-multiselect\"\n                          ></p-multiSelect>\n                        </ng-template>\n                      </p-columnFilter>\n                    </ng-container>\n                  </div>\n                </div>\n              </th>\n            </ng-container>\n\n            <ng-template #noSortHeader>\n              <th>\n                <div class=\"header-container\">\n                  <span>{{ col.title }}</span>\n                  <ng-container *ngIf=\"col.isFilter !== false\">\n                    <p-columnFilter\n                      *ngIf=\"col.type === 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                    ></p-columnFilter>\n\n                    <p-columnFilter\n                      *ngIf=\"col.type !== 'AMOUNT'\"\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-calendar\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          dateFormat=\"dd/mm/yy\"\n                        ></p-calendar>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filterCallback=\"filterCallback\"\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          [ngModel]=\"value\"\n                          (ngModelChange)=\"filterCallback($event)\"\n                          display=\"chip\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  </ng-container>\n                </div>\n              </th>\n            </ng-template>\n          </th>\n\n          <!-- GROUPED HEADER -->\n          <ng-template #groupHeader>\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"getHeaderWidth(col)\"\n              [style.text-align]=\"'center'\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          </ng-template>\n        </ng-container>\n      </tr>\n\n      <!-- CHILD HEADERS -->\n      <tr *ngIf=\"hasGroupedColumns\">\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"col.children\">\n            <th\n              *ngFor=\"let child of col.children\"\n              [style.width]=\"getHeaderWidth(child)\"\n              [style.padding]=\"'0px'\"\n            ></th>\n          </ng-container>\n        </ng-container>\n      </tr>\n    </ng-template>\n\n    <!-- EMPTY MESSAGE -->\n    <ng-template pTemplate=\"emptymessage\">\n      <div class=\"empty-message\">\n        <i class=\"pi pi-info-circle\"></i>\n        <p>No records available to display.</p>\n      </div>\n    </ng-template>\n\n    <!-- BODY -->\n    <ng-template\n      pTemplate=\"body\"\n      let-data\n      let-editing=\"editing\"\n      let-ri=\"rowIndex\"\n    >\n      <tr *ngIf=\"!loading\" [pEditableRow]=\"isEdit ? data : null\">\n        <ng-container *ngFor=\"let col of columns\">\n          <ng-container *ngIf=\"!col.children; else childColumns\">\n            <!-- show cell when:\n                 - ACTION column (no value needed)\n                 - OR normal col with value present -->\n            <ng-container\n              *ngIf=\"\n                col.type === TableTypeEnum.ACTION ||\n                (col.code !== undefined && data[col.code!] !== undefined)\n              \"\n            >\n              <td\n                *ngIf=\"\n                  isEditable(col.code!) && col.type !== TableTypeEnum.ACTION;\n                  else normalTD\n                \"\n                [style.width]=\"getHeaderWidth(col)\"\n              >\n                <!-- Editable input for NUMBER/DATE/STRING/MULTISELECT -->\n                <ng-container *ngIf=\"isMultiSelect(col.code); else datePicker\">\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <p-multiSelect\n                        appendTo=\"body\"\n                        [ngModel]=\"data[col.code!]\"\n                        [style]=\"{ width: '100%' }\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                        [options]=\"optionValues\"\n                      ></p-multiSelect>\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <div class=\"multi-select-container\">\n                        <ng-container *ngFor=\"let rec of data[col.code!]\">\n                          <p-tag [value]=\"rec\"></p-tag>\n                        </ng-container>\n                      </div>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-container>\n\n                <ng-template #datePicker>\n                  <ng-container\n                    *ngIf=\"isDatePicker(col.code); else normalInput\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-calendar\n                          [inputId]=\"data[col.code!]\"\n                          [ngModel]=\"data[col.code!]\"\n                          (ngModelChange)=\"\n                            changeHandler(data.id, col.code, $event)\n                          \"\n                          [dateFormat]=\"'dd/mm/yy'\"\n                        ></p-calendar>\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[col.code!] | customDate }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n                </ng-template>\n\n                <ng-template #normalInput>\n                  <p-cellEditor>\n                    <ng-template pTemplate=\"input\">\n                      <input\n                        pInputText\n                        type=\"text\"\n                        [ngModel]=\"data[col.code!]\"\n                        (change)=\"onChange($event, data.id, col.code)\"\n                      />\n                    </ng-template>\n                    <ng-template pTemplate=\"output\">\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.AMOUNT;\n                          else normalOutput\n                        \"\n                      >\n                        {{\n                          data[col.code!]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      </ng-container>\n                      <ng-template #normalOutput>\n                        {{ data[col.code!] }}\n                      </ng-template>\n                    </ng-template>\n                  </p-cellEditor>\n                </ng-template>\n              </td>\n\n              <ng-template #normalTD>\n                <td [style.width]=\"getHeaderWidth(col)\">\n                  <!-- ACTION column: built-in edit/delete + custom actions -->\n                  <ng-container\n                    *ngIf=\"\n                      col.type === TableTypeEnum.ACTION;\n                      else nonActionCell\n                    \"\n                  >\n                    <div class=\"action-buttons-container\">\n                      <!-- built-in delete -->\n                      <button\n                        *ngIf=\"isDelete\"\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        icon=\"pi pi-trash\"\n                        (click)=\"Delete(data.id)\"\n                        class=\"p-button-rounded p-button-text\"\n                      ></button>\n\n                      <!-- built-in inline edit (old behaviour) -->\n                      <div *ngIf=\"isEdit\">\n                        <button\n                          pInitEditableRow\n                          *ngIf=\"!editing\"\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-pencil\"\n                          (click)=\"initEditableRow(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                        <button\n                          *ngIf=\"editing\"\n                          pSaveEditableRow\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-check\"\n                          (click)=\"saveEditableRow(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                        <button\n                          *ngIf=\"editing\"\n                          pCancelEditableRow\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-times\"\n                          (click)=\"cancelEditableRow(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                      </div>\n\n                      <!-- custom actions -->\n                      <button\n                        *ngFor=\"let act of customActions\"\n                        pButton\n                        pRipple\n                        type=\"button\"\n                        class=\"p-button-rounded p-button-text\"\n                        [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                        [ngClass]=\"act.styleClass\"\n                        (click)=\"onCustomActionClick(act, data)\"\n                      ></button>\n                    </div>\n                  </ng-container>\n\n                  <!-- NON-ACTION cells -->\n                  <ng-template #nonActionCell>\n                    <!-- COMPOSED -->\n                    <ng-container\n                      *ngIf=\"\n                        col.type === TableTypeEnum.COMPOSED;\n                        else nonComposed\n                      \"\n                    >\n                      <div class=\"composed-cell\">\n                        <ng-container\n                          *ngFor=\"\n                            let composedName of col.composedNames;\n                            let i = index\n                          \"\n                        >\n                          <!-- IMAGE -->\n                          <ng-container\n                            *ngIf=\"\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.IMAGE\n                            \"\n                          >\n                            <img\n                              [src]=\"data[col.code!][composedName]\"\n                              alt=\"composed-img\"\n                              class=\"composed-image\"\n                              [ngStyle]=\"\n                                getImageStyle(\n                                  col.composedStyles?.[composedName]\n                                )\n                              \"\n                            />\n                          </ng-container>\n\n                          <!-- STRING -->\n                          <ng-container\n                            *ngIf=\"\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.STRING\n                            \"\n                          >\n                            <span\n                              class=\"composed-text\"\n                              [ngStyle]=\"\n                                getTitleStyle(\n                                  col.composedStyles?.[composedName]\n                                )\n                              \"\n                            >\n                              {{ data[col.code!][composedName] }}\n                            </span>\n                          </ng-container>\n                        </ng-container>\n                      </div>\n                    </ng-container>\n\n                    <ng-template #nonComposed>\n                      <!-- AMOUNT-->\n                      <ng-container\n                        *ngIf=\"\n                          col.type === TableTypeEnum.AMOUNT;\n                          else nonAmount\n                        \"\n                      >\n                        {{\n                          data[col.code!]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      </ng-container>\n\n                      <ng-template #nonAmount>\n                        <!-- NUMBER-->\n                        <ng-container\n                          *ngIf=\"\n                            col.type === TableTypeEnum.NUMBER;\n                            else nonNumber\n                          \"\n                        >\n                          {{\n                            formatNumber(\n                              data[col.code!],\n                              col.decimalPlaces,\n                              col.thousandSeparator,\n                              col.decimalSeparator\n                            )\n                          }}\n                        </ng-container>\n\n                        <ng-template #nonNumber>\n                          <!-- DATE -->\n                          <ng-container\n                            *ngIf=\"\n                              col.type === TableTypeEnum.DATE;\n                              else normalTypes\n                            \"\n                          >\n                            {{ formatDate(data[col.code!]) }}\n                          </ng-container>\n\n                          <ng-template #normalTypes>\n                            <!-- STRING, MULTISELECT-->\n                            <ng-container\n                              *ngIf=\"\n                                [\n                                  TableTypeEnum.STRING,\n                                  TableTypeEnum.MULTISELECT\n                                ].includes(col.type!)\n                              \"\n                            >\n                              {{ data[col.code!] }}\n                            </ng-container>\n                          </ng-template>\n                        </ng-template>\n                      </ng-template>\n                    </ng-template>\n                  </ng-template>\n                </td>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n\n          <!-- CHILD COLUMNS -->\n          <ng-template #childColumns>\n            <ng-container *ngFor=\"let child of col.children\">\n              <ng-container\n                *ngIf=\"\n                  child.code !== undefined && data[child.code] !== undefined\n                \"\n              >\n                <td [style.width]=\"getHeaderWidth(child)\">\n                  <ng-container\n                    *ngIf=\"isEditable(child.code); else childNormalTD\"\n                  >\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <input\n                          pInputText\n                          type=\"text\"\n                          [ngModel]=\"data[child.code]\"\n                          (change)=\"onChange($event, data.id, child.code)\"\n                        />\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        {{ data[child.code] }}\n                      </ng-template>\n                    </p-cellEditor>\n                  </ng-container>\n\n                  <ng-template #childNormalTD>\n                    {{ data[child.code] }}\n                  </ng-template>\n                </td>\n              </ng-container>\n            </ng-container>\n          </ng-template>\n        </ng-container>\n      </tr>\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;justify-content:center;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-1.5rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display: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"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -3802,7 +3802,7 @@ const DIALOG_STYLES = {
  * Default config:
  *  - content is now empty string (no default message).
  */
-const DEFAULT_DIALOG_CONFIG = {
+const DEFAULT_DIALOG_CONFIG$1 = {
     header: { text: 'Confirmation' },
     visible: false,
     width: '720px',
@@ -3822,14 +3822,15 @@ class PTConfirmDialogComponent {
         this.messageService = messageService;
         this.renderer = renderer;
         this.el = el;
-        this.dialogConfig = { ...DEFAULT_DIALOG_CONFIG };
+        this.dialogConfig = { ...DEFAULT_DIALOG_CONFIG$1 };
         this.confirm = new EventEmitter();
         this.cancel = new EventEmitter();
         this.SeverityEnum = SeverityEnum;
     }
     ngOnChanges(changes) {
         if (changes['dialogConfig']) {
-            const current = changes['dialogConfig'].currentValue;
+            const current = changes['dialogConfig']
+                .currentValue;
             if (changes['dialogConfig'].previousValue?.dialogStyle !==
                 current?.dialogStyle) {
                 this.applyDialogStyle();
@@ -3852,18 +3853,18 @@ class PTConfirmDialogComponent {
             ? current.header
             : styleConfig.header !== undefined
                 ? styleConfig.header
-                : DEFAULT_DIALOG_CONFIG.header;
+                : DEFAULT_DIALOG_CONFIG$1.header;
         this.dialogConfig = {
-            ...DEFAULT_DIALOG_CONFIG,
+            ...DEFAULT_DIALOG_CONFIG$1,
             ...current,
             ...styleConfig,
             header: mergedHeader,
             confirmButtonConfig: {
-                ...DEFAULT_DIALOG_CONFIG.confirmButtonConfig,
+                ...DEFAULT_DIALOG_CONFIG$1.confirmButtonConfig,
                 ...current.confirmButtonConfig,
             },
             cancelButtonConfig: {
-                ...DEFAULT_DIALOG_CONFIG.cancelButtonConfig,
+                ...DEFAULT_DIALOG_CONFIG$1.cancelButtonConfig,
                 ...current.cancelButtonConfig,
             },
             visible: current.visible,
@@ -4110,107 +4111,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 }]
         }] });
 
+const DEFAULT_DIALOG_CONFIG = {
+    modal: true,
+    closable: true,
+    draggable: true,
+    resizable: true,
+    maximizable: false,
+    dismissableMask: false,
+    closeOnEscape: true,
+    blockScroll: true,
+    bodyScrollable: true,
+    showFooter: true,
+    position: 'center',
+};
 class PTDialogComponent {
     constructor() {
-        /** Enable scroll when body exceeds given height/width */
-        this.bodyScrollable = true;
-        /** Control footer visibility (default: true) */
-        this.showFooter = true;
-        this.modal = true;
-        this.closable = true;
-        this.draggable = true;
-        this.resizable = true;
-        this.maximizable = false;
-        this.dismissableMask = false;
-        this.closeOnEscape = true;
-        this.blockScroll = true;
-        this.position = 'center';
-        /** internal visible flag used by p-dialog */
-        this._visible = false;
+        /** Single configuration object */
+        this._config = { ...DEFAULT_DIALOG_CONFIG };
+        // ---- Internal visible state (PUBLIC so template can read it) ----
+        this._internalVisible = false;
         this.visibleChange = new EventEmitter();
     }
+    set config(value) {
+        this._config = { ...DEFAULT_DIALOG_CONFIG, ...(value || {}) };
+    }
+    get config() {
+        return this._config;
+    }
+    /** Input visible from parent */
     get visible() {
-        return this._visible;
+        return this._internalVisible;
     }
     set visible(v) {
-        this._visible = v;
+        this._internalVisible = v;
     }
-    /** Final class applied to p-dialog */
     get dialogStyleClass() {
         return [
             'border-round-3xl',
             'shadow-6',
             'overflow-hidden',
-            'pt-dialog-header-blue', // for header/footer colors
-            this.styleClass,
+            'pt-dialog-header-blue',
+            this.config.styleClass,
         ]
             .filter(Boolean)
             .join(' ');
     }
-    /** Style applied to the body wrapper */
+    get primePosition() {
+        return (this.config.position ?? 'center');
+    }
     get bodyStyle() {
         const style = {};
-        if (this.bodyWidth) {
-            style['max-width'] = this.bodyWidth;
+        if (this.config.bodyWidth) {
+            style['max-width'] = this.config.bodyWidth;
         }
-        if (this.bodyHeight) {
-            style['max-height'] = this.bodyHeight;
-            if (this.bodyScrollable) {
+        if (this.config.bodyHeight) {
+            style['max-height'] = this.config.bodyHeight;
+            if (this.config.bodyScrollable !== false) {
                 style['overflow-y'] = 'auto';
                 style['overflow-x'] = 'auto';
             }
         }
         return style;
     }
-    onShow() {
-        this.visibleChange.emit(true);
-    }
-    onHide() {
-        this.visibleChange.emit(false);
+    /** Sync <p-dialog> → parent */
+    onInternalVisibleChange(v) {
+        this._internalVisible = v;
+        this.visibleChange.emit(v);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTDialogComponent, selector: "pt-dialog", inputs: { header: "header", style: "style", styleClass: "styleClass", headerIconClass: "headerIconClass", bodyWidth: "bodyWidth", bodyHeight: "bodyHeight", bodyScrollable: "bodyScrollable", showFooter: "showFooter", modal: "modal", closable: "closable", draggable: "draggable", resizable: "resizable", maximizable: "maximizable", dismissableMask: "dismissableMask", closeOnEscape: "closeOnEscape", blockScroll: "blockScroll", breakpoints: "breakpoints", position: "position", contentStyle: "contentStyle", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<p-dialog\n  [(visible)]=\"_visible\"\n  [header]=\"header\"\n  [modal]=\"modal\"\n  [style]=\"style\"\n  [breakpoints]=\"breakpoints\"\n  [closable]=\"closable\"\n  [draggable]=\"draggable\"\n  [resizable]=\"resizable\"\n  [maximizable]=\"maximizable\"\n  [dismissableMask]=\"dismissableMask\"\n  [closeOnEscape]=\"closeOnEscape\"\n  [blockScroll]=\"blockScroll\"\n  [position]=\"position\"\n  [contentStyle]=\"contentStyle\"\n  [styleClass]=\"dialogStyleClass\"\n  (onShow)=\"onShow()\"\n  (onHide)=\"onHide()\"\n>\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <div\n      class=\"flex align-items-center justify-content-between w-full px-4 pt-3 pb-2\"\n    >\n      <div class=\"flex align-items-center gap-2\">\n        <!-- optional icon -->\n        <i *ngIf=\"headerIconClass\" [ngClass]=\"headerIconClass\"></i>\n\n        <!-- projected custom header -->\n        <ng-content select=\"[ptDialogHeader]\"></ng-content>\n\n        <!-- fallback header text -->\n        <span *ngIf=\"header\" class=\"font-bold text-lg\">\n          {{ header }}\n        </span>\n      </div>\n      <!-- close icon from PrimeNG (X) is rendered automatically -->\n    </div>\n  </ng-template>\n\n  <!-- BODY -->\n  <div\n    class=\"surface-50 px-4 py-4 flex flex-column gap-3\"\n    [ngStyle]=\"bodyStyle\"\n  >\n    <ng-content select=\"[ptDialogContent]\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n\n  <!-- FOOTER (optional) -->\n  <ng-template pTemplate=\"footer\" *ngIf=\"showFooter\">\n    <div class=\"surface-100 px-4 py-2 flex justify-content-end gap-2\">\n      <ng-content select=\"[ptDialogFooter]\"></ng-content>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [":host ::ng-deep .pt-dialog-header-blue .p-dialog-header{background-color:#e0f2ff;border-bottom:0}:host ::ng-deep .pt-dialog-header-blue .p-dialog-footer{background-color:#f5f6f8!important;border-top:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTDialogComponent, selector: "pt-dialog", inputs: { config: "config", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<p-dialog\n  [visible]=\"_internalVisible\"\n  (visibleChange)=\"onInternalVisibleChange($event)\"\n  [header]=\"config.header\"\n  [modal]=\"config.modal\"\n  [style]=\"config.style\"\n  [breakpoints]=\"config.breakpoints\"\n  [closable]=\"config.closable\"\n  [draggable]=\"config.draggable\"\n  [resizable]=\"config.resizable\"\n  [maximizable]=\"config.maximizable\"\n  [dismissableMask]=\"config.dismissableMask\"\n  [closeOnEscape]=\"config.closeOnEscape\"\n  [blockScroll]=\"config.blockScroll\"\n  [position]=\"primePosition\"\n  [contentStyle]=\"config.contentStyle\"\n  [styleClass]=\"dialogStyleClass\"\n>\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <div\n      class=\"flex align-items-center justify-content-between w-full px-4 pt-3 pb-2\"\n    >\n      <div class=\"flex align-items-center gap-2\">\n        <i\n          *ngIf=\"config.headerIconClass\"\n          [ngClass]=\"config.headerIconClass\"\n        ></i>\n        <ng-content select=\"[ptDialogHeader]\"></ng-content>\n        <span *ngIf=\"config.header\" class=\"font-bold text-lg\">\n          {{ config.header }}\n        </span>\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- BODY -->\n  <div\n    class=\"surface-50 px-4 py-4 flex flex-column gap-3\"\n    [ngStyle]=\"bodyStyle\"\n  >\n    <ng-content select=\"[ptDialogContent]\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n\n  <!-- FOOTER -->\n  <ng-template pTemplate=\"footer\" *ngIf=\"config.showFooter !== false\">\n    <div class=\"surface-100 px-4 py-2 flex justify-content-end gap-2\">\n      <ng-content select=\"[ptDialogFooter]\"></ng-content>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [":host ::ng-deep .pt-dialog-header-blue .p-dialog-header{background-color:#e0f2ff;border-bottom:0}:host ::ng-deep .pt-dialog-header-blue .p-dialog-footer{background-color:#f5f6f8!important;border-top:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$3.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-dialog', template: "<p-dialog\n  [(visible)]=\"_visible\"\n  [header]=\"header\"\n  [modal]=\"modal\"\n  [style]=\"style\"\n  [breakpoints]=\"breakpoints\"\n  [closable]=\"closable\"\n  [draggable]=\"draggable\"\n  [resizable]=\"resizable\"\n  [maximizable]=\"maximizable\"\n  [dismissableMask]=\"dismissableMask\"\n  [closeOnEscape]=\"closeOnEscape\"\n  [blockScroll]=\"blockScroll\"\n  [position]=\"position\"\n  [contentStyle]=\"contentStyle\"\n  [styleClass]=\"dialogStyleClass\"\n  (onShow)=\"onShow()\"\n  (onHide)=\"onHide()\"\n>\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <div\n      class=\"flex align-items-center justify-content-between w-full px-4 pt-3 pb-2\"\n    >\n      <div class=\"flex align-items-center gap-2\">\n        <!-- optional icon -->\n        <i *ngIf=\"headerIconClass\" [ngClass]=\"headerIconClass\"></i>\n\n        <!-- projected custom header -->\n        <ng-content select=\"[ptDialogHeader]\"></ng-content>\n\n        <!-- fallback header text -->\n        <span *ngIf=\"header\" class=\"font-bold text-lg\">\n          {{ header }}\n        </span>\n      </div>\n      <!-- close icon from PrimeNG (X) is rendered automatically -->\n    </div>\n  </ng-template>\n\n  <!-- BODY -->\n  <div\n    class=\"surface-50 px-4 py-4 flex flex-column gap-3\"\n    [ngStyle]=\"bodyStyle\"\n  >\n    <ng-content select=\"[ptDialogContent]\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n\n  <!-- FOOTER (optional) -->\n  <ng-template pTemplate=\"footer\" *ngIf=\"showFooter\">\n    <div class=\"surface-100 px-4 py-2 flex justify-content-end gap-2\">\n      <ng-content select=\"[ptDialogFooter]\"></ng-content>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [":host ::ng-deep .pt-dialog-header-blue .p-dialog-header{background-color:#e0f2ff;border-bottom:0}:host ::ng-deep .pt-dialog-header-blue .p-dialog-footer{background-color:#f5f6f8!important;border-top:0!important}\n"] }]
-        }], propDecorators: { header: [{
-                type: Input
-            }], style: [{
-                type: Input
-            }], styleClass: [{
-                type: Input
-            }], headerIconClass: [{
-                type: Input
-            }], bodyWidth: [{
-                type: Input
-            }], bodyHeight: [{
-                type: Input
-            }], bodyScrollable: [{
-                type: Input
-            }], showFooter: [{
-                type: Input
-            }], modal: [{
-                type: Input
-            }], closable: [{
-                type: Input
-            }], draggable: [{
-                type: Input
-            }], resizable: [{
-                type: Input
-            }], maximizable: [{
-                type: Input
-            }], dismissableMask: [{
-                type: Input
-            }], closeOnEscape: [{
-                type: Input
-            }], blockScroll: [{
-                type: Input
-            }], breakpoints: [{
-                type: Input
-            }], position: [{
-                type: Input
-            }], contentStyle: [{
+            args: [{ selector: 'pt-dialog', template: "<p-dialog\n  [visible]=\"_internalVisible\"\n  (visibleChange)=\"onInternalVisibleChange($event)\"\n  [header]=\"config.header\"\n  [modal]=\"config.modal\"\n  [style]=\"config.style\"\n  [breakpoints]=\"config.breakpoints\"\n  [closable]=\"config.closable\"\n  [draggable]=\"config.draggable\"\n  [resizable]=\"config.resizable\"\n  [maximizable]=\"config.maximizable\"\n  [dismissableMask]=\"config.dismissableMask\"\n  [closeOnEscape]=\"config.closeOnEscape\"\n  [blockScroll]=\"config.blockScroll\"\n  [position]=\"primePosition\"\n  [contentStyle]=\"config.contentStyle\"\n  [styleClass]=\"dialogStyleClass\"\n>\n  <!-- HEADER -->\n  <ng-template pTemplate=\"header\">\n    <div\n      class=\"flex align-items-center justify-content-between w-full px-4 pt-3 pb-2\"\n    >\n      <div class=\"flex align-items-center gap-2\">\n        <i\n          *ngIf=\"config.headerIconClass\"\n          [ngClass]=\"config.headerIconClass\"\n        ></i>\n        <ng-content select=\"[ptDialogHeader]\"></ng-content>\n        <span *ngIf=\"config.header\" class=\"font-bold text-lg\">\n          {{ config.header }}\n        </span>\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- BODY -->\n  <div\n    class=\"surface-50 px-4 py-4 flex flex-column gap-3\"\n    [ngStyle]=\"bodyStyle\"\n  >\n    <ng-content select=\"[ptDialogContent]\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n\n  <!-- FOOTER -->\n  <ng-template pTemplate=\"footer\" *ngIf=\"config.showFooter !== false\">\n    <div class=\"surface-100 px-4 py-2 flex justify-content-end gap-2\">\n      <ng-content select=\"[ptDialogFooter]\"></ng-content>\n    </div>\n  </ng-template>\n</p-dialog>\n", styles: [":host ::ng-deep .pt-dialog-header-blue .p-dialog-header{background-color:#e0f2ff;border-bottom:0}:host ::ng-deep .pt-dialog-header-blue .p-dialog-footer{background-color:#f5f6f8!important;border-top:0!important}\n"] }]
+        }], propDecorators: { config: [{
                 type: Input
             }], visible: [{
                 type: Input
@@ -4859,6 +4833,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 }]
         }] });
 
+// src/lib/models/pt-dialog-config.model.ts
+
 // Advanced table
 
 class PTGroupComponent {