ng-prime-tools 1.1.1 → 1.1.3

package/fesm2022/ng-prime-tools.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Pipe, EventEmitter, ViewChild, Output, Input, Component, NgModule, Injectable, Inject, HostListener, ContentChild, HostBinding } from '@angular/core';
+import { Pipe, EventEmitter, ViewChild, Output, Input, Component, NgModule, Injectable, Inject, HostListener, ContentChild, Directive, ContentChildren, ChangeDetectionStrategy, HostBinding } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule, DOCUMENT } from '@angular/common';
+import { CommonModule, DOCUMENT, NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormGroup, FormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i3 from 'primeng/table';
@@ -61,6 +61,8 @@ import * as i2$2 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
 import * as i2$3 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
+import * as i2$4 from 'primeng/accordion';
+import { AccordionModule } from 'primeng/accordion';
 import * as i5$1 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
 
@@ -1460,11 +1462,11 @@ class PTAdvancedPrimeTableComponent {
         return styles;
     }
     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" }, 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 }], usesOnChanges: true, ngImport: i0, template: "<div #tableContainer class=\"pt-advanced-prime-table table-container\">\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    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\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        @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              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"clear(dt)\"\n              title=\"Clear filters\"\n            ></button>\n          }\n          @if (hasExportExcel) {\n            <button\n              pButton\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"exportExcel()\"\n              title=\"Export to Excel\"\n            ></button>\n          }\n          @if (hasExportPDF) {\n            <button\n              pButton\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"exportPdf()\"\n              title=\"Export to PDF\"\n            ></button>\n          }\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                (input)=\"filterGlobal($event)\"\n                placeholder=\"Search keyword\"\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        @for (col of columns; track col) {\n          @if (!col.children) {\n            <th\n              [pSortableColumn]=\"col.code\"\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              @if (isSortable && col.isSortable !== false) {\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngStyle]=\"getCellInnerStyle(col, '10px')\"\n                >\n                  <span [ngClass]=\"getHeaderTitleClass(col)\">\n                    {{ col.title }}\n                  </span>\n\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon [field]=\"col.code\" />\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                              <div>\n                                @if (\n                                  getComposedFieldType(col, composedName) ===\n                                  TableTypeEnum.STRING\n                                ) {\n                                  <p-multiSelect\n                                    [options]=\"filters[composedName]?.options\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [ngModel]=\"\n                                      filters[composedName]?.value ?? []\n                                    \"\n                                    (ngModelChange)=\"\n                                      onComposedFilterValueChange(\n                                        col,\n                                        composedName,\n                                        $event\n                                      );\n                                      filter($event ?? [])\n                                    \"\n                                    [placeholder]=\"\n                                      filters[composedName]?.placeholder\n                                    \"\n                                    display=\"chip\"\n                                  >\n                                    <ng-template let-item pTemplate=\"item\">\n                                      <div class=\"custom-multiselect-item\">\n                                        @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                                }\n                              </div>\n                            }\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                      @if (col.type !== TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          [type]=\"getColumnFilterType(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                            as value\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                                (ngModelChange)=\"\n                                  onNumberFilterChange(col.code!, $event)\n                                \"\n                                placeholder=\"Enter a number\"\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                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event)\n                              \"\n                              dateFormat=\"dd/mm/yy\"\n                              placeholder=\"Choose a date\"\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                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event ?? [])\n                              \"\n                              display=\"chip\"\n                              placeholder=\"Choose option\"\n                              class=\"custom-multiselect\"\n                            ></p-multiSelect>\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                    }\n                  </div>\n                </div>\n              } @else {\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngStyle]=\"getCellInnerStyle(col, '10px')\"\n                >\n                  <span [ngClass]=\"getHeaderTitleClass(col)\">\n                    {{ col.title }}\n                  </span>\n\n                  @if (hasColumnFilter && col.isFilter !== false) {\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                        getColumnFilterType(col) !== 'multiSelect'\n                      \"\n                      [showOperator]=\"\n                        getColumnFilterType(col) !== 'multiSelect'\n                      \"\n                      [matchMode]=\"\n                        getColumnFilterType(col) === 'multiSelect'\n                          ? 'in'\n                          : undefined\n                      \"\n                      (onClear)=\"onFilterClear(col.code!)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-value\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-datepicker\n                          [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event)\n                          \"\n                          dateFormat=\"dd/mm/yy\"\n                        ></p-datepicker>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-value\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          optionLabel=\"label\"\n                          optionValue=\"value\"\n                          [ngModel]=\"\n                            latestFilterValues[col.code!] ?? value ?? []\n                          \"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event ?? [])\n                          \"\n                          display=\"chip\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  }\n                </div>\n              }\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          @for (col of columns; track col) {\n            @if (col.children) {\n              @for (child of col.children; track child) {\n                <th\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngStyle]=\"getHeaderCellStyle(child)\"\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        >\n          @if (canUseRowReorder()) {\n            <td\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [style.text-align]=\"'center'\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            >\n              <div\n                style=\"\n                  display: inline-flex;\n                  align-items: center;\n                  justify-content: center;\n                  gap: 0.25rem;\n                  white-space: nowrap;\n                \"\n              >\n                <span\n                  class=\"row-drag-handle\"\n                  (pointerdown)=\"onRowPointerDown($event, data)\"\n                  style=\"display: inline-flex; align-items: center\"\n                  title=\"D\u00E9placer la ligne\"\n                >\n                  <i class=\"pi pi-bars\"></i>\n                </span>\n\n                @if (showRowMoveArrows) {\n                  <div\n                    style=\"display: inline-flex; flex-direction: column; gap: 0\"\n                  >\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          @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                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                            [options]=\"optionValues\"\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 {\n                      @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                              (ngModelChange)=\"\n                                changeHandler(data.id, col.code, $event)\n                              \"\n                              [dateFormat]=\"'dd/mm/yy'\"\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                    }\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                          pTooltip=\"Supprimer\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          type=\"button\"\n                          icon=\"pi pi-trash\"\n                          (click)=\"Delete(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                      }\n                      @if (isEdit) {\n                        <div>\n                          @if (!editing) {\n                            <button\n                              pInitEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Modifier\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-pencil\"\n                              (click)=\"initEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                          @if (editing) {\n                            <button\n                              pSaveEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Enregistrer\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-check\"\n                              (click)=\"saveEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                          @if (editing) {\n                            <button\n                              pCancelEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Annuler\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-times\"\n                              (click)=\"cancelEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                        </div>\n                      }\n                      @for (act of customActions; track act) {\n                        @if (isActionVisible(act, data)) {\n                          <button\n                            pButton\n                            pRipple\n                            [pTooltip]=\"act.tooltip || ''\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\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                            (click)=\"onCustomActionClick(act, data)\"\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 &&\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                            @if (\n                              col.composedTypes &&\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 {\n                        @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 {\n                          @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 {\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                              @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 {\n                                @if (\n                                  col.type === TableTypeEnum.DATE ||\n                                  col.type === TableTypeEnum.DATETIME\n                                ) {\n                                  @if (col.type === TableTypeEnum.DATE) {\n                                    {{\n                                      formatDateWithColumn(\n                                        parseAnyDate(data[col.code!]),\n                                        col\n                                      )\n                                    }}\n                                  }\n                                  @if (col.type === TableTypeEnum.DATETIME) {\n                                    {{\n                                      formatDateTimeWithColumn(\n                                        parseAnyDate(data[col.code!]),\n                                        col\n                                      )\n                                    }}\n                                  }\n                                } @else {\n                                  @if (\n                                    [\n                                      TableTypeEnum.STRING,\n                                      TableTypeEnum.MULTISELECT,\n                                    ].includes(col.type!)\n                                  ) {\n                                    {{ data[col.code!] }}\n                                  }\n                                }\n                              }\n                            }\n                          }\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                          {{ child.code ? data[child.code] : \"\" }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      @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                    }\n                  </div>\n                </td>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{flex:1}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-.8rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:block;width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{width:100%;height:100%;min-height:180px;display:flex;align-items:center;justify-content:center}.pt-advanced-prime-table .empty-message{text-align:center;color:#888;font-size:1.2rem}.pt-advanced-prime-table .empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}.pt-advanced-prime-table th{white-space:normal;word-wrap:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right{width:100%;display:flex;align-items:center}.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{font-size:.72rem;font-weight:800;padding:.2rem .55rem;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{width:100%;min-width:160px;display:flex;align-items:center;gap:.5rem}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1;width:100%;min-width:120px;height:.75rem!important;background:#e5e7eb!important;border-radius:999px;overflow:hidden}.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{min-width:38px;font-size:.72rem;font-weight:800;color:#334155;text-align:right}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{text-align:center!important;justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;padding:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container{width:100%;display:flex;justify-content:center!important;align-items:center!important;gap:.35rem}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{padding:.25rem!important;min-width:22px!important;height:22px!important}.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 .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{opacity:.55;cursor:grabbing!important}.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}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before:before{content:\"\";position:absolute;z-index:30;top:-2px;left:0;right:0;height:3px;background:var(--primary-color, #3b82f6);border-radius:999px;pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after:after{content:\"\";position:absolute;z-index:30;bottom:-2px;left:0;right:0;height:3px;background:var(--primary-color, #3b82f6);border-radius:999px;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}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{border-bottom:3px solid var(--primary-color, #3b82f6)!important}.pt-advanced-prime-table ::ng-deep .row-drag-handle{width:2rem;min-width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;border-radius:6px}.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{font-size:.95rem;color:#64748b}.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;text-align:center!important;white-space:nowrap;padding:.25rem .4rem!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.15rem}.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{opacity:.35;cursor:not-allowed}.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-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{background:#3b82f61a!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{box-shadow:inset 0 0 0 1px #3b82f673}.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}\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.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: i8.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: i9.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i12.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: i13.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" }, 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 }], usesOnChanges: true, ngImport: i0, template: "<div #tableContainer class=\"pt-advanced-prime-table table-container\">\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    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\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        @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              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"clear(dt)\"\n              title=\"Clear filters\"\n            ></button>\n          }\n          @if (hasExportExcel) {\n            <button\n              pButton\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"exportExcel()\"\n              title=\"Export to Excel\"\n            ></button>\n          }\n          @if (hasExportPDF) {\n            <button\n              pButton\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"exportPdf()\"\n              title=\"Export to PDF\"\n            ></button>\n          }\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                (input)=\"filterGlobal($event)\"\n                placeholder=\"Search keyword\"\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        @for (col of columns; track col) {\n          @if (!col.children) {\n            <th\n              [pSortableColumn]=\"col.code\"\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              @if (isSortable && col.isSortable !== false) {\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngStyle]=\"getCellInnerStyle(col, '10px')\"\n                >\n                  <span [ngClass]=\"getHeaderTitleClass(col)\">\n                    {{ col.title }}\n                  </span>\n\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon [field]=\"col.code\" />\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                              <div>\n                                @if (\n                                  getComposedFieldType(col, composedName) ===\n                                  TableTypeEnum.STRING\n                                ) {\n                                  <p-multiSelect\n                                    [options]=\"filters[composedName]?.options\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [ngModel]=\"\n                                      filters[composedName]?.value ?? []\n                                    \"\n                                    (ngModelChange)=\"\n                                      onComposedFilterValueChange(\n                                        col,\n                                        composedName,\n                                        $event\n                                      );\n                                      filter($event ?? [])\n                                    \"\n                                    [placeholder]=\"\n                                      filters[composedName]?.placeholder\n                                    \"\n                                    display=\"chip\"\n                                  >\n                                    <ng-template let-item pTemplate=\"item\">\n                                      <div class=\"custom-multiselect-item\">\n                                        @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                                }\n                              </div>\n                            }\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                      @if (col.type !== TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          [type]=\"getColumnFilterType(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                            as value\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                                (ngModelChange)=\"\n                                  onNumberFilterChange(col.code!, $event)\n                                \"\n                                placeholder=\"Enter a number\"\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                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event)\n                              \"\n                              dateFormat=\"dd/mm/yy\"\n                              placeholder=\"Choose a date\"\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                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event ?? [])\n                              \"\n                              display=\"chip\"\n                              placeholder=\"Choose option\"\n                              class=\"custom-multiselect\"\n                            ></p-multiSelect>\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                    }\n                  </div>\n                </div>\n              } @else {\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngStyle]=\"getCellInnerStyle(col, '10px')\"\n                >\n                  <span [ngClass]=\"getHeaderTitleClass(col)\">\n                    {{ col.title }}\n                  </span>\n\n                  @if (hasColumnFilter && col.isFilter !== false) {\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                        getColumnFilterType(col) !== 'multiSelect'\n                      \"\n                      [showOperator]=\"\n                        getColumnFilterType(col) !== 'multiSelect'\n                      \"\n                      [matchMode]=\"\n                        getColumnFilterType(col) === 'multiSelect'\n                          ? 'in'\n                          : undefined\n                      \"\n                      (onClear)=\"onFilterClear(col.code!)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-value\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-datepicker\n                          [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event)\n                          \"\n                          dateFormat=\"dd/mm/yy\"\n                        ></p-datepicker>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-value\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          optionLabel=\"label\"\n                          optionValue=\"value\"\n                          [ngModel]=\"\n                            latestFilterValues[col.code!] ?? value ?? []\n                          \"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event ?? [])\n                          \"\n                          display=\"chip\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  }\n                </div>\n              }\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          @for (col of columns; track col) {\n            @if (col.children) {\n              @for (child of col.children; track child) {\n                <th\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngStyle]=\"getHeaderCellStyle(child)\"\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        >\n          @if (canUseRowReorder()) {\n            <td\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [style.text-align]=\"'center'\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            >\n              <div\n                style=\"\n                  display: inline-flex;\n                  align-items: center;\n                  justify-content: center;\n                  gap: 0.25rem;\n                  white-space: nowrap;\n                \"\n              >\n                <span\n                  class=\"row-drag-handle\"\n                  (pointerdown)=\"onRowPointerDown($event, data)\"\n                  style=\"display: inline-flex; align-items: center\"\n                  title=\"D\u00E9placer la ligne\"\n                >\n                  <i class=\"pi pi-bars\"></i>\n                </span>\n\n                @if (showRowMoveArrows) {\n                  <div\n                    style=\"display: inline-flex; flex-direction: column; gap: 0\"\n                  >\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          @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                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                            [options]=\"optionValues\"\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 {\n                      @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                              (ngModelChange)=\"\n                                changeHandler(data.id, col.code, $event)\n                              \"\n                              [dateFormat]=\"'dd/mm/yy'\"\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                    }\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                          pTooltip=\"Supprimer\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          type=\"button\"\n                          icon=\"pi pi-trash\"\n                          (click)=\"Delete(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                      }\n                      @if (isEdit) {\n                        <div>\n                          @if (!editing) {\n                            <button\n                              pInitEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Modifier\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-pencil\"\n                              (click)=\"initEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                          @if (editing) {\n                            <button\n                              pSaveEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Enregistrer\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-check\"\n                              (click)=\"saveEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                          @if (editing) {\n                            <button\n                              pCancelEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Annuler\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-times\"\n                              (click)=\"cancelEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                        </div>\n                      }\n                      @for (act of customActions; track act) {\n                        @if (isActionVisible(act, data)) {\n                          <button\n                            pButton\n                            pRipple\n                            [pTooltip]=\"act.tooltip || ''\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\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                            (click)=\"onCustomActionClick(act, data)\"\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 &&\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                            @if (\n                              col.composedTypes &&\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 {\n                        @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 {\n                          @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 {\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                              @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 {\n                                @if (\n                                  col.type === TableTypeEnum.DATE ||\n                                  col.type === TableTypeEnum.DATETIME\n                                ) {\n                                  @if (col.type === TableTypeEnum.DATE) {\n                                    {{\n                                      formatDateWithColumn(\n                                        parseAnyDate(data[col.code!]),\n                                        col\n                                      )\n                                    }}\n                                  }\n                                  @if (col.type === TableTypeEnum.DATETIME) {\n                                    {{\n                                      formatDateTimeWithColumn(\n                                        parseAnyDate(data[col.code!]),\n                                        col\n                                      )\n                                    }}\n                                  }\n                                } @else {\n                                  @if (\n                                    [\n                                      TableTypeEnum.STRING,\n                                      TableTypeEnum.MULTISELECT,\n                                    ].includes(col.type!)\n                                  ) {\n                                    {{ data[col.code!] }}\n                                  }\n                                }\n                              }\n                            }\n                          }\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                          {{ child.code ? data[child.code] : \"\" }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      @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                    }\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:auto;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{display:flex;align-items:center;justify-content:space-between;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{flex:1 1 auto;min-width:0}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;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{min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep p-inputicon{position:relative;z-index:2;margin-right:-.8rem}.pt-advanced-prime-table ::ng-deep .p-inputtext{max-width:100%;padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{margin-left:1rem;cursor:pointer}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.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{white-space:normal;overflow-wrap:break-word}.pt-advanced-prime-table td{white-space:nowrap}.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:center;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:160px}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1 1 auto;width:100%;min-width:120px;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{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;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;gap:.5rem;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{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-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)}}\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.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: i8.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: i9.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i12.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: i13.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  <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    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\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        @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              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"clear(dt)\"\n              title=\"Clear filters\"\n            ></button>\n          }\n          @if (hasExportExcel) {\n            <button\n              pButton\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"exportExcel()\"\n              title=\"Export to Excel\"\n            ></button>\n          }\n          @if (hasExportPDF) {\n            <button\n              pButton\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"exportPdf()\"\n              title=\"Export to PDF\"\n            ></button>\n          }\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                (input)=\"filterGlobal($event)\"\n                placeholder=\"Search keyword\"\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        @for (col of columns; track col) {\n          @if (!col.children) {\n            <th\n              [pSortableColumn]=\"col.code\"\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              @if (isSortable && col.isSortable !== false) {\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngStyle]=\"getCellInnerStyle(col, '10px')\"\n                >\n                  <span [ngClass]=\"getHeaderTitleClass(col)\">\n                    {{ col.title }}\n                  </span>\n\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon [field]=\"col.code\" />\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                              <div>\n                                @if (\n                                  getComposedFieldType(col, composedName) ===\n                                  TableTypeEnum.STRING\n                                ) {\n                                  <p-multiSelect\n                                    [options]=\"filters[composedName]?.options\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [ngModel]=\"\n                                      filters[composedName]?.value ?? []\n                                    \"\n                                    (ngModelChange)=\"\n                                      onComposedFilterValueChange(\n                                        col,\n                                        composedName,\n                                        $event\n                                      );\n                                      filter($event ?? [])\n                                    \"\n                                    [placeholder]=\"\n                                      filters[composedName]?.placeholder\n                                    \"\n                                    display=\"chip\"\n                                  >\n                                    <ng-template let-item pTemplate=\"item\">\n                                      <div class=\"custom-multiselect-item\">\n                                        @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                                }\n                              </div>\n                            }\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                      @if (col.type !== TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          [type]=\"getColumnFilterType(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                            as value\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                                (ngModelChange)=\"\n                                  onNumberFilterChange(col.code!, $event)\n                                \"\n                                placeholder=\"Enter a number\"\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                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event)\n                              \"\n                              dateFormat=\"dd/mm/yy\"\n                              placeholder=\"Choose a date\"\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                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event ?? [])\n                              \"\n                              display=\"chip\"\n                              placeholder=\"Choose option\"\n                              class=\"custom-multiselect\"\n                            ></p-multiSelect>\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                    }\n                  </div>\n                </div>\n              } @else {\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngStyle]=\"getCellInnerStyle(col, '10px')\"\n                >\n                  <span [ngClass]=\"getHeaderTitleClass(col)\">\n                    {{ col.title }}\n                  </span>\n\n                  @if (hasColumnFilter && col.isFilter !== false) {\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                        getColumnFilterType(col) !== 'multiSelect'\n                      \"\n                      [showOperator]=\"\n                        getColumnFilterType(col) !== 'multiSelect'\n                      \"\n                      [matchMode]=\"\n                        getColumnFilterType(col) === 'multiSelect'\n                          ? 'in'\n                          : undefined\n                      \"\n                      (onClear)=\"onFilterClear(col.code!)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-value\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-datepicker\n                          [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event)\n                          \"\n                          dateFormat=\"dd/mm/yy\"\n                        ></p-datepicker>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-value\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          optionLabel=\"label\"\n                          optionValue=\"value\"\n                          [ngModel]=\"\n                            latestFilterValues[col.code!] ?? value ?? []\n                          \"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event ?? [])\n                          \"\n                          display=\"chip\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  }\n                </div>\n              }\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          @for (col of columns; track col) {\n            @if (col.children) {\n              @for (child of col.children; track child) {\n                <th\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngStyle]=\"getHeaderCellStyle(child)\"\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        >\n          @if (canUseRowReorder()) {\n            <td\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [style.text-align]=\"'center'\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            >\n              <div\n                style=\"\n                  display: inline-flex;\n                  align-items: center;\n                  justify-content: center;\n                  gap: 0.25rem;\n                  white-space: nowrap;\n                \"\n              >\n                <span\n                  class=\"row-drag-handle\"\n                  (pointerdown)=\"onRowPointerDown($event, data)\"\n                  style=\"display: inline-flex; align-items: center\"\n                  title=\"D\u00E9placer la ligne\"\n                >\n                  <i class=\"pi pi-bars\"></i>\n                </span>\n\n                @if (showRowMoveArrows) {\n                  <div\n                    style=\"display: inline-flex; flex-direction: column; gap: 0\"\n                  >\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          @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                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                            [options]=\"optionValues\"\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 {\n                      @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                              (ngModelChange)=\"\n                                changeHandler(data.id, col.code, $event)\n                              \"\n                              [dateFormat]=\"'dd/mm/yy'\"\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                    }\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                          pTooltip=\"Supprimer\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          type=\"button\"\n                          icon=\"pi pi-trash\"\n                          (click)=\"Delete(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                      }\n                      @if (isEdit) {\n                        <div>\n                          @if (!editing) {\n                            <button\n                              pInitEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Modifier\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-pencil\"\n                              (click)=\"initEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                          @if (editing) {\n                            <button\n                              pSaveEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Enregistrer\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-check\"\n                              (click)=\"saveEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                          @if (editing) {\n                            <button\n                              pCancelEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Annuler\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-times\"\n                              (click)=\"cancelEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                        </div>\n                      }\n                      @for (act of customActions; track act) {\n                        @if (isActionVisible(act, data)) {\n                          <button\n                            pButton\n                            pRipple\n                            [pTooltip]=\"act.tooltip || ''\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\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                            (click)=\"onCustomActionClick(act, data)\"\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 &&\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                            @if (\n                              col.composedTypes &&\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 {\n                        @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 {\n                          @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 {\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                              @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 {\n                                @if (\n                                  col.type === TableTypeEnum.DATE ||\n                                  col.type === TableTypeEnum.DATETIME\n                                ) {\n                                  @if (col.type === TableTypeEnum.DATE) {\n                                    {{\n                                      formatDateWithColumn(\n                                        parseAnyDate(data[col.code!]),\n                                        col\n                                      )\n                                    }}\n                                  }\n                                  @if (col.type === TableTypeEnum.DATETIME) {\n                                    {{\n                                      formatDateTimeWithColumn(\n                                        parseAnyDate(data[col.code!]),\n                                        col\n                                      )\n                                    }}\n                                  }\n                                } @else {\n                                  @if (\n                                    [\n                                      TableTypeEnum.STRING,\n                                      TableTypeEnum.MULTISELECT,\n                                    ].includes(col.type!)\n                                  ) {\n                                    {{ data[col.code!] }}\n                                  }\n                                }\n                              }\n                            }\n                          }\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                          {{ child.code ? data[child.code] : \"\" }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      @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                    }\n                  </div>\n                </td>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{flex:1}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-.8rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:block;width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{width:100%;height:100%;min-height:180px;display:flex;align-items:center;justify-content:center}.pt-advanced-prime-table .empty-message{text-align:center;color:#888;font-size:1.2rem}.pt-advanced-prime-table .empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}.pt-advanced-prime-table th{white-space:normal;word-wrap:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right{width:100%;display:flex;align-items:center}.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{font-size:.72rem;font-weight:800;padding:.2rem .55rem;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{width:100%;min-width:160px;display:flex;align-items:center;gap:.5rem}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1;width:100%;min-width:120px;height:.75rem!important;background:#e5e7eb!important;border-radius:999px;overflow:hidden}.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{min-width:38px;font-size:.72rem;font-weight:800;color:#334155;text-align:right}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{text-align:center!important;justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;padding:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container{width:100%;display:flex;justify-content:center!important;align-items:center!important;gap:.35rem}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{padding:.25rem!important;min-width:22px!important;height:22px!important}.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 .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{opacity:.55;cursor:grabbing!important}.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}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before:before{content:\"\";position:absolute;z-index:30;top:-2px;left:0;right:0;height:3px;background:var(--primary-color, #3b82f6);border-radius:999px;pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after:after{content:\"\";position:absolute;z-index:30;bottom:-2px;left:0;right:0;height:3px;background:var(--primary-color, #3b82f6);border-radius:999px;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}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{border-bottom:3px solid var(--primary-color, #3b82f6)!important}.pt-advanced-prime-table ::ng-deep .row-drag-handle{width:2rem;min-width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;border-radius:6px}.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{font-size:.95rem;color:#64748b}.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;text-align:center!important;white-space:nowrap;padding:.25rem .4rem!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.15rem}.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{opacity:.35;cursor:not-allowed}.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-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{background:#3b82f61a!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{box-shadow:inset 0 0 0 1px #3b82f673}.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}\n"] }]
+            args: [{ selector: 'pt-advanced-prime-table', standalone: false, template: "<div #tableContainer class=\"pt-advanced-prime-table table-container\">\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    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\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        @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              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"clear(dt)\"\n              title=\"Clear filters\"\n            ></button>\n          }\n          @if (hasExportExcel) {\n            <button\n              pButton\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"exportExcel()\"\n              title=\"Export to Excel\"\n            ></button>\n          }\n          @if (hasExportPDF) {\n            <button\n              pButton\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"exportPdf()\"\n              title=\"Export to PDF\"\n            ></button>\n          }\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                (input)=\"filterGlobal($event)\"\n                placeholder=\"Search keyword\"\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        @for (col of columns; track col) {\n          @if (!col.children) {\n            <th\n              [pSortableColumn]=\"col.code\"\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              @if (isSortable && col.isSortable !== false) {\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngStyle]=\"getCellInnerStyle(col, '10px')\"\n                >\n                  <span [ngClass]=\"getHeaderTitleClass(col)\">\n                    {{ col.title }}\n                  </span>\n\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon [field]=\"col.code\" />\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                              <div>\n                                @if (\n                                  getComposedFieldType(col, composedName) ===\n                                  TableTypeEnum.STRING\n                                ) {\n                                  <p-multiSelect\n                                    [options]=\"filters[composedName]?.options\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [ngModel]=\"\n                                      filters[composedName]?.value ?? []\n                                    \"\n                                    (ngModelChange)=\"\n                                      onComposedFilterValueChange(\n                                        col,\n                                        composedName,\n                                        $event\n                                      );\n                                      filter($event ?? [])\n                                    \"\n                                    [placeholder]=\"\n                                      filters[composedName]?.placeholder\n                                    \"\n                                    display=\"chip\"\n                                  >\n                                    <ng-template let-item pTemplate=\"item\">\n                                      <div class=\"custom-multiselect-item\">\n                                        @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                                }\n                              </div>\n                            }\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                      @if (col.type !== TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          [type]=\"getColumnFilterType(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                            as value\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                                (ngModelChange)=\"\n                                  onNumberFilterChange(col.code!, $event)\n                                \"\n                                placeholder=\"Enter a number\"\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                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event)\n                              \"\n                              dateFormat=\"dd/mm/yy\"\n                              placeholder=\"Choose a date\"\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                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event ?? [])\n                              \"\n                              display=\"chip\"\n                              placeholder=\"Choose option\"\n                              class=\"custom-multiselect\"\n                            ></p-multiSelect>\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                    }\n                  </div>\n                </div>\n              } @else {\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngStyle]=\"getCellInnerStyle(col, '10px')\"\n                >\n                  <span [ngClass]=\"getHeaderTitleClass(col)\">\n                    {{ col.title }}\n                  </span>\n\n                  @if (hasColumnFilter && col.isFilter !== false) {\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                        getColumnFilterType(col) !== 'multiSelect'\n                      \"\n                      [showOperator]=\"\n                        getColumnFilterType(col) !== 'multiSelect'\n                      \"\n                      [matchMode]=\"\n                        getColumnFilterType(col) === 'multiSelect'\n                          ? 'in'\n                          : undefined\n                      \"\n                      (onClear)=\"onFilterClear(col.code!)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-value\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-datepicker\n                          [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event)\n                          \"\n                          dateFormat=\"dd/mm/yy\"\n                        ></p-datepicker>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-value\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          optionLabel=\"label\"\n                          optionValue=\"value\"\n                          [ngModel]=\"\n                            latestFilterValues[col.code!] ?? value ?? []\n                          \"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event ?? [])\n                          \"\n                          display=\"chip\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  }\n                </div>\n              }\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          @for (col of columns; track col) {\n            @if (col.children) {\n              @for (child of col.children; track child) {\n                <th\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngStyle]=\"getHeaderCellStyle(child)\"\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        >\n          @if (canUseRowReorder()) {\n            <td\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [style.text-align]=\"'center'\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            >\n              <div\n                style=\"\n                  display: inline-flex;\n                  align-items: center;\n                  justify-content: center;\n                  gap: 0.25rem;\n                  white-space: nowrap;\n                \"\n              >\n                <span\n                  class=\"row-drag-handle\"\n                  (pointerdown)=\"onRowPointerDown($event, data)\"\n                  style=\"display: inline-flex; align-items: center\"\n                  title=\"D\u00E9placer la ligne\"\n                >\n                  <i class=\"pi pi-bars\"></i>\n                </span>\n\n                @if (showRowMoveArrows) {\n                  <div\n                    style=\"display: inline-flex; flex-direction: column; gap: 0\"\n                  >\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          @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                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                            [options]=\"optionValues\"\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 {\n                      @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                              (ngModelChange)=\"\n                                changeHandler(data.id, col.code, $event)\n                              \"\n                              [dateFormat]=\"'dd/mm/yy'\"\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                    }\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                          pTooltip=\"Supprimer\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          type=\"button\"\n                          icon=\"pi pi-trash\"\n                          (click)=\"Delete(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                      }\n                      @if (isEdit) {\n                        <div>\n                          @if (!editing) {\n                            <button\n                              pInitEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Modifier\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-pencil\"\n                              (click)=\"initEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                          @if (editing) {\n                            <button\n                              pSaveEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Enregistrer\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-check\"\n                              (click)=\"saveEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                          @if (editing) {\n                            <button\n                              pCancelEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Annuler\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-times\"\n                              (click)=\"cancelEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                        </div>\n                      }\n                      @for (act of customActions; track act) {\n                        @if (isActionVisible(act, data)) {\n                          <button\n                            pButton\n                            pRipple\n                            [pTooltip]=\"act.tooltip || ''\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\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                            (click)=\"onCustomActionClick(act, data)\"\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 &&\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                            @if (\n                              col.composedTypes &&\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 {\n                        @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 {\n                          @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 {\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                              @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 {\n                                @if (\n                                  col.type === TableTypeEnum.DATE ||\n                                  col.type === TableTypeEnum.DATETIME\n                                ) {\n                                  @if (col.type === TableTypeEnum.DATE) {\n                                    {{\n                                      formatDateWithColumn(\n                                        parseAnyDate(data[col.code!]),\n                                        col\n                                      )\n                                    }}\n                                  }\n                                  @if (col.type === TableTypeEnum.DATETIME) {\n                                    {{\n                                      formatDateTimeWithColumn(\n                                        parseAnyDate(data[col.code!]),\n                                        col\n                                      )\n                                    }}\n                                  }\n                                } @else {\n                                  @if (\n                                    [\n                                      TableTypeEnum.STRING,\n                                      TableTypeEnum.MULTISELECT,\n                                    ].includes(col.type!)\n                                  ) {\n                                    {{ data[col.code!] }}\n                                  }\n                                }\n                              }\n                            }\n                          }\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                          {{ child.code ? data[child.code] : \"\" }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      @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                    }\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:auto;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{display:flex;align-items:center;justify-content:space-between;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{flex:1 1 auto;min-width:0}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;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{min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep p-inputicon{position:relative;z-index:2;margin-right:-.8rem}.pt-advanced-prime-table ::ng-deep .p-inputtext{max-width:100%;padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{margin-left:1rem;cursor:pointer}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.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{white-space:normal;overflow-wrap:break-word}.pt-advanced-prime-table td{white-space:nowrap}.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:center;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:160px}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1 1 auto;width:100%;min-width:120px;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{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;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;gap:.5rem;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{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-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)}}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -7652,6 +7654,541 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
+// ng-prime-tools/projects/ng-prime-tools/src/lib/pt-accordion/pt-accordion.config.ts
+/**
+ * Default PrimeIcons icon displayed when an accordion panel is closed.
+ */
+const PT_ACCORDION_DEFAULT_EXPAND_ICON = 'pi pi-chevron-down';
+/**
+ * Default PrimeIcons icon displayed when an accordion panel is open.
+ */
+const PT_ACCORDION_DEFAULT_COLLAPSE_ICON = 'pi pi-chevron-up';
+/**
+ * Default animation duration used by PTAccordion.
+ */
+const PT_ACCORDION_DEFAULT_ANIMATION_DURATION = '200ms';
+/**
+ * Default projected-content minimum width.
+ *
+ * Normal projected content fills the accordion without forcing
+ * horizontal overflow.
+ */
+const PT_ACCORDION_DEFAULT_CONTENT_MIN_WIDTH = '100%';
+/**
+ * Default accordion content height.
+ */
+const PT_ACCORDION_DEFAULT_CONTENT_HEIGHT = 'auto';
+/**
+ * Default horizontal scrolling state.
+ */
+const PT_ACCORDION_DEFAULT_SCROLLABLE_HORIZONTAL = false;
+/**
+ * Default vertical scrolling state.
+ */
+const PT_ACCORDION_DEFAULT_SCROLLABLE_VERTICAL = false;
+/**
+ * Default maximum width applied to an accordion header tag.
+ */
+const PT_ACCORDION_DEFAULT_TAG_MAX_WIDTH = '14rem';
+/**
+ * Default maximum width applied to an accordion header tag
+ * on smaller screens.
+ */
+const PT_ACCORDION_DEFAULT_MOBILE_TAG_MAX_WIDTH = '9rem';
+/**
+ * Default breakpoint used by responsive accordion styles.
+ */
+const PT_ACCORDION_DEFAULT_MOBILE_BREAKPOINT = '768px';
+/**
+ * Default generic content-container configuration.
+ *
+ * PTAccordion no longer renders PTCard. CardConfig is retained as the
+ * existing public configuration contract for width, height, spacing,
+ * scrolling and visual properties.
+ */
+const PT_ACCORDION_DEFAULT_BODY_CARD_CONFIG = {
+    backgroundColor: undefined,
+    transparencyPercentage: '0',
+    width: '100%',
+    height: PT_ACCORDION_DEFAULT_CONTENT_HEIGHT,
+    padding: '0',
+    bodyPadding: '0',
+    margin: '0',
+    borderColor: 'transparent',
+    borderWidth: '0',
+    noBorder: true,
+    borderRadius: '0',
+    boxShadow: 'none',
+    scrollableHorizontal: PT_ACCORDION_DEFAULT_SCROLLABLE_HORIZONTAL,
+    scrollableVertical: PT_ACCORDION_DEFAULT_SCROLLABLE_VERTICAL,
+    alignContent: 'default',
+    alignBodyContent: 'default',
+    alignHeaderContent: 'default',
+    zIndex: 0,
+};
+/**
+ * Default global PTAccordion configuration.
+ */
+const PT_ACCORDION_DEFAULT_CONFIG = {
+    multiple: false,
+    expandIcon: PT_ACCORDION_DEFAULT_EXPAND_ICON,
+    collapseIcon: PT_ACCORDION_DEFAULT_COLLAPSE_ICON,
+    animationDuration: PT_ACCORDION_DEFAULT_ANIMATION_DURATION,
+};
+/**
+ * Builds the effective generic content-container configuration.
+ */
+function buildPTAccordionBodyCardConfig(config) {
+    return {
+        ...PT_ACCORDION_DEFAULT_BODY_CARD_CONFIG,
+        ...config,
+        backgroundColor: config?.backgroundColor,
+        transparencyPercentage: config?.transparencyPercentage ??
+            PT_ACCORDION_DEFAULT_BODY_CARD_CONFIG.transparencyPercentage,
+        width: config?.width ?? PT_ACCORDION_DEFAULT_BODY_CARD_CONFIG.width,
+        height: config?.height ?? PT_ACCORDION_DEFAULT_BODY_CARD_CONFIG.height,
+        padding: config?.padding ?? PT_ACCORDION_DEFAULT_BODY_CARD_CONFIG.padding,
+        bodyPadding: config?.bodyPadding ?? PT_ACCORDION_DEFAULT_BODY_CARD_CONFIG.bodyPadding,
+        margin: config?.margin ?? PT_ACCORDION_DEFAULT_BODY_CARD_CONFIG.margin,
+        borderColor: config?.borderColor ?? PT_ACCORDION_DEFAULT_BODY_CARD_CONFIG.borderColor,
+        borderWidth: config?.borderWidth ?? PT_ACCORDION_DEFAULT_BODY_CARD_CONFIG.borderWidth,
+        noBorder: config?.noBorder ?? PT_ACCORDION_DEFAULT_BODY_CARD_CONFIG.noBorder,
+        borderRadius: config?.borderRadius ??
+            PT_ACCORDION_DEFAULT_BODY_CARD_CONFIG.borderRadius,
+        boxShadow: config?.boxShadow ?? PT_ACCORDION_DEFAULT_BODY_CARD_CONFIG.boxShadow,
+        scrollableHorizontal: config?.scrollableHorizontal ??
+            PT_ACCORDION_DEFAULT_BODY_CARD_CONFIG.scrollableHorizontal,
+        scrollableVertical: config?.scrollableVertical ??
+            PT_ACCORDION_DEFAULT_BODY_CARD_CONFIG.scrollableVertical,
+        alignContent: config?.alignContent ??
+            PT_ACCORDION_DEFAULT_BODY_CARD_CONFIG.alignContent,
+        alignBodyContent: config?.alignBodyContent ??
+            PT_ACCORDION_DEFAULT_BODY_CARD_CONFIG.alignBodyContent,
+        alignHeaderContent: config?.alignHeaderContent ??
+            PT_ACCORDION_DEFAULT_BODY_CARD_CONFIG.alignHeaderContent,
+        zIndex: config?.zIndex ?? PT_ACCORDION_DEFAULT_BODY_CARD_CONFIG.zIndex,
+    };
+}
+/**
+ * Builds the effective configuration of one accordion panel.
+ */
+function buildPTAccordionPanelConfig(panel) {
+    return {
+        ...panel,
+        visible: panel.visible ?? true,
+        disabled: panel.disabled ?? false,
+        lazy: panel.lazy ?? false,
+        contentMinWidth: panel.contentMinWidth?.trim() || PT_ACCORDION_DEFAULT_CONTENT_MIN_WIDTH,
+        bodyCardConfig: buildPTAccordionBodyCardConfig(panel.bodyCardConfig),
+        tag: panel.tag
+            ? {
+                ...panel.tag,
+                visible: panel.tag.visible ?? true,
+                rounded: panel.tag.rounded ?? false,
+            }
+            : undefined,
+    };
+}
+/**
+ * Builds the effective global accordion configuration.
+ */
+function buildPTAccordionConfig(config) {
+    return {
+        ...PT_ACCORDION_DEFAULT_CONFIG,
+        ...config,
+        panels: (config.panels ?? []).map(buildPTAccordionPanelConfig),
+        multiple: config.multiple ?? PT_ACCORDION_DEFAULT_CONFIG.multiple,
+        expandIcon: config.expandIcon ?? PT_ACCORDION_DEFAULT_CONFIG.expandIcon,
+        collapseIcon: config.collapseIcon ?? PT_ACCORDION_DEFAULT_CONFIG.collapseIcon,
+        animationDuration: config.animationDuration ?? PT_ACCORDION_DEFAULT_CONFIG.animationDuration,
+    };
+}
+
+// ng-prime-tools/projects/ng-prime-tools/src/lib/pt-accordion/directives/pt-accordion-panel.directive.ts
+class PTAccordionPanelDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTAccordionPanelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: PTAccordionPanelDirective, isStandalone: false, selector: "ng-template[ptAccordionPanel]", inputs: { panelValue: "panelValue" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTAccordionPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[ptAccordionPanel]',
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { panelValue: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+// ng-prime-tools/projects/ng-prime-tools/src/lib/pt-accordion/pt-accordion.component.ts
+class PTAccordionComponent {
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.config = {
+            panels: [],
+        };
+        this.value = null;
+        this.valueChange = new EventEmitter();
+        this.panelOpen = new EventEmitter();
+        this.panelClose = new EventEmitter();
+        this.resolvedConfig = {
+            panels: [],
+        };
+        this.templateMap = new Map();
+    }
+    ngAfterContentInit() {
+        this.rebuildTemplateMap();
+        this.panelTemplatesSubscription = this.panelTemplates.changes.subscribe(() => {
+            this.rebuildTemplateMap();
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['config']) {
+            this.resolvedConfig = buildPTAccordionConfig(this.config ?? {
+                panels: [],
+            });
+        }
+        if (changes['value'] || changes['config']) {
+            this.normalizeActiveValue();
+        }
+    }
+    ngOnDestroy() {
+        this.panelTemplatesSubscription?.unsubscribe();
+    }
+    get visiblePanels() {
+        return (this.resolvedConfig.panels ?? []).filter((panel) => panel.visible !== false);
+    }
+    get multiple() {
+        return this.resolvedConfig.multiple === true;
+    }
+    get expandIcon() {
+        return this.resolvedConfig.expandIcon ?? PT_ACCORDION_DEFAULT_EXPAND_ICON;
+    }
+    get collapseIcon() {
+        return (this.resolvedConfig.collapseIcon ?? PT_ACCORDION_DEFAULT_COLLAPSE_ICON);
+    }
+    get animationDuration() {
+        return (this.resolvedConfig.animationDuration ??
+            PT_ACCORDION_DEFAULT_ANIMATION_DURATION);
+    }
+    getRootClasses() {
+        return this.toClassList('pt-accordion', this.resolvedConfig.styleClass);
+    }
+    getPanelClasses(panel) {
+        return this.toClassList('pt-accordion-panel', this.resolvedConfig.panelStyleClass, panel.styleClass, this.isPanelExpanded(panel.value)
+            ? 'pt-accordion-panel-expanded'
+            : 'pt-accordion-panel-collapsed', panel.disabled ? 'pt-accordion-panel-disabled' : undefined);
+    }
+    getHeaderClasses(panel) {
+        return this.toClassList('pt-accordion-header-content', this.resolvedConfig.headerStyleClass, panel.headerStyleClass);
+    }
+    /**
+     * Returns generic content-viewport classes.
+     *
+     * These classes are not linked to any projected component type.
+     */
+    getContentClasses(panel) {
+        const scrollableHorizontal = panel.bodyCardConfig?.scrollableHorizontal ??
+            PT_ACCORDION_DEFAULT_SCROLLABLE_HORIZONTAL;
+        const scrollableVertical = panel.bodyCardConfig?.scrollableVertical ??
+            PT_ACCORDION_DEFAULT_SCROLLABLE_VERTICAL;
+        return this.toClassList('pt-accordion-content', 'pt-accordion-content-viewport', scrollableHorizontal ? 'pt-accordion-content-scroll-x' : undefined, scrollableVertical ? 'pt-accordion-content-scroll-y' : undefined, this.resolvedConfig.contentStyleClass, panel.contentStyleClass);
+    }
+    /**
+     * Applies viewport dimensions and overflow directly.
+     *
+     * Direct overflow styles guarantee that scrolling does not depend
+     * on consumer CSS or CSS class precedence.
+     */
+    getContentStyles(panel) {
+        const contentConfig = panel.bodyCardConfig;
+        const height = contentConfig?.height?.trim() || PT_ACCORDION_DEFAULT_CONTENT_HEIGHT;
+        const scrollableHorizontal = contentConfig?.scrollableHorizontal ??
+            PT_ACCORDION_DEFAULT_SCROLLABLE_HORIZONTAL;
+        const scrollableVertical = contentConfig?.scrollableVertical ??
+            PT_ACCORDION_DEFAULT_SCROLLABLE_VERTICAL;
+        return {
+            width: '100%',
+            minWidth: '0',
+            maxWidth: '100%',
+            height,
+            maxHeight: height === 'auto' ? 'none' : height,
+            overflowX: scrollableHorizontal ? 'auto' : 'hidden',
+            overflowY: scrollableVertical ? 'auto' : 'hidden',
+            WebkitOverflowScrolling: 'touch',
+            overscrollBehaviorX: scrollableHorizontal ? 'contain' : 'auto',
+            overscrollBehaviorY: scrollableVertical ? 'contain' : 'auto',
+            '--pt-accordion-animation-duration': this.animationDuration,
+        };
+    }
+    /**
+     * Applies the configured minimum width directly to the generic
+     * projected-content wrapper.
+     *
+     * This creates overflow whenever contentMinWidth is wider than
+     * the visible accordion viewport.
+     */
+    getContentInnerStyles(panel) {
+        const contentMinWidth = panel.contentMinWidth?.trim() || PT_ACCORDION_DEFAULT_CONTENT_MIN_WIDTH;
+        return {
+            display: 'block',
+            width: '100%',
+            minWidth: contentMinWidth,
+            maxWidth: 'none',
+        };
+    }
+    getTitleText(panel) {
+        return panel.title?.text ?? '';
+    }
+    getTitleStyles(panel) {
+        const title = panel.title;
+        return {
+            color: title?.color ?? 'var(--pt-accordion-title-color, #374151)',
+            fontSize: title?.fontSize ?? 'var(--pt-accordion-title-font-size, 1.05rem)',
+            fontWeight: title?.fontWeight ?? 'var(--pt-accordion-title-font-weight, 700)',
+            textAlign: title?.position ?? 'left',
+        };
+    }
+    getDescriptionStyles(panel) {
+        const description = panel.description;
+        return {
+            color: description?.color ?? 'var(--pt-accordion-description-color, #6b7280)',
+            fontSize: description?.fontSize ??
+                'var(--pt-accordion-description-font-size, 0.9rem)',
+            fontWeight: description?.fontWeight ??
+                'var(--pt-accordion-description-font-weight, 400)',
+            textAlign: description?.position ?? 'left',
+        };
+    }
+    getTitleIconClass(panel) {
+        const icon = panel.title?.icon;
+        if (!icon) {
+            return null;
+        }
+        return typeof icon === 'string' ? icon : icon.code;
+    }
+    getTitleIconPosition(panel) {
+        const icon = panel.title?.icon;
+        if (typeof icon === 'object' && icon.position) {
+            return icon.position;
+        }
+        return 'left';
+    }
+    getTitleIconStyles(panel) {
+        const icon = panel.title?.icon;
+        if (!icon || typeof icon === 'string') {
+            return {
+                color: 'var(--pt-accordion-icon-color, inherit)',
+                fontSize: 'var(--pt-accordion-icon-font-size, 1rem)',
+                backgroundColor: 'var(--pt-accordion-icon-background, transparent)',
+                borderRadius: 'var(--pt-accordion-icon-border-radius, 0)',
+            };
+        }
+        return {
+            color: icon.color ?? 'var(--pt-accordion-icon-color, inherit)',
+            fontSize: icon.fontSize ?? 'var(--pt-accordion-icon-font-size, 1rem)',
+            backgroundColor: icon.backgroundColor ??
+                'var(--pt-accordion-icon-background, transparent)',
+            borderRadius: this.resolveIconBorderRadius(icon),
+        };
+    }
+    getTagSeverity(panel) {
+        switch (panel.tag?.severity) {
+            case 'success':
+            case 'secondary':
+            case 'info':
+            case 'warn':
+            case 'danger':
+            case 'contrast':
+                return panel.tag.severity;
+            default:
+                return undefined;
+        }
+    }
+    getTagClasses(panel) {
+        return this.toClassList('pt-accordion-tag', panel.tag?.styleClass);
+    }
+    isTagVisible(panel) {
+        return !!panel.tag && panel.tag.visible !== false;
+    }
+    isPanelExpanded(panelValue) {
+        if (Array.isArray(this.value)) {
+            return this.value.some((value) => value === panelValue);
+        }
+        return this.value === panelValue;
+    }
+    shouldRenderPanelContent(panel) {
+        return panel.lazy !== true || this.isPanelExpanded(panel.value);
+    }
+    resolvePanelTemplate(panelValue) {
+        return this.templateMap.get(panelValue) ?? null;
+    }
+    getTemplateContext(panel) {
+        return {
+            $implicit: panel,
+            panel,
+            expanded: this.isPanelExpanded(panel.value),
+        };
+    }
+    onValueChange(nextValue) {
+        const previousValue = this.value;
+        const normalizedValue = this.normalizeIncomingValue(nextValue);
+        this.value = normalizedValue;
+        this.emitPanelStateChanges(previousValue, normalizedValue);
+        this.valueChange.emit(normalizedValue);
+        this.changeDetectorRef.markForCheck();
+    }
+    trackPanel(_index, panel) {
+        return panel.value;
+    }
+    normalizeActiveValue() {
+        const currentValue = this.value;
+        if (currentValue === null || currentValue === undefined) {
+            this.value = null;
+            return;
+        }
+        if (this.multiple) {
+            if (!Array.isArray(currentValue)) {
+                this.value = [currentValue];
+            }
+            return;
+        }
+        if (Array.isArray(currentValue)) {
+            this.value = currentValue[0] ?? null;
+        }
+    }
+    normalizeIncomingValue(value) {
+        if (value === undefined || value === null) {
+            return null;
+        }
+        if (!this.multiple) {
+            return Array.isArray(value) ? (value[0] ?? null) : value;
+        }
+        return this.toHomogeneousArray(value);
+    }
+    toHomogeneousArray(value) {
+        if (typeof value === 'string') {
+            return [value];
+        }
+        if (typeof value === 'number') {
+            return [value];
+        }
+        if (value.every((item) => typeof item === 'string')) {
+            return [...value];
+        }
+        if (value.every((item) => typeof item === 'number')) {
+            return [...value];
+        }
+        return null;
+    }
+    rebuildTemplateMap() {
+        this.templateMap.clear();
+        this.panelTemplates?.forEach((panelTemplate) => {
+            this.templateMap.set(panelTemplate.panelValue, panelTemplate.templateRef);
+        });
+    }
+    emitPanelStateChanges(previousValue, currentValue) {
+        const previousValues = this.toValueArray(previousValue);
+        const currentValues = this.toValueArray(currentValue);
+        const openedValues = currentValues.filter((value) => !previousValues.some((previousValue) => previousValue === value));
+        const closedValues = previousValues.filter((value) => !currentValues.some((currentValue) => currentValue === value));
+        openedValues.forEach((value) => {
+            const panel = this.findPanel(value);
+            if (panel) {
+                this.panelOpen.emit(panel);
+            }
+        });
+        closedValues.forEach((value) => {
+            const panel = this.findPanel(value);
+            if (panel) {
+                this.panelClose.emit(panel);
+            }
+        });
+    }
+    findPanel(value) {
+        return this.resolvedConfig.panels.find((panel) => panel.value === value);
+    }
+    toValueArray(value) {
+        if (value === null) {
+            return [];
+        }
+        if (Array.isArray(value)) {
+            return [...value];
+        }
+        return [value];
+    }
+    resolveIconBorderRadius(icon) {
+        switch (icon.shape) {
+            case 'circular':
+                return '50%';
+            case 'rounded-square':
+                return '10px';
+            default:
+                return '0';
+        }
+    }
+    toClassList(...classes) {
+        return classes
+            .filter((value) => typeof value === 'string' && value.trim().length > 0)
+            .flatMap((value) => value
+            .split(/\s+/)
+            .map((item) => item.trim())
+            .filter(Boolean));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTAccordionComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTAccordionComponent, isStandalone: false, selector: "pt-accordion", inputs: { config: "config", value: "value" }, outputs: { valueChange: "valueChange", panelOpen: "panelOpen", panelClose: "panelClose" }, queries: [{ propertyName: "panelTemplates", predicate: PTAccordionPanelDirective }], usesOnChanges: true, ngImport: i0, template: "<!-- ng-prime-tools/projects/ng-prime-tools/src/lib/pt-accordion/pt-accordion.component.html -->\n\n<p-accordion\n  [value]=\"value\"\n  [multiple]=\"multiple\"\n  [expandIcon]=\"expandIcon\"\n  [collapseIcon]=\"collapseIcon\"\n  [ngClass]=\"getRootClasses()\"\n  (valueChange)=\"onValueChange($event)\"\n>\n  @for (panel of visiblePanels; track trackPanel($index, panel)) {\n    <p-accordion-panel\n      [value]=\"panel.value\"\n      [disabled]=\"panel.disabled === true\"\n      [ngClass]=\"getPanelClasses(panel)\"\n    >\n      <p-accordion-header>\n        <div [ngClass]=\"getHeaderClasses(panel)\">\n          <div class=\"pt-accordion-header-main\">\n            @if (\n              getTitleIconClass(panel) && getTitleIconPosition(panel) === \"left\"\n            ) {\n              <span\n                class=\"pt-accordion-title-icon\"\n                [ngStyle]=\"getTitleIconStyles(panel)\"\n              >\n                <i\n                  class=\"pt-accordion-title-icon-code\"\n                  [class]=\"getTitleIconClass(panel)\"\n                ></i>\n              </span>\n            }\n\n            <div class=\"pt-accordion-header-text\">\n              <span\n                class=\"pt-accordion-title\"\n                [ngStyle]=\"getTitleStyles(panel)\"\n              >\n                {{ getTitleText(panel) }}\n              </span>\n\n              @if (panel.description?.text) {\n                <span\n                  class=\"pt-accordion-description\"\n                  [ngStyle]=\"getDescriptionStyles(panel)\"\n                >\n                  {{ panel.description?.text }}\n                </span>\n              }\n            </div>\n\n            @if (\n              getTitleIconClass(panel) &&\n              getTitleIconPosition(panel) === \"right\"\n            ) {\n              <span\n                class=\"pt-accordion-title-icon\"\n                [ngStyle]=\"getTitleIconStyles(panel)\"\n              >\n                <i\n                  class=\"pt-accordion-title-icon-code\"\n                  [class]=\"getTitleIconClass(panel)\"\n                ></i>\n              </span>\n            }\n          </div>\n\n          @if (isTagVisible(panel)) {\n            <p-tag\n              [value]=\"panel.tag?.value ?? ''\"\n              [icon]=\"panel.tag?.icon\"\n              [severity]=\"getTagSeverity(panel)\"\n              [rounded]=\"panel.tag?.rounded === true\"\n              [ngClass]=\"getTagClasses(panel)\"\n            ></p-tag>\n          }\n        </div>\n      </p-accordion-header>\n\n      <p-accordion-content>\n        @if (shouldRenderPanelContent(panel)) {\n          <div\n            [ngClass]=\"getContentClasses(panel)\"\n            [ngStyle]=\"getContentStyles(panel)\"\n          >\n            <div\n              class=\"pt-accordion-content-inner\"\n              [ngStyle]=\"getContentInnerStyles(panel)\"\n            >\n              @if (resolvePanelTemplate(panel.value); as panelTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    panelTemplate;\n                    context: getTemplateContext(panel)\n                  \"\n                ></ng-container>\n              } @else {\n                <div class=\"pt-accordion-empty-content\">\n                  Aucun contenu configur\u00E9.\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </p-accordion-content>\n    </p-accordion-panel>\n  }\n</p-accordion>\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-accordion{display:block;width:100%;min-width:0;max-width:100%}.pt-accordion-header-content{display:flex;align-items:center;justify-content:space-between;flex:1 1 auto;gap:1rem;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-accordion-header-main{display:flex;align-items:center;flex:1 1 auto;gap:.85rem;min-width:0;overflow:hidden}.pt-accordion-title-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 2.5rem;width:2.5rem;height:2.5rem;overflow:hidden}.pt-accordion-title-icon-code{display:inline-flex;align-items:center;justify-content:center;line-height:1}.pt-accordion-header-text{display:flex;flex:1 1 auto;flex-direction:column;gap:.25rem;min-width:0;overflow:hidden}.pt-accordion-title,.pt-accordion-description{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pt-accordion-title{line-height:1.25}.pt-accordion-description{line-height:1.35}.pt-accordion-tag{flex:0 0 auto;max-width:var(--pt-accordion-tag-max-width, 14rem);overflow:hidden}.pt-accordion-content,.pt-accordion-content-viewport{display:block;width:0;min-width:100%;max-width:100%;inline-size:0;min-inline-size:100%;max-inline-size:100%;min-height:0;min-block-size:0;overflow:hidden;box-sizing:border-box;contain:inline-size}.pt-accordion-content-inner{display:block;box-sizing:border-box}.pt-accordion-content-scroll-x{overflow-x:scroll!important;overflow-y:hidden!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable;scrollbar-width:auto;scrollbar-color:var(--pt-accordion-scrollbar-thumb, #64748b) var(--pt-accordion-scrollbar-track, #e2e8f0)}.pt-accordion-content-scroll-y{overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable;scrollbar-width:auto;scrollbar-color:var(--pt-accordion-scrollbar-thumb, #64748b) var(--pt-accordion-scrollbar-track, #e2e8f0)}.pt-accordion-content-scroll-x.pt-accordion-content-scroll-y{overflow:auto!important;overscroll-behavior:contain}.pt-accordion-content-scroll-x::-webkit-scrollbar,.pt-accordion-content-scroll-y::-webkit-scrollbar{width:12px;height:12px}.pt-accordion-content-scroll-x::-webkit-scrollbar-track,.pt-accordion-content-scroll-y::-webkit-scrollbar-track{border-radius:999px;background:var(--pt-accordion-scrollbar-track, #e2e8f0)}.pt-accordion-content-scroll-x::-webkit-scrollbar-thumb,.pt-accordion-content-scroll-y::-webkit-scrollbar-thumb{min-width:3rem;min-height:3rem;border:2px solid var(--pt-accordion-scrollbar-track, #e2e8f0);border-radius:999px;background:var(--pt-accordion-scrollbar-thumb, #64748b)}.pt-accordion-content-scroll-x::-webkit-scrollbar-thumb:hover,.pt-accordion-content-scroll-y::-webkit-scrollbar-thumb:hover{background:var(--pt-accordion-scrollbar-thumb-hover, #475569)}.pt-accordion-empty-content{padding:1rem;color:#64748b;text-align:center}:host ::ng-deep .p-accordion{display:block;width:100%;min-width:0;max-width:100%}:host ::ng-deep .p-accordionpanel{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden;border:1px solid var(--pt-accordion-border-color, #e5e7eb);border-radius:var(--pt-accordion-border-radius, 12px);background:var(--pt-accordion-panel-background, #ffffff)}:host ::ng-deep .p-accordionpanel+.p-accordionpanel{margin-top:var(--pt-accordion-panel-gap, 1rem)}:host ::ng-deep .p-accordionheader{display:flex;align-items:center;width:100%;min-width:0;max-width:100%;padding:var(--pt-accordion-header-padding, 1rem);overflow:hidden;border:0;border-radius:var(--pt-accordion-border-radius, 12px);background:var(--pt-accordion-header-background, #ffffff);color:var(--pt-accordion-header-color, inherit);transition:background-color .2s ease,color .2s ease}:host ::ng-deep .p-accordionheader:hover{background:var(--pt-accordion-header-hover-background, #f8fafc)}:host ::ng-deep .p-accordionpanel-active .p-accordionheader{border-bottom-right-radius:0;border-bottom-left-radius:0}:host ::ng-deep .p-accordionheader-link,:host ::ng-deep .p-accordionheader-button{display:flex;align-items:center;flex:1 1 auto;width:100%;min-width:0;max-width:100%;overflow:hidden}:host ::ng-deep .p-accordionheader-toggle-icon{flex:0 0 auto;margin-left:.75rem}:host ::ng-deep .p-accordioncontent{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}:host ::ng-deep .p-accordioncontent-content{display:block;width:100%;min-width:0;max-width:100%;padding:var(--pt-accordion-content-padding, 1rem);overflow:hidden;border:0;background:var(--pt-accordion-content-background, #ffffff)}:host ::ng-deep .p-accordioncontent-content>*{min-width:0;max-width:100%}:host ::ng-deep .pt-accordion-panel-disabled .p-accordionheader{cursor:not-allowed;opacity:.65}@media(max-width:768px){.pt-accordion-header-content{gap:.5rem}.pt-accordion-header-main{gap:.65rem}.pt-accordion-title-icon{flex-basis:2.25rem;width:2.25rem;height:2.25rem}.pt-accordion-description{display:none}.pt-accordion-title{font-size:var(--pt-accordion-mobile-title-font-size, .95rem)!important}.pt-accordion-tag{max-width:var(--pt-accordion-mobile-tag-max-width, 9rem)}:host ::ng-deep .p-accordionheader,:host ::ng-deep .p-accordioncontent-content{padding:var(--pt-accordion-mobile-padding, .85rem)}:host ::ng-deep .p-accordionheader-toggle-icon{margin-left:.4rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$4.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "motionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i2$4.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i2$4.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i2$4.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type: i9.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTAccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-accordion', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!-- ng-prime-tools/projects/ng-prime-tools/src/lib/pt-accordion/pt-accordion.component.html -->\n\n<p-accordion\n  [value]=\"value\"\n  [multiple]=\"multiple\"\n  [expandIcon]=\"expandIcon\"\n  [collapseIcon]=\"collapseIcon\"\n  [ngClass]=\"getRootClasses()\"\n  (valueChange)=\"onValueChange($event)\"\n>\n  @for (panel of visiblePanels; track trackPanel($index, panel)) {\n    <p-accordion-panel\n      [value]=\"panel.value\"\n      [disabled]=\"panel.disabled === true\"\n      [ngClass]=\"getPanelClasses(panel)\"\n    >\n      <p-accordion-header>\n        <div [ngClass]=\"getHeaderClasses(panel)\">\n          <div class=\"pt-accordion-header-main\">\n            @if (\n              getTitleIconClass(panel) && getTitleIconPosition(panel) === \"left\"\n            ) {\n              <span\n                class=\"pt-accordion-title-icon\"\n                [ngStyle]=\"getTitleIconStyles(panel)\"\n              >\n                <i\n                  class=\"pt-accordion-title-icon-code\"\n                  [class]=\"getTitleIconClass(panel)\"\n                ></i>\n              </span>\n            }\n\n            <div class=\"pt-accordion-header-text\">\n              <span\n                class=\"pt-accordion-title\"\n                [ngStyle]=\"getTitleStyles(panel)\"\n              >\n                {{ getTitleText(panel) }}\n              </span>\n\n              @if (panel.description?.text) {\n                <span\n                  class=\"pt-accordion-description\"\n                  [ngStyle]=\"getDescriptionStyles(panel)\"\n                >\n                  {{ panel.description?.text }}\n                </span>\n              }\n            </div>\n\n            @if (\n              getTitleIconClass(panel) &&\n              getTitleIconPosition(panel) === \"right\"\n            ) {\n              <span\n                class=\"pt-accordion-title-icon\"\n                [ngStyle]=\"getTitleIconStyles(panel)\"\n              >\n                <i\n                  class=\"pt-accordion-title-icon-code\"\n                  [class]=\"getTitleIconClass(panel)\"\n                ></i>\n              </span>\n            }\n          </div>\n\n          @if (isTagVisible(panel)) {\n            <p-tag\n              [value]=\"panel.tag?.value ?? ''\"\n              [icon]=\"panel.tag?.icon\"\n              [severity]=\"getTagSeverity(panel)\"\n              [rounded]=\"panel.tag?.rounded === true\"\n              [ngClass]=\"getTagClasses(panel)\"\n            ></p-tag>\n          }\n        </div>\n      </p-accordion-header>\n\n      <p-accordion-content>\n        @if (shouldRenderPanelContent(panel)) {\n          <div\n            [ngClass]=\"getContentClasses(panel)\"\n            [ngStyle]=\"getContentStyles(panel)\"\n          >\n            <div\n              class=\"pt-accordion-content-inner\"\n              [ngStyle]=\"getContentInnerStyles(panel)\"\n            >\n              @if (resolvePanelTemplate(panel.value); as panelTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    panelTemplate;\n                    context: getTemplateContext(panel)\n                  \"\n                ></ng-container>\n              } @else {\n                <div class=\"pt-accordion-empty-content\">\n                  Aucun contenu configur\u00E9.\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </p-accordion-content>\n    </p-accordion-panel>\n  }\n</p-accordion>\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-accordion{display:block;width:100%;min-width:0;max-width:100%}.pt-accordion-header-content{display:flex;align-items:center;justify-content:space-between;flex:1 1 auto;gap:1rem;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-accordion-header-main{display:flex;align-items:center;flex:1 1 auto;gap:.85rem;min-width:0;overflow:hidden}.pt-accordion-title-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 2.5rem;width:2.5rem;height:2.5rem;overflow:hidden}.pt-accordion-title-icon-code{display:inline-flex;align-items:center;justify-content:center;line-height:1}.pt-accordion-header-text{display:flex;flex:1 1 auto;flex-direction:column;gap:.25rem;min-width:0;overflow:hidden}.pt-accordion-title,.pt-accordion-description{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pt-accordion-title{line-height:1.25}.pt-accordion-description{line-height:1.35}.pt-accordion-tag{flex:0 0 auto;max-width:var(--pt-accordion-tag-max-width, 14rem);overflow:hidden}.pt-accordion-content,.pt-accordion-content-viewport{display:block;width:0;min-width:100%;max-width:100%;inline-size:0;min-inline-size:100%;max-inline-size:100%;min-height:0;min-block-size:0;overflow:hidden;box-sizing:border-box;contain:inline-size}.pt-accordion-content-inner{display:block;box-sizing:border-box}.pt-accordion-content-scroll-x{overflow-x:scroll!important;overflow-y:hidden!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable;scrollbar-width:auto;scrollbar-color:var(--pt-accordion-scrollbar-thumb, #64748b) var(--pt-accordion-scrollbar-track, #e2e8f0)}.pt-accordion-content-scroll-y{overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable;scrollbar-width:auto;scrollbar-color:var(--pt-accordion-scrollbar-thumb, #64748b) var(--pt-accordion-scrollbar-track, #e2e8f0)}.pt-accordion-content-scroll-x.pt-accordion-content-scroll-y{overflow:auto!important;overscroll-behavior:contain}.pt-accordion-content-scroll-x::-webkit-scrollbar,.pt-accordion-content-scroll-y::-webkit-scrollbar{width:12px;height:12px}.pt-accordion-content-scroll-x::-webkit-scrollbar-track,.pt-accordion-content-scroll-y::-webkit-scrollbar-track{border-radius:999px;background:var(--pt-accordion-scrollbar-track, #e2e8f0)}.pt-accordion-content-scroll-x::-webkit-scrollbar-thumb,.pt-accordion-content-scroll-y::-webkit-scrollbar-thumb{min-width:3rem;min-height:3rem;border:2px solid var(--pt-accordion-scrollbar-track, #e2e8f0);border-radius:999px;background:var(--pt-accordion-scrollbar-thumb, #64748b)}.pt-accordion-content-scroll-x::-webkit-scrollbar-thumb:hover,.pt-accordion-content-scroll-y::-webkit-scrollbar-thumb:hover{background:var(--pt-accordion-scrollbar-thumb-hover, #475569)}.pt-accordion-empty-content{padding:1rem;color:#64748b;text-align:center}:host ::ng-deep .p-accordion{display:block;width:100%;min-width:0;max-width:100%}:host ::ng-deep .p-accordionpanel{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden;border:1px solid var(--pt-accordion-border-color, #e5e7eb);border-radius:var(--pt-accordion-border-radius, 12px);background:var(--pt-accordion-panel-background, #ffffff)}:host ::ng-deep .p-accordionpanel+.p-accordionpanel{margin-top:var(--pt-accordion-panel-gap, 1rem)}:host ::ng-deep .p-accordionheader{display:flex;align-items:center;width:100%;min-width:0;max-width:100%;padding:var(--pt-accordion-header-padding, 1rem);overflow:hidden;border:0;border-radius:var(--pt-accordion-border-radius, 12px);background:var(--pt-accordion-header-background, #ffffff);color:var(--pt-accordion-header-color, inherit);transition:background-color .2s ease,color .2s ease}:host ::ng-deep .p-accordionheader:hover{background:var(--pt-accordion-header-hover-background, #f8fafc)}:host ::ng-deep .p-accordionpanel-active .p-accordionheader{border-bottom-right-radius:0;border-bottom-left-radius:0}:host ::ng-deep .p-accordionheader-link,:host ::ng-deep .p-accordionheader-button{display:flex;align-items:center;flex:1 1 auto;width:100%;min-width:0;max-width:100%;overflow:hidden}:host ::ng-deep .p-accordionheader-toggle-icon{flex:0 0 auto;margin-left:.75rem}:host ::ng-deep .p-accordioncontent{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}:host ::ng-deep .p-accordioncontent-content{display:block;width:100%;min-width:0;max-width:100%;padding:var(--pt-accordion-content-padding, 1rem);overflow:hidden;border:0;background:var(--pt-accordion-content-background, #ffffff)}:host ::ng-deep .p-accordioncontent-content>*{min-width:0;max-width:100%}:host ::ng-deep .pt-accordion-panel-disabled .p-accordionheader{cursor:not-allowed;opacity:.65}@media(max-width:768px){.pt-accordion-header-content{gap:.5rem}.pt-accordion-header-main{gap:.65rem}.pt-accordion-title-icon{flex-basis:2.25rem;width:2.25rem;height:2.25rem}.pt-accordion-description{display:none}.pt-accordion-title{font-size:var(--pt-accordion-mobile-title-font-size, .95rem)!important}.pt-accordion-tag{max-width:var(--pt-accordion-mobile-tag-max-width, 9rem)}:host ::ng-deep .p-accordionheader,:host ::ng-deep .p-accordioncontent-content{padding:var(--pt-accordion-mobile-padding, .85rem)}:host ::ng-deep .p-accordionheader-toggle-icon{margin-left:.4rem}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], panelOpen: [{
+                type: Output
+            }], panelClose: [{
+                type: Output
+            }], panelTemplates: [{
+                type: ContentChildren,
+                args: [PTAccordionPanelDirective]
+            }] } });
+
+// ng-prime-tools/projects/ng-prime-tools/src/lib/pt-accordion/pt-accordion.module.ts
+class PTAccordionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: PTAccordionModule, declarations: [PTAccordionComponent, PTAccordionPanelDirective], imports: [CommonModule,
+            NgClass,
+            NgStyle,
+            NgTemplateOutlet,
+            AccordionModule,
+            TagModule], exports: [PTAccordionComponent, PTAccordionPanelDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTAccordionModule, imports: [CommonModule,
+            AccordionModule,
+            TagModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTAccordionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTAccordionComponent, PTAccordionPanelDirective],
+                    imports: [
+                        CommonModule,
+                        NgClass,
+                        NgStyle,
+                        NgTemplateOutlet,
+                        AccordionModule,
+                        TagModule,
+                    ],
+                    exports: [PTAccordionComponent, PTAccordionPanelDirective],
+                }]
+        }] });
+
 class NgPrimeToolsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgPrimeToolsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: NgPrimeToolsModule, imports: [CommonModule,
@@ -7697,7 +8234,9 @@ class NgPrimeToolsModule {
             // Dialog
             PTConfirmDialogModule,
             // Toasts
-            PTToastNotifierModule], exports: [PTAdvancedPrimeTableModule,
+            PTToastNotifierModule,
+            // Accordion
+            PTAccordionModule], exports: [PTAdvancedPrimeTableModule,
             MultiSearchCriteriaModule,
             // Inputs
             PTCheckBoxInputModule,
@@ -7739,7 +8278,9 @@ class NgPrimeToolsModule {
             PTConfirmDialogModule,
             PTDialogModule,
             // Toasts
-            PTToastNotifierModule] }); }
+            PTToastNotifierModule,
+            // Accordion
+            PTAccordionModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgPrimeToolsModule, imports: [CommonModule,
             FormsModule,
             PTAdvancedPrimeTableModule,
@@ -7783,7 +8324,9 @@ class NgPrimeToolsModule {
             // Dialog
             PTConfirmDialogModule,
             // Toasts
-            PTToastNotifierModule, PTAdvancedPrimeTableModule,
+            PTToastNotifierModule,
+            // Accordion
+            PTAccordionModule, PTAdvancedPrimeTableModule,
             MultiSearchCriteriaModule,
             // Inputs
             PTCheckBoxInputModule,
@@ -7825,7 +8368,9 @@ class NgPrimeToolsModule {
             PTConfirmDialogModule,
             PTDialogModule,
             // Toasts
-            PTToastNotifierModule] }); }
+            PTToastNotifierModule,
+            // Accordion
+            PTAccordionModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NgPrimeToolsModule, decorators: [{
             type: NgModule,
@@ -7875,6 +8420,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         PTConfirmDialogModule,
                         // Toasts
                         PTToastNotifierModule,
+                        // Accordion
+                        PTAccordionModule,
                     ],
                     exports: [
                         PTAdvancedPrimeTableModule,
@@ -7920,7 +8467,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         PTDialogModule,
                         // Toasts
                         PTToastNotifierModule,
+                        // Accordion
+                        PTAccordionModule,
                     ],
+                    declarations: [],
                 }]
         }] });
 
