ng-prime-tools 1.1.26 → 1.1.28

package/fesm2022/ng-prime-tools.mjs

@@ -1611,11 +1611,11 @@ class PTAdvancedPrimeTableComponent {
         this.editingRows.clear();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTAdvancedPrimeTableComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTAdvancedPrimeTableComponent, isStandalone: false, selector: "pt-advanced-prime-table", inputs: { data: "data", columns: "columns", totalRecords: "totalRecords", rowsPerPage: "rowsPerPage", hasSearchFilter: "hasSearchFilter", hasExportExcel: "hasExportExcel", hasExportPDF: "hasExportPDF", hasColumnFilter: "hasColumnFilter", cellPadding: "cellPadding", isPaginated: "isPaginated", isLazy: "isLazy", actions: "actions", isSortable: "isSortable", loading: "loading", maxHeight: "maxHeight", isRowReorderable: "isRowReorderable", showRowMoveArrows: "showRowMoveArrows", rowReorderIdField: "rowReorderIdField", rowOrderStartAt: "rowOrderStartAt", selectionDataKey: "selectionDataKey", selectionMode: "selectionMode", selection: "selection", cellHeight: "cellHeight", hasContextMenu: "hasContextMenu" }, outputs: { selectionChange: "selectionChange", rowSelect: "rowSelect", rowUnselect: "rowUnselect", lazyLoad: "lazyLoad", search: "search", exportExcelEvent: "exportExcelEvent", exportPdfEvent: "exportPdfEvent", onPageChange: "onPageChange", onSortColumn: "onSortColumn", onFilterColumn: "onFilterColumn", rowReorderChange: "rowReorderChange", filteredData: "filteredData" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #tableContainer class=\"pt-advanced-prime-table table-container\">\n  @if (hasContextMenu) {\n    <p-contextMenu\n      #contextMenu\n      [model]=\"contextMenuItems\"\n      appendTo=\"body\"\n      styleClass=\"pt-table-context-menu\"\n      (onHide)=\"onContextMenuHide()\"\n    ></p-contextMenu>\n  }\n  <p-table\n    #dt\n    [value]=\"tableData\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"isLazy\"\n    [filterDelay]=\"0\"\n    [dataKey]=\"selectionDataKey || rowReorderIdField || 'id'\"\n    [rowTrackBy]=\"rowTrackBy\"\n    paginatorDropdownAppendTo=\"body\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    (selectionChange)=\"selectionChange.emit($event)\"\n    (onRowSelect)=\"rowSelect.emit($event.data)\"\n    (onRowUnselect)=\"rowUnselect.emit($event.data)\"\n  >\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        @if (canUseRowReorder()) {\n          <col [style.width]=\"getRowReorderColumnWidth()\" />\n        }\n\n        @for (col of columns; track col) {\n          <col [style.width]=\"col.width || getHeaderWidth(col)\" />\n        }\n      </colgroup>\n    </ng-template>\n\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          @if (hasSearchFilter) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Clear filters\"\n              (click)=\"clear(dt)\"\n            ></button>\n          }\n\n          @if (hasExportExcel) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Export to Excel\"\n              (click)=\"exportExcel()\"\n            ></button>\n          }\n\n          @if (hasExportPDF) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Export to PDF\"\n              (click)=\"exportPdf()\"\n            ></button>\n          }\n        </div>\n\n        @if (hasSearchFilter) {\n          <div class=\"ml-auto\">\n            <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n              <p-inputIcon>\n                <i class=\"pi pi-search\"></i>\n              </p-inputIcon>\n\n              <input\n                pInputText\n                type=\"text\"\n                [(ngModel)]=\"searchValue\"\n                placeholder=\"Search keyword\"\n                (input)=\"filterGlobal($event)\"\n              />\n            </p-iconField>\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        @if (canUseRowReorder()) {\n          <th\n            [style.width]=\"getRowReorderColumnWidth()\"\n            [ngStyle]=\"getStaticCellStyle()\"\n          ></th>\n        }\n\n        @for (col of columns; track col) {\n          @if (!col.children) {\n            <th\n              [pSortableColumn]=\"col.code\"\n              [pSortableColumnDisabled]=\"\n                !isSortable || col.isSortable === false\n              \"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"[\n                getHeaderAlignClass(col),\n                col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n              ]\"\n              colspan=\"1\"\n            >\n              <div class=\"header-container\" [ngStyle]=\"getCellInnerStyle(col)\">\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n\n                @if (\n                  (isSortable && col.isSortable !== false) ||\n                  (hasColumnFilter && col.isFilter !== false)\n                ) {\n                  <div class=\"icons\">\n                    @if (isSortable && col.isSortable !== false) {\n                      <p-sortIcon [field]=\"col.code\" />\n                    }\n\n                    @if (hasColumnFilter && col.isFilter !== false) {\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          type=\"text\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"false\"\n                          [showOperator]=\"false\"\n                          (onClear)=\"onComposedColumnClear(col)\"\n                        >\n                          <ng-template\n                            pTemplate=\"filter\"\n                            let-filter=\"filterCallback\"\n                          >\n                            @for (\n                              composedName of col.composedNames;\n                              track composedName\n                            ) {\n                              @if (\n                                getComposedFieldType(col, composedName) ===\n                                TableTypeEnum.STRING\n                              ) {\n                                <div>\n                                  <p-multiSelect\n                                    [options]=\"filters[composedName]?.options\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [ngModel]=\"\n                                      filters[composedName]?.value ?? []\n                                    \"\n                                    [placeholder]=\"\n                                      filters[composedName]?.placeholder\n                                    \"\n                                    display=\"chip\"\n                                    (ngModelChange)=\"\n                                      onComposedFilterValueChange(\n                                        col,\n                                        composedName,\n                                        $event\n                                      );\n                                      filter($event ?? [])\n                                    \"\n                                  >\n                                    <ng-template let-item pTemplate=\"item\">\n                                      <div class=\"custom-multiselect-item\">\n                                        @if (item.image) {\n                                          <img\n                                            [src]=\"item.image\"\n                                            alt=\"icon\"\n                                            class=\"filter-image\"\n                                          />\n                                        }\n\n                                        <span>{{ item.label }}</span>\n                                      </div>\n                                    </ng-template>\n                                  </p-multiSelect>\n                                </div>\n                              }\n                            }\n                          </ng-template>\n                        </p-columnFilter>\n                      } @else {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          [type]=\"getColumnFilterType(col)\"\n                          [currency]=\"getCurrencySymbol(col)\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [showOperator]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [matchMode]=\"\n                            col.type === TableTypeEnum.MULTISELECT\n                              ? 'in'\n                              : undefined\n                          \"\n                          (onClear)=\"onFilterClear(col.code!)\"\n                        >\n                          @if (\n                            col.type === TableTypeEnum.NUMBER ||\n                            col.type === TableTypeEnum.AMOUNT\n                          ) {\n                            <ng-template pTemplate=\"filter\" let-value>\n                              <input\n                                pInputText\n                                type=\"text\"\n                                inputmode=\"decimal\"\n                                [ngModel]=\"\n                                  latestFilterValues[col.code!] ?? value\n                                \"\n                                placeholder=\"Enter a number\"\n                                (ngModelChange)=\"\n                                  onNumberFilterChange(col.code!, $event)\n                                \"\n                              />\n                            </ng-template>\n                          }\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"col.type === TableTypeEnum.DATE\"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-datepicker\n                              [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                              dateFormat=\"dd/mm/yy\"\n                              placeholder=\"Choose a date\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event)\n                              \"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"\n                              col.type === TableTypeEnum.MULTISELECT &&\n                              col.filterOptions &&\n                              col.filterOptions.length > 0\n                            \"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-multiSelect\n                              [options]=\"col.filterOptions\"\n                              optionLabel=\"label\"\n                              optionValue=\"value\"\n                              [ngModel]=\"\n                                latestFilterValues[col.code!] ?? value ?? []\n                              \"\n                              display=\"chip\"\n                              placeholder=\"Choose option\"\n                              class=\"custom-multiselect\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event ?? [])\n                              \"\n                            ></p-multiSelect>\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </th>\n          } @else {\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          }\n        }\n      </tr>\n\n      @if (hasGroupedColumns) {\n        <tr>\n          @if (canUseRowReorder()) {\n            <th\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            ></th>\n          }\n\n          @for (col of columns; track col) {\n            @if (col.children) {\n              @for (child of col.children; track child) {\n                <th\n                  [pSortableColumn]=\"child.code\"\n                  [pSortableColumnDisabled]=\"\n                    !isSortable || child.isSortable === false\n                  \"\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngStyle]=\"getHeaderCellStyle(child)\"\n                  [ngClass]=\"getHeaderAlignClass(child)\"\n                >\n                  <div\n                    class=\"header-container\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    <span [ngClass]=\"getHeaderTitleClass(child)\">\n                      {{ child.title }}\n                    </span>\n\n                    @if (\n                      (isSortable && child.isSortable !== false) ||\n                      (hasColumnFilter && child.isFilter !== false)\n                    ) {\n                      <div class=\"icons\">\n                        @if (isSortable && child.isSortable !== false) {\n                          <p-sortIcon [field]=\"child.code\" />\n                        }\n\n                        @if (hasColumnFilter && child.isFilter !== false) {\n                          <p-columnFilter\n                            display=\"menu\"\n                            [field]=\"child.code\"\n                            [type]=\"getColumnFilterType(child)\"\n                            [currency]=\"getCurrencySymbol(child)\"\n                            [showApplyButton]=\"true\"\n                            [showClearButton]=\"true\"\n                            [showMatchModes]=\"\n                              child.type !== TableTypeEnum.MULTISELECT\n                            \"\n                            [showOperator]=\"\n                              child.type !== TableTypeEnum.MULTISELECT\n                            \"\n                            [matchMode]=\"\n                              child.type === TableTypeEnum.MULTISELECT\n                                ? 'in'\n                                : undefined\n                            \"\n                            (onClear)=\"onFilterClear(child.code!)\"\n                          ></p-columnFilter>\n                        }\n                      </div>\n                    }\n                  </div>\n                </th>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"p-datatable-emptymessage\">\n        <td\n          class=\"empty-message-cell\"\n          [attr.colspan]=\"columns.length + (canUseRowReorder() ? 1 : 0)\"\n        >\n          <div class=\"empty-message-wrapper\">\n            <div class=\"empty-message\">\n              <i class=\"pi pi-info-circle\"></i>\n              <p>No records available to display.</p>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"body\" let-data let-editing=\"editing\">\n      @if (!loading) {\n        <tr\n          [pEditableRow]=\"isEdit ? data : null\"\n          [pSelectableRow]=\"selectionMode ? data : null\"\n          [attr.data-row-reorder-target]=\"canUseRowReorder() ? 'true' : null\"\n          [class.pt-context-menu-row]=\"hasContextMenu\"\n          (contextmenu)=\"onRowContextMenu($event, data)\"\n        >\n          @if (canUseRowReorder()) {\n            <td\n              class=\"row-reorder-column\"\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [style.text-align]=\"'center'\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            >\n              <div class=\"row-reorder-actions\">\n                <span\n                  class=\"row-drag-handle\"\n                  title=\"D\u00E9placer la ligne\"\n                  (pointerdown)=\"onRowPointerDown($event, data)\"\n                >\n                  <i class=\"pi pi-bars\"></i>\n                </span>\n\n                @if (showRowMoveArrows) {\n                  <div class=\"row-reorder-arrow-buttons\">\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-up\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Monter la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowUp(data)\"\n                      (click)=\"moveRowUp(data); $event.stopPropagation()\"\n                    ></button>\n\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-down\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Descendre la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowDown(data)\"\n                      (click)=\"moveRowDown(data); $event.stopPropagation()\"\n                    ></button>\n                  </div>\n                }\n              </div>\n            </td>\n          }\n\n          @for (col of columns; track col) {\n            @if (!col.children) {\n              @if (isEditable(col.code!) && col.type !== TableTypeEnum.ACTION) {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"getDataAlignClass(col)\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(col)\"\n                    [ngStyle]=\"getCellInnerStyle(col)\"\n                  >\n                    @if (isMultiSelect(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-multiSelect\n                            appendTo=\"body\"\n                            [ngModel]=\"data[col.code!]\"\n                            [style]=\"{ width: '100%' }\"\n                            [options]=\"optionValues\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                          ></p-multiSelect>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          <div class=\"multi-select-container\">\n                            @for (\n                              rec of getMultiSelectValues(data[col.code!]);\n                              track rec\n                            ) {\n                              <p-tag [value]=\"rec\"></p-tag>\n                            }\n                          </div>\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else if (isDatePicker(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-datepicker\n                            [inputId]=\"data[col.code!]\"\n                            [ngModel]=\"data[col.code!]\"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                          ></p-datepicker>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ data[col.code!] | customDate }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\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\n                        <ng-template pTemplate=\"output\">\n                          @if (col.type === TableTypeEnum.AMOUNT) {\n                            {{\n                              data[col.code!]\n                                | customCurrency\n                                  : getCurrencySymbol(col)\n                                  : col.decimalPlaces\n                                  : col.thousandSeparator\n                                  : col.decimalSeparator\n                            }}\n                          } @else {\n                            {{ data[col.code!] }}\n                          }\n                        </ng-template>\n                      </p-cellEditor>\n                    }\n                  </div>\n                </td>\n              } @else {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"[\n                    getDataAlignClass(col),\n                    col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n                  ]\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  @if (col.type === TableTypeEnum.ACTION) {\n                    <div\n                      class=\"action-buttons-container\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (isDelete) {\n                        <button\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-trash\"\n                          class=\"p-button-rounded p-button-text\"\n                          pTooltip=\"Supprimer\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          (click)=\"Delete(data); $event.stopPropagation()\"\n                        ></button>\n                      }\n\n                      @if (isEdit) {\n                        <div>\n                          @if (!editing) {\n                            <button\n                              pInitEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-pencil\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Modifier\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"\n                                startRowEdit(data); $event.stopPropagation()\n                              \"\n                            ></button>\n                          }\n\n                          @if (editing) {\n                            <button\n                              pSaveEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-check\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Enregistrer\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"\n                                saveRowEdit(data); $event.stopPropagation()\n                              \"\n                            ></button>\n\n                            <button\n                              pCancelEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-times\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Annuler\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"\n                                cancelRowEdit(data); $event.stopPropagation()\n                              \"\n                            ></button>\n                          }\n                        </div>\n                      }\n\n                      @for (act of customActions; track act) {\n                        @if (isActionVisible(act, data)) {\n                          <button\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                            [disabled]=\"isActionDisabled(act, data)\"\n                            [pTooltip]=\"act.tooltip || ''\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            (click)=\"\n                              onCustomActionClick(act, data);\n                              $event.stopPropagation()\n                            \"\n                          ></button>\n                        }\n                      }\n                    </div>\n                  } @else {\n                    <div\n                      [ngClass]=\"getCellInnerAlignClass(col)\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <div class=\"composed-cell\">\n                          @for (\n                            composedName of col.composedNames;\n                            track composedName;\n                            let i = $index\n                          ) {\n                            @if (\n                              col.composedTypes?.[i] === TableTypeEnum.IMAGE\n                            ) {\n                              <img\n                                [src]=\"data[col.code!]?.[composedName]\"\n                                alt=\"composed-img\"\n                                class=\"composed-image\"\n                                [ngStyle]=\"\n                                  getMergedComposedImageStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              />\n                            }\n\n                            @if (\n                              col.composedTypes?.[i] === TableTypeEnum.STRING\n                            ) {\n                              <span\n                                class=\"composed-text\"\n                                [ngStyle]=\"\n                                  getMergedComposedTextStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              >\n                                {{ data[col.code!]?.[composedName] }}\n                              </span>\n                            }\n                          }\n                        </div>\n                      } @else if (col.type === TableTypeEnum.PROGRESS) {\n                        <div class=\"progress-cell\">\n                          <p-progressBar\n                            [value]=\"getProgressValue(col, data)\"\n                            [showValue]=\"false\"\n                            [ngClass]=\"\n                              'pt-progress-' + getProgressSeverity(col, data)\n                            \"\n                          ></p-progressBar>\n\n                          @if (isProgressShowValue(col)) {\n                            <span class=\"progress-cell-value\">\n                              {{ getProgressValue(col, data)\n                              }}{{ getProgressUnit(col) }}\n                            </span>\n                          }\n                        </div>\n                      } @else if (col.type === TableTypeEnum.TAG) {\n                        <p-tag\n                          [value]=\"getTagValue(col, data)\"\n                          [severity]=\"$any(getTagSeverity(col, data))\"\n                          [icon]=\"getTagIcon(col, data)\"\n                          [rounded]=\"isTagRounded(col)\"\n                        ></p-tag>\n                      } @else if (col.type === TableTypeEnum.AMOUNT) {\n                        {{\n                          data[col.code!]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      } @else if (col.type === TableTypeEnum.NUMBER) {\n                        {{\n                          formatNumber(\n                            data[col.code!],\n                            col.decimalPlaces,\n                            col.thousandSeparator,\n                            col.decimalSeparator\n                          )\n                        }}\n                      } @else if (col.type === TableTypeEnum.DATE) {\n                        {{\n                          formatDateWithColumn(\n                            parseAnyDate(data[col.code!]),\n                            col\n                          )\n                        }}\n                      } @else if (col.type === TableTypeEnum.DATETIME) {\n                        {{\n                          formatDateTimeWithColumn(\n                            parseAnyDate(data[col.code!]),\n                            col\n                          )\n                        }}\n                      } @else if (\n                        [\n                          TableTypeEnum.STRING,\n                          TableTypeEnum.MULTISELECT,\n                        ].includes(col.type!)\n                      ) {\n                        {{ data[col.code!] }}\n                      }\n                    </div>\n                  }\n                </td>\n              }\n            } @else {\n              @for (child of col.children; track child) {\n                <td\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngClass]=\"getDataAlignClass(child)\"\n                  [ngStyle]=\"getCellStyle(child, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(child)\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    @if (isEditable(child.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"child.code ? data[child.code] : null\"\n                            (change)=\"onChange($event, data.id, child.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ child.code ? data[child.code] : \"\" }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else if (child.type === TableTypeEnum.TAG) {\n                      <p-tag\n                        [value]=\"getTagValue(child, data)\"\n                        [severity]=\"$any(getTagSeverity(child, data))\"\n                        [icon]=\"getTagIcon(child, data)\"\n                        [rounded]=\"isTagRounded(child)\"\n                      ></p-tag>\n                    } @else {\n                      {{ child.code ? data[child.code] : \"\" }}\n                    }\n                  </div>\n                </td>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.pt-advanced-prime-table{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{display:grid;align-items:center;justify-items:start;width:100%;min-width:0;height:5rem}.pt-advanced-prime-table .filter-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .settings{display:flex;align-items:center;gap:1rem;min-width:0}.pt-advanced-prime-table .multi-select-container{display:flex;align-items:center;gap:.3rem;min-width:0}.pt-advanced-prime-table .table-container{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep p-table{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper{display:block;width:100%;min-width:0;max-width:100%;overflow-x:auto!important;overflow-y:visible!important;overscroll-behavior-x:contain;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{width:100%;min-width:var(--pt-advanced-table-min-width, 95rem);max-width:none;table-layout:fixed;border-collapse:separate;border-spacing:0}.pt-advanced-prime-table ::ng-deep .p-datatable-header,.pt-advanced-prime-table ::ng-deep .p-datatable-caption{width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-caption>.flex,.pt-advanced-prime-table ::ng-deep .p-datatable-header>.flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.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{position:relative;display:flex;align-items:center;gap:.25rem;width:100%!important;min-width:0;max-width:100%;margin:0!important;padding:0!important}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{display:block;flex:1 1 auto;width:auto;min-width:0;max-width:100%;padding:0;line-height:1.2;white-space:normal;overflow-wrap:break-word;word-break:normal}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-container>.icons{position:static!important;top:auto!important;right:auto!important;display:inline-flex;align-items:center;justify-content:flex-end;flex:0 0 auto;gap:.15rem;width:auto!important;min-width:1.5rem;max-width:none;margin-left:auto;padding:0;transform:none!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .header-container>.icons p-sorticon,.pt-advanced-prime-table ::ng-deep .header-container>.icons p-columnfilter{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0}.pt-advanced-prime-table ::ng-deep .header-container>p-columnfilter:last-child{position:static!important;top:auto!important;right:auto!important;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0 0 0 auto!important;transform:none!important}.pt-advanced-prime-table ::ng-deep .p-sortable-column-icon,.pt-advanced-prime-table ::ng-deep .p-column-filter-menu-button{flex:0 0 auto;margin:0!important}.pt-advanced-prime-table ::ng-deep .p-column-filter-menu-button{width:1.75rem;height:1.75rem;padding:0}.pt-advanced-prime-table ::ng-deep p-sorticon{width:1.25rem;min-width:1.25rem}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:0}.pt-advanced-prime-table .flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield{position:relative;display:inline-flex;align-items:center;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep p-inputicon,.pt-advanced-prime-table ::ng-deep .p-inputicon,.pt-advanced-prime-table ::ng-deep .p-input-icon{position:absolute;top:50%;left:.85rem;z-index:2;display:inline-flex;align-items:center;justify-content:center;margin:0;transform:translateY(-50%);pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-iconfield .p-inputtext{width:100%;max-width:100%;padding-left:2.5rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{margin-left:1rem;cursor:pointer}.pt-advanced-prime-table .table-row{display:flex;justify-content:center;gap:1rem;min-width:0;text-align:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{color:green;font-size:1.25em}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{color:red;font-size:1.25em}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:180px}.pt-advanced-prime-table .empty-message{color:#888;font-size:1.2rem;text-align:center}.pt-advanced-prime-table .empty-message i{display:block;margin-bottom:.5rem;font-size:2rem}.pt-advanced-prime-table th,.pt-advanced-prime-table td{min-width:0;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-advanced-prime-table ::ng-deep .p-datatable-thead>tr>th,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td{min-width:0;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-advanced-prime-table ::ng-deep .p-datatable-thead>tr>th{vertical-align:middle}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td{vertical-align:top}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right,.pt-advanced-prime-table ::ng-deep .composed-cell,.pt-advanced-prime-table ::ng-deep .composed-text{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right{display:flex;align-items:flex-start;width:100%;min-width:0}.pt-advanced-prime-table .cell-inner-left{justify-content:flex-start;text-align:left}.pt-advanced-prime-table .cell-inner-center{justify-content:center;text-align:center}.pt-advanced-prime-table .cell-inner-right{justify-content:flex-end;text-align:right}.pt-advanced-prime-table ::ng-deep .p-tag{padding:.2rem .55rem;font-size:.72rem;font-weight:800;line-height:1.2;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .p-tag .p-tag-icon{margin-right:.25rem}.pt-advanced-prime-table .progress-cell{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1 1 auto;width:100%;min-width:0;height:.75rem!important;overflow:hidden;border-radius:999px;background:#e5e7eb!important}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar-value{display:block!important;height:100%!important;border-radius:999px}.pt-advanced-prime-table .progress-cell-value{flex:0 0 auto;min-width:38px;color:#334155;font-size:.72rem;font-weight:800;text-align:right}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{align-items:center;justify-content:center;padding:0;overflow:hidden;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .action-buttons-container{display:flex;align-items:center!important;justify-content:center!important;flex-wrap:wrap;gap:.35rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{min-width:22px!important;height:22px!important;padding:.25rem!important}.pt-advanced-prime-table ::ng-deep .pt-progress-success .p-progressbar-value{background:#22c55e!important}.pt-advanced-prime-table ::ng-deep .pt-progress-warning .p-progressbar-value{background:#f59e0b!important}.pt-advanced-prime-table ::ng-deep .pt-progress-danger .p-progressbar-value{background:#ef4444!important}.pt-advanced-prime-table ::ng-deep .pt-progress-info .p-progressbar-value{background:#3b82f6!important}.pt-advanced-prime-table ::ng-deep .composed-cell{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .composed-image{display:block;flex:0 0 auto;object-fit:contain}.pt-advanced-prime-table ::ng-deep .composed-text{flex:1 1 auto;min-width:0}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{transition:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging{cursor:grabbing!important;opacity:.55}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:5;box-shadow:inset 0 0 0 1px #3b82f673}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before:before{position:absolute;z-index:30;top:-2px;right:0;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after:after{position:absolute;z-index:30;right:0;bottom:-2px;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td{border-top:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{border-bottom:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-drag-handle{display:inline-flex;align-items:center;justify-content:center;width:2rem;min-width:2rem;height:2rem;border-radius:6px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.pt-advanced-prime-table ::ng-deep .row-drag-handle:hover{background:#3b82f61a}.pt-advanced-prime-table ::ng-deep .row-drag-handle:active{cursor:grabbing}.pt-advanced-prime-table ::ng-deep .row-drag-handle .pi{color:#64748b;font-size:.95rem}.pt-advanced-prime-table ::ng-deep td.row-reorder-column,.pt-advanced-prime-table ::ng-deep th.row-reorder-column{width:7rem;min-width:7rem;padding:.25rem .4rem!important;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .row-reorder-actions{display:inline-flex;align-items:center;justify-content:center;gap:.15rem;width:100%}.pt-advanced-prime-table ::ng-deep .row-reorder-arrow-buttons{display:inline-flex;flex-direction:column;gap:0}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text{width:1.75rem!important;min-width:1.75rem!important;height:1.75rem!important;padding:0!important;border-radius:6px!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text .p-button-icon{font-size:.75rem}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:not(:disabled):hover{background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:disabled{cursor:not-allowed;opacity:.35}.pt-advanced-prime-table.dragging-active,.pt-advanced-prime-table.dragging-active *{-webkit-user-select:none!important;user-select:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:10}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-after>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar{width:10px;height:10px}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-track,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-track{border-radius:999px;background:var(--pt-advanced-table-scrollbar-track, #f1f5f9)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb{border:2px solid var(--pt-advanced-table-scrollbar-track, #f1f5f9);border-radius:999px;background:var(--pt-advanced-table-scrollbar-thumb, #94a3b8)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb:hover,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb:hover{background:var(--pt-advanced-table-scrollbar-thumb-hover, #64748b)}@media(max-width:768px){.pt-advanced-prime-table .filter-container,.pt-advanced-prime-table .flex{align-items:stretch;flex-direction:column}.pt-advanced-prime-table .settings{flex-wrap:wrap}.pt-advanced-prime-table .ml-auto{width:100%;margin-left:0}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield,.pt-advanced-prime-table ::ng-deep .p-inputtext{width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{min-width:var(--pt-advanced-table-mobile-min-width, 78rem)}}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-context-menu-row{cursor:context-menu}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-context-menu-row:hover>td{background:#3b82f60a}::ng-deep .pt-table-context-menu{min-width:13rem}::ng-deep .pt-table-context-menu .p-contextmenu-item-link{gap:.65rem}::ng-deep .pt-table-context-menu .p-contextmenu-item-icon{width:1.1rem;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i3.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i3.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i3.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i3.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i3.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i3.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i3.ColumnFilter, selector: "p-columnFilter, p-column-filter, 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", "filterOn", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i7.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i8.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i9.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i10.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i11.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i12.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i13.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i14.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }, { kind: "pipe", type: CustomCurrencyPipe, name: "customCurrency" }, { kind: "pipe", type: CustomDatePipe, name: "customDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTAdvancedPrimeTableComponent, isStandalone: false, selector: "pt-advanced-prime-table", inputs: { data: "data", columns: "columns", totalRecords: "totalRecords", rowsPerPage: "rowsPerPage", hasSearchFilter: "hasSearchFilter", hasExportExcel: "hasExportExcel", hasExportPDF: "hasExportPDF", hasColumnFilter: "hasColumnFilter", cellPadding: "cellPadding", isPaginated: "isPaginated", isLazy: "isLazy", actions: "actions", isSortable: "isSortable", loading: "loading", maxHeight: "maxHeight", isRowReorderable: "isRowReorderable", showRowMoveArrows: "showRowMoveArrows", rowReorderIdField: "rowReorderIdField", rowOrderStartAt: "rowOrderStartAt", selectionDataKey: "selectionDataKey", selectionMode: "selectionMode", selection: "selection", cellHeight: "cellHeight", hasContextMenu: "hasContextMenu" }, outputs: { selectionChange: "selectionChange", rowSelect: "rowSelect", rowUnselect: "rowUnselect", lazyLoad: "lazyLoad", search: "search", exportExcelEvent: "exportExcelEvent", exportPdfEvent: "exportPdfEvent", onPageChange: "onPageChange", onSortColumn: "onSortColumn", onFilterColumn: "onFilterColumn", rowReorderChange: "rowReorderChange", filteredData: "filteredData" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #tableContainer class=\"pt-advanced-prime-table table-container\">\n  @if (hasContextMenu) {\n    <p-contextMenu\n      #contextMenu\n      [model]=\"contextMenuItems\"\n      appendTo=\"body\"\n      styleClass=\"pt-table-context-menu\"\n      (onHide)=\"onContextMenuHide()\"\n    ></p-contextMenu>\n  }\n  <p-table\n    #dt\n    [value]=\"tableData\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"isLazy\"\n    [filterDelay]=\"0\"\n    [dataKey]=\"selectionDataKey || rowReorderIdField || 'id'\"\n    [rowTrackBy]=\"rowTrackBy\"\n    paginatorDropdownAppendTo=\"body\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    (selectionChange)=\"selectionChange.emit($event)\"\n    (onRowSelect)=\"rowSelect.emit($event.data)\"\n    (onRowUnselect)=\"rowUnselect.emit($event.data)\"\n  >\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        @if (canUseRowReorder()) {\n          <col [style.width]=\"getRowReorderColumnWidth()\" />\n        }\n\n        @for (col of columns; track col) {\n          <col [style.width]=\"col.width || getHeaderWidth(col)\" />\n        }\n      </colgroup>\n    </ng-template>\n\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          @if (hasSearchFilter) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Clear filters\"\n              (click)=\"clear(dt)\"\n            ></button>\n          }\n\n          @if (hasExportExcel) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Export to Excel\"\n              (click)=\"exportExcel()\"\n            ></button>\n          }\n\n          @if (hasExportPDF) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Export to PDF\"\n              (click)=\"exportPdf()\"\n            ></button>\n          }\n        </div>\n\n        @if (hasSearchFilter) {\n          <div class=\"ml-auto\">\n            <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n              <p-inputIcon>\n                <i class=\"pi pi-search\"></i>\n              </p-inputIcon>\n\n              <input\n                pInputText\n                type=\"text\"\n                [(ngModel)]=\"searchValue\"\n                placeholder=\"Search keyword\"\n                (input)=\"filterGlobal($event)\"\n              />\n            </p-iconField>\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        @if (canUseRowReorder()) {\n          <th\n            [style.width]=\"getRowReorderColumnWidth()\"\n            [ngStyle]=\"getStaticCellStyle()\"\n          ></th>\n        }\n\n        @for (col of columns; track col) {\n          @if (!col.children) {\n            <th\n              [pSortableColumn]=\"col.code\"\n              [pSortableColumnDisabled]=\"\n                !isSortable || col.isSortable === false\n              \"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"[\n                getHeaderAlignClass(col),\n                col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n              ]\"\n              colspan=\"1\"\n            >\n              <div class=\"header-container\" [ngStyle]=\"getCellInnerStyle(col)\">\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n\n                @if (\n                  (isSortable && col.isSortable !== false) ||\n                  (hasColumnFilter && col.isFilter !== false)\n                ) {\n                  <div class=\"icons\">\n                    @if (isSortable && col.isSortable !== false) {\n                      <p-sortIcon [field]=\"col.code\" />\n                    }\n\n                    @if (hasColumnFilter && col.isFilter !== false) {\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          type=\"text\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"false\"\n                          [showOperator]=\"false\"\n                          (onClear)=\"onComposedColumnClear(col)\"\n                        >\n                          <ng-template\n                            pTemplate=\"filter\"\n                            let-filter=\"filterCallback\"\n                          >\n                            @for (\n                              composedName of col.composedNames;\n                              track composedName\n                            ) {\n                              @if (\n                                getComposedFieldType(col, composedName) ===\n                                TableTypeEnum.STRING\n                              ) {\n                                <div>\n                                  <p-multiSelect\n                                    [options]=\"filters[composedName]?.options\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [ngModel]=\"\n                                      filters[composedName]?.value ?? []\n                                    \"\n                                    [placeholder]=\"\n                                      filters[composedName]?.placeholder\n                                    \"\n                                    display=\"chip\"\n                                    (ngModelChange)=\"\n                                      onComposedFilterValueChange(\n                                        col,\n                                        composedName,\n                                        $event\n                                      );\n                                      filter($event ?? [])\n                                    \"\n                                  >\n                                    <ng-template let-item pTemplate=\"item\">\n                                      <div class=\"custom-multiselect-item\">\n                                        @if (item.image) {\n                                          <img\n                                            [src]=\"item.image\"\n                                            alt=\"icon\"\n                                            class=\"filter-image\"\n                                          />\n                                        }\n\n                                        <span>{{ item.label }}</span>\n                                      </div>\n                                    </ng-template>\n                                  </p-multiSelect>\n                                </div>\n                              }\n                            }\n                          </ng-template>\n                        </p-columnFilter>\n                      } @else {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          [type]=\"getColumnFilterType(col)\"\n                          [currency]=\"getCurrencySymbol(col)\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [showOperator]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [matchMode]=\"\n                            col.type === TableTypeEnum.MULTISELECT\n                              ? 'in'\n                              : undefined\n                          \"\n                          (onClear)=\"onFilterClear(col.code!)\"\n                        >\n                          @if (\n                            col.type === TableTypeEnum.NUMBER ||\n                            col.type === TableTypeEnum.AMOUNT\n                          ) {\n                            <ng-template pTemplate=\"filter\" let-value>\n                              <input\n                                pInputText\n                                type=\"text\"\n                                inputmode=\"decimal\"\n                                [ngModel]=\"\n                                  latestFilterValues[col.code!] ?? value\n                                \"\n                                placeholder=\"Enter a number\"\n                                (ngModelChange)=\"\n                                  onNumberFilterChange(col.code!, $event)\n                                \"\n                              />\n                            </ng-template>\n                          }\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"col.type === TableTypeEnum.DATE\"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-datepicker\n                              [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                              dateFormat=\"dd/mm/yy\"\n                              placeholder=\"Choose a date\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event)\n                              \"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"\n                              col.type === TableTypeEnum.MULTISELECT &&\n                              col.filterOptions &&\n                              col.filterOptions.length > 0\n                            \"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-multiSelect\n                              [options]=\"col.filterOptions\"\n                              optionLabel=\"label\"\n                              optionValue=\"value\"\n                              [ngModel]=\"\n                                latestFilterValues[col.code!] ?? value ?? []\n                              \"\n                              display=\"chip\"\n                              placeholder=\"Choose option\"\n                              class=\"custom-multiselect\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event ?? [])\n                              \"\n                            ></p-multiSelect>\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </th>\n          } @else {\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          }\n        }\n      </tr>\n\n      @if (hasGroupedColumns) {\n        <tr>\n          @if (canUseRowReorder()) {\n            <th\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            ></th>\n          }\n\n          @for (col of columns; track col) {\n            @if (col.children) {\n              @for (child of col.children; track child) {\n                <th\n                  [pSortableColumn]=\"child.code\"\n                  [pSortableColumnDisabled]=\"\n                    !isSortable || child.isSortable === false\n                  \"\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngStyle]=\"getHeaderCellStyle(child)\"\n                  [ngClass]=\"getHeaderAlignClass(child)\"\n                >\n                  <div\n                    class=\"header-container\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    <span [ngClass]=\"getHeaderTitleClass(child)\">\n                      {{ child.title }}\n                    </span>\n\n                    @if (\n                      (isSortable && child.isSortable !== false) ||\n                      (hasColumnFilter && child.isFilter !== false)\n                    ) {\n                      <div class=\"icons\">\n                        @if (isSortable && child.isSortable !== false) {\n                          <p-sortIcon [field]=\"child.code\" />\n                        }\n\n                        @if (hasColumnFilter && child.isFilter !== false) {\n                          <p-columnFilter\n                            display=\"menu\"\n                            [field]=\"child.code\"\n                            [type]=\"getColumnFilterType(child)\"\n                            [currency]=\"getCurrencySymbol(child)\"\n                            [showApplyButton]=\"true\"\n                            [showClearButton]=\"true\"\n                            [showMatchModes]=\"\n                              child.type !== TableTypeEnum.MULTISELECT\n                            \"\n                            [showOperator]=\"\n                              child.type !== TableTypeEnum.MULTISELECT\n                            \"\n                            [matchMode]=\"\n                              child.type === TableTypeEnum.MULTISELECT\n                                ? 'in'\n                                : undefined\n                            \"\n                            (onClear)=\"onFilterClear(child.code!)\"\n                          ></p-columnFilter>\n                        }\n                      </div>\n                    }\n                  </div>\n                </th>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"p-datatable-emptymessage\">\n        <td\n          class=\"empty-message-cell\"\n          [attr.colspan]=\"columns.length + (canUseRowReorder() ? 1 : 0)\"\n        >\n          <div class=\"empty-message-wrapper\">\n            <div class=\"empty-message\">\n              <i class=\"pi pi-info-circle\"></i>\n              <p>No records available to display.</p>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"body\" let-data let-editing=\"editing\">\n      @if (!loading) {\n        <tr\n          [pEditableRow]=\"isEdit ? data : null\"\n          [pSelectableRow]=\"selectionMode ? data : null\"\n          [attr.data-row-reorder-target]=\"canUseRowReorder() ? 'true' : null\"\n          [class.pt-context-menu-row]=\"hasContextMenu\"\n          (contextmenu)=\"onRowContextMenu($event, data)\"\n        >\n          @if (canUseRowReorder()) {\n            <td\n              class=\"row-reorder-column\"\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [style.text-align]=\"'center'\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            >\n              <div class=\"row-reorder-actions\">\n                <span\n                  class=\"row-drag-handle\"\n                  title=\"D\u00E9placer la ligne\"\n                  (pointerdown)=\"onRowPointerDown($event, data)\"\n                >\n                  <i class=\"pi pi-bars\"></i>\n                </span>\n\n                @if (showRowMoveArrows) {\n                  <div class=\"row-reorder-arrow-buttons\">\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-up\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Monter la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowUp(data)\"\n                      (click)=\"moveRowUp(data); $event.stopPropagation()\"\n                    ></button>\n\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-down\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Descendre la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowDown(data)\"\n                      (click)=\"moveRowDown(data); $event.stopPropagation()\"\n                    ></button>\n                  </div>\n                }\n              </div>\n            </td>\n          }\n\n          @for (col of columns; track col) {\n            @if (!col.children) {\n              @if (isEditable(col.code!) && col.type !== TableTypeEnum.ACTION) {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"getDataAlignClass(col)\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(col)\"\n                    [ngStyle]=\"getCellInnerStyle(col)\"\n                  >\n                    @if (isMultiSelect(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-multiSelect\n                            appendTo=\"body\"\n                            [ngModel]=\"data[col.code!]\"\n                            [style]=\"{ width: '100%' }\"\n                            [options]=\"optionValues\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                          ></p-multiSelect>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          <div class=\"multi-select-container\">\n                            @for (\n                              rec of getMultiSelectValues(data[col.code!]);\n                              track rec\n                            ) {\n                              <p-tag [value]=\"rec\"></p-tag>\n                            }\n                          </div>\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else if (isDatePicker(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-datepicker\n                            [inputId]=\"data[col.code!]\"\n                            [ngModel]=\"data[col.code!]\"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                          ></p-datepicker>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ data[col.code!] | customDate }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\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\n                        <ng-template pTemplate=\"output\">\n                          @if (col.type === TableTypeEnum.AMOUNT) {\n                            {{ col.prefix ?? \"\" }}\n                            {{\n                              data[col.code!]\n                                | customCurrency\n                                  : getCurrencySymbol(col)\n                                  : col.decimalPlaces\n                                  : col.thousandSeparator\n                                  : col.decimalSeparator\n                            }}\n                            {{\n                              data[col.code!] != null ? (col.suffix ?? \"\") : \"\"\n                            }}\n                          } @else if (col.type === TableTypeEnum.NUMBER) {\n                            {{ col.prefix ?? \"\" }}\n                            {{\n                              formatNumber(\n                                data[col.code!],\n                                col.decimalPlaces,\n                                col.thousandSeparator,\n                                col.decimalSeparator\n                              )\n                            }}\n                            {{\n                              data[col.code!] != null ? (col.suffix ?? \"\") : \"\"\n                            }}\n                          } @else {\n                            {{ col.prefix ?? \"\" }}{{ data[col.code!]\n                            }}{{\n                              data[col.code!] != null ? (col.suffix ?? \"\") : \"\"\n                            }}\n                          }\n                        </ng-template>\n                      </p-cellEditor>\n                    }\n                  </div>\n                </td>\n              } @else {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"[\n                    getDataAlignClass(col),\n                    col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n                  ]\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  @if (col.type === TableTypeEnum.ACTION) {\n                    <div\n                      class=\"action-buttons-container\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (isDelete) {\n                        <button\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-trash\"\n                          class=\"p-button-rounded p-button-text\"\n                          pTooltip=\"Supprimer\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          (click)=\"Delete(data); $event.stopPropagation()\"\n                        ></button>\n                      }\n\n                      @if (isEdit) {\n                        <div>\n                          @if (!editing) {\n                            <button\n                              pInitEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-pencil\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Modifier\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"\n                                startRowEdit(data); $event.stopPropagation()\n                              \"\n                            ></button>\n                          }\n\n                          @if (editing) {\n                            <button\n                              pSaveEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-check\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Enregistrer\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"\n                                saveRowEdit(data); $event.stopPropagation()\n                              \"\n                            ></button>\n\n                            <button\n                              pCancelEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-times\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Annuler\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"\n                                cancelRowEdit(data); $event.stopPropagation()\n                              \"\n                            ></button>\n                          }\n                        </div>\n                      }\n\n                      @for (act of customActions; track act) {\n                        @if (isActionVisible(act, data)) {\n                          <button\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                            [disabled]=\"isActionDisabled(act, data)\"\n                            [pTooltip]=\"act.tooltip || ''\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            (click)=\"\n                              onCustomActionClick(act, data);\n                              $event.stopPropagation()\n                            \"\n                          ></button>\n                        }\n                      }\n                    </div>\n                  } @else {\n                    <div\n                      [ngClass]=\"getCellInnerAlignClass(col)\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <div class=\"composed-cell\">\n                          @for (\n                            composedName of col.composedNames;\n                            track composedName;\n                            let i = $index\n                          ) {\n                            @if (\n                              col.composedTypes?.[i] === TableTypeEnum.IMAGE\n                            ) {\n                              <img\n                                [src]=\"data[col.code!]?.[composedName]\"\n                                alt=\"composed-img\"\n                                class=\"composed-image\"\n                                [ngStyle]=\"\n                                  getMergedComposedImageStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              />\n                            }\n\n                            @if (\n                              col.composedTypes?.[i] === TableTypeEnum.STRING\n                            ) {\n                              <span\n                                class=\"composed-text\"\n                                [ngStyle]=\"\n                                  getMergedComposedTextStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              >\n                                {{ data[col.code!]?.[composedName] }}\n                              </span>\n                            }\n                          }\n                        </div>\n                      } @else if (col.type === TableTypeEnum.PROGRESS) {\n                        <div class=\"progress-cell\">\n                          <p-progressBar\n                            [value]=\"getProgressValue(col, data)\"\n                            [showValue]=\"false\"\n                            [ngClass]=\"\n                              'pt-progress-' + getProgressSeverity(col, data)\n                            \"\n                          ></p-progressBar>\n\n                          @if (isProgressShowValue(col)) {\n                            <span class=\"progress-cell-value\">\n                              {{ getProgressValue(col, data)\n                              }}{{ getProgressUnit(col) }}\n                            </span>\n                          }\n                        </div>\n                      } @else if (col.type === TableTypeEnum.TAG) {\n                        <p-tag\n                          [value]=\"getTagValue(col, data)\"\n                          [severity]=\"$any(getTagSeverity(col, data))\"\n                          [icon]=\"getTagIcon(col, data)\"\n                          [rounded]=\"isTagRounded(col)\"\n                        ></p-tag>\n                      } @else if (col.type === TableTypeEnum.AMOUNT) {\n                        {{ col.prefix ?? \"\" }}\n                        {{\n                          data[col.code!]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                        {{ data[col.code!] != null ? (col.suffix ?? \"\") : \"\" }}\n                      } @else if (col.type === TableTypeEnum.NUMBER) {\n                        {{ col.prefix ?? \"\" }}\n                        {{\n                          formatNumber(\n                            data[col.code!],\n                            col.decimalPlaces,\n                            col.thousandSeparator,\n                            col.decimalSeparator\n                          )\n                        }}\n                        {{ data[col.code!] != null ? (col.suffix ?? \"\") : \"\" }}\n                      } @else if (col.type === TableTypeEnum.DATE) {\n                        {{\n                          formatDateWithColumn(\n                            parseAnyDate(data[col.code!]),\n                            col\n                          )\n                        }}\n                      } @else if (col.type === TableTypeEnum.DATETIME) {\n                        {{\n                          formatDateTimeWithColumn(\n                            parseAnyDate(data[col.code!]),\n                            col\n                          )\n                        }}\n                      } @else if (\n                        [\n                          TableTypeEnum.STRING,\n                          TableTypeEnum.MULTISELECT,\n                        ].includes(col.type!)\n                      ) {\n                        {{ col.prefix ?? \"\" }}{{ data[col.code!]\n                        }}{{\n                          data[col.code!] != null ? (col.suffix ?? \"\") : \"\"\n                        }}\n                      }\n                    </div>\n                  }\n                </td>\n              }\n            } @else {\n              @for (child of col.children; track child) {\n                <td\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngClass]=\"getDataAlignClass(child)\"\n                  [ngStyle]=\"getCellStyle(child, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(child)\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    @if (isEditable(child.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"child.code ? data[child.code] : null\"\n                            (change)=\"onChange($event, data.id, child.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          @if (child.type === TableTypeEnum.AMOUNT) {\n                            {{ child.prefix ?? \"\" }}\n                            {{\n                              (child.code ? data[child.code] : null)\n                                | customCurrency\n                                  : getCurrencySymbol(child)\n                                  : child.decimalPlaces\n                                  : child.thousandSeparator\n                                  : child.decimalSeparator\n                            }}\n                            {{\n                              child.code && data[child.code] != null\n                                ? (child.suffix ?? \"\")\n                                : \"\"\n                            }}\n                          } @else if (child.type === TableTypeEnum.NUMBER) {\n                            {{ child.prefix ?? \"\" }}\n                            {{\n                              formatNumber(\n                                child.code ? data[child.code] : null,\n                                child.decimalPlaces,\n                                child.thousandSeparator,\n                                child.decimalSeparator\n                              )\n                            }}\n                            {{\n                              child.code && data[child.code] != null\n                                ? (child.suffix ?? \"\")\n                                : \"\"\n                            }}\n                          } @else {\n                            {{ child.prefix ?? \"\"\n                            }}{{ child.code ? data[child.code] : \"\"\n                            }}{{\n                              child.code && data[child.code] != null\n                                ? (child.suffix ?? \"\")\n                                : \"\"\n                            }}\n                          }\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else if (child.type === TableTypeEnum.TAG) {\n                      <p-tag\n                        [value]=\"getTagValue(child, data)\"\n                        [severity]=\"$any(getTagSeverity(child, data))\"\n                        [icon]=\"getTagIcon(child, data)\"\n                        [rounded]=\"isTagRounded(child)\"\n                      ></p-tag>\n                    } @else {\n                      @if (child.type === TableTypeEnum.AMOUNT) {\n                        {{ child.prefix ?? \"\" }}\n                        {{\n                          (child.code ? data[child.code] : null)\n                            | customCurrency\n                              : getCurrencySymbol(child)\n                              : child.decimalPlaces\n                              : child.thousandSeparator\n                              : child.decimalSeparator\n                        }}\n                        {{\n                          child.code && data[child.code] != null\n                            ? (child.suffix ?? \"\")\n                            : \"\"\n                        }}\n                      } @else if (child.type === TableTypeEnum.NUMBER) {\n                        {{ child.prefix ?? \"\" }}\n                        {{\n                          formatNumber(\n                            child.code ? data[child.code] : null,\n                            child.decimalPlaces,\n                            child.thousandSeparator,\n                            child.decimalSeparator\n                          )\n                        }}\n                        {{\n                          child.code && data[child.code] != null\n                            ? (child.suffix ?? \"\")\n                            : \"\"\n                        }}\n                      } @else {\n                        {{ child.prefix ?? \"\"\n                        }}{{ child.code ? data[child.code] : \"\"\n                        }}{{\n                          child.code && data[child.code] != null\n                            ? (child.suffix ?? \"\")\n                            : \"\"\n                        }}\n                      }\n                    }\n                  </div>\n                </td>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.pt-advanced-prime-table{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{display:grid;align-items:center;justify-items:start;width:100%;min-width:0;height:5rem}.pt-advanced-prime-table .filter-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .settings{display:flex;align-items:center;gap:1rem;min-width:0}.pt-advanced-prime-table .multi-select-container{display:flex;align-items:center;gap:.3rem;min-width:0}.pt-advanced-prime-table .table-container{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep p-table{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper{display:block;width:100%;min-width:0;max-width:100%;overflow-x:auto!important;overflow-y:visible!important;overscroll-behavior-x:contain;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{width:100%;min-width:var(--pt-advanced-table-min-width, 95rem);max-width:none;table-layout:fixed;border-collapse:separate;border-spacing:0}.pt-advanced-prime-table ::ng-deep .p-datatable-header,.pt-advanced-prime-table ::ng-deep .p-datatable-caption{width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-caption>.flex,.pt-advanced-prime-table ::ng-deep .p-datatable-header>.flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.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{position:relative;display:flex;align-items:center;gap:.25rem;width:100%!important;min-width:0;max-width:100%;margin:0!important;padding:0!important}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{display:block;flex:1 1 auto;width:auto;min-width:0;max-width:100%;padding:0;line-height:1.2;white-space:normal;overflow-wrap:break-word;word-break:normal}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-container>.icons{position:static!important;top:auto!important;right:auto!important;display:inline-flex;align-items:center;justify-content:flex-end;flex:0 0 auto;gap:.15rem;width:auto!important;min-width:1.5rem;max-width:none;margin-left:auto;padding:0;transform:none!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .header-container>.icons p-sorticon,.pt-advanced-prime-table ::ng-deep .header-container>.icons p-columnfilter{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0}.pt-advanced-prime-table ::ng-deep .header-container>p-columnfilter:last-child{position:static!important;top:auto!important;right:auto!important;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0 0 0 auto!important;transform:none!important}.pt-advanced-prime-table ::ng-deep .p-sortable-column-icon,.pt-advanced-prime-table ::ng-deep .p-column-filter-menu-button{flex:0 0 auto;margin:0!important}.pt-advanced-prime-table ::ng-deep .p-column-filter-menu-button{width:1.75rem;height:1.75rem;padding:0}.pt-advanced-prime-table ::ng-deep p-sorticon{width:1.25rem;min-width:1.25rem}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:0}.pt-advanced-prime-table .flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield{position:relative;display:inline-flex;align-items:center;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep p-inputicon,.pt-advanced-prime-table ::ng-deep .p-inputicon,.pt-advanced-prime-table ::ng-deep .p-input-icon{position:absolute;top:50%;left:.85rem;z-index:2;display:inline-flex;align-items:center;justify-content:center;margin:0;transform:translateY(-50%);pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-iconfield .p-inputtext{width:100%;max-width:100%;padding-left:2.5rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{margin-left:1rem;cursor:pointer}.pt-advanced-prime-table .table-row{display:flex;justify-content:center;gap:1rem;min-width:0;text-align:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{color:green;font-size:1.25em}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{color:red;font-size:1.25em}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:180px}.pt-advanced-prime-table .empty-message{color:#888;font-size:1.2rem;text-align:center}.pt-advanced-prime-table .empty-message i{display:block;margin-bottom:.5rem;font-size:2rem}.pt-advanced-prime-table th,.pt-advanced-prime-table td{min-width:0;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-advanced-prime-table ::ng-deep .p-datatable-thead>tr>th,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td{min-width:0;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-advanced-prime-table ::ng-deep .p-datatable-thead>tr>th{vertical-align:middle}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td{vertical-align:top}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right,.pt-advanced-prime-table ::ng-deep .composed-cell,.pt-advanced-prime-table ::ng-deep .composed-text{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right{display:flex;align-items:flex-start;width:100%;min-width:0}.pt-advanced-prime-table .cell-inner-left{justify-content:flex-start;text-align:left}.pt-advanced-prime-table .cell-inner-center{justify-content:center;text-align:center}.pt-advanced-prime-table .cell-inner-right{justify-content:flex-end;text-align:right}.pt-advanced-prime-table ::ng-deep .p-tag{padding:.2rem .55rem;font-size:.72rem;font-weight:800;line-height:1.2;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .p-tag .p-tag-icon{margin-right:.25rem}.pt-advanced-prime-table .progress-cell{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1 1 auto;width:100%;min-width:0;height:.75rem!important;overflow:hidden;border-radius:999px;background:#e5e7eb!important}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar-value{display:block!important;height:100%!important;border-radius:999px}.pt-advanced-prime-table .progress-cell-value{flex:0 0 auto;min-width:38px;color:#334155;font-size:.72rem;font-weight:800;text-align:right}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{align-items:center;justify-content:center;padding:0;overflow:hidden;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .action-buttons-container{display:flex;align-items:center!important;justify-content:center!important;flex-wrap:wrap;gap:.35rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{min-width:22px!important;height:22px!important;padding:.25rem!important}.pt-advanced-prime-table ::ng-deep .pt-progress-success .p-progressbar-value{background:#22c55e!important}.pt-advanced-prime-table ::ng-deep .pt-progress-warning .p-progressbar-value{background:#f59e0b!important}.pt-advanced-prime-table ::ng-deep .pt-progress-danger .p-progressbar-value{background:#ef4444!important}.pt-advanced-prime-table ::ng-deep .pt-progress-info .p-progressbar-value{background:#3b82f6!important}.pt-advanced-prime-table ::ng-deep .composed-cell{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .composed-image{display:block;flex:0 0 auto;object-fit:contain}.pt-advanced-prime-table ::ng-deep .composed-text{flex:1 1 auto;min-width:0}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{transition:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging{cursor:grabbing!important;opacity:.55}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:5;box-shadow:inset 0 0 0 1px #3b82f673}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before:before{position:absolute;z-index:30;top:-2px;right:0;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after:after{position:absolute;z-index:30;right:0;bottom:-2px;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td{border-top:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{border-bottom:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-drag-handle{display:inline-flex;align-items:center;justify-content:center;width:2rem;min-width:2rem;height:2rem;border-radius:6px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.pt-advanced-prime-table ::ng-deep .row-drag-handle:hover{background:#3b82f61a}.pt-advanced-prime-table ::ng-deep .row-drag-handle:active{cursor:grabbing}.pt-advanced-prime-table ::ng-deep .row-drag-handle .pi{color:#64748b;font-size:.95rem}.pt-advanced-prime-table ::ng-deep td.row-reorder-column,.pt-advanced-prime-table ::ng-deep th.row-reorder-column{width:7rem;min-width:7rem;padding:.25rem .4rem!important;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .row-reorder-actions{display:inline-flex;align-items:center;justify-content:center;gap:.15rem;width:100%}.pt-advanced-prime-table ::ng-deep .row-reorder-arrow-buttons{display:inline-flex;flex-direction:column;gap:0}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text{width:1.75rem!important;min-width:1.75rem!important;height:1.75rem!important;padding:0!important;border-radius:6px!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text .p-button-icon{font-size:.75rem}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:not(:disabled):hover{background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:disabled{cursor:not-allowed;opacity:.35}.pt-advanced-prime-table.dragging-active,.pt-advanced-prime-table.dragging-active *{-webkit-user-select:none!important;user-select:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:10}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-after>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar{width:10px;height:10px}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-track,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-track{border-radius:999px;background:var(--pt-advanced-table-scrollbar-track, #f1f5f9)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb{border:2px solid var(--pt-advanced-table-scrollbar-track, #f1f5f9);border-radius:999px;background:var(--pt-advanced-table-scrollbar-thumb, #94a3b8)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb:hover,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb:hover{background:var(--pt-advanced-table-scrollbar-thumb-hover, #64748b)}@media(max-width:768px){.pt-advanced-prime-table .filter-container,.pt-advanced-prime-table .flex{align-items:stretch;flex-direction:column}.pt-advanced-prime-table .settings{flex-wrap:wrap}.pt-advanced-prime-table .ml-auto{width:100%;margin-left:0}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield,.pt-advanced-prime-table ::ng-deep .p-inputtext{width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{min-width:var(--pt-advanced-table-mobile-min-width, 78rem)}}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-context-menu-row{cursor:context-menu}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-context-menu-row:hover>td{background:#3b82f60a}::ng-deep .pt-table-context-menu{min-width:13rem}::ng-deep .pt-table-context-menu .p-contextmenu-item-link{gap:.65rem}::ng-deep .pt-table-context-menu .p-contextmenu-item-icon{width:1.1rem;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "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", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], 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: i3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i3.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i3.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i3.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i3.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i3.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i3.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i3.ColumnFilter, selector: "p-columnFilter, p-column-filter, 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", "filterOn", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i7.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i8.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i9.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i10.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i11.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i12.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i13.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i14.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }, { kind: "pipe", type: CustomCurrencyPipe, name: "customCurrency" }, { kind: "pipe", type: CustomDatePipe, name: "customDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTAdvancedPrimeTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-advanced-prime-table', standalone: false, template: "<div #tableContainer class=\"pt-advanced-prime-table table-container\">\n  @if (hasContextMenu) {\n    <p-contextMenu\n      #contextMenu\n      [model]=\"contextMenuItems\"\n      appendTo=\"body\"\n      styleClass=\"pt-table-context-menu\"\n      (onHide)=\"onContextMenuHide()\"\n    ></p-contextMenu>\n  }\n  <p-table\n    #dt\n    [value]=\"tableData\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"isLazy\"\n    [filterDelay]=\"0\"\n    [dataKey]=\"selectionDataKey || rowReorderIdField || 'id'\"\n    [rowTrackBy]=\"rowTrackBy\"\n    paginatorDropdownAppendTo=\"body\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    (selectionChange)=\"selectionChange.emit($event)\"\n    (onRowSelect)=\"rowSelect.emit($event.data)\"\n    (onRowUnselect)=\"rowUnselect.emit($event.data)\"\n  >\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        @if (canUseRowReorder()) {\n          <col [style.width]=\"getRowReorderColumnWidth()\" />\n        }\n\n        @for (col of columns; track col) {\n          <col [style.width]=\"col.width || getHeaderWidth(col)\" />\n        }\n      </colgroup>\n    </ng-template>\n\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          @if (hasSearchFilter) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Clear filters\"\n              (click)=\"clear(dt)\"\n            ></button>\n          }\n\n          @if (hasExportExcel) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Export to Excel\"\n              (click)=\"exportExcel()\"\n            ></button>\n          }\n\n          @if (hasExportPDF) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Export to PDF\"\n              (click)=\"exportPdf()\"\n            ></button>\n          }\n        </div>\n\n        @if (hasSearchFilter) {\n          <div class=\"ml-auto\">\n            <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n              <p-inputIcon>\n                <i class=\"pi pi-search\"></i>\n              </p-inputIcon>\n\n              <input\n                pInputText\n                type=\"text\"\n                [(ngModel)]=\"searchValue\"\n                placeholder=\"Search keyword\"\n                (input)=\"filterGlobal($event)\"\n              />\n            </p-iconField>\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        @if (canUseRowReorder()) {\n          <th\n            [style.width]=\"getRowReorderColumnWidth()\"\n            [ngStyle]=\"getStaticCellStyle()\"\n          ></th>\n        }\n\n        @for (col of columns; track col) {\n          @if (!col.children) {\n            <th\n              [pSortableColumn]=\"col.code\"\n              [pSortableColumnDisabled]=\"\n                !isSortable || col.isSortable === false\n              \"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"[\n                getHeaderAlignClass(col),\n                col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n              ]\"\n              colspan=\"1\"\n            >\n              <div class=\"header-container\" [ngStyle]=\"getCellInnerStyle(col)\">\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n\n                @if (\n                  (isSortable && col.isSortable !== false) ||\n                  (hasColumnFilter && col.isFilter !== false)\n                ) {\n                  <div class=\"icons\">\n                    @if (isSortable && col.isSortable !== false) {\n                      <p-sortIcon [field]=\"col.code\" />\n                    }\n\n                    @if (hasColumnFilter && col.isFilter !== false) {\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          type=\"text\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"false\"\n                          [showOperator]=\"false\"\n                          (onClear)=\"onComposedColumnClear(col)\"\n                        >\n                          <ng-template\n                            pTemplate=\"filter\"\n                            let-filter=\"filterCallback\"\n                          >\n                            @for (\n                              composedName of col.composedNames;\n                              track composedName\n                            ) {\n                              @if (\n                                getComposedFieldType(col, composedName) ===\n                                TableTypeEnum.STRING\n                              ) {\n                                <div>\n                                  <p-multiSelect\n                                    [options]=\"filters[composedName]?.options\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [ngModel]=\"\n                                      filters[composedName]?.value ?? []\n                                    \"\n                                    [placeholder]=\"\n                                      filters[composedName]?.placeholder\n                                    \"\n                                    display=\"chip\"\n                                    (ngModelChange)=\"\n                                      onComposedFilterValueChange(\n                                        col,\n                                        composedName,\n                                        $event\n                                      );\n                                      filter($event ?? [])\n                                    \"\n                                  >\n                                    <ng-template let-item pTemplate=\"item\">\n                                      <div class=\"custom-multiselect-item\">\n                                        @if (item.image) {\n                                          <img\n                                            [src]=\"item.image\"\n                                            alt=\"icon\"\n                                            class=\"filter-image\"\n                                          />\n                                        }\n\n                                        <span>{{ item.label }}</span>\n                                      </div>\n                                    </ng-template>\n                                  </p-multiSelect>\n                                </div>\n                              }\n                            }\n                          </ng-template>\n                        </p-columnFilter>\n                      } @else {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          [type]=\"getColumnFilterType(col)\"\n                          [currency]=\"getCurrencySymbol(col)\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [showOperator]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [matchMode]=\"\n                            col.type === TableTypeEnum.MULTISELECT\n                              ? 'in'\n                              : undefined\n                          \"\n                          (onClear)=\"onFilterClear(col.code!)\"\n                        >\n                          @if (\n                            col.type === TableTypeEnum.NUMBER ||\n                            col.type === TableTypeEnum.AMOUNT\n                          ) {\n                            <ng-template pTemplate=\"filter\" let-value>\n                              <input\n                                pInputText\n                                type=\"text\"\n                                inputmode=\"decimal\"\n                                [ngModel]=\"\n                                  latestFilterValues[col.code!] ?? value\n                                \"\n                                placeholder=\"Enter a number\"\n                                (ngModelChange)=\"\n                                  onNumberFilterChange(col.code!, $event)\n                                \"\n                              />\n                            </ng-template>\n                          }\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"col.type === TableTypeEnum.DATE\"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-datepicker\n                              [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                              dateFormat=\"dd/mm/yy\"\n                              placeholder=\"Choose a date\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event)\n                              \"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"\n                              col.type === TableTypeEnum.MULTISELECT &&\n                              col.filterOptions &&\n                              col.filterOptions.length > 0\n                            \"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-multiSelect\n                              [options]=\"col.filterOptions\"\n                              optionLabel=\"label\"\n                              optionValue=\"value\"\n                              [ngModel]=\"\n                                latestFilterValues[col.code!] ?? value ?? []\n                              \"\n                              display=\"chip\"\n                              placeholder=\"Choose option\"\n                              class=\"custom-multiselect\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event ?? [])\n                              \"\n                            ></p-multiSelect>\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </th>\n          } @else {\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          }\n        }\n      </tr>\n\n      @if (hasGroupedColumns) {\n        <tr>\n          @if (canUseRowReorder()) {\n            <th\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            ></th>\n          }\n\n          @for (col of columns; track col) {\n            @if (col.children) {\n              @for (child of col.children; track child) {\n                <th\n                  [pSortableColumn]=\"child.code\"\n                  [pSortableColumnDisabled]=\"\n                    !isSortable || child.isSortable === false\n                  \"\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngStyle]=\"getHeaderCellStyle(child)\"\n                  [ngClass]=\"getHeaderAlignClass(child)\"\n                >\n                  <div\n                    class=\"header-container\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    <span [ngClass]=\"getHeaderTitleClass(child)\">\n                      {{ child.title }}\n                    </span>\n\n                    @if (\n                      (isSortable && child.isSortable !== false) ||\n                      (hasColumnFilter && child.isFilter !== false)\n                    ) {\n                      <div class=\"icons\">\n                        @if (isSortable && child.isSortable !== false) {\n                          <p-sortIcon [field]=\"child.code\" />\n                        }\n\n                        @if (hasColumnFilter && child.isFilter !== false) {\n                          <p-columnFilter\n                            display=\"menu\"\n                            [field]=\"child.code\"\n                            [type]=\"getColumnFilterType(child)\"\n                            [currency]=\"getCurrencySymbol(child)\"\n                            [showApplyButton]=\"true\"\n                            [showClearButton]=\"true\"\n                            [showMatchModes]=\"\n                              child.type !== TableTypeEnum.MULTISELECT\n                            \"\n                            [showOperator]=\"\n                              child.type !== TableTypeEnum.MULTISELECT\n                            \"\n                            [matchMode]=\"\n                              child.type === TableTypeEnum.MULTISELECT\n                                ? 'in'\n                                : undefined\n                            \"\n                            (onClear)=\"onFilterClear(child.code!)\"\n                          ></p-columnFilter>\n                        }\n                      </div>\n                    }\n                  </div>\n                </th>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"p-datatable-emptymessage\">\n        <td\n          class=\"empty-message-cell\"\n          [attr.colspan]=\"columns.length + (canUseRowReorder() ? 1 : 0)\"\n        >\n          <div class=\"empty-message-wrapper\">\n            <div class=\"empty-message\">\n              <i class=\"pi pi-info-circle\"></i>\n              <p>No records available to display.</p>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"body\" let-data let-editing=\"editing\">\n      @if (!loading) {\n        <tr\n          [pEditableRow]=\"isEdit ? data : null\"\n          [pSelectableRow]=\"selectionMode ? data : null\"\n          [attr.data-row-reorder-target]=\"canUseRowReorder() ? 'true' : null\"\n          [class.pt-context-menu-row]=\"hasContextMenu\"\n          (contextmenu)=\"onRowContextMenu($event, data)\"\n        >\n          @if (canUseRowReorder()) {\n            <td\n              class=\"row-reorder-column\"\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [style.text-align]=\"'center'\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            >\n              <div class=\"row-reorder-actions\">\n                <span\n                  class=\"row-drag-handle\"\n                  title=\"D\u00E9placer la ligne\"\n                  (pointerdown)=\"onRowPointerDown($event, data)\"\n                >\n                  <i class=\"pi pi-bars\"></i>\n                </span>\n\n                @if (showRowMoveArrows) {\n                  <div class=\"row-reorder-arrow-buttons\">\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-up\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Monter la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowUp(data)\"\n                      (click)=\"moveRowUp(data); $event.stopPropagation()\"\n                    ></button>\n\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-down\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Descendre la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowDown(data)\"\n                      (click)=\"moveRowDown(data); $event.stopPropagation()\"\n                    ></button>\n                  </div>\n                }\n              </div>\n            </td>\n          }\n\n          @for (col of columns; track col) {\n            @if (!col.children) {\n              @if (isEditable(col.code!) && col.type !== TableTypeEnum.ACTION) {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"getDataAlignClass(col)\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(col)\"\n                    [ngStyle]=\"getCellInnerStyle(col)\"\n                  >\n                    @if (isMultiSelect(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-multiSelect\n                            appendTo=\"body\"\n                            [ngModel]=\"data[col.code!]\"\n                            [style]=\"{ width: '100%' }\"\n                            [options]=\"optionValues\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                          ></p-multiSelect>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          <div class=\"multi-select-container\">\n                            @for (\n                              rec of getMultiSelectValues(data[col.code!]);\n                              track rec\n                            ) {\n                              <p-tag [value]=\"rec\"></p-tag>\n                            }\n                          </div>\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else if (isDatePicker(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-datepicker\n                            [inputId]=\"data[col.code!]\"\n                            [ngModel]=\"data[col.code!]\"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                          ></p-datepicker>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ data[col.code!] | customDate }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\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\n                        <ng-template pTemplate=\"output\">\n                          @if (col.type === TableTypeEnum.AMOUNT) {\n                            {{\n                              data[col.code!]\n                                | customCurrency\n                                  : getCurrencySymbol(col)\n                                  : col.decimalPlaces\n                                  : col.thousandSeparator\n                                  : col.decimalSeparator\n                            }}\n                          } @else {\n                            {{ data[col.code!] }}\n                          }\n                        </ng-template>\n                      </p-cellEditor>\n                    }\n                  </div>\n                </td>\n              } @else {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"[\n                    getDataAlignClass(col),\n                    col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n                  ]\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  @if (col.type === TableTypeEnum.ACTION) {\n                    <div\n                      class=\"action-buttons-container\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (isDelete) {\n                        <button\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-trash\"\n                          class=\"p-button-rounded p-button-text\"\n                          pTooltip=\"Supprimer\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          (click)=\"Delete(data); $event.stopPropagation()\"\n                        ></button>\n                      }\n\n                      @if (isEdit) {\n                        <div>\n                          @if (!editing) {\n                            <button\n                              pInitEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-pencil\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Modifier\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"\n                                startRowEdit(data); $event.stopPropagation()\n                              \"\n                            ></button>\n                          }\n\n                          @if (editing) {\n                            <button\n                              pSaveEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-check\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Enregistrer\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"\n                                saveRowEdit(data); $event.stopPropagation()\n                              \"\n                            ></button>\n\n                            <button\n                              pCancelEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-times\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Annuler\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"\n                                cancelRowEdit(data); $event.stopPropagation()\n                              \"\n                            ></button>\n                          }\n                        </div>\n                      }\n\n                      @for (act of customActions; track act) {\n                        @if (isActionVisible(act, data)) {\n                          <button\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                            [disabled]=\"isActionDisabled(act, data)\"\n                            [pTooltip]=\"act.tooltip || ''\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            (click)=\"\n                              onCustomActionClick(act, data);\n                              $event.stopPropagation()\n                            \"\n                          ></button>\n                        }\n                      }\n                    </div>\n                  } @else {\n                    <div\n                      [ngClass]=\"getCellInnerAlignClass(col)\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <div class=\"composed-cell\">\n                          @for (\n                            composedName of col.composedNames;\n                            track composedName;\n                            let i = $index\n                          ) {\n                            @if (\n                              col.composedTypes?.[i] === TableTypeEnum.IMAGE\n                            ) {\n                              <img\n                                [src]=\"data[col.code!]?.[composedName]\"\n                                alt=\"composed-img\"\n                                class=\"composed-image\"\n                                [ngStyle]=\"\n                                  getMergedComposedImageStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              />\n                            }\n\n                            @if (\n                              col.composedTypes?.[i] === TableTypeEnum.STRING\n                            ) {\n                              <span\n                                class=\"composed-text\"\n                                [ngStyle]=\"\n                                  getMergedComposedTextStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              >\n                                {{ data[col.code!]?.[composedName] }}\n                              </span>\n                            }\n                          }\n                        </div>\n                      } @else if (col.type === TableTypeEnum.PROGRESS) {\n                        <div class=\"progress-cell\">\n                          <p-progressBar\n                            [value]=\"getProgressValue(col, data)\"\n                            [showValue]=\"false\"\n                            [ngClass]=\"\n                              'pt-progress-' + getProgressSeverity(col, data)\n                            \"\n                          ></p-progressBar>\n\n                          @if (isProgressShowValue(col)) {\n                            <span class=\"progress-cell-value\">\n                              {{ getProgressValue(col, data)\n                              }}{{ getProgressUnit(col) }}\n                            </span>\n                          }\n                        </div>\n                      } @else if (col.type === TableTypeEnum.TAG) {\n                        <p-tag\n                          [value]=\"getTagValue(col, data)\"\n                          [severity]=\"$any(getTagSeverity(col, data))\"\n                          [icon]=\"getTagIcon(col, data)\"\n                          [rounded]=\"isTagRounded(col)\"\n                        ></p-tag>\n                      } @else if (col.type === TableTypeEnum.AMOUNT) {\n                        {{\n                          data[col.code!]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      } @else if (col.type === TableTypeEnum.NUMBER) {\n                        {{\n                          formatNumber(\n                            data[col.code!],\n                            col.decimalPlaces,\n                            col.thousandSeparator,\n                            col.decimalSeparator\n                          )\n                        }}\n                      } @else if (col.type === TableTypeEnum.DATE) {\n                        {{\n                          formatDateWithColumn(\n                            parseAnyDate(data[col.code!]),\n                            col\n                          )\n                        }}\n                      } @else if (col.type === TableTypeEnum.DATETIME) {\n                        {{\n                          formatDateTimeWithColumn(\n                            parseAnyDate(data[col.code!]),\n                            col\n                          )\n                        }}\n                      } @else if (\n                        [\n                          TableTypeEnum.STRING,\n                          TableTypeEnum.MULTISELECT,\n                        ].includes(col.type!)\n                      ) {\n                        {{ data[col.code!] }}\n                      }\n                    </div>\n                  }\n                </td>\n              }\n            } @else {\n              @for (child of col.children; track child) {\n                <td\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngClass]=\"getDataAlignClass(child)\"\n                  [ngStyle]=\"getCellStyle(child, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(child)\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    @if (isEditable(child.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"child.code ? data[child.code] : null\"\n                            (change)=\"onChange($event, data.id, child.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ child.code ? data[child.code] : \"\" }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else if (child.type === TableTypeEnum.TAG) {\n                      <p-tag\n                        [value]=\"getTagValue(child, data)\"\n                        [severity]=\"$any(getTagSeverity(child, data))\"\n                        [icon]=\"getTagIcon(child, data)\"\n                        [rounded]=\"isTagRounded(child)\"\n                      ></p-tag>\n                    } @else {\n                      {{ child.code ? data[child.code] : \"\" }}\n                    }\n                  </div>\n                </td>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.pt-advanced-prime-table{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{display:grid;align-items:center;justify-items:start;width:100%;min-width:0;height:5rem}.pt-advanced-prime-table .filter-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .settings{display:flex;align-items:center;gap:1rem;min-width:0}.pt-advanced-prime-table .multi-select-container{display:flex;align-items:center;gap:.3rem;min-width:0}.pt-advanced-prime-table .table-container{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep p-table{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper{display:block;width:100%;min-width:0;max-width:100%;overflow-x:auto!important;overflow-y:visible!important;overscroll-behavior-x:contain;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{width:100%;min-width:var(--pt-advanced-table-min-width, 95rem);max-width:none;table-layout:fixed;border-collapse:separate;border-spacing:0}.pt-advanced-prime-table ::ng-deep .p-datatable-header,.pt-advanced-prime-table ::ng-deep .p-datatable-caption{width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-caption>.flex,.pt-advanced-prime-table ::ng-deep .p-datatable-header>.flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.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{position:relative;display:flex;align-items:center;gap:.25rem;width:100%!important;min-width:0;max-width:100%;margin:0!important;padding:0!important}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{display:block;flex:1 1 auto;width:auto;min-width:0;max-width:100%;padding:0;line-height:1.2;white-space:normal;overflow-wrap:break-word;word-break:normal}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-container>.icons{position:static!important;top:auto!important;right:auto!important;display:inline-flex;align-items:center;justify-content:flex-end;flex:0 0 auto;gap:.15rem;width:auto!important;min-width:1.5rem;max-width:none;margin-left:auto;padding:0;transform:none!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .header-container>.icons p-sorticon,.pt-advanced-prime-table ::ng-deep .header-container>.icons p-columnfilter{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0}.pt-advanced-prime-table ::ng-deep .header-container>p-columnfilter:last-child{position:static!important;top:auto!important;right:auto!important;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0 0 0 auto!important;transform:none!important}.pt-advanced-prime-table ::ng-deep .p-sortable-column-icon,.pt-advanced-prime-table ::ng-deep .p-column-filter-menu-button{flex:0 0 auto;margin:0!important}.pt-advanced-prime-table ::ng-deep .p-column-filter-menu-button{width:1.75rem;height:1.75rem;padding:0}.pt-advanced-prime-table ::ng-deep p-sorticon{width:1.25rem;min-width:1.25rem}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:0}.pt-advanced-prime-table .flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield{position:relative;display:inline-flex;align-items:center;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep p-inputicon,.pt-advanced-prime-table ::ng-deep .p-inputicon,.pt-advanced-prime-table ::ng-deep .p-input-icon{position:absolute;top:50%;left:.85rem;z-index:2;display:inline-flex;align-items:center;justify-content:center;margin:0;transform:translateY(-50%);pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-iconfield .p-inputtext{width:100%;max-width:100%;padding-left:2.5rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{margin-left:1rem;cursor:pointer}.pt-advanced-prime-table .table-row{display:flex;justify-content:center;gap:1rem;min-width:0;text-align:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{color:green;font-size:1.25em}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{color:red;font-size:1.25em}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:180px}.pt-advanced-prime-table .empty-message{color:#888;font-size:1.2rem;text-align:center}.pt-advanced-prime-table .empty-message i{display:block;margin-bottom:.5rem;font-size:2rem}.pt-advanced-prime-table th,.pt-advanced-prime-table td{min-width:0;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-advanced-prime-table ::ng-deep .p-datatable-thead>tr>th,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td{min-width:0;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-advanced-prime-table ::ng-deep .p-datatable-thead>tr>th{vertical-align:middle}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td{vertical-align:top}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right,.pt-advanced-prime-table ::ng-deep .composed-cell,.pt-advanced-prime-table ::ng-deep .composed-text{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right{display:flex;align-items:flex-start;width:100%;min-width:0}.pt-advanced-prime-table .cell-inner-left{justify-content:flex-start;text-align:left}.pt-advanced-prime-table .cell-inner-center{justify-content:center;text-align:center}.pt-advanced-prime-table .cell-inner-right{justify-content:flex-end;text-align:right}.pt-advanced-prime-table ::ng-deep .p-tag{padding:.2rem .55rem;font-size:.72rem;font-weight:800;line-height:1.2;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .p-tag .p-tag-icon{margin-right:.25rem}.pt-advanced-prime-table .progress-cell{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1 1 auto;width:100%;min-width:0;height:.75rem!important;overflow:hidden;border-radius:999px;background:#e5e7eb!important}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar-value{display:block!important;height:100%!important;border-radius:999px}.pt-advanced-prime-table .progress-cell-value{flex:0 0 auto;min-width:38px;color:#334155;font-size:.72rem;font-weight:800;text-align:right}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{align-items:center;justify-content:center;padding:0;overflow:hidden;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .action-buttons-container{display:flex;align-items:center!important;justify-content:center!important;flex-wrap:wrap;gap:.35rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{min-width:22px!important;height:22px!important;padding:.25rem!important}.pt-advanced-prime-table ::ng-deep .pt-progress-success .p-progressbar-value{background:#22c55e!important}.pt-advanced-prime-table ::ng-deep .pt-progress-warning .p-progressbar-value{background:#f59e0b!important}.pt-advanced-prime-table ::ng-deep .pt-progress-danger .p-progressbar-value{background:#ef4444!important}.pt-advanced-prime-table ::ng-deep .pt-progress-info .p-progressbar-value{background:#3b82f6!important}.pt-advanced-prime-table ::ng-deep .composed-cell{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .composed-image{display:block;flex:0 0 auto;object-fit:contain}.pt-advanced-prime-table ::ng-deep .composed-text{flex:1 1 auto;min-width:0}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{transition:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging{cursor:grabbing!important;opacity:.55}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:5;box-shadow:inset 0 0 0 1px #3b82f673}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before:before{position:absolute;z-index:30;top:-2px;right:0;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after:after{position:absolute;z-index:30;right:0;bottom:-2px;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td{border-top:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{border-bottom:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-drag-handle{display:inline-flex;align-items:center;justify-content:center;width:2rem;min-width:2rem;height:2rem;border-radius:6px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.pt-advanced-prime-table ::ng-deep .row-drag-handle:hover{background:#3b82f61a}.pt-advanced-prime-table ::ng-deep .row-drag-handle:active{cursor:grabbing}.pt-advanced-prime-table ::ng-deep .row-drag-handle .pi{color:#64748b;font-size:.95rem}.pt-advanced-prime-table ::ng-deep td.row-reorder-column,.pt-advanced-prime-table ::ng-deep th.row-reorder-column{width:7rem;min-width:7rem;padding:.25rem .4rem!important;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .row-reorder-actions{display:inline-flex;align-items:center;justify-content:center;gap:.15rem;width:100%}.pt-advanced-prime-table ::ng-deep .row-reorder-arrow-buttons{display:inline-flex;flex-direction:column;gap:0}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text{width:1.75rem!important;min-width:1.75rem!important;height:1.75rem!important;padding:0!important;border-radius:6px!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text .p-button-icon{font-size:.75rem}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:not(:disabled):hover{background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:disabled{cursor:not-allowed;opacity:.35}.pt-advanced-prime-table.dragging-active,.pt-advanced-prime-table.dragging-active *{-webkit-user-select:none!important;user-select:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:10}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-after>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar{width:10px;height:10px}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-track,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-track{border-radius:999px;background:var(--pt-advanced-table-scrollbar-track, #f1f5f9)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb{border:2px solid var(--pt-advanced-table-scrollbar-track, #f1f5f9);border-radius:999px;background:var(--pt-advanced-table-scrollbar-thumb, #94a3b8)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb:hover,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb:hover{background:var(--pt-advanced-table-scrollbar-thumb-hover, #64748b)}@media(max-width:768px){.pt-advanced-prime-table .filter-container,.pt-advanced-prime-table .flex{align-items:stretch;flex-direction:column}.pt-advanced-prime-table .settings{flex-wrap:wrap}.pt-advanced-prime-table .ml-auto{width:100%;margin-left:0}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield,.pt-advanced-prime-table ::ng-deep .p-inputtext{width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{min-width:var(--pt-advanced-table-mobile-min-width, 78rem)}}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-context-menu-row{cursor:context-menu}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-context-menu-row:hover>td{background:#3b82f60a}::ng-deep .pt-table-context-menu{min-width:13rem}::ng-deep .pt-table-context-menu .p-contextmenu-item-link{gap:.65rem}::ng-deep .pt-table-context-menu .p-contextmenu-item-icon{width:1.1rem;text-align:center}\n"] }]
+            args: [{ selector: 'pt-advanced-prime-table', standalone: false, template: "<div #tableContainer class=\"pt-advanced-prime-table table-container\">\n  @if (hasContextMenu) {\n    <p-contextMenu\n      #contextMenu\n      [model]=\"contextMenuItems\"\n      appendTo=\"body\"\n      styleClass=\"pt-table-context-menu\"\n      (onHide)=\"onContextMenuHide()\"\n    ></p-contextMenu>\n  }\n  <p-table\n    #dt\n    [value]=\"tableData\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"isLazy\"\n    [filterDelay]=\"0\"\n    [dataKey]=\"selectionDataKey || rowReorderIdField || 'id'\"\n    [rowTrackBy]=\"rowTrackBy\"\n    paginatorDropdownAppendTo=\"body\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    (selectionChange)=\"selectionChange.emit($event)\"\n    (onRowSelect)=\"rowSelect.emit($event.data)\"\n    (onRowUnselect)=\"rowUnselect.emit($event.data)\"\n  >\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        @if (canUseRowReorder()) {\n          <col [style.width]=\"getRowReorderColumnWidth()\" />\n        }\n\n        @for (col of columns; track col) {\n          <col [style.width]=\"col.width || getHeaderWidth(col)\" />\n        }\n      </colgroup>\n    </ng-template>\n\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          @if (hasSearchFilter) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Clear filters\"\n              (click)=\"clear(dt)\"\n            ></button>\n          }\n\n          @if (hasExportExcel) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Export to Excel\"\n              (click)=\"exportExcel()\"\n            ></button>\n          }\n\n          @if (hasExportPDF) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Export to PDF\"\n              (click)=\"exportPdf()\"\n            ></button>\n          }\n        </div>\n\n        @if (hasSearchFilter) {\n          <div class=\"ml-auto\">\n            <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n              <p-inputIcon>\n                <i class=\"pi pi-search\"></i>\n              </p-inputIcon>\n\n              <input\n                pInputText\n                type=\"text\"\n                [(ngModel)]=\"searchValue\"\n                placeholder=\"Search keyword\"\n                (input)=\"filterGlobal($event)\"\n              />\n            </p-iconField>\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        @if (canUseRowReorder()) {\n          <th\n            [style.width]=\"getRowReorderColumnWidth()\"\n            [ngStyle]=\"getStaticCellStyle()\"\n          ></th>\n        }\n\n        @for (col of columns; track col) {\n          @if (!col.children) {\n            <th\n              [pSortableColumn]=\"col.code\"\n              [pSortableColumnDisabled]=\"\n                !isSortable || col.isSortable === false\n              \"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"[\n                getHeaderAlignClass(col),\n                col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n              ]\"\n              colspan=\"1\"\n            >\n              <div class=\"header-container\" [ngStyle]=\"getCellInnerStyle(col)\">\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n\n                @if (\n                  (isSortable && col.isSortable !== false) ||\n                  (hasColumnFilter && col.isFilter !== false)\n                ) {\n                  <div class=\"icons\">\n                    @if (isSortable && col.isSortable !== false) {\n                      <p-sortIcon [field]=\"col.code\" />\n                    }\n\n                    @if (hasColumnFilter && col.isFilter !== false) {\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          type=\"text\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"false\"\n                          [showOperator]=\"false\"\n                          (onClear)=\"onComposedColumnClear(col)\"\n                        >\n                          <ng-template\n                            pTemplate=\"filter\"\n                            let-filter=\"filterCallback\"\n                          >\n                            @for (\n                              composedName of col.composedNames;\n                              track composedName\n                            ) {\n                              @if (\n                                getComposedFieldType(col, composedName) ===\n                                TableTypeEnum.STRING\n                              ) {\n                                <div>\n                                  <p-multiSelect\n                                    [options]=\"filters[composedName]?.options\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [ngModel]=\"\n                                      filters[composedName]?.value ?? []\n                                    \"\n                                    [placeholder]=\"\n                                      filters[composedName]?.placeholder\n                                    \"\n                                    display=\"chip\"\n                                    (ngModelChange)=\"\n                                      onComposedFilterValueChange(\n                                        col,\n                                        composedName,\n                                        $event\n                                      );\n                                      filter($event ?? [])\n                                    \"\n                                  >\n                                    <ng-template let-item pTemplate=\"item\">\n                                      <div class=\"custom-multiselect-item\">\n                                        @if (item.image) {\n                                          <img\n                                            [src]=\"item.image\"\n                                            alt=\"icon\"\n                                            class=\"filter-image\"\n                                          />\n                                        }\n\n                                        <span>{{ item.label }}</span>\n                                      </div>\n                                    </ng-template>\n                                  </p-multiSelect>\n                                </div>\n                              }\n                            }\n                          </ng-template>\n                        </p-columnFilter>\n                      } @else {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          [type]=\"getColumnFilterType(col)\"\n                          [currency]=\"getCurrencySymbol(col)\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [showOperator]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [matchMode]=\"\n                            col.type === TableTypeEnum.MULTISELECT\n                              ? 'in'\n                              : undefined\n                          \"\n                          (onClear)=\"onFilterClear(col.code!)\"\n                        >\n                          @if (\n                            col.type === TableTypeEnum.NUMBER ||\n                            col.type === TableTypeEnum.AMOUNT\n                          ) {\n                            <ng-template pTemplate=\"filter\" let-value>\n                              <input\n                                pInputText\n                                type=\"text\"\n                                inputmode=\"decimal\"\n                                [ngModel]=\"\n                                  latestFilterValues[col.code!] ?? value\n                                \"\n                                placeholder=\"Enter a number\"\n                                (ngModelChange)=\"\n                                  onNumberFilterChange(col.code!, $event)\n                                \"\n                              />\n                            </ng-template>\n                          }\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"col.type === TableTypeEnum.DATE\"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-datepicker\n                              [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                              dateFormat=\"dd/mm/yy\"\n                              placeholder=\"Choose a date\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event)\n                              \"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"\n                              col.type === TableTypeEnum.MULTISELECT &&\n                              col.filterOptions &&\n                              col.filterOptions.length > 0\n                            \"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-multiSelect\n                              [options]=\"col.filterOptions\"\n                              optionLabel=\"label\"\n                              optionValue=\"value\"\n                              [ngModel]=\"\n                                latestFilterValues[col.code!] ?? value ?? []\n                              \"\n                              display=\"chip\"\n                              placeholder=\"Choose option\"\n                              class=\"custom-multiselect\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event ?? [])\n                              \"\n                            ></p-multiSelect>\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </th>\n          } @else {\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          }\n        }\n      </tr>\n\n      @if (hasGroupedColumns) {\n        <tr>\n          @if (canUseRowReorder()) {\n            <th\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            ></th>\n          }\n\n          @for (col of columns; track col) {\n            @if (col.children) {\n              @for (child of col.children; track child) {\n                <th\n                  [pSortableColumn]=\"child.code\"\n                  [pSortableColumnDisabled]=\"\n                    !isSortable || child.isSortable === false\n                  \"\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngStyle]=\"getHeaderCellStyle(child)\"\n                  [ngClass]=\"getHeaderAlignClass(child)\"\n                >\n                  <div\n                    class=\"header-container\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    <span [ngClass]=\"getHeaderTitleClass(child)\">\n                      {{ child.title }}\n                    </span>\n\n                    @if (\n                      (isSortable && child.isSortable !== false) ||\n                      (hasColumnFilter && child.isFilter !== false)\n                    ) {\n                      <div class=\"icons\">\n                        @if (isSortable && child.isSortable !== false) {\n                          <p-sortIcon [field]=\"child.code\" />\n                        }\n\n                        @if (hasColumnFilter && child.isFilter !== false) {\n                          <p-columnFilter\n                            display=\"menu\"\n                            [field]=\"child.code\"\n                            [type]=\"getColumnFilterType(child)\"\n                            [currency]=\"getCurrencySymbol(child)\"\n                            [showApplyButton]=\"true\"\n                            [showClearButton]=\"true\"\n                            [showMatchModes]=\"\n                              child.type !== TableTypeEnum.MULTISELECT\n                            \"\n                            [showOperator]=\"\n                              child.type !== TableTypeEnum.MULTISELECT\n                            \"\n                            [matchMode]=\"\n                              child.type === TableTypeEnum.MULTISELECT\n                                ? 'in'\n                                : undefined\n                            \"\n                            (onClear)=\"onFilterClear(child.code!)\"\n                          ></p-columnFilter>\n                        }\n                      </div>\n                    }\n                  </div>\n                </th>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"p-datatable-emptymessage\">\n        <td\n          class=\"empty-message-cell\"\n          [attr.colspan]=\"columns.length + (canUseRowReorder() ? 1 : 0)\"\n        >\n          <div class=\"empty-message-wrapper\">\n            <div class=\"empty-message\">\n              <i class=\"pi pi-info-circle\"></i>\n              <p>No records available to display.</p>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"body\" let-data let-editing=\"editing\">\n      @if (!loading) {\n        <tr\n          [pEditableRow]=\"isEdit ? data : null\"\n          [pSelectableRow]=\"selectionMode ? data : null\"\n          [attr.data-row-reorder-target]=\"canUseRowReorder() ? 'true' : null\"\n          [class.pt-context-menu-row]=\"hasContextMenu\"\n          (contextmenu)=\"onRowContextMenu($event, data)\"\n        >\n          @if (canUseRowReorder()) {\n            <td\n              class=\"row-reorder-column\"\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [style.text-align]=\"'center'\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            >\n              <div class=\"row-reorder-actions\">\n                <span\n                  class=\"row-drag-handle\"\n                  title=\"D\u00E9placer la ligne\"\n                  (pointerdown)=\"onRowPointerDown($event, data)\"\n                >\n                  <i class=\"pi pi-bars\"></i>\n                </span>\n\n                @if (showRowMoveArrows) {\n                  <div class=\"row-reorder-arrow-buttons\">\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-up\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Monter la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowUp(data)\"\n                      (click)=\"moveRowUp(data); $event.stopPropagation()\"\n                    ></button>\n\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-down\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Descendre la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowDown(data)\"\n                      (click)=\"moveRowDown(data); $event.stopPropagation()\"\n                    ></button>\n                  </div>\n                }\n              </div>\n            </td>\n          }\n\n          @for (col of columns; track col) {\n            @if (!col.children) {\n              @if (isEditable(col.code!) && col.type !== TableTypeEnum.ACTION) {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"getDataAlignClass(col)\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(col)\"\n                    [ngStyle]=\"getCellInnerStyle(col)\"\n                  >\n                    @if (isMultiSelect(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-multiSelect\n                            appendTo=\"body\"\n                            [ngModel]=\"data[col.code!]\"\n                            [style]=\"{ width: '100%' }\"\n                            [options]=\"optionValues\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                          ></p-multiSelect>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          <div class=\"multi-select-container\">\n                            @for (\n                              rec of getMultiSelectValues(data[col.code!]);\n                              track rec\n                            ) {\n                              <p-tag [value]=\"rec\"></p-tag>\n                            }\n                          </div>\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else if (isDatePicker(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-datepicker\n                            [inputId]=\"data[col.code!]\"\n                            [ngModel]=\"data[col.code!]\"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                          ></p-datepicker>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ data[col.code!] | customDate }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\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\n                        <ng-template pTemplate=\"output\">\n                          @if (col.type === TableTypeEnum.AMOUNT) {\n                            {{ col.prefix ?? \"\" }}\n                            {{\n                              data[col.code!]\n                                | customCurrency\n                                  : getCurrencySymbol(col)\n                                  : col.decimalPlaces\n                                  : col.thousandSeparator\n                                  : col.decimalSeparator\n                            }}\n                            {{\n                              data[col.code!] != null ? (col.suffix ?? \"\") : \"\"\n                            }}\n                          } @else if (col.type === TableTypeEnum.NUMBER) {\n                            {{ col.prefix ?? \"\" }}\n                            {{\n                              formatNumber(\n                                data[col.code!],\n                                col.decimalPlaces,\n                                col.thousandSeparator,\n                                col.decimalSeparator\n                              )\n                            }}\n                            {{\n                              data[col.code!] != null ? (col.suffix ?? \"\") : \"\"\n                            }}\n                          } @else {\n                            {{ col.prefix ?? \"\" }}{{ data[col.code!]\n                            }}{{\n                              data[col.code!] != null ? (col.suffix ?? \"\") : \"\"\n                            }}\n                          }\n                        </ng-template>\n                      </p-cellEditor>\n                    }\n                  </div>\n                </td>\n              } @else {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"[\n                    getDataAlignClass(col),\n                    col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n                  ]\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  @if (col.type === TableTypeEnum.ACTION) {\n                    <div\n                      class=\"action-buttons-container\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (isDelete) {\n                        <button\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-trash\"\n                          class=\"p-button-rounded p-button-text\"\n                          pTooltip=\"Supprimer\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          (click)=\"Delete(data); $event.stopPropagation()\"\n                        ></button>\n                      }\n\n                      @if (isEdit) {\n                        <div>\n                          @if (!editing) {\n                            <button\n                              pInitEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-pencil\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Modifier\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"\n                                startRowEdit(data); $event.stopPropagation()\n                              \"\n                            ></button>\n                          }\n\n                          @if (editing) {\n                            <button\n                              pSaveEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-check\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Enregistrer\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"\n                                saveRowEdit(data); $event.stopPropagation()\n                              \"\n                            ></button>\n\n                            <button\n                              pCancelEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-times\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Annuler\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"\n                                cancelRowEdit(data); $event.stopPropagation()\n                              \"\n                            ></button>\n                          }\n                        </div>\n                      }\n\n                      @for (act of customActions; track act) {\n                        @if (isActionVisible(act, data)) {\n                          <button\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                            [disabled]=\"isActionDisabled(act, data)\"\n                            [pTooltip]=\"act.tooltip || ''\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            (click)=\"\n                              onCustomActionClick(act, data);\n                              $event.stopPropagation()\n                            \"\n                          ></button>\n                        }\n                      }\n                    </div>\n                  } @else {\n                    <div\n                      [ngClass]=\"getCellInnerAlignClass(col)\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <div class=\"composed-cell\">\n                          @for (\n                            composedName of col.composedNames;\n                            track composedName;\n                            let i = $index\n                          ) {\n                            @if (\n                              col.composedTypes?.[i] === TableTypeEnum.IMAGE\n                            ) {\n                              <img\n                                [src]=\"data[col.code!]?.[composedName]\"\n                                alt=\"composed-img\"\n                                class=\"composed-image\"\n                                [ngStyle]=\"\n                                  getMergedComposedImageStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              />\n                            }\n\n                            @if (\n                              col.composedTypes?.[i] === TableTypeEnum.STRING\n                            ) {\n                              <span\n                                class=\"composed-text\"\n                                [ngStyle]=\"\n                                  getMergedComposedTextStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              >\n                                {{ data[col.code!]?.[composedName] }}\n                              </span>\n                            }\n                          }\n                        </div>\n                      } @else if (col.type === TableTypeEnum.PROGRESS) {\n                        <div class=\"progress-cell\">\n                          <p-progressBar\n                            [value]=\"getProgressValue(col, data)\"\n                            [showValue]=\"false\"\n                            [ngClass]=\"\n                              'pt-progress-' + getProgressSeverity(col, data)\n                            \"\n                          ></p-progressBar>\n\n                          @if (isProgressShowValue(col)) {\n                            <span class=\"progress-cell-value\">\n                              {{ getProgressValue(col, data)\n                              }}{{ getProgressUnit(col) }}\n                            </span>\n                          }\n                        </div>\n                      } @else if (col.type === TableTypeEnum.TAG) {\n                        <p-tag\n                          [value]=\"getTagValue(col, data)\"\n                          [severity]=\"$any(getTagSeverity(col, data))\"\n                          [icon]=\"getTagIcon(col, data)\"\n                          [rounded]=\"isTagRounded(col)\"\n                        ></p-tag>\n                      } @else if (col.type === TableTypeEnum.AMOUNT) {\n                        {{ col.prefix ?? \"\" }}\n                        {{\n                          data[col.code!]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                        {{ data[col.code!] != null ? (col.suffix ?? \"\") : \"\" }}\n                      } @else if (col.type === TableTypeEnum.NUMBER) {\n                        {{ col.prefix ?? \"\" }}\n                        {{\n                          formatNumber(\n                            data[col.code!],\n                            col.decimalPlaces,\n                            col.thousandSeparator,\n                            col.decimalSeparator\n                          )\n                        }}\n                        {{ data[col.code!] != null ? (col.suffix ?? \"\") : \"\" }}\n                      } @else if (col.type === TableTypeEnum.DATE) {\n                        {{\n                          formatDateWithColumn(\n                            parseAnyDate(data[col.code!]),\n                            col\n                          )\n                        }}\n                      } @else if (col.type === TableTypeEnum.DATETIME) {\n                        {{\n                          formatDateTimeWithColumn(\n                            parseAnyDate(data[col.code!]),\n                            col\n                          )\n                        }}\n                      } @else if (\n                        [\n                          TableTypeEnum.STRING,\n                          TableTypeEnum.MULTISELECT,\n                        ].includes(col.type!)\n                      ) {\n                        {{ col.prefix ?? \"\" }}{{ data[col.code!]\n                        }}{{\n                          data[col.code!] != null ? (col.suffix ?? \"\") : \"\"\n                        }}\n                      }\n                    </div>\n                  }\n                </td>\n              }\n            } @else {\n              @for (child of col.children; track child) {\n                <td\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngClass]=\"getDataAlignClass(child)\"\n                  [ngStyle]=\"getCellStyle(child, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(child)\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    @if (isEditable(child.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"child.code ? data[child.code] : null\"\n                            (change)=\"onChange($event, data.id, child.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          @if (child.type === TableTypeEnum.AMOUNT) {\n                            {{ child.prefix ?? \"\" }}\n                            {{\n                              (child.code ? data[child.code] : null)\n                                | customCurrency\n                                  : getCurrencySymbol(child)\n                                  : child.decimalPlaces\n                                  : child.thousandSeparator\n                                  : child.decimalSeparator\n                            }}\n                            {{\n                              child.code && data[child.code] != null\n                                ? (child.suffix ?? \"\")\n                                : \"\"\n                            }}\n                          } @else if (child.type === TableTypeEnum.NUMBER) {\n                            {{ child.prefix ?? \"\" }}\n                            {{\n                              formatNumber(\n                                child.code ? data[child.code] : null,\n                                child.decimalPlaces,\n                                child.thousandSeparator,\n                                child.decimalSeparator\n                              )\n                            }}\n                            {{\n                              child.code && data[child.code] != null\n                                ? (child.suffix ?? \"\")\n                                : \"\"\n                            }}\n                          } @else {\n                            {{ child.prefix ?? \"\"\n                            }}{{ child.code ? data[child.code] : \"\"\n                            }}{{\n                              child.code && data[child.code] != null\n                                ? (child.suffix ?? \"\")\n                                : \"\"\n                            }}\n                          }\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else if (child.type === TableTypeEnum.TAG) {\n                      <p-tag\n                        [value]=\"getTagValue(child, data)\"\n                        [severity]=\"$any(getTagSeverity(child, data))\"\n                        [icon]=\"getTagIcon(child, data)\"\n                        [rounded]=\"isTagRounded(child)\"\n                      ></p-tag>\n                    } @else {\n                      @if (child.type === TableTypeEnum.AMOUNT) {\n                        {{ child.prefix ?? \"\" }}\n                        {{\n                          (child.code ? data[child.code] : null)\n                            | customCurrency\n                              : getCurrencySymbol(child)\n                              : child.decimalPlaces\n                              : child.thousandSeparator\n                              : child.decimalSeparator\n                        }}\n                        {{\n                          child.code && data[child.code] != null\n                            ? (child.suffix ?? \"\")\n                            : \"\"\n                        }}\n                      } @else if (child.type === TableTypeEnum.NUMBER) {\n                        {{ child.prefix ?? \"\" }}\n                        {{\n                          formatNumber(\n                            child.code ? data[child.code] : null,\n                            child.decimalPlaces,\n                            child.thousandSeparator,\n                            child.decimalSeparator\n                          )\n                        }}\n                        {{\n                          child.code && data[child.code] != null\n                            ? (child.suffix ?? \"\")\n                            : \"\"\n                        }}\n                      } @else {\n                        {{ child.prefix ?? \"\"\n                        }}{{ child.code ? data[child.code] : \"\"\n                        }}{{\n                          child.code && data[child.code] != null\n                            ? (child.suffix ?? \"\")\n                            : \"\"\n                        }}\n                      }\n                    }\n                  </div>\n                </td>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.pt-advanced-prime-table{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{display:grid;align-items:center;justify-items:start;width:100%;min-width:0;height:5rem}.pt-advanced-prime-table .filter-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .settings{display:flex;align-items:center;gap:1rem;min-width:0}.pt-advanced-prime-table .multi-select-container{display:flex;align-items:center;gap:.3rem;min-width:0}.pt-advanced-prime-table .table-container{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep p-table{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper{display:block;width:100%;min-width:0;max-width:100%;overflow-x:auto!important;overflow-y:visible!important;overscroll-behavior-x:contain;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{width:100%;min-width:var(--pt-advanced-table-min-width, 95rem);max-width:none;table-layout:fixed;border-collapse:separate;border-spacing:0}.pt-advanced-prime-table ::ng-deep .p-datatable-header,.pt-advanced-prime-table ::ng-deep .p-datatable-caption{width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-caption>.flex,.pt-advanced-prime-table ::ng-deep .p-datatable-header>.flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.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{position:relative;display:flex;align-items:center;gap:.25rem;width:100%!important;min-width:0;max-width:100%;margin:0!important;padding:0!important}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{display:block;flex:1 1 auto;width:auto;min-width:0;max-width:100%;padding:0;line-height:1.2;white-space:normal;overflow-wrap:break-word;word-break:normal}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-container>.icons{position:static!important;top:auto!important;right:auto!important;display:inline-flex;align-items:center;justify-content:flex-end;flex:0 0 auto;gap:.15rem;width:auto!important;min-width:1.5rem;max-width:none;margin-left:auto;padding:0;transform:none!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .header-container>.icons p-sorticon,.pt-advanced-prime-table ::ng-deep .header-container>.icons p-columnfilter{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0}.pt-advanced-prime-table ::ng-deep .header-container>p-columnfilter:last-child{position:static!important;top:auto!important;right:auto!important;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0 0 0 auto!important;transform:none!important}.pt-advanced-prime-table ::ng-deep .p-sortable-column-icon,.pt-advanced-prime-table ::ng-deep .p-column-filter-menu-button{flex:0 0 auto;margin:0!important}.pt-advanced-prime-table ::ng-deep .p-column-filter-menu-button{width:1.75rem;height:1.75rem;padding:0}.pt-advanced-prime-table ::ng-deep p-sorticon{width:1.25rem;min-width:1.25rem}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:0}.pt-advanced-prime-table .flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield{position:relative;display:inline-flex;align-items:center;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep p-inputicon,.pt-advanced-prime-table ::ng-deep .p-inputicon,.pt-advanced-prime-table ::ng-deep .p-input-icon{position:absolute;top:50%;left:.85rem;z-index:2;display:inline-flex;align-items:center;justify-content:center;margin:0;transform:translateY(-50%);pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-iconfield .p-inputtext{width:100%;max-width:100%;padding-left:2.5rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{margin-left:1rem;cursor:pointer}.pt-advanced-prime-table .table-row{display:flex;justify-content:center;gap:1rem;min-width:0;text-align:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{color:green;font-size:1.25em}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{color:red;font-size:1.25em}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:180px}.pt-advanced-prime-table .empty-message{color:#888;font-size:1.2rem;text-align:center}.pt-advanced-prime-table .empty-message i{display:block;margin-bottom:.5rem;font-size:2rem}.pt-advanced-prime-table th,.pt-advanced-prime-table td{min-width:0;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-advanced-prime-table ::ng-deep .p-datatable-thead>tr>th,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td{min-width:0;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-advanced-prime-table ::ng-deep .p-datatable-thead>tr>th{vertical-align:middle}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td{vertical-align:top}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right,.pt-advanced-prime-table ::ng-deep .composed-cell,.pt-advanced-prime-table ::ng-deep .composed-text{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right{display:flex;align-items:flex-start;width:100%;min-width:0}.pt-advanced-prime-table .cell-inner-left{justify-content:flex-start;text-align:left}.pt-advanced-prime-table .cell-inner-center{justify-content:center;text-align:center}.pt-advanced-prime-table .cell-inner-right{justify-content:flex-end;text-align:right}.pt-advanced-prime-table ::ng-deep .p-tag{padding:.2rem .55rem;font-size:.72rem;font-weight:800;line-height:1.2;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .p-tag .p-tag-icon{margin-right:.25rem}.pt-advanced-prime-table .progress-cell{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1 1 auto;width:100%;min-width:0;height:.75rem!important;overflow:hidden;border-radius:999px;background:#e5e7eb!important}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar-value{display:block!important;height:100%!important;border-radius:999px}.pt-advanced-prime-table .progress-cell-value{flex:0 0 auto;min-width:38px;color:#334155;font-size:.72rem;font-weight:800;text-align:right}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{align-items:center;justify-content:center;padding:0;overflow:hidden;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .action-buttons-container{display:flex;align-items:center!important;justify-content:center!important;flex-wrap:wrap;gap:.35rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{min-width:22px!important;height:22px!important;padding:.25rem!important}.pt-advanced-prime-table ::ng-deep .pt-progress-success .p-progressbar-value{background:#22c55e!important}.pt-advanced-prime-table ::ng-deep .pt-progress-warning .p-progressbar-value{background:#f59e0b!important}.pt-advanced-prime-table ::ng-deep .pt-progress-danger .p-progressbar-value{background:#ef4444!important}.pt-advanced-prime-table ::ng-deep .pt-progress-info .p-progressbar-value{background:#3b82f6!important}.pt-advanced-prime-table ::ng-deep .composed-cell{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .composed-image{display:block;flex:0 0 auto;object-fit:contain}.pt-advanced-prime-table ::ng-deep .composed-text{flex:1 1 auto;min-width:0}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{transition:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging{cursor:grabbing!important;opacity:.55}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:5;box-shadow:inset 0 0 0 1px #3b82f673}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before:before{position:absolute;z-index:30;top:-2px;right:0;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after:after{position:absolute;z-index:30;right:0;bottom:-2px;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td{border-top:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{border-bottom:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-drag-handle{display:inline-flex;align-items:center;justify-content:center;width:2rem;min-width:2rem;height:2rem;border-radius:6px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.pt-advanced-prime-table ::ng-deep .row-drag-handle:hover{background:#3b82f61a}.pt-advanced-prime-table ::ng-deep .row-drag-handle:active{cursor:grabbing}.pt-advanced-prime-table ::ng-deep .row-drag-handle .pi{color:#64748b;font-size:.95rem}.pt-advanced-prime-table ::ng-deep td.row-reorder-column,.pt-advanced-prime-table ::ng-deep th.row-reorder-column{width:7rem;min-width:7rem;padding:.25rem .4rem!important;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .row-reorder-actions{display:inline-flex;align-items:center;justify-content:center;gap:.15rem;width:100%}.pt-advanced-prime-table ::ng-deep .row-reorder-arrow-buttons{display:inline-flex;flex-direction:column;gap:0}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text{width:1.75rem!important;min-width:1.75rem!important;height:1.75rem!important;padding:0!important;border-radius:6px!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text .p-button-icon{font-size:.75rem}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:not(:disabled):hover{background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:disabled{cursor:not-allowed;opacity:.35}.pt-advanced-prime-table.dragging-active,.pt-advanced-prime-table.dragging-active *{-webkit-user-select:none!important;user-select:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:10}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-after>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar{width:10px;height:10px}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-track,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-track{border-radius:999px;background:var(--pt-advanced-table-scrollbar-track, #f1f5f9)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb{border:2px solid var(--pt-advanced-table-scrollbar-track, #f1f5f9);border-radius:999px;background:var(--pt-advanced-table-scrollbar-thumb, #94a3b8)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb:hover,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb:hover{background:var(--pt-advanced-table-scrollbar-thumb-hover, #64748b)}@media(max-width:768px){.pt-advanced-prime-table .filter-container,.pt-advanced-prime-table .flex{align-items:stretch;flex-direction:column}.pt-advanced-prime-table .settings{flex-wrap:wrap}.pt-advanced-prime-table .ml-auto{width:100%;margin-left:0}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield,.pt-advanced-prime-table ::ng-deep .p-inputtext{width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{min-width:var(--pt-advanced-table-mobile-min-width, 78rem)}}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-context-menu-row{cursor:context-menu}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-context-menu-row:hover>td{background:#3b82f60a}::ng-deep .pt-table-context-menu{min-width:13rem}::ng-deep .pt-table-context-menu .p-contextmenu-item-link{gap:.65rem}::ng-deep .pt-table-context-menu .p-contextmenu-item-icon{width:1.1rem;text-align:center}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -8373,6 +8373,7 @@ class PTLoginCardComponent {
     constructor(fb) {
         this.fb = fb;
         this.loginErrorMessage = null;
+        this.loginLoading = false;
         this.loginSubmit = new EventEmitter();
         this.destroy$ = new Subject();
         this.formGroup = this.fb.group({});
@@ -8384,13 +8385,20 @@ class PTLoginCardComponent {
             username: this.loginPageConfig?.login?.username || '',
             password: this.loginPageConfig?.login?.password || '',
         });
-        this.updateButtonDisabledState(this.formGroup.valid);
+        this.updateButtonState();
         this.formGroup.statusChanges
             .pipe(takeUntil(this.destroy$))
-            .subscribe((status) => {
-            this.updateButtonDisabledState(status === 'VALID');
+            .subscribe(() => {
+            this.updateButtonState();
         });
     }
+    ngOnChanges(changes) {
+        if (changes['loginLoading'] &&
+            !changes['loginLoading'].firstChange &&
+            this.loginPageConfig?.buttonConfig) {
+            this.updateButtonState();
+        }
+    }
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
@@ -8463,6 +8471,7 @@ class PTLoginCardComponent {
             iconPos: this.loginPageConfig.buttonConfig?.iconPos || 'left',
             styleClass: this.loginPageConfig.buttonConfig?.styleClass || 'p-button-success',
             disabled: this.loginPageConfig.buttonConfig?.disabled ?? true,
+            loading: this.loginLoading,
             width: this.loginPageConfig.buttonConfig?.width ?? '100%',
             ...this.loginPageConfig.buttonConfig,
         };
@@ -8477,6 +8486,9 @@ class PTLoginCardComponent {
             })) ?? [];
     }
     onSubmit() {
+        if (this.loginLoading) {
+            return;
+        }
         if (this.formGroup.valid) {
             this.loginSubmit.emit(this.formGroup.getRawValue());
             return;
@@ -8518,14 +8530,18 @@ class PTLoginCardComponent {
         }
         return 'text';
     }
-    updateButtonDisabledState(formValid) {
+    updateButtonState() {
+        if (!this.loginPageConfig?.buttonConfig) {
+            return;
+        }
         this.loginPageConfig.buttonConfig = {
             ...this.loginPageConfig.buttonConfig,
-            disabled: !formValid,
+            loading: this.loginLoading,
+            disabled: this.loginLoading || this.formGroup.invalid,
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTLoginCardComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTLoginCardComponent, isStandalone: true, selector: "pt-login-card", inputs: { loginPageConfig: "loginPageConfig", loginErrorMessage: "loginErrorMessage" }, outputs: { loginSubmit: "loginSubmit" }, ngImport: i0, template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n  @if (loginPageConfig.logoUrl; as logoUrl) {\n    @if (logoUrl.imageUrl) {\n      <div class=\"logo-container\">\n        <img\n          [src]=\"logoUrl.imageUrl\"\n          [alt]=\"logoUrl.altText || 'Logo'\"\n          [style.width]=\"logoUrl.width || '100px'\"\n          [style.height]=\"logoUrl.height || 'auto'\"\n        />\n      </div>\n    }\n  }\n\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: loginPageConfig.title?.color || '#333',\n        'font-size': loginPageConfig.title?.fontSize || '24px',\n      }\"\n    >\n      {{ loginPageConfig.title?.text || \"Default Title\" }}\n    </h1>\n  </div>\n\n  @if (loginErrorMessage) {\n    <div class=\"error-message\" role=\"alert\">\n      {{ loginErrorMessage }}\n    </div>\n  }\n\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (loginPageConfig.login; as login) {\n      @if (login.errorMessage) {\n        <div class=\"error-message\" role=\"alert\">\n          {{ login.errorMessage }}\n        </div>\n      }\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.usernameField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.passwordField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"submit-btn\">\n      <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n    </div>\n\n    @if (loginPageConfig.forgotPasswordConfig; as forgotPasswordConfig) {\n      @if (forgotPasswordConfig.text && forgotPasswordConfig.url) {\n        <div\n          class=\"forgot-password-container\"\n          [ngClass]=\"\n            'forgot-password-' + (forgotPasswordConfig.align || 'center')\n          \"\n        >\n          <a\n            [href]=\"forgotPasswordConfig.url\"\n            [target]=\"forgotPasswordConfig.target || '_self'\"\n            [rel]=\"\n              forgotPasswordConfig.target === '_blank'\n                ? 'noopener noreferrer'\n                : null\n            \"\n            [ngStyle]=\"forgotPasswordConfig.style\"\n            [class]=\"forgotPasswordConfig.styleClass || 'forgot-password-link'\"\n          >\n            {{ forgotPasswordConfig.text }}\n          </a>\n        </div>\n      }\n    }\n\n    @if (visibleAdditionalContent.length > 0) {\n      <div class=\"additional-content-list\">\n        @for (item of visibleAdditionalContent; track item.id || $index) {\n          <div\n            class=\"additional-content-item\"\n            [ngClass]=\"getAdditionalContentClass(item)\"\n            [ngStyle]=\"item.style\"\n          >\n            @switch (item.type) {\n              @case (\"link\") {\n                @if (item.linkText && item.url) {\n                  <a\n                    [href]=\"item.url\"\n                    [target]=\"item.target || '_self'\"\n                    [rel]=\"getLinkRel(item)\"\n                    [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                    [ngStyle]=\"item.linkStyle\"\n                  >\n                    {{ item.linkText }}\n                  </a>\n                }\n              }\n\n              @case (\"text-with-link\") {\n                @if (\n                  item.linkPosition === \"before\" && item.linkText && item.url\n                ) {\n                  <a\n                    [href]=\"item.url\"\n                    [target]=\"item.target || '_self'\"\n                    [rel]=\"getLinkRel(item)\"\n                    [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                    [ngStyle]=\"item.linkStyle\"\n                  >\n                    {{ item.linkText }}\n                  </a>\n\n                  @if (item.text) {\n                    <span class=\"additional-content-text\">\n                      {{ item.text }}\n                    </span>\n                  }\n                } @else {\n                  @if (item.text) {\n                    <span class=\"additional-content-text\">\n                      {{ item.text }}\n                    </span>\n                  }\n\n                  @if (item.linkText && item.url) {\n                    <a\n                      [href]=\"item.url\"\n                      [target]=\"item.target || '_self'\"\n                      [rel]=\"getLinkRel(item)\"\n                      [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                      [ngStyle]=\"item.linkStyle\"\n                    >\n                      {{ item.linkText }}\n                    </a>\n                  }\n                }\n              }\n\n              @default {\n                @if (item.text) {\n                  <span class=\"additional-content-text\">\n                    {{ item.text }}\n                  </span>\n                }\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </form>\n\n  <div class=\"login-footer\">\n    {{ loginPageConfig.footer?.version }}\n\n    <span>\n      {{ loginPageConfig.footer?.copyright }}\n    </span>\n  </div>\n</pt-card>\n", styles: [":host{display:block;width:100%;min-width:0}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.logo-container img{display:block;max-width:100%;object-fit:contain}.title-container{margin-bottom:1.25rem;text-align:center}.title-container h1{margin:0;line-height:1.25}.form-container{width:100%}.field{display:flex;flex-direction:column;width:100%;margin-bottom:1.25rem}.error-message{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.75rem .875rem;color:var(--p-message-error-color, #b91c1c);background:var(--p-message-error-background, #fef2f2);border:1px solid var(--p-message-error-border-color, #fecaca);border-radius:var(--p-content-border-radius, .5rem);font-size:.875rem;line-height:1.4;text-align:center}.submit-btn{display:flex;justify-content:center;width:100%}:host ::ng-deep .submit-btn pt-button{display:block;width:100%}:host ::ng-deep .submit-btn p-button,:host ::ng-deep .submit-btn p-button button{width:100%}.forgot-password-container{display:flex;width:100%;box-sizing:border-box;margin-top:.875rem;margin-bottom:0;font-size:.875rem;line-height:1.4}.forgot-password-left{justify-content:flex-start;text-align:left}.forgot-password-center{justify-content:center;text-align:center}.forgot-password-right{justify-content:flex-end;text-align:right}.forgot-password-link,.additional-content-link{color:var(--p-primary-color, #2563eb);font-size:.875rem;font-weight:500;line-height:1.4;text-decoration:none;cursor:pointer;transition:color .16s ease,text-decoration-color .16s ease}.forgot-password-link:hover,.additional-content-link:hover{color:var(--p-primary-hover-color, #1d4ed8);text-decoration:underline;text-underline-offset:.2rem}.forgot-password-link:focus-visible,.additional-content-link:focus-visible{outline:2px solid var(--p-primary-color, #2563eb);outline-offset:.2rem;border-radius:.2rem}.additional-content-list{display:flex;flex-direction:column;width:100%;margin-top:1rem;gap:.55rem}.forgot-password-container+.additional-content-list{margin-top:.75rem}.additional-content-item{display:flex;flex-wrap:wrap;align-items:baseline;width:100%;box-sizing:border-box;gap:.3rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.875rem;line-height:1.45}.additional-content-left{justify-content:flex-start;text-align:left}.additional-content-center{justify-content:center;text-align:center}.additional-content-right{justify-content:flex-end;text-align:right}.additional-content-text{color:inherit}.login-footer{margin-top:1.25rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.8rem;line-height:1.4;text-align:center}.login-footer span{display:block;margin-top:.25rem}:host-context(.p-dark) .error-message,:host-context(.app-dark) .error-message,:host-context(.dark) .error-message,:host-context(.dark-mode) .error-message,:host-context([data-theme=\"dark\"]) .error-message{color:var(--p-message-error-color, #fca5a5);background:var(--p-message-error-background, rgba(127, 29, 29, .25));border-color:var(--p-message-error-border-color, rgba(248, 113, 113, .4))}:host-context(.p-dark) .forgot-password-link,:host-context(.app-dark) .forgot-password-link,:host-context(.dark) .forgot-password-link,:host-context(.dark-mode) .forgot-password-link,:host-context([data-theme=\"dark\"]) .forgot-password-link,:host-context(.p-dark) .additional-content-link,:host-context(.app-dark) .additional-content-link,:host-context(.dark) .additional-content-link,:host-context(.dark-mode) .additional-content-link,:host-context([data-theme=\"dark\"]) .additional-content-link{color:var(--p-primary-color, #60a5fa)}:host-context(.p-dark) .forgot-password-link:hover,:host-context(.app-dark) .forgot-password-link:hover,:host-context(.dark) .forgot-password-link:hover,:host-context(.dark-mode) .forgot-password-link:hover,:host-context([data-theme=\"dark\"]) .forgot-password-link:hover,:host-context(.p-dark) .additional-content-link:hover,:host-context(.app-dark) .additional-content-link:hover,:host-context(.dark) .additional-content-link:hover,:host-context(.dark-mode) .additional-content-link:hover,:host-context([data-theme=\"dark\"]) .additional-content-link:hover{color:var(--p-primary-hover-color, #93c5fd)}:host-context(.p-dark) .additional-content-item,:host-context(.app-dark) .additional-content-item,:host-context(.dark) .additional-content-item,:host-context(.dark-mode) .additional-content-item,:host-context([data-theme=\"dark\"]) .additional-content-item,:host-context(.p-dark) .login-footer,:host-context(.app-dark) .login-footer,:host-context(.dark) .login-footer,:host-context(.dark-mode) .login-footer,:host-context([data-theme=\"dark\"]) .login-footer{color:var(--p-text-muted-color, var(--text-color-secondary, #cbd5e1))}@media(max-width:768px){:host ::ng-deep pt-card{width:100%;max-width:100%}.submit-btn{min-width:100%}.forgot-password-container{margin-top:.75rem}.additional-content-list{margin-top:.875rem}.forgot-password-container+.additional-content-list{margin-top:.65rem}}@media(max-width:480px){.logo-container,.title-container,.field{margin-bottom:1rem}.forgot-password-container,.forgot-password-link,.additional-content-item,.additional-content-link{font-size:.82rem}.additional-content-list{gap:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PTCardModule }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "ngmodule", type: PTButtonModule }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }, { kind: "ngmodule", type: PTTextInputModule }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTLoginCardComponent, isStandalone: true, selector: "pt-login-card", inputs: { loginPageConfig: "loginPageConfig", loginErrorMessage: "loginErrorMessage", loginLoading: "loginLoading" }, outputs: { loginSubmit: "loginSubmit" }, usesOnChanges: true, ngImport: i0, template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n  @if (loginPageConfig.logoUrl; as logoUrl) {\n    @if (logoUrl.imageUrl) {\n      <div class=\"logo-container\">\n        <img\n          [src]=\"logoUrl.imageUrl\"\n          [alt]=\"logoUrl.altText || 'Logo'\"\n          [style.width]=\"logoUrl.width || '100px'\"\n          [style.height]=\"logoUrl.height || 'auto'\"\n        />\n      </div>\n    }\n  }\n\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: loginPageConfig.title?.color || '#333',\n        'font-size': loginPageConfig.title?.fontSize || '24px',\n      }\"\n    >\n      {{ loginPageConfig.title?.text || \"Default Title\" }}\n    </h1>\n  </div>\n\n  @if (loginErrorMessage) {\n    <div class=\"error-message\" role=\"alert\">\n      {{ loginErrorMessage }}\n    </div>\n  }\n\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (loginPageConfig.login; as login) {\n      @if (login.errorMessage) {\n        <div class=\"error-message\" role=\"alert\">\n          {{ login.errorMessage }}\n        </div>\n      }\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.usernameField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"loginPageConfig.passwordField!\"\n      ></pt-text-input>\n    </div>\n\n    <div class=\"submit-btn\">\n      <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n    </div>\n\n    @if (loginPageConfig.forgotPasswordConfig; as forgotPasswordConfig) {\n      @if (forgotPasswordConfig.text && forgotPasswordConfig.url) {\n        <div\n          class=\"forgot-password-container\"\n          [ngClass]=\"\n            'forgot-password-' + (forgotPasswordConfig.align || 'center')\n          \"\n        >\n          <a\n            [href]=\"forgotPasswordConfig.url\"\n            [target]=\"forgotPasswordConfig.target || '_self'\"\n            [rel]=\"\n              forgotPasswordConfig.target === '_blank'\n                ? 'noopener noreferrer'\n                : null\n            \"\n            [ngStyle]=\"forgotPasswordConfig.style\"\n            [class]=\"forgotPasswordConfig.styleClass || 'forgot-password-link'\"\n          >\n            {{ forgotPasswordConfig.text }}\n          </a>\n        </div>\n      }\n    }\n\n    @if (visibleAdditionalContent.length > 0) {\n      <div class=\"additional-content-list\">\n        @for (item of visibleAdditionalContent; track item.id || $index) {\n          <div\n            class=\"additional-content-item\"\n            [ngClass]=\"getAdditionalContentClass(item)\"\n            [ngStyle]=\"item.style\"\n          >\n            @switch (item.type) {\n              @case (\"link\") {\n                @if (item.linkText && item.url) {\n                  <a\n                    [href]=\"item.url\"\n                    [target]=\"item.target || '_self'\"\n                    [rel]=\"getLinkRel(item)\"\n                    [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                    [ngStyle]=\"item.linkStyle\"\n                  >\n                    {{ item.linkText }}\n                  </a>\n                }\n              }\n\n              @case (\"text-with-link\") {\n                @if (\n                  item.linkPosition === \"before\" && item.linkText && item.url\n                ) {\n                  <a\n                    [href]=\"item.url\"\n                    [target]=\"item.target || '_self'\"\n                    [rel]=\"getLinkRel(item)\"\n                    [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                    [ngStyle]=\"item.linkStyle\"\n                  >\n                    {{ item.linkText }}\n                  </a>\n\n                  @if (item.text) {\n                    <span class=\"additional-content-text\">\n                      {{ item.text }}\n                    </span>\n                  }\n                } @else {\n                  @if (item.text) {\n                    <span class=\"additional-content-text\">\n                      {{ item.text }}\n                    </span>\n                  }\n\n                  @if (item.linkText && item.url) {\n                    <a\n                      [href]=\"item.url\"\n                      [target]=\"item.target || '_self'\"\n                      [rel]=\"getLinkRel(item)\"\n                      [class]=\"item.linkStyleClass || 'additional-content-link'\"\n                      [ngStyle]=\"item.linkStyle\"\n                    >\n                      {{ item.linkText }}\n                    </a>\n                  }\n                }\n              }\n\n              @default {\n                @if (item.text) {\n                  <span class=\"additional-content-text\">\n                    {{ item.text }}\n                  </span>\n                }\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </form>\n\n  <div class=\"login-footer\">\n    {{ loginPageConfig.footer?.version }}\n\n    <span>\n      {{ loginPageConfig.footer?.copyright }}\n    </span>\n  </div>\n</pt-card>\n", styles: [":host{display:block;width:100%;min-width:0}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.logo-container img{display:block;max-width:100%;object-fit:contain}.title-container{margin-bottom:1.25rem;text-align:center}.title-container h1{margin:0;line-height:1.25}.form-container{width:100%}.field{display:flex;flex-direction:column;width:100%;margin-bottom:1.25rem}.error-message{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.75rem .875rem;color:var(--p-message-error-color, #b91c1c);background:var(--p-message-error-background, #fef2f2);border:1px solid var(--p-message-error-border-color, #fecaca);border-radius:var(--p-content-border-radius, .5rem);font-size:.875rem;line-height:1.4;text-align:center}.submit-btn{display:flex;justify-content:center;width:100%}:host ::ng-deep .submit-btn pt-button{display:block;width:100%}:host ::ng-deep .submit-btn p-button,:host ::ng-deep .submit-btn p-button button{width:100%}.forgot-password-container{display:flex;width:100%;box-sizing:border-box;margin-top:.875rem;margin-bottom:0;font-size:.875rem;line-height:1.4}.forgot-password-left{justify-content:flex-start;text-align:left}.forgot-password-center{justify-content:center;text-align:center}.forgot-password-right{justify-content:flex-end;text-align:right}.forgot-password-link,.additional-content-link{color:var(--p-primary-color, #2563eb);font-size:.875rem;font-weight:500;line-height:1.4;text-decoration:none;cursor:pointer;transition:color .16s ease,text-decoration-color .16s ease}.forgot-password-link:hover,.additional-content-link:hover{color:var(--p-primary-hover-color, #1d4ed8);text-decoration:underline;text-underline-offset:.2rem}.forgot-password-link:focus-visible,.additional-content-link:focus-visible{outline:2px solid var(--p-primary-color, #2563eb);outline-offset:.2rem;border-radius:.2rem}.additional-content-list{display:flex;flex-direction:column;width:100%;margin-top:1rem;gap:.55rem}.forgot-password-container+.additional-content-list{margin-top:.75rem}.additional-content-item{display:flex;flex-wrap:wrap;align-items:baseline;width:100%;box-sizing:border-box;gap:.3rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.875rem;line-height:1.45}.additional-content-left{justify-content:flex-start;text-align:left}.additional-content-center{justify-content:center;text-align:center}.additional-content-right{justify-content:flex-end;text-align:right}.additional-content-text{color:inherit}.login-footer{margin-top:1.25rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.8rem;line-height:1.4;text-align:center}.login-footer span{display:block;margin-top:.25rem}:host-context(.p-dark) .error-message,:host-context(.app-dark) .error-message,:host-context(.dark) .error-message,:host-context(.dark-mode) .error-message,:host-context([data-theme=\"dark\"]) .error-message{color:var(--p-message-error-color, #fca5a5);background:var(--p-message-error-background, rgba(127, 29, 29, .25));border-color:var(--p-message-error-border-color, rgba(248, 113, 113, .4))}:host-context(.p-dark) .forgot-password-link,:host-context(.app-dark) .forgot-password-link,:host-context(.dark) .forgot-password-link,:host-context(.dark-mode) .forgot-password-link,:host-context([data-theme=\"dark\"]) .forgot-password-link,:host-context(.p-dark) .additional-content-link,:host-context(.app-dark) .additional-content-link,:host-context(.dark) .additional-content-link,:host-context(.dark-mode) .additional-content-link,:host-context([data-theme=\"dark\"]) .additional-content-link{color:var(--p-primary-color, #60a5fa)}:host-context(.p-dark) .forgot-password-link:hover,:host-context(.app-dark) .forgot-password-link:hover,:host-context(.dark) .forgot-password-link:hover,:host-context(.dark-mode) .forgot-password-link:hover,:host-context([data-theme=\"dark\"]) .forgot-password-link:hover,:host-context(.p-dark) .additional-content-link:hover,:host-context(.app-dark) .additional-content-link:hover,:host-context(.dark) .additional-content-link:hover,:host-context(.dark-mode) .additional-content-link:hover,:host-context([data-theme=\"dark\"]) .additional-content-link:hover{color:var(--p-primary-hover-color, #93c5fd)}:host-context(.p-dark) .additional-content-item,:host-context(.app-dark) .additional-content-item,:host-context(.dark) .additional-content-item,:host-context(.dark-mode) .additional-content-item,:host-context([data-theme=\"dark\"]) .additional-content-item,:host-context(.p-dark) .login-footer,:host-context(.app-dark) .login-footer,:host-context(.dark) .login-footer,:host-context(.dark-mode) .login-footer,:host-context([data-theme=\"dark\"]) .login-footer{color:var(--p-text-muted-color, var(--text-color-secondary, #cbd5e1))}@media(max-width:768px){:host ::ng-deep pt-card{width:100%;max-width:100%}.submit-btn{min-width:100%}.forgot-password-container{margin-top:.75rem}.additional-content-list{margin-top:.875rem}.forgot-password-container+.additional-content-list{margin-top:.65rem}}@media(max-width:480px){.logo-container,.title-container,.field{margin-bottom:1rem}.forgot-password-container,.forgot-password-link,.additional-content-item,.additional-content-link{font-size:.82rem}.additional-content-list{gap:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PTCardModule }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "ngmodule", type: PTButtonModule }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }, { kind: "ngmodule", type: PTTextInputModule }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTLoginCardComponent, decorators: [{
             type: Component,
@@ -8541,6 +8557,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 type: Input
             }], loginErrorMessage: [{
                 type: Input
+            }], loginLoading: [{
+                type: Input
             }], loginSubmit: [{
                 type: Output
             }] } });
@@ -8548,6 +8566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 class PTLoginPageComponent {
     constructor() {
         this.loginErrorMessage = null;
+        this.loginLoading = false;
         this.loginSubmit = new EventEmitter();
         this.defaultCardConfig = {
             borderRadius: '0',
@@ -8562,12 +8581,15 @@ class PTLoginPageComponent {
     ngOnInit() {
         this.applyDefaultConfigs();
     }
+    onLoginSubmit(loginModel) {
+        if (this.loginLoading) {
+            return;
+        }
+        this.loginSubmit.emit(loginModel);
+    }
     applyDefaultConfigs() {
-        // Apply defaults to centerCardConfig
         this.loginPageConfig.centerCardConfig = this.applyDefaults(this.loginPageConfig.centerCardConfig);
-        // Apply defaults to leftCardConfig
         this.loginPageConfig.leftCardConfig = this.applyDefaults(this.loginPageConfig.leftCardConfig);
-        // Apply defaults to rightCardConfig
         this.loginPageConfig.rightCardConfig = this.applyDefaults(this.loginPageConfig.rightCardConfig);
     }
     applyDefaults(config) {
@@ -8576,19 +8598,18 @@ class PTLoginPageComponent {
             ...(config || {}),
         };
     }
-    onLoginSubmit(loginModel) {
-        this.loginSubmit.emit(loginModel);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTLoginPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTLoginPageComponent, isStandalone: false, selector: "pt-login-page", inputs: { loginPageConfig: "loginPageConfig", loginErrorMessage: "loginErrorMessage" }, outputs: { loginSubmit: "loginSubmit" }, ngImport: i0, template: "<!-- Center Position -->\n<ng-container>\n  @if (loginPageConfig.position === 'center') {\n    <div class=\"center-container\">\n      @if (loginPageConfig.centerCardConfig) {\n        <pt-card\n          [config]=\"loginPageConfig.centerCardConfig\"\n          >\n          <pt-login-card\n            [loginErrorMessage]=\"loginErrorMessage\"\n            [loginPageConfig]=\"loginPageConfig\"\n            (loginSubmit)=\"onLoginSubmit($event)\"\n          ></pt-login-card>\n        </pt-card>\n      }\n    </div>\n  }\n  <!-- Left and Right Positions -->\n  @if (\n    loginPageConfig.position === 'left' ||\n    loginPageConfig.position === 'right'\n    ) {\n    <div\n      class=\"left-right-container\"\n      >\n      <!-- Left Card -->\n      @if (loginPageConfig.leftCardConfig) {\n        <pt-card\n          [config]=\"loginPageConfig.leftCardConfig\"\n          >\n          @if (loginPageConfig.position === 'left') {\n            <pt-login-card\n              [loginErrorMessage]=\"loginErrorMessage\"\n              [loginPageConfig]=\"loginPageConfig\"\n              (loginSubmit)=\"onLoginSubmit($event)\"\n            ></pt-login-card>\n          }\n        </pt-card>\n      }\n      <!-- Right Card -->\n      @if (loginPageConfig.rightCardConfig) {\n        <pt-card\n          [config]=\"loginPageConfig.rightCardConfig\"\n          >\n          @if (loginPageConfig.position === 'right') {\n            <pt-login-card\n              [loginErrorMessage]=\"loginErrorMessage\"\n              [loginPageConfig]=\"loginPageConfig\"\n              (loginSubmit)=\"onLoginSubmit($event)\"\n            ></pt-login-card>\n          }\n        </pt-card>\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".left-right-container{display:flex;height:100vh;width:100%}.left-right-container pt-card{flex:1;max-width:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;margin:0;padding:0;box-sizing:border-box;overflow:hidden}.center-container pt-card{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;box-sizing:border-box}.center-container pt-card pt-login-card{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:16px;box-sizing:border-box;margin:0}\n"], dependencies: [{ kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTLoginCardComponent, selector: "pt-login-card", inputs: ["loginPageConfig", "loginErrorMessage"], outputs: ["loginSubmit"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTLoginPageComponent, isStandalone: false, selector: "pt-login-page", inputs: { loginPageConfig: "loginPageConfig", loginErrorMessage: "loginErrorMessage", loginLoading: "loginLoading" }, outputs: { loginSubmit: "loginSubmit" }, ngImport: i0, template: "<!-- Center Position -->\n<ng-container>\n  @if (loginPageConfig.position === \"center\") {\n    <div class=\"center-container\">\n      @if (loginPageConfig.centerCardConfig) {\n        <pt-card [config]=\"loginPageConfig.centerCardConfig\">\n          <pt-login-card\n            [loginErrorMessage]=\"loginErrorMessage\"\n            [loginLoading]=\"loginLoading\"\n            [loginPageConfig]=\"loginPageConfig\"\n            (loginSubmit)=\"onLoginSubmit($event)\"\n          ></pt-login-card>\n        </pt-card>\n      }\n    </div>\n  }\n\n  <!-- Left and Right Positions -->\n  @if (\n    loginPageConfig.position === \"left\" || loginPageConfig.position === \"right\"\n  ) {\n    <div class=\"left-right-container\">\n      <!-- Left Card -->\n      @if (loginPageConfig.leftCardConfig) {\n        <pt-card [config]=\"loginPageConfig.leftCardConfig\">\n          @if (loginPageConfig.position === \"left\") {\n            <pt-login-card\n              [loginErrorMessage]=\"loginErrorMessage\"\n              [loginLoading]=\"loginLoading\"\n              [loginPageConfig]=\"loginPageConfig\"\n              (loginSubmit)=\"onLoginSubmit($event)\"\n            ></pt-login-card>\n          }\n        </pt-card>\n      }\n\n      <!-- Right Card -->\n      @if (loginPageConfig.rightCardConfig) {\n        <pt-card [config]=\"loginPageConfig.rightCardConfig\">\n          @if (loginPageConfig.position === \"right\") {\n            <pt-login-card\n              [loginErrorMessage]=\"loginErrorMessage\"\n              [loginLoading]=\"loginLoading\"\n              [loginPageConfig]=\"loginPageConfig\"\n              (loginSubmit)=\"onLoginSubmit($event)\"\n            ></pt-login-card>\n          }\n        </pt-card>\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".left-right-container{display:flex;height:100vh;width:100%}.left-right-container pt-card{flex:1;max-width:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;margin:0;padding:0;box-sizing:border-box;overflow:hidden}.center-container pt-card{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;box-sizing:border-box}.center-container pt-card pt-login-card{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:16px;box-sizing:border-box;margin:0}\n"], dependencies: [{ kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTLoginCardComponent, selector: "pt-login-card", inputs: ["loginPageConfig", "loginErrorMessage", "loginLoading"], outputs: ["loginSubmit"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTLoginPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-login-page', standalone: false, template: "<!-- Center Position -->\n<ng-container>\n  @if (loginPageConfig.position === 'center') {\n    <div class=\"center-container\">\n      @if (loginPageConfig.centerCardConfig) {\n        <pt-card\n          [config]=\"loginPageConfig.centerCardConfig\"\n          >\n          <pt-login-card\n            [loginErrorMessage]=\"loginErrorMessage\"\n            [loginPageConfig]=\"loginPageConfig\"\n            (loginSubmit)=\"onLoginSubmit($event)\"\n          ></pt-login-card>\n        </pt-card>\n      }\n    </div>\n  }\n  <!-- Left and Right Positions -->\n  @if (\n    loginPageConfig.position === 'left' ||\n    loginPageConfig.position === 'right'\n    ) {\n    <div\n      class=\"left-right-container\"\n      >\n      <!-- Left Card -->\n      @if (loginPageConfig.leftCardConfig) {\n        <pt-card\n          [config]=\"loginPageConfig.leftCardConfig\"\n          >\n          @if (loginPageConfig.position === 'left') {\n            <pt-login-card\n              [loginErrorMessage]=\"loginErrorMessage\"\n              [loginPageConfig]=\"loginPageConfig\"\n              (loginSubmit)=\"onLoginSubmit($event)\"\n            ></pt-login-card>\n          }\n        </pt-card>\n      }\n      <!-- Right Card -->\n      @if (loginPageConfig.rightCardConfig) {\n        <pt-card\n          [config]=\"loginPageConfig.rightCardConfig\"\n          >\n          @if (loginPageConfig.position === 'right') {\n            <pt-login-card\n              [loginErrorMessage]=\"loginErrorMessage\"\n              [loginPageConfig]=\"loginPageConfig\"\n              (loginSubmit)=\"onLoginSubmit($event)\"\n            ></pt-login-card>\n          }\n        </pt-card>\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".left-right-container{display:flex;height:100vh;width:100%}.left-right-container pt-card{flex:1;max-width:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;margin:0;padding:0;box-sizing:border-box;overflow:hidden}.center-container pt-card{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;box-sizing:border-box}.center-container pt-card pt-login-card{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:16px;box-sizing:border-box;margin:0}\n"] }]
+            args: [{ selector: 'pt-login-page', standalone: false, template: "<!-- Center Position -->\n<ng-container>\n  @if (loginPageConfig.position === \"center\") {\n    <div class=\"center-container\">\n      @if (loginPageConfig.centerCardConfig) {\n        <pt-card [config]=\"loginPageConfig.centerCardConfig\">\n          <pt-login-card\n            [loginErrorMessage]=\"loginErrorMessage\"\n            [loginLoading]=\"loginLoading\"\n            [loginPageConfig]=\"loginPageConfig\"\n            (loginSubmit)=\"onLoginSubmit($event)\"\n          ></pt-login-card>\n        </pt-card>\n      }\n    </div>\n  }\n\n  <!-- Left and Right Positions -->\n  @if (\n    loginPageConfig.position === \"left\" || loginPageConfig.position === \"right\"\n  ) {\n    <div class=\"left-right-container\">\n      <!-- Left Card -->\n      @if (loginPageConfig.leftCardConfig) {\n        <pt-card [config]=\"loginPageConfig.leftCardConfig\">\n          @if (loginPageConfig.position === \"left\") {\n            <pt-login-card\n              [loginErrorMessage]=\"loginErrorMessage\"\n              [loginLoading]=\"loginLoading\"\n              [loginPageConfig]=\"loginPageConfig\"\n              (loginSubmit)=\"onLoginSubmit($event)\"\n            ></pt-login-card>\n          }\n        </pt-card>\n      }\n\n      <!-- Right Card -->\n      @if (loginPageConfig.rightCardConfig) {\n        <pt-card [config]=\"loginPageConfig.rightCardConfig\">\n          @if (loginPageConfig.position === \"right\") {\n            <pt-login-card\n              [loginErrorMessage]=\"loginErrorMessage\"\n              [loginLoading]=\"loginLoading\"\n              [loginPageConfig]=\"loginPageConfig\"\n              (loginSubmit)=\"onLoginSubmit($event)\"\n            ></pt-login-card>\n          }\n        </pt-card>\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".left-right-container{display:flex;height:100vh;width:100%}.left-right-container pt-card{flex:1;max-width:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;margin:0;padding:0;box-sizing:border-box;overflow:hidden}.center-container pt-card{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;box-sizing:border-box}.center-container pt-card pt-login-card{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:16px;box-sizing:border-box;margin:0}\n"] }]
         }], propDecorators: { loginPageConfig: [{
                 type: Input
             }], loginErrorMessage: [{
                 type: Input
+            }], loginLoading: [{
+                type: Input
             }], loginSubmit: [{
                 type: Output
             }] } });