@@ -8881,10 +9431,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
+// projects/ng-prime-tools/src/lib/models/pt-accordion-config.model.ts
+
 // nav-bar-menu-config.model.ts
 
 // src/lib/models/pt-dialog-config.model.ts
 
+// projects/ng-prime-tools/src/lib/models/index.ts
 // Advanced table
 
 class PTGroupComponent {
@@ -8942,5 +9495,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AlignEnum, BadgeType, BadgeTypeStyles, ButtonColorEnum, DateUtilityService, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgPrimeToolsModule, PTAdvancedPrimeTableComponent, PTAdvancedPrimeTableModule, PTBreadCrumbComponent, PTBreadCrumbModule, PTButtonComponent, PTButtonModule, PTCardComponent, PTCardModule, PTChangePasswordPageComponent, PTChangePasswordPageModule, PTChartComparisonComponent, PTChartComparisonModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTConfirmDialogComponent, PTConfirmDialogModule, PTDateInputComponent, PTDateInputModule, PTDialogComponent, PTDialogModule, PTDropdownComponent, PTDropdownModule, PTFooterComponent, PTFooterModule, PTFormBuilderComponent, PTFormBuilderModule, PTGroupComponent, PTGroupModule, PTLineChartComponent, PTLineChartModule, PTLoginPageComponent, PTLoginPageModule, PTMenuComponent, PTMenuFancyComponent, PTMenuFancyModule, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTMetricPanelComponent, PTMetricPanelModule, PTMultiSelectComponent, PTMultiSelectModule, PTNavbarMenuComponent, PTNavbarMenuModule, PTNumberInputComponent, PTNumberInputModule, PTOtpInputComponent, PTOtpInputModule, PTOtpPageComponent, PTOtpPageModule, PTPageSkeletonComponent, PTPageSkeletonModule, PTPasswordInputComponent, PTPasswordInputModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, PTToastNotifierComponent, PTToastNotifierModule, SearchCriteriaTypeEnum, SeverityEnum, TableTypeEnum };
+export { AlignEnum, BadgeType, BadgeTypeStyles, ButtonColorEnum, DateUtilityService, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgPrimeToolsModule, PTAccordionComponent, PTAccordionModule, PTAccordionPanelDirective, PTAdvancedPrimeTableComponent, PTAdvancedPrimeTableModule, PTBreadCrumbComponent, PTBreadCrumbModule, PTButtonComponent, PTButtonModule, PTCardComponent, PTCardModule, PTChangePasswordPageComponent, PTChangePasswordPageModule, PTChartComparisonComponent, PTChartComparisonModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTConfirmDialogComponent, PTConfirmDialogModule, PTDateInputComponent, PTDateInputModule, PTDialogComponent, PTDialogModule, PTDropdownComponent, PTDropdownModule, PTFooterComponent, PTFooterModule, PTFormBuilderComponent, PTFormBuilderModule, PTGroupComponent, PTGroupModule, PTLineChartComponent, PTLineChartModule, PTLoginPageComponent, PTLoginPageModule, PTMenuComponent, PTMenuFancyComponent, PTMenuFancyModule, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTMetricPanelComponent, PTMetricPanelModule, PTMultiSelectComponent, PTMultiSelectModule, PTNavbarMenuComponent, PTNavbarMenuModule, PTNumberInputComponent, PTNumberInputModule, PTOtpInputComponent, PTOtpInputModule, PTOtpPageComponent, PTOtpPageModule, PTPageSkeletonComponent, PTPageSkeletonModule, PTPasswordInputComponent, PTPasswordInputModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, PTToastNotifierComponent, PTToastNotifierModule, SearchCriteriaTypeEnum, SeverityEnum, TableTypeEnum };
 //# sourceMappingURL=ng-prime-tools.mjs.map