ng-prime-tools 1.1.8 → 1.1.10

package/fesm2022/ng-prime-tools.mjs

@@ -12,19 +12,21 @@ import * as i5 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i6 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import * as i7 from 'primeng/datepicker';
+import * as i7 from 'primeng/contextmenu';
+import { ContextMenuModule } from 'primeng/contextmenu';
+import * as i8 from 'primeng/datepicker';
 import { DatePickerModule } from 'primeng/datepicker';
-import * as i8 from 'primeng/multiselect';
+import * as i9 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
-import * as i9 from 'primeng/tag';
+import * as i10 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
-import * as i10 from 'primeng/iconfield';
+import * as i11 from 'primeng/iconfield';
 import { IconFieldModule } from 'primeng/iconfield';
-import * as i11 from 'primeng/inputicon';
+import * as i12 from 'primeng/inputicon';
 import { InputIconModule } from 'primeng/inputicon';
-import * as i12 from 'primeng/tooltip';
+import * as i13 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import * as i13 from 'primeng/progressbar';
+import * as i14 from 'primeng/progressbar';
 import { ProgressBarModule } from 'primeng/progressbar';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import * as i8$1 from 'primeng/inputnumber';
@@ -200,6 +202,7 @@ class PTAdvancedPrimeTableComponent {
         this.selectionMode = null;
         this.selection = null;
         this.cellHeight = null;
+        this.hasContextMenu = true;
         this.selectionChange = new EventEmitter();
         this.rowSelect = new EventEmitter();
         this.rowUnselect = new EventEmitter();
@@ -212,6 +215,9 @@ class PTAdvancedPrimeTableComponent {
         this.onFilterColumn = new EventEmitter();
         this.rowReorderChange = new EventEmitter();
         this.filteredData = new EventEmitter();
+        this.contextMenuItems = [];
+        this.contextMenuRow = null;
+        this.editingRows = new Set();
         this.TableTypeEnum = TableTypeEnum;
         this.AlignEnum = AlignEnum;
         this.SeverityEnum = SeverityEnum;
@@ -299,9 +305,6 @@ class PTAdvancedPrimeTableComponent {
         this.resetToFirstPage();
         this.refreshTableData();
     }
-    ngOnDestroy() {
-        this.cleanupPointerDrag();
-    }
     buildGlobalFilterFields() {
         const fields = [];
         this.columns.forEach((column) => {
@@ -1491,12 +1494,126 @@ class PTAdvancedPrimeTableComponent {
         }
         return styles;
     }
+    onRowContextMenu(event, row) {
+        if (!this.hasContextMenu) {
+            return;
+        }
+        const items = this.buildContextMenuItems(row);
+        if (items.length === 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.contextMenuRow = row;
+        this.contextMenuItems = items;
+        this.contextMenu?.show(event);
+    }
+    onContextMenuHide() {
+        this.contextMenuRow = null;
+        this.contextMenuItems = [];
+    }
+    buildContextMenuItems(row) {
+        const items = [];
+        if (this.isDelete) {
+            const deleteAction = this.actions.find((action) => action.code === 'delete');
+            if (!deleteAction || this.isActionVisible(deleteAction, row)) {
+                items.push({
+                    label: this.getActionTooltip(deleteAction, row) ||
+                        this.getDefaultActionTooltip('delete'),
+                    icon: deleteAction?.icon || 'pi pi-trash',
+                    disabled: deleteAction
+                        ? this.isActionDisabled(deleteAction, row)
+                        : false,
+                    command: () => this.Delete(row),
+                });
+            }
+        }
+        if (this.isEdit) {
+            const editAction = this.actions.find((action) => action.code === 'edit');
+            if (!editAction || this.isActionVisible(editAction, row)) {
+                if (this.isRowEditing(row)) {
+                    items.push({
+                        label: this.getDefaultActionTooltip('save'),
+                        icon: 'pi pi-check',
+                        command: () => this.saveRowFromContextMenu(row),
+                    }, {
+                        label: this.getDefaultActionTooltip('cancel'),
+                        icon: 'pi pi-times',
+                        command: () => this.cancelRowFromContextMenu(row),
+                    });
+                }
+                else {
+                    items.push({
+                        label: this.getActionTooltip(editAction, row) ||
+                            this.getDefaultActionTooltip('edit'),
+                        icon: editAction?.icon || 'pi pi-pencil',
+                        disabled: editAction
+                            ? this.isActionDisabled(editAction, row)
+                            : false,
+                        command: () => this.startRowEdit(row),
+                    });
+                }
+            }
+        }
+        this.customActions.forEach((action) => {
+            if (!this.isActionVisible(action, row)) {
+                return;
+            }
+            items.push({
+                label: this.getActionTooltip(action, row) || action.code,
+                icon: action.icon || 'pi pi-ellipsis-h',
+                disabled: this.isActionDisabled(action, row),
+                styleClass: action.styleClass,
+                command: () => this.onCustomActionClick(action, row),
+            });
+        });
+        return items;
+    }
+    startRowEdit(row) {
+        if (!row) {
+            return;
+        }
+        this.dt?.initRowEdit(row);
+        this.editingRows.add(this.getRowIdentity(row));
+        this.initEditableRow(row);
+    }
+    saveRowEdit(row) {
+        if (!row) {
+            return;
+        }
+        this.saveEditableRow(row);
+        this.editingRows.delete(this.getRowIdentity(row));
+    }
+    cancelRowEdit(row) {
+        if (!row) {
+            return;
+        }
+        this.cancelEditableRow(row);
+        this.editingRows.delete(this.getRowIdentity(row));
+    }
+    saveRowFromContextMenu(row) {
+        this.saveRowEdit(row);
+    }
+    cancelRowFromContextMenu(row) {
+        this.dt?.cancelRowEdit(row);
+        this.cancelRowEdit(row);
+    }
+    isRowEditing(row) {
+        return this.editingRows.has(this.getRowIdentity(row));
+    }
+    ngOnDestroy() {
+        this.cleanupPointerDrag();
+        this.contextMenu?.hide();
+        this.contextMenuItems = [];
+        this.contextMenuRow = null;
+        this.editingRows.clear();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTAdvancedPrimeTableComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTAdvancedPrimeTableComponent, isStandalone: false, selector: "pt-advanced-prime-table", inputs: { data: "data", columns: "columns", totalRecords: "totalRecords", rowsPerPage: "rowsPerPage", hasSearchFilter: "hasSearchFilter", hasExportExcel: "hasExportExcel", hasExportPDF: "hasExportPDF", hasColumnFilter: "hasColumnFilter", cellPadding: "cellPadding", isPaginated: "isPaginated", isLazy: "isLazy", actions: "actions", isSortable: "isSortable", loading: "loading", maxHeight: "maxHeight", isRowReorderable: "isRowReorderable", showRowMoveArrows: "showRowMoveArrows", rowReorderIdField: "rowReorderIdField", rowOrderStartAt: "rowOrderStartAt", selectionDataKey: "selectionDataKey", selectionMode: "selectionMode", selection: "selection", cellHeight: "cellHeight" }, 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    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    (selectionChange)=\"selectionChange.emit($event)\"\n    (onRowSelect)=\"rowSelect.emit($event.data)\"\n    (onRowUnselect)=\"rowUnselect.emit($event.data)\"\n  >\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        @if (canUseRowReorder()) {\n          <col [style.width]=\"getRowReorderColumnWidth()\" />\n        }\n\n        @for (col of columns; track col) {\n          <col [style.width]=\"col.width || getHeaderWidth(col)\" />\n        }\n      </colgroup>\n    </ng-template>\n\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          @if (hasSearchFilter) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Clear filters\"\n              (click)=\"clear(dt)\"\n            ></button>\n          }\n\n          @if (hasExportExcel) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Export to Excel\"\n              (click)=\"exportExcel()\"\n            ></button>\n          }\n\n          @if (hasExportPDF) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Export to PDF\"\n              (click)=\"exportPdf()\"\n            ></button>\n          }\n        </div>\n\n        @if (hasSearchFilter) {\n          <div class=\"ml-auto\">\n            <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n              <p-inputIcon>\n                <i class=\"pi pi-search\"></i>\n              </p-inputIcon>\n\n              <input\n                pInputText\n                type=\"text\"\n                [(ngModel)]=\"searchValue\"\n                placeholder=\"Search keyword\"\n                (input)=\"filterGlobal($event)\"\n              />\n            </p-iconField>\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        @if (canUseRowReorder()) {\n          <th\n            [style.width]=\"getRowReorderColumnWidth()\"\n            [ngStyle]=\"getStaticCellStyle()\"\n          ></th>\n        }\n\n        @for (col of columns; track col) {\n          @if (!col.children) {\n            <th\n              [pSortableColumn]=\"col.code\"\n              [pSortableColumnDisabled]=\"\n                !isSortable || col.isSortable === false\n              \"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"[\n                getHeaderAlignClass(col),\n                col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n              ]\"\n              colspan=\"1\"\n            >\n              <div class=\"header-container\" [ngStyle]=\"getCellInnerStyle(col)\">\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n\n                @if (\n                  (isSortable && col.isSortable !== false) ||\n                  (hasColumnFilter && col.isFilter !== false)\n                ) {\n                  <div class=\"icons\">\n                    @if (isSortable && col.isSortable !== false) {\n                      <p-sortIcon [field]=\"col.code\" />\n                    }\n\n                    @if (hasColumnFilter && col.isFilter !== false) {\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          type=\"text\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"false\"\n                          [showOperator]=\"false\"\n                          (onClear)=\"onComposedColumnClear(col)\"\n                        >\n                          <ng-template\n                            pTemplate=\"filter\"\n                            let-filter=\"filterCallback\"\n                          >\n                            @for (\n                              composedName of col.composedNames;\n                              track composedName\n                            ) {\n                              @if (\n                                getComposedFieldType(col, composedName) ===\n                                TableTypeEnum.STRING\n                              ) {\n                                <div>\n                                  <p-multiSelect\n                                    [options]=\"filters[composedName]?.options\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [ngModel]=\"\n                                      filters[composedName]?.value ?? []\n                                    \"\n                                    [placeholder]=\"\n                                      filters[composedName]?.placeholder\n                                    \"\n                                    display=\"chip\"\n                                    (ngModelChange)=\"\n                                      onComposedFilterValueChange(\n                                        col,\n                                        composedName,\n                                        $event\n                                      );\n                                      filter($event ?? [])\n                                    \"\n                                  >\n                                    <ng-template let-item pTemplate=\"item\">\n                                      <div class=\"custom-multiselect-item\">\n                                        @if (item.image) {\n                                          <img\n                                            [src]=\"item.image\"\n                                            alt=\"icon\"\n                                            class=\"filter-image\"\n                                          />\n                                        }\n\n                                        <span>{{ item.label }}</span>\n                                      </div>\n                                    </ng-template>\n                                  </p-multiSelect>\n                                </div>\n                              }\n                            }\n                          </ng-template>\n                        </p-columnFilter>\n                      } @else {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          [type]=\"getColumnFilterType(col)\"\n                          [currency]=\"getCurrencySymbol(col)\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [showOperator]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [matchMode]=\"\n                            col.type === TableTypeEnum.MULTISELECT\n                              ? 'in'\n                              : undefined\n                          \"\n                          (onClear)=\"onFilterClear(col.code!)\"\n                        >\n                          @if (\n                            col.type === TableTypeEnum.NUMBER ||\n                            col.type === TableTypeEnum.AMOUNT\n                          ) {\n                            <ng-template pTemplate=\"filter\" let-value>\n                              <input\n                                pInputText\n                                type=\"text\"\n                                inputmode=\"decimal\"\n                                [ngModel]=\"\n                                  latestFilterValues[col.code!] ?? value\n                                \"\n                                placeholder=\"Enter a number\"\n                                (ngModelChange)=\"\n                                  onNumberFilterChange(col.code!, $event)\n                                \"\n                              />\n                            </ng-template>\n                          }\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"col.type === TableTypeEnum.DATE\"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-datepicker\n                              [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                              dateFormat=\"dd/mm/yy\"\n                              placeholder=\"Choose a date\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event)\n                              \"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"\n                              col.type === TableTypeEnum.MULTISELECT &&\n                              col.filterOptions &&\n                              col.filterOptions.length > 0\n                            \"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-multiSelect\n                              [options]=\"col.filterOptions\"\n                              optionLabel=\"label\"\n                              optionValue=\"value\"\n                              [ngModel]=\"\n                                latestFilterValues[col.code!] ?? value ?? []\n                              \"\n                              display=\"chip\"\n                              placeholder=\"Choose option\"\n                              class=\"custom-multiselect\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event ?? [])\n                              \"\n                            ></p-multiSelect>\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </th>\n          } @else {\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          }\n        }\n      </tr>\n\n      @if (hasGroupedColumns) {\n        <tr>\n          @if (canUseRowReorder()) {\n            <th\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            ></th>\n          }\n\n          @for (col of columns; track col) {\n            @if (col.children) {\n              @for (child of col.children; track child) {\n                <th\n                  [pSortableColumn]=\"child.code\"\n                  [pSortableColumnDisabled]=\"\n                    !isSortable || child.isSortable === false\n                  \"\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngStyle]=\"getHeaderCellStyle(child)\"\n                  [ngClass]=\"getHeaderAlignClass(child)\"\n                >\n                  <div\n                    class=\"header-container\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    <span [ngClass]=\"getHeaderTitleClass(child)\">\n                      {{ child.title }}\n                    </span>\n\n                    @if (\n                      (isSortable && child.isSortable !== false) ||\n                      (hasColumnFilter && child.isFilter !== false)\n                    ) {\n                      <div class=\"icons\">\n                        @if (isSortable && child.isSortable !== false) {\n                          <p-sortIcon [field]=\"child.code\" />\n                        }\n\n                        @if (hasColumnFilter && child.isFilter !== false) {\n                          <p-columnFilter\n                            display=\"menu\"\n                            [field]=\"child.code\"\n                            [type]=\"getColumnFilterType(child)\"\n                            [currency]=\"getCurrencySymbol(child)\"\n                            [showApplyButton]=\"true\"\n                            [showClearButton]=\"true\"\n                            [showMatchModes]=\"\n                              child.type !== TableTypeEnum.MULTISELECT\n                            \"\n                            [showOperator]=\"\n                              child.type !== TableTypeEnum.MULTISELECT\n                            \"\n                            [matchMode]=\"\n                              child.type === TableTypeEnum.MULTISELECT\n                                ? 'in'\n                                : undefined\n                            \"\n                            (onClear)=\"onFilterClear(child.code!)\"\n                          ></p-columnFilter>\n                        }\n                      </div>\n                    }\n                  </div>\n                </th>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"p-datatable-emptymessage\">\n        <td\n          class=\"empty-message-cell\"\n          [attr.colspan]=\"columns.length + (canUseRowReorder() ? 1 : 0)\"\n        >\n          <div class=\"empty-message-wrapper\">\n            <div class=\"empty-message\">\n              <i class=\"pi pi-info-circle\"></i>\n              <p>No records available to display.</p>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"body\" let-data let-editing=\"editing\">\n      @if (!loading) {\n        <tr\n          [pEditableRow]=\"isEdit ? data : null\"\n          [pSelectableRow]=\"selectionMode ? data : null\"\n          [attr.data-row-reorder-target]=\"canUseRowReorder() ? 'true' : null\"\n        >\n          @if (canUseRowReorder()) {\n            <td\n              class=\"row-reorder-column\"\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [style.text-align]=\"'center'\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            >\n              <div class=\"row-reorder-actions\">\n                <span\n                  class=\"row-drag-handle\"\n                  title=\"D\u00E9placer la ligne\"\n                  (pointerdown)=\"onRowPointerDown($event, data)\"\n                >\n                  <i class=\"pi pi-bars\"></i>\n                </span>\n\n                @if (showRowMoveArrows) {\n                  <div class=\"row-reorder-arrow-buttons\">\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-up\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Monter la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowUp(data)\"\n                      (click)=\"moveRowUp(data); $event.stopPropagation()\"\n                    ></button>\n\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-down\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Descendre la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowDown(data)\"\n                      (click)=\"moveRowDown(data); $event.stopPropagation()\"\n                    ></button>\n                  </div>\n                }\n              </div>\n            </td>\n          }\n\n          @for (col of columns; track col) {\n            @if (!col.children) {\n              @if (isEditable(col.code!) && col.type !== TableTypeEnum.ACTION) {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"getDataAlignClass(col)\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(col)\"\n                    [ngStyle]=\"getCellInnerStyle(col)\"\n                  >\n                    @if (isMultiSelect(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-multiSelect\n                            appendTo=\"body\"\n                            [ngModel]=\"data[col.code!]\"\n                            [style]=\"{ width: '100%' }\"\n                            [options]=\"optionValues\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                          ></p-multiSelect>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          <div class=\"multi-select-container\">\n                            @for (\n                              rec of getMultiSelectValues(data[col.code!]);\n                              track rec\n                            ) {\n                              <p-tag [value]=\"rec\"></p-tag>\n                            }\n                          </div>\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else if (isDatePicker(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-datepicker\n                            [inputId]=\"data[col.code!]\"\n                            [ngModel]=\"data[col.code!]\"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                          ></p-datepicker>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ data[col.code!] | customDate }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"data[col.code!]\"\n                            (change)=\"onChange($event, data.id, col.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          @if (col.type === TableTypeEnum.AMOUNT) {\n                            {{\n                              data[col.code!]\n                                | customCurrency\n                                  : getCurrencySymbol(col)\n                                  : col.decimalPlaces\n                                  : col.thousandSeparator\n                                  : col.decimalSeparator\n                            }}\n                          } @else {\n                            {{ data[col.code!] }}\n                          }\n                        </ng-template>\n                      </p-cellEditor>\n                    }\n                  </div>\n                </td>\n              } @else {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"[\n                    getDataAlignClass(col),\n                    col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n                  ]\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  @if (col.type === TableTypeEnum.ACTION) {\n                    <div\n                      class=\"action-buttons-container\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (isDelete) {\n                        <button\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-trash\"\n                          class=\"p-button-rounded p-button-text\"\n                          pTooltip=\"Supprimer\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          (click)=\"Delete(data)\"\n                        ></button>\n                      }\n\n                      @if (isEdit) {\n                        <div>\n                          @if (!editing) {\n                            <button\n                              pInitEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-pencil\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Modifier\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"initEditableRow(data)\"\n                            ></button>\n                          }\n\n                          @if (editing) {\n                            <button\n                              pSaveEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-check\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Enregistrer\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"saveEditableRow(data)\"\n                            ></button>\n\n                            <button\n                              pCancelEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-times\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Annuler\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"cancelEditableRow(data)\"\n                            ></button>\n                          }\n                        </div>\n                      }\n\n                      @for (act of customActions; track act) {\n                        @if (isActionVisible(act, data)) {\n                          <button\n                            pButton\n                            pRipple\n                            type=\"button\"\n                            class=\"p-button-rounded p-button-text\"\n                            [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                            [ngClass]=\"act.styleClass\"\n                            [disabled]=\"isActionDisabled(act, data)\"\n                            [pTooltip]=\"act.tooltip || ''\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            (click)=\"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?.[i] === TableTypeEnum.IMAGE\n                            ) {\n                              <img\n                                [src]=\"data[col.code!]?.[composedName]\"\n                                alt=\"composed-img\"\n                                class=\"composed-image\"\n                                [ngStyle]=\"\n                                  getMergedComposedImageStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              />\n                            }\n\n                            @if (\n                              col.composedTypes?.[i] === TableTypeEnum.STRING\n                            ) {\n                              <span\n                                class=\"composed-text\"\n                                [ngStyle]=\"\n                                  getMergedComposedTextStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              >\n                                {{ data[col.code!]?.[composedName] }}\n                              </span>\n                            }\n                          }\n                        </div>\n                      } @else if (col.type === TableTypeEnum.PROGRESS) {\n                        <div class=\"progress-cell\">\n                          <p-progressBar\n                            [value]=\"getProgressValue(col, data)\"\n                            [showValue]=\"false\"\n                            [ngClass]=\"\n                              'pt-progress-' + getProgressSeverity(col, data)\n                            \"\n                          ></p-progressBar>\n\n                          @if (isProgressShowValue(col)) {\n                            <span class=\"progress-cell-value\">\n                              {{ getProgressValue(col, data)\n                              }}{{ getProgressUnit(col) }}\n                            </span>\n                          }\n                        </div>\n                      } @else if (col.type === TableTypeEnum.TAG) {\n                        <p-tag\n                          [value]=\"getTagValue(col, data)\"\n                          [severity]=\"$any(getTagSeverity(col, data))\"\n                          [icon]=\"getTagIcon(col, data)\"\n                          [rounded]=\"isTagRounded(col)\"\n                        ></p-tag>\n                      } @else if (col.type === TableTypeEnum.AMOUNT) {\n                        {{\n                          data[col.code!]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      } @else if (col.type === TableTypeEnum.NUMBER) {\n                        {{\n                          formatNumber(\n                            data[col.code!],\n                            col.decimalPlaces,\n                            col.thousandSeparator,\n                            col.decimalSeparator\n                          )\n                        }}\n                      } @else if (col.type === TableTypeEnum.DATE) {\n                        {{\n                          formatDateWithColumn(\n                            parseAnyDate(data[col.code!]),\n                            col\n                          )\n                        }}\n                      } @else if (col.type === TableTypeEnum.DATETIME) {\n                        {{\n                          formatDateTimeWithColumn(\n                            parseAnyDate(data[col.code!]),\n                            col\n                          )\n                        }}\n                      } @else if (\n                        [\n                          TableTypeEnum.STRING,\n                          TableTypeEnum.MULTISELECT,\n                        ].includes(col.type!)\n                      ) {\n                        {{ data[col.code!] }}\n                      }\n                    </div>\n                  }\n                </td>\n              }\n            } @else {\n              @for (child of col.children; track child) {\n                <td\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngClass]=\"getDataAlignClass(child)\"\n                  [ngStyle]=\"getCellStyle(child, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(child)\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    @if (isEditable(child.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"child.code ? data[child.code] : null\"\n                            (change)=\"onChange($event, data.id, child.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ child.code ? data[child.code] : \"\" }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else if (child.type === TableTypeEnum.TAG) {\n                      <p-tag\n                        [value]=\"getTagValue(child, data)\"\n                        [severity]=\"$any(getTagSeverity(child, data))\"\n                        [icon]=\"getTagIcon(child, data)\"\n                        [rounded]=\"isTagRounded(child)\"\n                      ></p-tag>\n                    } @else {\n                      {{ child.code ? data[child.code] : \"\" }}\n                    }\n                  </div>\n                </td>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.pt-advanced-prime-table{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{display:grid;align-items:center;justify-items:start;width:100%;min-width:0;height:5rem}.pt-advanced-prime-table .filter-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .settings{display:flex;align-items:center;gap:1rem;min-width:0}.pt-advanced-prime-table .multi-select-container{display:flex;align-items:center;gap:.3rem;min-width:0}.pt-advanced-prime-table .table-container{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep p-table{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper{display:block;width:100%;min-width:0;max-width:100%;overflow-x:auto!important;overflow-y:visible!important;overscroll-behavior-x:contain;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{width:100%;min-width:var(--pt-advanced-table-min-width, 95rem);max-width:none;table-layout:fixed;border-collapse:separate;border-spacing:0}.pt-advanced-prime-table ::ng-deep .p-datatable-header,.pt-advanced-prime-table ::ng-deep .p-datatable-caption{width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-caption>.flex,.pt-advanced-prime-table ::ng-deep .p-datatable-header>.flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{position:relative;display:flex;align-items:center;gap:.25rem;width:100%!important;min-width:0;max-width:100%;margin:0!important;padding:0!important}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{display:block;flex:1 1 auto;width:auto;min-width:0;max-width:100%;padding:0;line-height:1.2;white-space:normal;overflow-wrap:break-word;word-break:normal}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-container>.icons{position:static!important;top:auto!important;right:auto!important;display:inline-flex;align-items:center;justify-content:flex-end;flex:0 0 auto;gap:.15rem;width:auto!important;min-width:1.5rem;max-width:none;margin-left:auto;padding:0;transform:none!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .header-container>.icons p-sorticon,.pt-advanced-prime-table ::ng-deep .header-container>.icons p-columnfilter{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0}.pt-advanced-prime-table ::ng-deep .header-container>p-columnfilter:last-child{position:static!important;top:auto!important;right:auto!important;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0 0 0 auto!important;transform:none!important}.pt-advanced-prime-table ::ng-deep .p-sortable-column-icon,.pt-advanced-prime-table ::ng-deep .p-column-filter-menu-button{flex:0 0 auto;margin:0!important}.pt-advanced-prime-table ::ng-deep .p-column-filter-menu-button{width:1.75rem;height:1.75rem;padding:0}.pt-advanced-prime-table ::ng-deep p-sorticon{width:1.25rem;min-width:1.25rem}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:0}.pt-advanced-prime-table .flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield{position:relative;display:inline-flex;align-items:center;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep p-inputicon,.pt-advanced-prime-table ::ng-deep .p-inputicon,.pt-advanced-prime-table ::ng-deep .p-input-icon{position:absolute;top:50%;left:.85rem;z-index:2;display:inline-flex;align-items:center;justify-content:center;margin:0;transform:translateY(-50%);pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-iconfield .p-inputtext{width:100%;max-width:100%;padding-left:2.5rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{margin-left:1rem;cursor:pointer}.pt-advanced-prime-table .table-row{display:flex;justify-content:center;gap:1rem;min-width:0;text-align:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{color:green;font-size:1.25em}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{color:red;font-size:1.25em}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:180px}.pt-advanced-prime-table .empty-message{color:#888;font-size:1.2rem;text-align:center}.pt-advanced-prime-table .empty-message i{display:block;margin-bottom:.5rem;font-size:2rem}.pt-advanced-prime-table th,.pt-advanced-prime-table td{min-width:0;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-advanced-prime-table ::ng-deep .p-datatable-thead>tr>th,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td{min-width:0;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-advanced-prime-table ::ng-deep .p-datatable-thead>tr>th{vertical-align:middle}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td{vertical-align:top}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right,.pt-advanced-prime-table ::ng-deep .composed-cell,.pt-advanced-prime-table ::ng-deep .composed-text{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right{display:flex;align-items:flex-start;width:100%;min-width:0}.pt-advanced-prime-table .cell-inner-left{justify-content:flex-start;text-align:left}.pt-advanced-prime-table .cell-inner-center{justify-content:center;text-align:center}.pt-advanced-prime-table .cell-inner-right{justify-content:flex-end;text-align:right}.pt-advanced-prime-table ::ng-deep .p-tag{padding:.2rem .55rem;font-size:.72rem;font-weight:800;line-height:1.2;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .p-tag .p-tag-icon{margin-right:.25rem}.pt-advanced-prime-table .progress-cell{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1 1 auto;width:100%;min-width:0;height:.75rem!important;overflow:hidden;border-radius:999px;background:#e5e7eb!important}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar-value{display:block!important;height:100%!important;border-radius:999px}.pt-advanced-prime-table .progress-cell-value{flex:0 0 auto;min-width:38px;color:#334155;font-size:.72rem;font-weight:800;text-align:right}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{align-items:center;justify-content:center;padding:0;overflow:hidden;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .action-buttons-container{display:flex;align-items:center!important;justify-content:center!important;flex-wrap:wrap;gap:.35rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{min-width:22px!important;height:22px!important;padding:.25rem!important}.pt-advanced-prime-table ::ng-deep .pt-progress-success .p-progressbar-value{background:#22c55e!important}.pt-advanced-prime-table ::ng-deep .pt-progress-warning .p-progressbar-value{background:#f59e0b!important}.pt-advanced-prime-table ::ng-deep .pt-progress-danger .p-progressbar-value{background:#ef4444!important}.pt-advanced-prime-table ::ng-deep .pt-progress-info .p-progressbar-value{background:#3b82f6!important}.pt-advanced-prime-table ::ng-deep .composed-cell{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .composed-image{display:block;flex:0 0 auto;object-fit:contain}.pt-advanced-prime-table ::ng-deep .composed-text{flex:1 1 auto;min-width:0}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{transition:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging{cursor:grabbing!important;opacity:.55}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:5;box-shadow:inset 0 0 0 1px #3b82f673}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before:before{position:absolute;z-index:30;top:-2px;right:0;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after:after{position:absolute;z-index:30;right:0;bottom:-2px;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td{border-top:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{border-bottom:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-drag-handle{display:inline-flex;align-items:center;justify-content:center;width:2rem;min-width:2rem;height:2rem;border-radius:6px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.pt-advanced-prime-table ::ng-deep .row-drag-handle:hover{background:#3b82f61a}.pt-advanced-prime-table ::ng-deep .row-drag-handle:active{cursor:grabbing}.pt-advanced-prime-table ::ng-deep .row-drag-handle .pi{color:#64748b;font-size:.95rem}.pt-advanced-prime-table ::ng-deep td.row-reorder-column,.pt-advanced-prime-table ::ng-deep th.row-reorder-column{width:7rem;min-width:7rem;padding:.25rem .4rem!important;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .row-reorder-actions{display:inline-flex;align-items:center;justify-content:center;gap:.15rem;width:100%}.pt-advanced-prime-table ::ng-deep .row-reorder-arrow-buttons{display:inline-flex;flex-direction:column;gap:0}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text{width:1.75rem!important;min-width:1.75rem!important;height:1.75rem!important;padding:0!important;border-radius:6px!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text .p-button-icon{font-size:.75rem}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:not(:disabled):hover{background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:disabled{cursor:not-allowed;opacity:.35}.pt-advanced-prime-table.dragging-active,.pt-advanced-prime-table.dragging-active *{-webkit-user-select:none!important;user-select:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:10}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-after>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar{width:10px;height:10px}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-track,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-track{border-radius:999px;background:var(--pt-advanced-table-scrollbar-track, #f1f5f9)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb{border:2px solid var(--pt-advanced-table-scrollbar-track, #f1f5f9);border-radius:999px;background:var(--pt-advanced-table-scrollbar-thumb, #94a3b8)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb:hover,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb:hover{background:var(--pt-advanced-table-scrollbar-thumb-hover, #64748b)}@media(max-width:768px){.pt-advanced-prime-table .filter-container,.pt-advanced-prime-table .flex{align-items:stretch;flex-direction:column}.pt-advanced-prime-table .settings{flex-wrap:wrap}.pt-advanced-prime-table .ml-auto{width:100%;margin-left:0}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield,.pt-advanced-prime-table ::ng-deep .p-inputtext{width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{min-width:var(--pt-advanced-table-mobile-min-width, 78rem)}}\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", hasContextMenu: "hasContextMenu" }, outputs: { selectionChange: "selectionChange", rowSelect: "rowSelect", rowUnselect: "rowUnselect", lazyLoad: "lazyLoad", search: "search", exportExcelEvent: "exportExcelEvent", exportPdfEvent: "exportPdfEvent", onPageChange: "onPageChange", onSortColumn: "onSortColumn", onFilterColumn: "onFilterColumn", rowReorderChange: "rowReorderChange", filteredData: "filteredData" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #tableContainer class=\"pt-advanced-prime-table table-container\">\n  @if (hasContextMenu) {\n    <p-contextMenu\n      #contextMenu\n      [model]=\"contextMenuItems\"\n      appendTo=\"body\"\n      styleClass=\"pt-table-context-menu\"\n      (onHide)=\"onContextMenuHide()\"\n    ></p-contextMenu>\n  }\n  <p-table\n    #dt\n    [value]=\"tableData\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"isLazy\"\n    [filterDelay]=\"0\"\n    [dataKey]=\"selectionDataKey || rowReorderIdField || 'id'\"\n    [rowTrackBy]=\"rowTrackBy\"\n    paginatorDropdownAppendTo=\"body\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    (selectionChange)=\"selectionChange.emit($event)\"\n    (onRowSelect)=\"rowSelect.emit($event.data)\"\n    (onRowUnselect)=\"rowUnselect.emit($event.data)\"\n  >\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        @if (canUseRowReorder()) {\n          <col [style.width]=\"getRowReorderColumnWidth()\" />\n        }\n\n        @for (col of columns; track col) {\n          <col [style.width]=\"col.width || getHeaderWidth(col)\" />\n        }\n      </colgroup>\n    </ng-template>\n\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          @if (hasSearchFilter) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Clear filters\"\n              (click)=\"clear(dt)\"\n            ></button>\n          }\n\n          @if (hasExportExcel) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Export to Excel\"\n              (click)=\"exportExcel()\"\n            ></button>\n          }\n\n          @if (hasExportPDF) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Export to PDF\"\n              (click)=\"exportPdf()\"\n            ></button>\n          }\n        </div>\n\n        @if (hasSearchFilter) {\n          <div class=\"ml-auto\">\n            <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n              <p-inputIcon>\n                <i class=\"pi pi-search\"></i>\n              </p-inputIcon>\n\n              <input\n                pInputText\n                type=\"text\"\n                [(ngModel)]=\"searchValue\"\n                placeholder=\"Search keyword\"\n                (input)=\"filterGlobal($event)\"\n              />\n            </p-iconField>\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        @if (canUseRowReorder()) {\n          <th\n            [style.width]=\"getRowReorderColumnWidth()\"\n            [ngStyle]=\"getStaticCellStyle()\"\n          ></th>\n        }\n\n        @for (col of columns; track col) {\n          @if (!col.children) {\n            <th\n              [pSortableColumn]=\"col.code\"\n              [pSortableColumnDisabled]=\"\n                !isSortable || col.isSortable === false\n              \"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"[\n                getHeaderAlignClass(col),\n                col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n              ]\"\n              colspan=\"1\"\n            >\n              <div class=\"header-container\" [ngStyle]=\"getCellInnerStyle(col)\">\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n\n                @if (\n                  (isSortable && col.isSortable !== false) ||\n                  (hasColumnFilter && col.isFilter !== false)\n                ) {\n                  <div class=\"icons\">\n                    @if (isSortable && col.isSortable !== false) {\n                      <p-sortIcon [field]=\"col.code\" />\n                    }\n\n                    @if (hasColumnFilter && col.isFilter !== false) {\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          type=\"text\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"false\"\n                          [showOperator]=\"false\"\n                          (onClear)=\"onComposedColumnClear(col)\"\n                        >\n                          <ng-template\n                            pTemplate=\"filter\"\n                            let-filter=\"filterCallback\"\n                          >\n                            @for (\n                              composedName of col.composedNames;\n                              track composedName\n                            ) {\n                              @if (\n                                getComposedFieldType(col, composedName) ===\n                                TableTypeEnum.STRING\n                              ) {\n                                <div>\n                                  <p-multiSelect\n                                    [options]=\"filters[composedName]?.options\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [ngModel]=\"\n                                      filters[composedName]?.value ?? []\n                                    \"\n                                    [placeholder]=\"\n                                      filters[composedName]?.placeholder\n                                    \"\n                                    display=\"chip\"\n                                    (ngModelChange)=\"\n                                      onComposedFilterValueChange(\n                                        col,\n                                        composedName,\n                                        $event\n                                      );\n                                      filter($event ?? [])\n                                    \"\n                                  >\n                                    <ng-template let-item pTemplate=\"item\">\n                                      <div class=\"custom-multiselect-item\">\n                                        @if (item.image) {\n                                          <img\n                                            [src]=\"item.image\"\n                                            alt=\"icon\"\n                                            class=\"filter-image\"\n                                          />\n                                        }\n\n                                        <span>{{ item.label }}</span>\n                                      </div>\n                                    </ng-template>\n                                  </p-multiSelect>\n                                </div>\n                              }\n                            }\n                          </ng-template>\n                        </p-columnFilter>\n                      } @else {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          [type]=\"getColumnFilterType(col)\"\n                          [currency]=\"getCurrencySymbol(col)\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [showOperator]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [matchMode]=\"\n                            col.type === TableTypeEnum.MULTISELECT\n                              ? 'in'\n                              : undefined\n                          \"\n                          (onClear)=\"onFilterClear(col.code!)\"\n                        >\n                          @if (\n                            col.type === TableTypeEnum.NUMBER ||\n                            col.type === TableTypeEnum.AMOUNT\n                          ) {\n                            <ng-template pTemplate=\"filter\" let-value>\n                              <input\n                                pInputText\n                                type=\"text\"\n                                inputmode=\"decimal\"\n                                [ngModel]=\"\n                                  latestFilterValues[col.code!] ?? value\n                                \"\n                                placeholder=\"Enter a number\"\n                                (ngModelChange)=\"\n                                  onNumberFilterChange(col.code!, $event)\n                                \"\n                              />\n                            </ng-template>\n                          }\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"col.type === TableTypeEnum.DATE\"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-datepicker\n                              [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                              dateFormat=\"dd/mm/yy\"\n                              placeholder=\"Choose a date\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event)\n                              \"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"\n                              col.type === TableTypeEnum.MULTISELECT &&\n                              col.filterOptions &&\n                              col.filterOptions.length > 0\n                            \"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-multiSelect\n                              [options]=\"col.filterOptions\"\n                              optionLabel=\"label\"\n                              optionValue=\"value\"\n                              [ngModel]=\"\n                                latestFilterValues[col.code!] ?? value ?? []\n                              \"\n                              display=\"chip\"\n                              placeholder=\"Choose option\"\n                              class=\"custom-multiselect\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event ?? [])\n                              \"\n                            ></p-multiSelect>\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </th>\n          } @else {\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          }\n        }\n      </tr>\n\n      @if (hasGroupedColumns) {\n        <tr>\n          @if (canUseRowReorder()) {\n            <th\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            ></th>\n          }\n\n          @for (col of columns; track col) {\n            @if (col.children) {\n              @for (child of col.children; track child) {\n                <th\n                  [pSortableColumn]=\"child.code\"\n                  [pSortableColumnDisabled]=\"\n                    !isSortable || child.isSortable === false\n                  \"\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngStyle]=\"getHeaderCellStyle(child)\"\n                  [ngClass]=\"getHeaderAlignClass(child)\"\n                >\n                  <div\n                    class=\"header-container\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    <span [ngClass]=\"getHeaderTitleClass(child)\">\n                      {{ child.title }}\n                    </span>\n\n                    @if (\n                      (isSortable && child.isSortable !== false) ||\n                      (hasColumnFilter && child.isFilter !== false)\n                    ) {\n                      <div class=\"icons\">\n                        @if (isSortable && child.isSortable !== false) {\n                          <p-sortIcon [field]=\"child.code\" />\n                        }\n\n                        @if (hasColumnFilter && child.isFilter !== false) {\n                          <p-columnFilter\n                            display=\"menu\"\n                            [field]=\"child.code\"\n                            [type]=\"getColumnFilterType(child)\"\n                            [currency]=\"getCurrencySymbol(child)\"\n                            [showApplyButton]=\"true\"\n                            [showClearButton]=\"true\"\n                            [showMatchModes]=\"\n                              child.type !== TableTypeEnum.MULTISELECT\n                            \"\n                            [showOperator]=\"\n                              child.type !== TableTypeEnum.MULTISELECT\n                            \"\n                            [matchMode]=\"\n                              child.type === TableTypeEnum.MULTISELECT\n                                ? 'in'\n                                : undefined\n                            \"\n                            (onClear)=\"onFilterClear(child.code!)\"\n                          ></p-columnFilter>\n                        }\n                      </div>\n                    }\n                  </div>\n                </th>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"p-datatable-emptymessage\">\n        <td\n          class=\"empty-message-cell\"\n          [attr.colspan]=\"columns.length + (canUseRowReorder() ? 1 : 0)\"\n        >\n          <div class=\"empty-message-wrapper\">\n            <div class=\"empty-message\">\n              <i class=\"pi pi-info-circle\"></i>\n              <p>No records available to display.</p>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"body\" let-data let-editing=\"editing\">\n      @if (!loading) {\n        <tr\n          [pEditableRow]=\"isEdit ? data : null\"\n          [pSelectableRow]=\"selectionMode ? data : null\"\n          [attr.data-row-reorder-target]=\"canUseRowReorder() ? 'true' : null\"\n          [class.pt-context-menu-row]=\"hasContextMenu\"\n          (contextmenu)=\"onRowContextMenu($event, data)\"\n        >\n          @if (canUseRowReorder()) {\n            <td\n              class=\"row-reorder-column\"\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [style.text-align]=\"'center'\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            >\n              <div class=\"row-reorder-actions\">\n                <span\n                  class=\"row-drag-handle\"\n                  title=\"D\u00E9placer la ligne\"\n                  (pointerdown)=\"onRowPointerDown($event, data)\"\n                >\n                  <i class=\"pi pi-bars\"></i>\n                </span>\n\n                @if (showRowMoveArrows) {\n                  <div class=\"row-reorder-arrow-buttons\">\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-up\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Monter la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowUp(data)\"\n                      (click)=\"moveRowUp(data); $event.stopPropagation()\"\n                    ></button>\n\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-down\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Descendre la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowDown(data)\"\n                      (click)=\"moveRowDown(data); $event.stopPropagation()\"\n                    ></button>\n                  </div>\n                }\n              </div>\n            </td>\n          }\n\n          @for (col of columns; track col) {\n            @if (!col.children) {\n              @if (isEditable(col.code!) && col.type !== TableTypeEnum.ACTION) {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"getDataAlignClass(col)\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(col)\"\n                    [ngStyle]=\"getCellInnerStyle(col)\"\n                  >\n                    @if (isMultiSelect(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-multiSelect\n                            appendTo=\"body\"\n                            [ngModel]=\"data[col.code!]\"\n                            [style]=\"{ width: '100%' }\"\n                            [options]=\"optionValues\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                          ></p-multiSelect>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          <div class=\"multi-select-container\">\n                            @for (\n                              rec of getMultiSelectValues(data[col.code!]);\n                              track rec\n                            ) {\n                              <p-tag [value]=\"rec\"></p-tag>\n                            }\n                          </div>\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else if (isDatePicker(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-datepicker\n                            [inputId]=\"data[col.code!]\"\n                            [ngModel]=\"data[col.code!]\"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                          ></p-datepicker>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ data[col.code!] | customDate }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"data[col.code!]\"\n                            (change)=\"onChange($event, data.id, col.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          @if (col.type === TableTypeEnum.AMOUNT) {\n                            {{\n                              data[col.code!]\n                                | customCurrency\n                                  : getCurrencySymbol(col)\n                                  : col.decimalPlaces\n                                  : col.thousandSeparator\n                                  : col.decimalSeparator\n                            }}\n                          } @else {\n                            {{ data[col.code!] }}\n                          }\n                        </ng-template>\n                      </p-cellEditor>\n                    }\n                  </div>\n                </td>\n              } @else {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"[\n                    getDataAlignClass(col),\n                    col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n                  ]\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  @if (col.type === TableTypeEnum.ACTION) {\n                    <div\n                      class=\"action-buttons-container\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (isDelete) {\n                        <button\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-trash\"\n                          class=\"p-button-rounded p-button-text\"\n                          pTooltip=\"Supprimer\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          (click)=\"Delete(data); $event.stopPropagation()\"\n                        ></button>\n                      }\n\n                      @if (isEdit) {\n                        <div>\n                          @if (!editing) {\n                            <button\n                              pInitEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-pencil\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Modifier\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"\n                                startRowEdit(data); $event.stopPropagation()\n                              \"\n                            ></button>\n                          }\n\n                          @if (editing) {\n                            <button\n                              pSaveEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-check\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Enregistrer\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"\n                                saveRowEdit(data); $event.stopPropagation()\n                              \"\n                            ></button>\n\n                            <button\n                              pCancelEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-times\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Annuler\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"\n                                cancelRowEdit(data); $event.stopPropagation()\n                              \"\n                            ></button>\n                          }\n                        </div>\n                      }\n\n                      @for (act of customActions; track act) {\n                        @if (isActionVisible(act, data)) {\n                          <button\n                            pButton\n                            pRipple\n                            type=\"button\"\n                            class=\"p-button-rounded p-button-text\"\n                            [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                            [ngClass]=\"act.styleClass\"\n                            [disabled]=\"isActionDisabled(act, data)\"\n                            [pTooltip]=\"act.tooltip || ''\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            (click)=\"\n                              onCustomActionClick(act, data);\n                              $event.stopPropagation()\n                            \"\n                          ></button>\n                        }\n                      }\n                    </div>\n                  } @else {\n                    <div\n                      [ngClass]=\"getCellInnerAlignClass(col)\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <div class=\"composed-cell\">\n                          @for (\n                            composedName of col.composedNames;\n                            track composedName;\n                            let i = $index\n                          ) {\n                            @if (\n                              col.composedTypes?.[i] === TableTypeEnum.IMAGE\n                            ) {\n                              <img\n                                [src]=\"data[col.code!]?.[composedName]\"\n                                alt=\"composed-img\"\n                                class=\"composed-image\"\n                                [ngStyle]=\"\n                                  getMergedComposedImageStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              />\n                            }\n\n                            @if (\n                              col.composedTypes?.[i] === TableTypeEnum.STRING\n                            ) {\n                              <span\n                                class=\"composed-text\"\n                                [ngStyle]=\"\n                                  getMergedComposedTextStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              >\n                                {{ data[col.code!]?.[composedName] }}\n                              </span>\n                            }\n                          }\n                        </div>\n                      } @else if (col.type === TableTypeEnum.PROGRESS) {\n                        <div class=\"progress-cell\">\n                          <p-progressBar\n                            [value]=\"getProgressValue(col, data)\"\n                            [showValue]=\"false\"\n                            [ngClass]=\"\n                              'pt-progress-' + getProgressSeverity(col, data)\n                            \"\n                          ></p-progressBar>\n\n                          @if (isProgressShowValue(col)) {\n                            <span class=\"progress-cell-value\">\n                              {{ getProgressValue(col, data)\n                              }}{{ getProgressUnit(col) }}\n                            </span>\n                          }\n                        </div>\n                      } @else if (col.type === TableTypeEnum.TAG) {\n                        <p-tag\n                          [value]=\"getTagValue(col, data)\"\n                          [severity]=\"$any(getTagSeverity(col, data))\"\n                          [icon]=\"getTagIcon(col, data)\"\n                          [rounded]=\"isTagRounded(col)\"\n                        ></p-tag>\n                      } @else if (col.type === TableTypeEnum.AMOUNT) {\n                        {{\n                          data[col.code!]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      } @else if (col.type === TableTypeEnum.NUMBER) {\n                        {{\n                          formatNumber(\n                            data[col.code!],\n                            col.decimalPlaces,\n                            col.thousandSeparator,\n                            col.decimalSeparator\n                          )\n                        }}\n                      } @else if (col.type === TableTypeEnum.DATE) {\n                        {{\n                          formatDateWithColumn(\n                            parseAnyDate(data[col.code!]),\n                            col\n                          )\n                        }}\n                      } @else if (col.type === TableTypeEnum.DATETIME) {\n                        {{\n                          formatDateTimeWithColumn(\n                            parseAnyDate(data[col.code!]),\n                            col\n                          )\n                        }}\n                      } @else if (\n                        [\n                          TableTypeEnum.STRING,\n                          TableTypeEnum.MULTISELECT,\n                        ].includes(col.type!)\n                      ) {\n                        {{ data[col.code!] }}\n                      }\n                    </div>\n                  }\n                </td>\n              }\n            } @else {\n              @for (child of col.children; track child) {\n                <td\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngClass]=\"getDataAlignClass(child)\"\n                  [ngStyle]=\"getCellStyle(child, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(child)\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    @if (isEditable(child.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"child.code ? data[child.code] : null\"\n                            (change)=\"onChange($event, data.id, child.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ child.code ? data[child.code] : \"\" }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else if (child.type === TableTypeEnum.TAG) {\n                      <p-tag\n                        [value]=\"getTagValue(child, data)\"\n                        [severity]=\"$any(getTagSeverity(child, data))\"\n                        [icon]=\"getTagIcon(child, data)\"\n                        [rounded]=\"isTagRounded(child)\"\n                      ></p-tag>\n                    } @else {\n                      {{ child.code ? data[child.code] : \"\" }}\n                    }\n                  </div>\n                </td>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.pt-advanced-prime-table{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{display:grid;align-items:center;justify-items:start;width:100%;min-width:0;height:5rem}.pt-advanced-prime-table .filter-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .settings{display:flex;align-items:center;gap:1rem;min-width:0}.pt-advanced-prime-table .multi-select-container{display:flex;align-items:center;gap:.3rem;min-width:0}.pt-advanced-prime-table .table-container{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep p-table{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper{display:block;width:100%;min-width:0;max-width:100%;overflow-x:auto!important;overflow-y:visible!important;overscroll-behavior-x:contain;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{width:100%;min-width:var(--pt-advanced-table-min-width, 95rem);max-width:none;table-layout:fixed;border-collapse:separate;border-spacing:0}.pt-advanced-prime-table ::ng-deep .p-datatable-header,.pt-advanced-prime-table ::ng-deep .p-datatable-caption{width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-caption>.flex,.pt-advanced-prime-table ::ng-deep .p-datatable-header>.flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{position:relative;display:flex;align-items:center;gap:.25rem;width:100%!important;min-width:0;max-width:100%;margin:0!important;padding:0!important}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{display:block;flex:1 1 auto;width:auto;min-width:0;max-width:100%;padding:0;line-height:1.2;white-space:normal;overflow-wrap:break-word;word-break:normal}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-container>.icons{position:static!important;top:auto!important;right:auto!important;display:inline-flex;align-items:center;justify-content:flex-end;flex:0 0 auto;gap:.15rem;width:auto!important;min-width:1.5rem;max-width:none;margin-left:auto;padding:0;transform:none!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .header-container>.icons p-sorticon,.pt-advanced-prime-table ::ng-deep .header-container>.icons p-columnfilter{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0}.pt-advanced-prime-table ::ng-deep .header-container>p-columnfilter:last-child{position:static!important;top:auto!important;right:auto!important;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0 0 0 auto!important;transform:none!important}.pt-advanced-prime-table ::ng-deep .p-sortable-column-icon,.pt-advanced-prime-table ::ng-deep .p-column-filter-menu-button{flex:0 0 auto;margin:0!important}.pt-advanced-prime-table ::ng-deep .p-column-filter-menu-button{width:1.75rem;height:1.75rem;padding:0}.pt-advanced-prime-table ::ng-deep p-sorticon{width:1.25rem;min-width:1.25rem}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:0}.pt-advanced-prime-table .flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield{position:relative;display:inline-flex;align-items:center;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep p-inputicon,.pt-advanced-prime-table ::ng-deep .p-inputicon,.pt-advanced-prime-table ::ng-deep .p-input-icon{position:absolute;top:50%;left:.85rem;z-index:2;display:inline-flex;align-items:center;justify-content:center;margin:0;transform:translateY(-50%);pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-iconfield .p-inputtext{width:100%;max-width:100%;padding-left:2.5rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{margin-left:1rem;cursor:pointer}.pt-advanced-prime-table .table-row{display:flex;justify-content:center;gap:1rem;min-width:0;text-align:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{color:green;font-size:1.25em}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{color:red;font-size:1.25em}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:180px}.pt-advanced-prime-table .empty-message{color:#888;font-size:1.2rem;text-align:center}.pt-advanced-prime-table .empty-message i{display:block;margin-bottom:.5rem;font-size:2rem}.pt-advanced-prime-table th,.pt-advanced-prime-table td{min-width:0;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-advanced-prime-table ::ng-deep .p-datatable-thead>tr>th,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td{min-width:0;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-advanced-prime-table ::ng-deep .p-datatable-thead>tr>th{vertical-align:middle}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td{vertical-align:top}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right,.pt-advanced-prime-table ::ng-deep .composed-cell,.pt-advanced-prime-table ::ng-deep .composed-text{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right{display:flex;align-items:flex-start;width:100%;min-width:0}.pt-advanced-prime-table .cell-inner-left{justify-content:flex-start;text-align:left}.pt-advanced-prime-table .cell-inner-center{justify-content:center;text-align:center}.pt-advanced-prime-table .cell-inner-right{justify-content:flex-end;text-align:right}.pt-advanced-prime-table ::ng-deep .p-tag{padding:.2rem .55rem;font-size:.72rem;font-weight:800;line-height:1.2;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .p-tag .p-tag-icon{margin-right:.25rem}.pt-advanced-prime-table .progress-cell{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1 1 auto;width:100%;min-width:0;height:.75rem!important;overflow:hidden;border-radius:999px;background:#e5e7eb!important}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar-value{display:block!important;height:100%!important;border-radius:999px}.pt-advanced-prime-table .progress-cell-value{flex:0 0 auto;min-width:38px;color:#334155;font-size:.72rem;font-weight:800;text-align:right}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{align-items:center;justify-content:center;padding:0;overflow:hidden;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .action-buttons-container{display:flex;align-items:center!important;justify-content:center!important;flex-wrap:wrap;gap:.35rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{min-width:22px!important;height:22px!important;padding:.25rem!important}.pt-advanced-prime-table ::ng-deep .pt-progress-success .p-progressbar-value{background:#22c55e!important}.pt-advanced-prime-table ::ng-deep .pt-progress-warning .p-progressbar-value{background:#f59e0b!important}.pt-advanced-prime-table ::ng-deep .pt-progress-danger .p-progressbar-value{background:#ef4444!important}.pt-advanced-prime-table ::ng-deep .pt-progress-info .p-progressbar-value{background:#3b82f6!important}.pt-advanced-prime-table ::ng-deep .composed-cell{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .composed-image{display:block;flex:0 0 auto;object-fit:contain}.pt-advanced-prime-table ::ng-deep .composed-text{flex:1 1 auto;min-width:0}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{transition:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging{cursor:grabbing!important;opacity:.55}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:5;box-shadow:inset 0 0 0 1px #3b82f673}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before:before{position:absolute;z-index:30;top:-2px;right:0;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after:after{position:absolute;z-index:30;right:0;bottom:-2px;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td{border-top:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{border-bottom:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-drag-handle{display:inline-flex;align-items:center;justify-content:center;width:2rem;min-width:2rem;height:2rem;border-radius:6px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.pt-advanced-prime-table ::ng-deep .row-drag-handle:hover{background:#3b82f61a}.pt-advanced-prime-table ::ng-deep .row-drag-handle:active{cursor:grabbing}.pt-advanced-prime-table ::ng-deep .row-drag-handle .pi{color:#64748b;font-size:.95rem}.pt-advanced-prime-table ::ng-deep td.row-reorder-column,.pt-advanced-prime-table ::ng-deep th.row-reorder-column{width:7rem;min-width:7rem;padding:.25rem .4rem!important;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .row-reorder-actions{display:inline-flex;align-items:center;justify-content:center;gap:.15rem;width:100%}.pt-advanced-prime-table ::ng-deep .row-reorder-arrow-buttons{display:inline-flex;flex-direction:column;gap:0}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text{width:1.75rem!important;min-width:1.75rem!important;height:1.75rem!important;padding:0!important;border-radius:6px!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text .p-button-icon{font-size:.75rem}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:not(:disabled):hover{background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:disabled{cursor:not-allowed;opacity:.35}.pt-advanced-prime-table.dragging-active,.pt-advanced-prime-table.dragging-active *{-webkit-user-select:none!important;user-select:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:10}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-after>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar{width:10px;height:10px}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-track,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-track{border-radius:999px;background:var(--pt-advanced-table-scrollbar-track, #f1f5f9)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb{border:2px solid var(--pt-advanced-table-scrollbar-track, #f1f5f9);border-radius:999px;background:var(--pt-advanced-table-scrollbar-thumb, #94a3b8)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb:hover,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb:hover{background:var(--pt-advanced-table-scrollbar-thumb-hover, #64748b)}@media(max-width:768px){.pt-advanced-prime-table .filter-container,.pt-advanced-prime-table .flex{align-items:stretch;flex-direction:column}.pt-advanced-prime-table .settings{flex-wrap:wrap}.pt-advanced-prime-table .ml-auto{width:100%;margin-left:0}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield,.pt-advanced-prime-table ::ng-deep .p-inputtext{width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{min-width:var(--pt-advanced-table-mobile-min-width, 78rem)}}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-context-menu-row{cursor:context-menu}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-context-menu-row:hover>td{background:#3b82f60a}::ng-deep .pt-table-context-menu{min-width:13rem}::ng-deep .pt-table-context-menu .p-contextmenu-item-link{gap:.65rem}::ng-deep .pt-table-context-menu .p-contextmenu-item-icon{width:1.1rem;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i3.SelectableRow, selector: "[pSelectableRow]", inputs: ["pSelectableRow", "pSelectableRowIndex", "pSelectableRowDisabled"] }, { kind: "component", type: i3.CellEditor, selector: "p-cellEditor" }, { kind: "component", type: i3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i3.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i3.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i3.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i3.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i3.ColumnFilter, selector: "p-columnFilter, p-column-filter, p-columnfilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "filterOn", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i7.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: i8.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i9.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i10.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i11.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i12.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i13.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i14.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }, { kind: "pipe", type: CustomCurrencyPipe, name: "customCurrency" }, { kind: "pipe", type: CustomDatePipe, name: "customDate" }] }); }
 }
 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    paginatorDropdownAppendTo=\"body\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    (selectionChange)=\"selectionChange.emit($event)\"\n    (onRowSelect)=\"rowSelect.emit($event.data)\"\n    (onRowUnselect)=\"rowUnselect.emit($event.data)\"\n  >\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        @if (canUseRowReorder()) {\n          <col [style.width]=\"getRowReorderColumnWidth()\" />\n        }\n\n        @for (col of columns; track col) {\n          <col [style.width]=\"col.width || getHeaderWidth(col)\" />\n        }\n      </colgroup>\n    </ng-template>\n\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          @if (hasSearchFilter) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Clear filters\"\n              (click)=\"clear(dt)\"\n            ></button>\n          }\n\n          @if (hasExportExcel) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Export to Excel\"\n              (click)=\"exportExcel()\"\n            ></button>\n          }\n\n          @if (hasExportPDF) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Export to PDF\"\n              (click)=\"exportPdf()\"\n            ></button>\n          }\n        </div>\n\n        @if (hasSearchFilter) {\n          <div class=\"ml-auto\">\n            <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n              <p-inputIcon>\n                <i class=\"pi pi-search\"></i>\n              </p-inputIcon>\n\n              <input\n                pInputText\n                type=\"text\"\n                [(ngModel)]=\"searchValue\"\n                placeholder=\"Search keyword\"\n                (input)=\"filterGlobal($event)\"\n              />\n            </p-iconField>\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        @if (canUseRowReorder()) {\n          <th\n            [style.width]=\"getRowReorderColumnWidth()\"\n            [ngStyle]=\"getStaticCellStyle()\"\n          ></th>\n        }\n\n        @for (col of columns; track col) {\n          @if (!col.children) {\n            <th\n              [pSortableColumn]=\"col.code\"\n              [pSortableColumnDisabled]=\"\n                !isSortable || col.isSortable === false\n              \"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"[\n                getHeaderAlignClass(col),\n                col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n              ]\"\n              colspan=\"1\"\n            >\n              <div class=\"header-container\" [ngStyle]=\"getCellInnerStyle(col)\">\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n\n                @if (\n                  (isSortable && col.isSortable !== false) ||\n                  (hasColumnFilter && col.isFilter !== false)\n                ) {\n                  <div class=\"icons\">\n                    @if (isSortable && col.isSortable !== false) {\n                      <p-sortIcon [field]=\"col.code\" />\n                    }\n\n                    @if (hasColumnFilter && col.isFilter !== false) {\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          type=\"text\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"false\"\n                          [showOperator]=\"false\"\n                          (onClear)=\"onComposedColumnClear(col)\"\n                        >\n                          <ng-template\n                            pTemplate=\"filter\"\n                            let-filter=\"filterCallback\"\n                          >\n                            @for (\n                              composedName of col.composedNames;\n                              track composedName\n                            ) {\n                              @if (\n                                getComposedFieldType(col, composedName) ===\n                                TableTypeEnum.STRING\n                              ) {\n                                <div>\n                                  <p-multiSelect\n                                    [options]=\"filters[composedName]?.options\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [ngModel]=\"\n                                      filters[composedName]?.value ?? []\n                                    \"\n                                    [placeholder]=\"\n                                      filters[composedName]?.placeholder\n                                    \"\n                                    display=\"chip\"\n                                    (ngModelChange)=\"\n                                      onComposedFilterValueChange(\n                                        col,\n                                        composedName,\n                                        $event\n                                      );\n                                      filter($event ?? [])\n                                    \"\n                                  >\n                                    <ng-template let-item pTemplate=\"item\">\n                                      <div class=\"custom-multiselect-item\">\n                                        @if (item.image) {\n                                          <img\n                                            [src]=\"item.image\"\n                                            alt=\"icon\"\n                                            class=\"filter-image\"\n                                          />\n                                        }\n\n                                        <span>{{ item.label }}</span>\n                                      </div>\n                                    </ng-template>\n                                  </p-multiSelect>\n                                </div>\n                              }\n                            }\n                          </ng-template>\n                        </p-columnFilter>\n                      } @else {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          [type]=\"getColumnFilterType(col)\"\n                          [currency]=\"getCurrencySymbol(col)\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [showOperator]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [matchMode]=\"\n                            col.type === TableTypeEnum.MULTISELECT\n                              ? 'in'\n                              : undefined\n                          \"\n                          (onClear)=\"onFilterClear(col.code!)\"\n                        >\n                          @if (\n                            col.type === TableTypeEnum.NUMBER ||\n                            col.type === TableTypeEnum.AMOUNT\n                          ) {\n                            <ng-template pTemplate=\"filter\" let-value>\n                              <input\n                                pInputText\n                                type=\"text\"\n                                inputmode=\"decimal\"\n                                [ngModel]=\"\n                                  latestFilterValues[col.code!] ?? value\n                                \"\n                                placeholder=\"Enter a number\"\n                                (ngModelChange)=\"\n                                  onNumberFilterChange(col.code!, $event)\n                                \"\n                              />\n                            </ng-template>\n                          }\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"col.type === TableTypeEnum.DATE\"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-datepicker\n                              [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                              dateFormat=\"dd/mm/yy\"\n                              placeholder=\"Choose a date\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event)\n                              \"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"\n                              col.type === TableTypeEnum.MULTISELECT &&\n                              col.filterOptions &&\n                              col.filterOptions.length > 0\n                            \"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-multiSelect\n                              [options]=\"col.filterOptions\"\n                              optionLabel=\"label\"\n                              optionValue=\"value\"\n                              [ngModel]=\"\n                                latestFilterValues[col.code!] ?? value ?? []\n                              \"\n                              display=\"chip\"\n                              placeholder=\"Choose option\"\n                              class=\"custom-multiselect\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event ?? [])\n                              \"\n                            ></p-multiSelect>\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </th>\n          } @else {\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          }\n        }\n      </tr>\n\n      @if (hasGroupedColumns) {\n        <tr>\n          @if (canUseRowReorder()) {\n            <th\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            ></th>\n          }\n\n          @for (col of columns; track col) {\n            @if (col.children) {\n              @for (child of col.children; track child) {\n                <th\n                  [pSortableColumn]=\"child.code\"\n                  [pSortableColumnDisabled]=\"\n                    !isSortable || child.isSortable === false\n                  \"\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngStyle]=\"getHeaderCellStyle(child)\"\n                  [ngClass]=\"getHeaderAlignClass(child)\"\n                >\n                  <div\n                    class=\"header-container\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    <span [ngClass]=\"getHeaderTitleClass(child)\">\n                      {{ child.title }}\n                    </span>\n\n                    @if (\n                      (isSortable && child.isSortable !== false) ||\n                      (hasColumnFilter && child.isFilter !== false)\n                    ) {\n                      <div class=\"icons\">\n                        @if (isSortable && child.isSortable !== false) {\n                          <p-sortIcon [field]=\"child.code\" />\n                        }\n\n                        @if (hasColumnFilter && child.isFilter !== false) {\n                          <p-columnFilter\n                            display=\"menu\"\n                            [field]=\"child.code\"\n                            [type]=\"getColumnFilterType(child)\"\n                            [currency]=\"getCurrencySymbol(child)\"\n                            [showApplyButton]=\"true\"\n                            [showClearButton]=\"true\"\n                            [showMatchModes]=\"\n                              child.type !== TableTypeEnum.MULTISELECT\n                            \"\n                            [showOperator]=\"\n                              child.type !== TableTypeEnum.MULTISELECT\n                            \"\n                            [matchMode]=\"\n                              child.type === TableTypeEnum.MULTISELECT\n                                ? 'in'\n                                : undefined\n                            \"\n                            (onClear)=\"onFilterClear(child.code!)\"\n                          ></p-columnFilter>\n                        }\n                      </div>\n                    }\n                  </div>\n                </th>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"p-datatable-emptymessage\">\n        <td\n          class=\"empty-message-cell\"\n          [attr.colspan]=\"columns.length + (canUseRowReorder() ? 1 : 0)\"\n        >\n          <div class=\"empty-message-wrapper\">\n            <div class=\"empty-message\">\n              <i class=\"pi pi-info-circle\"></i>\n              <p>No records available to display.</p>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"body\" let-data let-editing=\"editing\">\n      @if (!loading) {\n        <tr\n          [pEditableRow]=\"isEdit ? data : null\"\n          [pSelectableRow]=\"selectionMode ? data : null\"\n          [attr.data-row-reorder-target]=\"canUseRowReorder() ? 'true' : null\"\n        >\n          @if (canUseRowReorder()) {\n            <td\n              class=\"row-reorder-column\"\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [style.text-align]=\"'center'\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            >\n              <div class=\"row-reorder-actions\">\n                <span\n                  class=\"row-drag-handle\"\n                  title=\"D\u00E9placer la ligne\"\n                  (pointerdown)=\"onRowPointerDown($event, data)\"\n                >\n                  <i class=\"pi pi-bars\"></i>\n                </span>\n\n                @if (showRowMoveArrows) {\n                  <div class=\"row-reorder-arrow-buttons\">\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-up\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Monter la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowUp(data)\"\n                      (click)=\"moveRowUp(data); $event.stopPropagation()\"\n                    ></button>\n\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-down\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Descendre la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowDown(data)\"\n                      (click)=\"moveRowDown(data); $event.stopPropagation()\"\n                    ></button>\n                  </div>\n                }\n              </div>\n            </td>\n          }\n\n          @for (col of columns; track col) {\n            @if (!col.children) {\n              @if (isEditable(col.code!) && col.type !== TableTypeEnum.ACTION) {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"getDataAlignClass(col)\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(col)\"\n                    [ngStyle]=\"getCellInnerStyle(col)\"\n                  >\n                    @if (isMultiSelect(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-multiSelect\n                            appendTo=\"body\"\n                            [ngModel]=\"data[col.code!]\"\n                            [style]=\"{ width: '100%' }\"\n                            [options]=\"optionValues\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                          ></p-multiSelect>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          <div class=\"multi-select-container\">\n                            @for (\n                              rec of getMultiSelectValues(data[col.code!]);\n                              track rec\n                            ) {\n                              <p-tag [value]=\"rec\"></p-tag>\n                            }\n                          </div>\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else if (isDatePicker(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-datepicker\n                            [inputId]=\"data[col.code!]\"\n                            [ngModel]=\"data[col.code!]\"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                          ></p-datepicker>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ data[col.code!] | customDate }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"data[col.code!]\"\n                            (change)=\"onChange($event, data.id, col.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          @if (col.type === TableTypeEnum.AMOUNT) {\n                            {{\n                              data[col.code!]\n                                | customCurrency\n                                  : getCurrencySymbol(col)\n                                  : col.decimalPlaces\n                                  : col.thousandSeparator\n                                  : col.decimalSeparator\n                            }}\n                          } @else {\n                            {{ data[col.code!] }}\n                          }\n                        </ng-template>\n                      </p-cellEditor>\n                    }\n                  </div>\n                </td>\n              } @else {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"[\n                    getDataAlignClass(col),\n                    col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n                  ]\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  @if (col.type === TableTypeEnum.ACTION) {\n                    <div\n                      class=\"action-buttons-container\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (isDelete) {\n                        <button\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-trash\"\n                          class=\"p-button-rounded p-button-text\"\n                          pTooltip=\"Supprimer\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          (click)=\"Delete(data)\"\n                        ></button>\n                      }\n\n                      @if (isEdit) {\n                        <div>\n                          @if (!editing) {\n                            <button\n                              pInitEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-pencil\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Modifier\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"initEditableRow(data)\"\n                            ></button>\n                          }\n\n                          @if (editing) {\n                            <button\n                              pSaveEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-check\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Enregistrer\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"saveEditableRow(data)\"\n                            ></button>\n\n                            <button\n                              pCancelEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-times\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Annuler\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"cancelEditableRow(data)\"\n                            ></button>\n                          }\n                        </div>\n                      }\n\n                      @for (act of customActions; track act) {\n                        @if (isActionVisible(act, data)) {\n                          <button\n                            pButton\n                            pRipple\n                            type=\"button\"\n                            class=\"p-button-rounded p-button-text\"\n                            [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                            [ngClass]=\"act.styleClass\"\n                            [disabled]=\"isActionDisabled(act, data)\"\n                            [pTooltip]=\"act.tooltip || ''\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            (click)=\"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?.[i] === TableTypeEnum.IMAGE\n                            ) {\n                              <img\n                                [src]=\"data[col.code!]?.[composedName]\"\n                                alt=\"composed-img\"\n                                class=\"composed-image\"\n                                [ngStyle]=\"\n                                  getMergedComposedImageStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              />\n                            }\n\n                            @if (\n                              col.composedTypes?.[i] === TableTypeEnum.STRING\n                            ) {\n                              <span\n                                class=\"composed-text\"\n                                [ngStyle]=\"\n                                  getMergedComposedTextStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              >\n                                {{ data[col.code!]?.[composedName] }}\n                              </span>\n                            }\n                          }\n                        </div>\n                      } @else if (col.type === TableTypeEnum.PROGRESS) {\n                        <div class=\"progress-cell\">\n                          <p-progressBar\n                            [value]=\"getProgressValue(col, data)\"\n                            [showValue]=\"false\"\n                            [ngClass]=\"\n                              'pt-progress-' + getProgressSeverity(col, data)\n                            \"\n                          ></p-progressBar>\n\n                          @if (isProgressShowValue(col)) {\n                            <span class=\"progress-cell-value\">\n                              {{ getProgressValue(col, data)\n                              }}{{ getProgressUnit(col) }}\n                            </span>\n                          }\n                        </div>\n                      } @else if (col.type === TableTypeEnum.TAG) {\n                        <p-tag\n                          [value]=\"getTagValue(col, data)\"\n                          [severity]=\"$any(getTagSeverity(col, data))\"\n                          [icon]=\"getTagIcon(col, data)\"\n                          [rounded]=\"isTagRounded(col)\"\n                        ></p-tag>\n                      } @else if (col.type === TableTypeEnum.AMOUNT) {\n                        {{\n                          data[col.code!]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      } @else if (col.type === TableTypeEnum.NUMBER) {\n                        {{\n                          formatNumber(\n                            data[col.code!],\n                            col.decimalPlaces,\n                            col.thousandSeparator,\n                            col.decimalSeparator\n                          )\n                        }}\n                      } @else if (col.type === TableTypeEnum.DATE) {\n                        {{\n                          formatDateWithColumn(\n                            parseAnyDate(data[col.code!]),\n                            col\n                          )\n                        }}\n                      } @else if (col.type === TableTypeEnum.DATETIME) {\n                        {{\n                          formatDateTimeWithColumn(\n                            parseAnyDate(data[col.code!]),\n                            col\n                          )\n                        }}\n                      } @else if (\n                        [\n                          TableTypeEnum.STRING,\n                          TableTypeEnum.MULTISELECT,\n                        ].includes(col.type!)\n                      ) {\n                        {{ data[col.code!] }}\n                      }\n                    </div>\n                  }\n                </td>\n              }\n            } @else {\n              @for (child of col.children; track child) {\n                <td\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngClass]=\"getDataAlignClass(child)\"\n                  [ngStyle]=\"getCellStyle(child, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(child)\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    @if (isEditable(child.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"child.code ? data[child.code] : null\"\n                            (change)=\"onChange($event, data.id, child.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ child.code ? data[child.code] : \"\" }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else if (child.type === TableTypeEnum.TAG) {\n                      <p-tag\n                        [value]=\"getTagValue(child, data)\"\n                        [severity]=\"$any(getTagSeverity(child, data))\"\n                        [icon]=\"getTagIcon(child, data)\"\n                        [rounded]=\"isTagRounded(child)\"\n                      ></p-tag>\n                    } @else {\n                      {{ child.code ? data[child.code] : \"\" }}\n                    }\n                  </div>\n                </td>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.pt-advanced-prime-table{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{display:grid;align-items:center;justify-items:start;width:100%;min-width:0;height:5rem}.pt-advanced-prime-table .filter-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .settings{display:flex;align-items:center;gap:1rem;min-width:0}.pt-advanced-prime-table .multi-select-container{display:flex;align-items:center;gap:.3rem;min-width:0}.pt-advanced-prime-table .table-container{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep p-table{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper{display:block;width:100%;min-width:0;max-width:100%;overflow-x:auto!important;overflow-y:visible!important;overscroll-behavior-x:contain;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{width:100%;min-width:var(--pt-advanced-table-min-width, 95rem);max-width:none;table-layout:fixed;border-collapse:separate;border-spacing:0}.pt-advanced-prime-table ::ng-deep .p-datatable-header,.pt-advanced-prime-table ::ng-deep .p-datatable-caption{width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-caption>.flex,.pt-advanced-prime-table ::ng-deep .p-datatable-header>.flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{position:relative;display:flex;align-items:center;gap:.25rem;width:100%!important;min-width:0;max-width:100%;margin:0!important;padding:0!important}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{display:block;flex:1 1 auto;width:auto;min-width:0;max-width:100%;padding:0;line-height:1.2;white-space:normal;overflow-wrap:break-word;word-break:normal}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-container>.icons{position:static!important;top:auto!important;right:auto!important;display:inline-flex;align-items:center;justify-content:flex-end;flex:0 0 auto;gap:.15rem;width:auto!important;min-width:1.5rem;max-width:none;margin-left:auto;padding:0;transform:none!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .header-container>.icons p-sorticon,.pt-advanced-prime-table ::ng-deep .header-container>.icons p-columnfilter{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0}.pt-advanced-prime-table ::ng-deep .header-container>p-columnfilter:last-child{position:static!important;top:auto!important;right:auto!important;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0 0 0 auto!important;transform:none!important}.pt-advanced-prime-table ::ng-deep .p-sortable-column-icon,.pt-advanced-prime-table ::ng-deep .p-column-filter-menu-button{flex:0 0 auto;margin:0!important}.pt-advanced-prime-table ::ng-deep .p-column-filter-menu-button{width:1.75rem;height:1.75rem;padding:0}.pt-advanced-prime-table ::ng-deep p-sorticon{width:1.25rem;min-width:1.25rem}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:0}.pt-advanced-prime-table .flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield{position:relative;display:inline-flex;align-items:center;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep p-inputicon,.pt-advanced-prime-table ::ng-deep .p-inputicon,.pt-advanced-prime-table ::ng-deep .p-input-icon{position:absolute;top:50%;left:.85rem;z-index:2;display:inline-flex;align-items:center;justify-content:center;margin:0;transform:translateY(-50%);pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-iconfield .p-inputtext{width:100%;max-width:100%;padding-left:2.5rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{margin-left:1rem;cursor:pointer}.pt-advanced-prime-table .table-row{display:flex;justify-content:center;gap:1rem;min-width:0;text-align:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{color:green;font-size:1.25em}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{color:red;font-size:1.25em}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:180px}.pt-advanced-prime-table .empty-message{color:#888;font-size:1.2rem;text-align:center}.pt-advanced-prime-table .empty-message i{display:block;margin-bottom:.5rem;font-size:2rem}.pt-advanced-prime-table th,.pt-advanced-prime-table td{min-width:0;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-advanced-prime-table ::ng-deep .p-datatable-thead>tr>th,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td{min-width:0;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-advanced-prime-table ::ng-deep .p-datatable-thead>tr>th{vertical-align:middle}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td{vertical-align:top}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right,.pt-advanced-prime-table ::ng-deep .composed-cell,.pt-advanced-prime-table ::ng-deep .composed-text{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right{display:flex;align-items:flex-start;width:100%;min-width:0}.pt-advanced-prime-table .cell-inner-left{justify-content:flex-start;text-align:left}.pt-advanced-prime-table .cell-inner-center{justify-content:center;text-align:center}.pt-advanced-prime-table .cell-inner-right{justify-content:flex-end;text-align:right}.pt-advanced-prime-table ::ng-deep .p-tag{padding:.2rem .55rem;font-size:.72rem;font-weight:800;line-height:1.2;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .p-tag .p-tag-icon{margin-right:.25rem}.pt-advanced-prime-table .progress-cell{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1 1 auto;width:100%;min-width:0;height:.75rem!important;overflow:hidden;border-radius:999px;background:#e5e7eb!important}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar-value{display:block!important;height:100%!important;border-radius:999px}.pt-advanced-prime-table .progress-cell-value{flex:0 0 auto;min-width:38px;color:#334155;font-size:.72rem;font-weight:800;text-align:right}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{align-items:center;justify-content:center;padding:0;overflow:hidden;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .action-buttons-container{display:flex;align-items:center!important;justify-content:center!important;flex-wrap:wrap;gap:.35rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{min-width:22px!important;height:22px!important;padding:.25rem!important}.pt-advanced-prime-table ::ng-deep .pt-progress-success .p-progressbar-value{background:#22c55e!important}.pt-advanced-prime-table ::ng-deep .pt-progress-warning .p-progressbar-value{background:#f59e0b!important}.pt-advanced-prime-table ::ng-deep .pt-progress-danger .p-progressbar-value{background:#ef4444!important}.pt-advanced-prime-table ::ng-deep .pt-progress-info .p-progressbar-value{background:#3b82f6!important}.pt-advanced-prime-table ::ng-deep .composed-cell{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .composed-image{display:block;flex:0 0 auto;object-fit:contain}.pt-advanced-prime-table ::ng-deep .composed-text{flex:1 1 auto;min-width:0}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{transition:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging{cursor:grabbing!important;opacity:.55}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:5;box-shadow:inset 0 0 0 1px #3b82f673}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before:before{position:absolute;z-index:30;top:-2px;right:0;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after:after{position:absolute;z-index:30;right:0;bottom:-2px;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td{border-top:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{border-bottom:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-drag-handle{display:inline-flex;align-items:center;justify-content:center;width:2rem;min-width:2rem;height:2rem;border-radius:6px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.pt-advanced-prime-table ::ng-deep .row-drag-handle:hover{background:#3b82f61a}.pt-advanced-prime-table ::ng-deep .row-drag-handle:active{cursor:grabbing}.pt-advanced-prime-table ::ng-deep .row-drag-handle .pi{color:#64748b;font-size:.95rem}.pt-advanced-prime-table ::ng-deep td.row-reorder-column,.pt-advanced-prime-table ::ng-deep th.row-reorder-column{width:7rem;min-width:7rem;padding:.25rem .4rem!important;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .row-reorder-actions{display:inline-flex;align-items:center;justify-content:center;gap:.15rem;width:100%}.pt-advanced-prime-table ::ng-deep .row-reorder-arrow-buttons{display:inline-flex;flex-direction:column;gap:0}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text{width:1.75rem!important;min-width:1.75rem!important;height:1.75rem!important;padding:0!important;border-radius:6px!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text .p-button-icon{font-size:.75rem}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:not(:disabled):hover{background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:disabled{cursor:not-allowed;opacity:.35}.pt-advanced-prime-table.dragging-active,.pt-advanced-prime-table.dragging-active *{-webkit-user-select:none!important;user-select:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:10}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-after>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar{width:10px;height:10px}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-track,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-track{border-radius:999px;background:var(--pt-advanced-table-scrollbar-track, #f1f5f9)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb{border:2px solid var(--pt-advanced-table-scrollbar-track, #f1f5f9);border-radius:999px;background:var(--pt-advanced-table-scrollbar-thumb, #94a3b8)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb:hover,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb:hover{background:var(--pt-advanced-table-scrollbar-thumb-hover, #64748b)}@media(max-width:768px){.pt-advanced-prime-table .filter-container,.pt-advanced-prime-table .flex{align-items:stretch;flex-direction:column}.pt-advanced-prime-table .settings{flex-wrap:wrap}.pt-advanced-prime-table .ml-auto{width:100%;margin-left:0}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield,.pt-advanced-prime-table ::ng-deep .p-inputtext{width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{min-width:var(--pt-advanced-table-mobile-min-width, 78rem)}}\n"] }]
+            args: [{ selector: 'pt-advanced-prime-table', standalone: false, template: "<div #tableContainer class=\"pt-advanced-prime-table table-container\">\n  @if (hasContextMenu) {\n    <p-contextMenu\n      #contextMenu\n      [model]=\"contextMenuItems\"\n      appendTo=\"body\"\n      styleClass=\"pt-table-context-menu\"\n      (onHide)=\"onContextMenuHide()\"\n    ></p-contextMenu>\n  }\n  <p-table\n    #dt\n    [value]=\"tableData\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"isLazy\"\n    [filterDelay]=\"0\"\n    [dataKey]=\"selectionDataKey || rowReorderIdField || 'id'\"\n    [rowTrackBy]=\"rowTrackBy\"\n    paginatorDropdownAppendTo=\"body\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    (selectionChange)=\"selectionChange.emit($event)\"\n    (onRowSelect)=\"rowSelect.emit($event.data)\"\n    (onRowUnselect)=\"rowUnselect.emit($event.data)\"\n  >\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        @if (canUseRowReorder()) {\n          <col [style.width]=\"getRowReorderColumnWidth()\" />\n        }\n\n        @for (col of columns; track col) {\n          <col [style.width]=\"col.width || getHeaderWidth(col)\" />\n        }\n      </colgroup>\n    </ng-template>\n\n    <ng-template pTemplate=\"caption\">\n      <div class=\"flex\">\n        <div>\n          <h3>Total: {{ totalRecords }}</h3>\n        </div>\n\n        <div>\n          @if (hasSearchFilter) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Clear filters\"\n              (click)=\"clear(dt)\"\n            ></button>\n          }\n\n          @if (hasExportExcel) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Export to Excel\"\n              (click)=\"exportExcel()\"\n            ></button>\n          }\n\n          @if (hasExportPDF) {\n            <button\n              pButton\n              type=\"button\"\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text\"\n              title=\"Export to PDF\"\n              (click)=\"exportPdf()\"\n            ></button>\n          }\n        </div>\n\n        @if (hasSearchFilter) {\n          <div class=\"ml-auto\">\n            <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n              <p-inputIcon>\n                <i class=\"pi pi-search\"></i>\n              </p-inputIcon>\n\n              <input\n                pInputText\n                type=\"text\"\n                [(ngModel)]=\"searchValue\"\n                placeholder=\"Search keyword\"\n                (input)=\"filterGlobal($event)\"\n              />\n            </p-iconField>\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        @if (canUseRowReorder()) {\n          <th\n            [style.width]=\"getRowReorderColumnWidth()\"\n            [ngStyle]=\"getStaticCellStyle()\"\n          ></th>\n        }\n\n        @for (col of columns; track col) {\n          @if (!col.children) {\n            <th\n              [pSortableColumn]=\"col.code\"\n              [pSortableColumnDisabled]=\"\n                !isSortable || col.isSortable === false\n              \"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"[\n                getHeaderAlignClass(col),\n                col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n              ]\"\n              colspan=\"1\"\n            >\n              <div class=\"header-container\" [ngStyle]=\"getCellInnerStyle(col)\">\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n\n                @if (\n                  (isSortable && col.isSortable !== false) ||\n                  (hasColumnFilter && col.isFilter !== false)\n                ) {\n                  <div class=\"icons\">\n                    @if (isSortable && col.isSortable !== false) {\n                      <p-sortIcon [field]=\"col.code\" />\n                    }\n\n                    @if (hasColumnFilter && col.isFilter !== false) {\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          type=\"text\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"false\"\n                          [showOperator]=\"false\"\n                          (onClear)=\"onComposedColumnClear(col)\"\n                        >\n                          <ng-template\n                            pTemplate=\"filter\"\n                            let-filter=\"filterCallback\"\n                          >\n                            @for (\n                              composedName of col.composedNames;\n                              track composedName\n                            ) {\n                              @if (\n                                getComposedFieldType(col, composedName) ===\n                                TableTypeEnum.STRING\n                              ) {\n                                <div>\n                                  <p-multiSelect\n                                    [options]=\"filters[composedName]?.options\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [ngModel]=\"\n                                      filters[composedName]?.value ?? []\n                                    \"\n                                    [placeholder]=\"\n                                      filters[composedName]?.placeholder\n                                    \"\n                                    display=\"chip\"\n                                    (ngModelChange)=\"\n                                      onComposedFilterValueChange(\n                                        col,\n                                        composedName,\n                                        $event\n                                      );\n                                      filter($event ?? [])\n                                    \"\n                                  >\n                                    <ng-template let-item pTemplate=\"item\">\n                                      <div class=\"custom-multiselect-item\">\n                                        @if (item.image) {\n                                          <img\n                                            [src]=\"item.image\"\n                                            alt=\"icon\"\n                                            class=\"filter-image\"\n                                          />\n                                        }\n\n                                        <span>{{ item.label }}</span>\n                                      </div>\n                                    </ng-template>\n                                  </p-multiSelect>\n                                </div>\n                              }\n                            }\n                          </ng-template>\n                        </p-columnFilter>\n                      } @else {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          [type]=\"getColumnFilterType(col)\"\n                          [currency]=\"getCurrencySymbol(col)\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [showOperator]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [matchMode]=\"\n                            col.type === TableTypeEnum.MULTISELECT\n                              ? 'in'\n                              : undefined\n                          \"\n                          (onClear)=\"onFilterClear(col.code!)\"\n                        >\n                          @if (\n                            col.type === TableTypeEnum.NUMBER ||\n                            col.type === TableTypeEnum.AMOUNT\n                          ) {\n                            <ng-template pTemplate=\"filter\" let-value>\n                              <input\n                                pInputText\n                                type=\"text\"\n                                inputmode=\"decimal\"\n                                [ngModel]=\"\n                                  latestFilterValues[col.code!] ?? value\n                                \"\n                                placeholder=\"Enter a number\"\n                                (ngModelChange)=\"\n                                  onNumberFilterChange(col.code!, $event)\n                                \"\n                              />\n                            </ng-template>\n                          }\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"col.type === TableTypeEnum.DATE\"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-datepicker\n                              [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                              dateFormat=\"dd/mm/yy\"\n                              placeholder=\"Choose a date\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event)\n                              \"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"\n                              col.type === TableTypeEnum.MULTISELECT &&\n                              col.filterOptions &&\n                              col.filterOptions.length > 0\n                            \"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-multiSelect\n                              [options]=\"col.filterOptions\"\n                              optionLabel=\"label\"\n                              optionValue=\"value\"\n                              [ngModel]=\"\n                                latestFilterValues[col.code!] ?? value ?? []\n                              \"\n                              display=\"chip\"\n                              placeholder=\"Choose option\"\n                              class=\"custom-multiselect\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event ?? [])\n                              \"\n                            ></p-multiSelect>\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </th>\n          } @else {\n            <th\n              [attr.colspan]=\"col.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          }\n        }\n      </tr>\n\n      @if (hasGroupedColumns) {\n        <tr>\n          @if (canUseRowReorder()) {\n            <th\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            ></th>\n          }\n\n          @for (col of columns; track col) {\n            @if (col.children) {\n              @for (child of col.children; track child) {\n                <th\n                  [pSortableColumn]=\"child.code\"\n                  [pSortableColumnDisabled]=\"\n                    !isSortable || child.isSortable === false\n                  \"\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngStyle]=\"getHeaderCellStyle(child)\"\n                  [ngClass]=\"getHeaderAlignClass(child)\"\n                >\n                  <div\n                    class=\"header-container\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    <span [ngClass]=\"getHeaderTitleClass(child)\">\n                      {{ child.title }}\n                    </span>\n\n                    @if (\n                      (isSortable && child.isSortable !== false) ||\n                      (hasColumnFilter && child.isFilter !== false)\n                    ) {\n                      <div class=\"icons\">\n                        @if (isSortable && child.isSortable !== false) {\n                          <p-sortIcon [field]=\"child.code\" />\n                        }\n\n                        @if (hasColumnFilter && child.isFilter !== false) {\n                          <p-columnFilter\n                            display=\"menu\"\n                            [field]=\"child.code\"\n                            [type]=\"getColumnFilterType(child)\"\n                            [currency]=\"getCurrencySymbol(child)\"\n                            [showApplyButton]=\"true\"\n                            [showClearButton]=\"true\"\n                            [showMatchModes]=\"\n                              child.type !== TableTypeEnum.MULTISELECT\n                            \"\n                            [showOperator]=\"\n                              child.type !== TableTypeEnum.MULTISELECT\n                            \"\n                            [matchMode]=\"\n                              child.type === TableTypeEnum.MULTISELECT\n                                ? 'in'\n                                : undefined\n                            \"\n                            (onClear)=\"onFilterClear(child.code!)\"\n                          ></p-columnFilter>\n                        }\n                      </div>\n                    }\n                  </div>\n                </th>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"p-datatable-emptymessage\">\n        <td\n          class=\"empty-message-cell\"\n          [attr.colspan]=\"columns.length + (canUseRowReorder() ? 1 : 0)\"\n        >\n          <div class=\"empty-message-wrapper\">\n            <div class=\"empty-message\">\n              <i class=\"pi pi-info-circle\"></i>\n              <p>No records available to display.</p>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template pTemplate=\"body\" let-data let-editing=\"editing\">\n      @if (!loading) {\n        <tr\n          [pEditableRow]=\"isEdit ? data : null\"\n          [pSelectableRow]=\"selectionMode ? data : null\"\n          [attr.data-row-reorder-target]=\"canUseRowReorder() ? 'true' : null\"\n          [class.pt-context-menu-row]=\"hasContextMenu\"\n          (contextmenu)=\"onRowContextMenu($event, data)\"\n        >\n          @if (canUseRowReorder()) {\n            <td\n              class=\"row-reorder-column\"\n              [style.width]=\"getRowReorderColumnWidth()\"\n              [style.text-align]=\"'center'\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            >\n              <div class=\"row-reorder-actions\">\n                <span\n                  class=\"row-drag-handle\"\n                  title=\"D\u00E9placer la ligne\"\n                  (pointerdown)=\"onRowPointerDown($event, data)\"\n                >\n                  <i class=\"pi pi-bars\"></i>\n                </span>\n\n                @if (showRowMoveArrows) {\n                  <div class=\"row-reorder-arrow-buttons\">\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-up\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Monter la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowUp(data)\"\n                      (click)=\"moveRowUp(data); $event.stopPropagation()\"\n                    ></button>\n\n                    <button\n                      pButton\n                      pRipple\n                      type=\"button\"\n                      icon=\"pi pi-chevron-down\"\n                      class=\"p-button-rounded p-button-text p-button-sm\"\n                      pTooltip=\"Descendre la ligne\"\n                      tooltipPosition=\"top\"\n                      appendTo=\"body\"\n                      [disabled]=\"!canMoveRowDown(data)\"\n                      (click)=\"moveRowDown(data); $event.stopPropagation()\"\n                    ></button>\n                  </div>\n                }\n              </div>\n            </td>\n          }\n\n          @for (col of columns; track col) {\n            @if (!col.children) {\n              @if (isEditable(col.code!) && col.type !== TableTypeEnum.ACTION) {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"getDataAlignClass(col)\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(col)\"\n                    [ngStyle]=\"getCellInnerStyle(col)\"\n                  >\n                    @if (isMultiSelect(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-multiSelect\n                            appendTo=\"body\"\n                            [ngModel]=\"data[col.code!]\"\n                            [style]=\"{ width: '100%' }\"\n                            [options]=\"optionValues\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                          ></p-multiSelect>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          <div class=\"multi-select-container\">\n                            @for (\n                              rec of getMultiSelectValues(data[col.code!]);\n                              track rec\n                            ) {\n                              <p-tag [value]=\"rec\"></p-tag>\n                            }\n                          </div>\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else if (isDatePicker(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-datepicker\n                            [inputId]=\"data[col.code!]\"\n                            [ngModel]=\"data[col.code!]\"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                          ></p-datepicker>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ data[col.code!] | customDate }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"data[col.code!]\"\n                            (change)=\"onChange($event, data.id, col.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          @if (col.type === TableTypeEnum.AMOUNT) {\n                            {{\n                              data[col.code!]\n                                | customCurrency\n                                  : getCurrencySymbol(col)\n                                  : col.decimalPlaces\n                                  : col.thousandSeparator\n                                  : col.decimalSeparator\n                            }}\n                          } @else {\n                            {{ data[col.code!] }}\n                          }\n                        </ng-template>\n                      </p-cellEditor>\n                    }\n                  </div>\n                </td>\n              } @else {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"[\n                    getDataAlignClass(col),\n                    col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n                  ]\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  @if (col.type === TableTypeEnum.ACTION) {\n                    <div\n                      class=\"action-buttons-container\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (isDelete) {\n                        <button\n                          pButton\n                          pRipple\n                          type=\"button\"\n                          icon=\"pi pi-trash\"\n                          class=\"p-button-rounded p-button-text\"\n                          pTooltip=\"Supprimer\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          (click)=\"Delete(data); $event.stopPropagation()\"\n                        ></button>\n                      }\n\n                      @if (isEdit) {\n                        <div>\n                          @if (!editing) {\n                            <button\n                              pInitEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-pencil\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Modifier\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"\n                                startRowEdit(data); $event.stopPropagation()\n                              \"\n                            ></button>\n                          }\n\n                          @if (editing) {\n                            <button\n                              pSaveEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-check\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Enregistrer\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"\n                                saveRowEdit(data); $event.stopPropagation()\n                              \"\n                            ></button>\n\n                            <button\n                              pCancelEditableRow\n                              pButton\n                              pRipple\n                              type=\"button\"\n                              icon=\"pi pi-times\"\n                              class=\"p-button-rounded p-button-text\"\n                              pTooltip=\"Annuler\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              (click)=\"\n                                cancelRowEdit(data); $event.stopPropagation()\n                              \"\n                            ></button>\n                          }\n                        </div>\n                      }\n\n                      @for (act of customActions; track act) {\n                        @if (isActionVisible(act, data)) {\n                          <button\n                            pButton\n                            pRipple\n                            type=\"button\"\n                            class=\"p-button-rounded p-button-text\"\n                            [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                            [ngClass]=\"act.styleClass\"\n                            [disabled]=\"isActionDisabled(act, data)\"\n                            [pTooltip]=\"act.tooltip || ''\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            (click)=\"\n                              onCustomActionClick(act, data);\n                              $event.stopPropagation()\n                            \"\n                          ></button>\n                        }\n                      }\n                    </div>\n                  } @else {\n                    <div\n                      [ngClass]=\"getCellInnerAlignClass(col)\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <div class=\"composed-cell\">\n                          @for (\n                            composedName of col.composedNames;\n                            track composedName;\n                            let i = $index\n                          ) {\n                            @if (\n                              col.composedTypes?.[i] === TableTypeEnum.IMAGE\n                            ) {\n                              <img\n                                [src]=\"data[col.code!]?.[composedName]\"\n                                alt=\"composed-img\"\n                                class=\"composed-image\"\n                                [ngStyle]=\"\n                                  getMergedComposedImageStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              />\n                            }\n\n                            @if (\n                              col.composedTypes?.[i] === TableTypeEnum.STRING\n                            ) {\n                              <span\n                                class=\"composed-text\"\n                                [ngStyle]=\"\n                                  getMergedComposedTextStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              >\n                                {{ data[col.code!]?.[composedName] }}\n                              </span>\n                            }\n                          }\n                        </div>\n                      } @else if (col.type === TableTypeEnum.PROGRESS) {\n                        <div class=\"progress-cell\">\n                          <p-progressBar\n                            [value]=\"getProgressValue(col, data)\"\n                            [showValue]=\"false\"\n                            [ngClass]=\"\n                              'pt-progress-' + getProgressSeverity(col, data)\n                            \"\n                          ></p-progressBar>\n\n                          @if (isProgressShowValue(col)) {\n                            <span class=\"progress-cell-value\">\n                              {{ getProgressValue(col, data)\n                              }}{{ getProgressUnit(col) }}\n                            </span>\n                          }\n                        </div>\n                      } @else if (col.type === TableTypeEnum.TAG) {\n                        <p-tag\n                          [value]=\"getTagValue(col, data)\"\n                          [severity]=\"$any(getTagSeverity(col, data))\"\n                          [icon]=\"getTagIcon(col, data)\"\n                          [rounded]=\"isTagRounded(col)\"\n                        ></p-tag>\n                      } @else if (col.type === TableTypeEnum.AMOUNT) {\n                        {{\n                          data[col.code!]\n                            | customCurrency\n                              : getCurrencySymbol(col)\n                              : col.decimalPlaces\n                              : col.thousandSeparator\n                              : col.decimalSeparator\n                        }}\n                      } @else if (col.type === TableTypeEnum.NUMBER) {\n                        {{\n                          formatNumber(\n                            data[col.code!],\n                            col.decimalPlaces,\n                            col.thousandSeparator,\n                            col.decimalSeparator\n                          )\n                        }}\n                      } @else if (col.type === TableTypeEnum.DATE) {\n                        {{\n                          formatDateWithColumn(\n                            parseAnyDate(data[col.code!]),\n                            col\n                          )\n                        }}\n                      } @else if (col.type === TableTypeEnum.DATETIME) {\n                        {{\n                          formatDateTimeWithColumn(\n                            parseAnyDate(data[col.code!]),\n                            col\n                          )\n                        }}\n                      } @else if (\n                        [\n                          TableTypeEnum.STRING,\n                          TableTypeEnum.MULTISELECT,\n                        ].includes(col.type!)\n                      ) {\n                        {{ data[col.code!] }}\n                      }\n                    </div>\n                  }\n                </td>\n              }\n            } @else {\n              @for (child of col.children; track child) {\n                <td\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngClass]=\"getDataAlignClass(child)\"\n                  [ngStyle]=\"getCellStyle(child, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(child)\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    @if (isEditable(child.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"child.code ? data[child.code] : null\"\n                            (change)=\"onChange($event, data.id, child.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ child.code ? data[child.code] : \"\" }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else if (child.type === TableTypeEnum.TAG) {\n                      <p-tag\n                        [value]=\"getTagValue(child, data)\"\n                        [severity]=\"$any(getTagSeverity(child, data))\"\n                        [icon]=\"getTagIcon(child, data)\"\n                        [rounded]=\"isTagRounded(child)\"\n                      ></p-tag>\n                    } @else {\n                      {{ child.code ? data[child.code] : \"\" }}\n                    }\n                  </div>\n                </td>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.pt-advanced-prime-table{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{display:grid;align-items:center;justify-items:start;width:100%;min-width:0;height:5rem}.pt-advanced-prime-table .filter-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .settings{display:flex;align-items:center;gap:1rem;min-width:0}.pt-advanced-prime-table .multi-select-container{display:flex;align-items:center;gap:.3rem;min-width:0}.pt-advanced-prime-table .table-container{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.pt-advanced-prime-table ::ng-deep p-table{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable{display:block;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper{display:block;width:100%;min-width:0;max-width:100%;overflow-x:auto!important;overflow-y:visible!important;overscroll-behavior-x:contain;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{width:100%;min-width:var(--pt-advanced-table-min-width, 95rem);max-width:none;table-layout:fixed;border-collapse:separate;border-spacing:0}.pt-advanced-prime-table ::ng-deep .p-datatable-header,.pt-advanced-prime-table ::ng-deep .p-datatable-caption{width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-caption>.flex,.pt-advanced-prime-table ::ng-deep .p-datatable-header>.flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{position:relative;display:flex;align-items:center;gap:.25rem;width:100%!important;min-width:0;max-width:100%;margin:0!important;padding:0!important}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{display:block;flex:1 1 auto;width:auto;min-width:0;max-width:100%;padding:0;line-height:1.2;white-space:normal;overflow-wrap:break-word;word-break:normal}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-container>.icons{position:static!important;top:auto!important;right:auto!important;display:inline-flex;align-items:center;justify-content:flex-end;flex:0 0 auto;gap:.15rem;width:auto!important;min-width:1.5rem;max-width:none;margin-left:auto;padding:0;transform:none!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .header-container>.icons p-sorticon,.pt-advanced-prime-table ::ng-deep .header-container>.icons p-columnfilter{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0}.pt-advanced-prime-table ::ng-deep .header-container>p-columnfilter:last-child{position:static!important;top:auto!important;right:auto!important;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0 0 0 auto!important;transform:none!important}.pt-advanced-prime-table ::ng-deep .p-sortable-column-icon,.pt-advanced-prime-table ::ng-deep .p-column-filter-menu-button{flex:0 0 auto;margin:0!important}.pt-advanced-prime-table ::ng-deep .p-column-filter-menu-button{width:1.75rem;height:1.75rem;padding:0}.pt-advanced-prime-table ::ng-deep p-sorticon{width:1.25rem;min-width:1.25rem}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:0}.pt-advanced-prime-table .flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield{position:relative;display:inline-flex;align-items:center;width:100%;min-width:0;max-width:100%}.pt-advanced-prime-table ::ng-deep p-inputicon,.pt-advanced-prime-table ::ng-deep .p-inputicon,.pt-advanced-prime-table ::ng-deep .p-input-icon{position:absolute;top:50%;left:.85rem;z-index:2;display:inline-flex;align-items:center;justify-content:center;margin:0;transform:translateY(-50%);pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-iconfield .p-inputtext{width:100%;max-width:100%;padding-left:2.5rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{margin-left:1rem;cursor:pointer}.pt-advanced-prime-table .table-row{display:flex;justify-content:center;gap:1rem;min-width:0;text-align:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{color:green;font-size:1.25em}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{color:red;font-size:1.25em}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:180px}.pt-advanced-prime-table .empty-message{color:#888;font-size:1.2rem;text-align:center}.pt-advanced-prime-table .empty-message i{display:block;margin-bottom:.5rem;font-size:2rem}.pt-advanced-prime-table th,.pt-advanced-prime-table td{min-width:0;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-advanced-prime-table ::ng-deep .p-datatable-thead>tr>th,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td{min-width:0;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-advanced-prime-table ::ng-deep .p-datatable-thead>tr>th{vertical-align:middle}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td{vertical-align:top}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right,.pt-advanced-prime-table ::ng-deep .composed-cell,.pt-advanced-prime-table ::ng-deep .composed-text{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right{display:flex;align-items:flex-start;width:100%;min-width:0}.pt-advanced-prime-table .cell-inner-left{justify-content:flex-start;text-align:left}.pt-advanced-prime-table .cell-inner-center{justify-content:center;text-align:center}.pt-advanced-prime-table .cell-inner-right{justify-content:flex-end;text-align:right}.pt-advanced-prime-table ::ng-deep .p-tag{padding:.2rem .55rem;font-size:.72rem;font-weight:800;line-height:1.2;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .p-tag .p-tag-icon{margin-right:.25rem}.pt-advanced-prime-table .progress-cell{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1 1 auto;width:100%;min-width:0;height:.75rem!important;overflow:hidden;border-radius:999px;background:#e5e7eb!important}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar-value{display:block!important;height:100%!important;border-radius:999px}.pt-advanced-prime-table .progress-cell-value{flex:0 0 auto;min-width:38px;color:#334155;font-size:.72rem;font-weight:800;text-align:right}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{align-items:center;justify-content:center;padding:0;overflow:hidden;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .action-buttons-container{display:flex;align-items:center!important;justify-content:center!important;flex-wrap:wrap;gap:.35rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{min-width:22px!important;height:22px!important;padding:.25rem!important}.pt-advanced-prime-table ::ng-deep .pt-progress-success .p-progressbar-value{background:#22c55e!important}.pt-advanced-prime-table ::ng-deep .pt-progress-warning .p-progressbar-value{background:#f59e0b!important}.pt-advanced-prime-table ::ng-deep .pt-progress-danger .p-progressbar-value{background:#ef4444!important}.pt-advanced-prime-table ::ng-deep .pt-progress-info .p-progressbar-value{background:#3b82f6!important}.pt-advanced-prime-table ::ng-deep .composed-cell{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;width:100%;min-width:0}.pt-advanced-prime-table ::ng-deep .composed-image{display:block;flex:0 0 auto;object-fit:contain}.pt-advanced-prime-table ::ng-deep .composed-text{flex:1 1 auto;min-width:0}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{transition:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging{cursor:grabbing!important;opacity:.55}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:5;box-shadow:inset 0 0 0 1px #3b82f673}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before:before{position:absolute;z-index:30;top:-2px;right:0;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after:after{position:absolute;z-index:30;right:0;bottom:-2px;left:0;height:3px;border-radius:999px;background:var(--primary-color, #3b82f6);content:\"\";pointer-events:none}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-before>td{border-top:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-drop-after>td{border-bottom:3px solid var(--primary-color, #3b82f6)!important;background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-drag-handle{display:inline-flex;align-items:center;justify-content:center;width:2rem;min-width:2rem;height:2rem;border-radius:6px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.pt-advanced-prime-table ::ng-deep .row-drag-handle:hover{background:#3b82f61a}.pt-advanced-prime-table ::ng-deep .row-drag-handle:active{cursor:grabbing}.pt-advanced-prime-table ::ng-deep .row-drag-handle .pi{color:#64748b;font-size:.95rem}.pt-advanced-prime-table ::ng-deep td.row-reorder-column,.pt-advanced-prime-table ::ng-deep th.row-reorder-column{width:7rem;min-width:7rem;padding:.25rem .4rem!important;text-align:center!important;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .row-reorder-actions{display:inline-flex;align-items:center;justify-content:center;gap:.15rem;width:100%}.pt-advanced-prime-table ::ng-deep .row-reorder-arrow-buttons{display:inline-flex;flex-direction:column;gap:0}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text{width:1.75rem!important;min-width:1.75rem!important;height:1.75rem!important;padding:0!important;border-radius:6px!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text .p-button-icon{font-size:.75rem}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:not(:disabled):hover{background:#3b82f61a!important}.pt-advanced-prime-table ::ng-deep .row-reorder-actions .p-button.p-button-rounded.p-button-text:disabled{cursor:not-allowed;opacity:.35}.pt-advanced-prime-table.dragging-active,.pt-advanced-prime-table.dragging-active *{-webkit-user-select:none!important;user-select:none!important}.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-before,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table .p-datatable-tbody>tr.pt-row-drop-after{position:relative;z-index:10}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-before>td,.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-row-dragging.pt-row-drop-after>td{background:#3b82f60f!important}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar{width:10px;height:10px}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-track,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-track{border-radius:999px;background:var(--pt-advanced-table-scrollbar-track, #f1f5f9)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb{border:2px solid var(--pt-advanced-table-scrollbar-track, #f1f5f9);border-radius:999px;background:var(--pt-advanced-table-scrollbar-thumb, #94a3b8)}.pt-advanced-prime-table ::ng-deep .p-datatable-table-container::-webkit-scrollbar-thumb:hover,.pt-advanced-prime-table ::ng-deep .p-datatable-wrapper::-webkit-scrollbar-thumb:hover{background:var(--pt-advanced-table-scrollbar-thumb-hover, #64748b)}@media(max-width:768px){.pt-advanced-prime-table .filter-container,.pt-advanced-prime-table .flex{align-items:stretch;flex-direction:column}.pt-advanced-prime-table .settings{flex-wrap:wrap}.pt-advanced-prime-table .ml-auto{width:100%;margin-left:0}.pt-advanced-prime-table ::ng-deep p-iconfield,.pt-advanced-prime-table ::ng-deep .p-iconfield,.pt-advanced-prime-table ::ng-deep .p-inputtext{width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-table,.pt-advanced-prime-table ::ng-deep .p-datatable-scrollable-table{min-width:var(--pt-advanced-table-mobile-min-width, 78rem)}}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-context-menu-row{cursor:context-menu}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr.pt-context-menu-row:hover>td{background:#3b82f60a}::ng-deep .pt-table-context-menu{min-width:13rem}::ng-deep .pt-table-context-menu .p-contextmenu-item-link{gap:.65rem}::ng-deep .pt-table-context-menu .p-contextmenu-item-icon{width:1.1rem;text-align:center}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -1543,6 +1660,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 type: Input
             }], cellHeight: [{
                 type: Input
+            }], hasContextMenu: [{
+                type: Input
             }], selectionChange: [{
                 type: Output
             }], rowSelect: [{
@@ -1573,6 +1692,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             }], tableContainer: [{
                 type: ViewChild,
                 args: ['tableContainer', { static: false }]
+            }], contextMenu: [{
+                type: ViewChild,
+                args: ['contextMenu', { static: false }]
             }] } });
 
 class PTMultiSelectComponent {
@@ -1774,7 +1896,7 @@ class PTMultiSelectComponent {
         return Boolean(hidden);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTMultiSelectComponent, isStandalone: false, selector: "pt-multi-select", inputs: { formGroup: "formGroup", formField: "formField", config: "config", value: "value" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "@if (!resolvedHidden) {\n  <div\n    [formGroup]=\"activeFormGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: resolvedWidth }\"\n  >\n    @if (resolvedLabel) {\n      <label [for]=\"inputId\" class=\"field-label\">\n        {{ resolvedLabel }}\n      </label>\n    }\n\n    <p-multiSelect\n      [inputId]=\"inputId\"\n      [name]=\"controlName\"\n      [formControlName]=\"controlName\"\n      [options]=\"resolvedOptions\"\n      [placeholder]=\"resolvedPlaceholder\"\n      [optionLabel]=\"resolvedOptionLabel\"\n      [optionValue]=\"resolvedOptionValue\"\n      [filter]=\"resolvedFilter\"\n      [filterBy]=\"resolvedFilterBy\"\n      [display]=\"resolvedDisplay\"\n      [maxSelectedLabels]=\"resolvedMaxSelectedLabels\"\n      [selectedItemsLabel]=\"resolvedSelectedItemsLabel\"\n      [appendTo]=\"'body'\"\n      [overlayOptions]=\"{ baseZIndex: 11000 }\"\n    ></p-multiSelect>\n\n    @if (\n      activeFormGroup.get(controlName)?.invalid &&\n      (activeFormGroup.get(controlName)?.touched ||\n        activeFormGroup.get(controlName)?.dirty)\n    ) {\n      <div class=\"error-container\">\n        <small class=\"field-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.error-container{margin-top:.35rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-multiselect{width:100%}.form-field ::ng-deep .p-multiselect.ng-invalid.ng-touched,.form-field ::ng-deep .p-multiselect.ng-invalid.ng-dirty{border-color:#dc2626}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTMultiSelectComponent, isStandalone: false, selector: "pt-multi-select", inputs: { formGroup: "formGroup", formField: "formField", config: "config", value: "value" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange" }, usesOnChanges: true, ngImport: i0, template: "@if (!resolvedHidden) {\n  <div\n    [formGroup]=\"activeFormGroup\"\n    class=\"form-field\"\n    [ngStyle]=\"{ width: resolvedWidth }\"\n  >\n    @if (resolvedLabel) {\n      <label [for]=\"inputId\" class=\"field-label\">\n        {{ resolvedLabel }}\n      </label>\n    }\n\n    <p-multiSelect\n      [inputId]=\"inputId\"\n      [name]=\"controlName\"\n      [formControlName]=\"controlName\"\n      [options]=\"resolvedOptions\"\n      [placeholder]=\"resolvedPlaceholder\"\n      [optionLabel]=\"resolvedOptionLabel\"\n      [optionValue]=\"resolvedOptionValue\"\n      [filter]=\"resolvedFilter\"\n      [filterBy]=\"resolvedFilterBy\"\n      [display]=\"resolvedDisplay\"\n      [maxSelectedLabels]=\"resolvedMaxSelectedLabels\"\n      [selectedItemsLabel]=\"resolvedSelectedItemsLabel\"\n      [appendTo]=\"'body'\"\n      [overlayOptions]=\"{ baseZIndex: 11000 }\"\n    ></p-multiSelect>\n\n    @if (\n      activeFormGroup.get(controlName)?.invalid &&\n      (activeFormGroup.get(controlName)?.touched ||\n        activeFormGroup.get(controlName)?.dirty)\n    ) {\n      <div class=\"error-container\">\n        <small class=\"field-error\">{{ getErrorMessage() }}</small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.error-container{margin-top:.35rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-multiselect{width:100%}.form-field ::ng-deep .p-multiselect.ng-invalid.ng-touched,.form-field ::ng-deep .p-multiselect.ng-invalid.ng-dirty{border-color:#dc2626}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMultiSelectComponent, decorators: [{
             type: Component,
@@ -2015,6 +2137,7 @@ class PTAdvancedPrimeTableModule {
             TableModule,
             InputTextModule,
             ButtonModule,
+            ContextMenuModule,
             DatePickerModule,
             MultiSelectModule,
             TagModule,
@@ -2031,6 +2154,7 @@ class PTAdvancedPrimeTableModule {
             TableModule,
             InputTextModule,
             ButtonModule,
+            ContextMenuModule,
             DatePickerModule,
             MultiSelectModule,
             TagModule,
@@ -2052,6 +2176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         TableModule,
                         InputTextModule,
                         ButtonModule,
+                        ContextMenuModule,
                         DatePickerModule,
                         MultiSelectModule,
                         TagModule,
@@ -2337,7 +2462,7 @@ class MultiSearchCriteriaComponent {
         return input.decimalSeparator === 'comma' ? 'fr-FR' : 'en-US';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MultiSearchCriteriaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: MultiSearchCriteriaComponent, isStandalone: false, selector: "multi-search-criteria", inputs: { title: "title", criteria: "criteria", inputsPerRow: "inputsPerRow", data: "data", mode: "mode" }, outputs: { filteredData: "filteredData", searchCriteria: "searchCriteria" }, ngImport: i0, template: "<p-panel\n  header=\"{{ title }}\"\n  [toggleable]=\"true\"\n  [collapsed]=\"true\"\n  class=\"multi-search-criteria\"\n>\n  <div\n    class=\"criteria-container\"\n    [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputsPerRow + ', 1fr)' }\"\n  >\n    @for (input of criteria; track input.title) {\n      <div class=\"criteria-item\">\n        <label class=\"bsc-label\">{{ input.title }}</label>\n\n        @switch (input.type) {\n          @case (SearchCriteriaTypeEnum.DATERANGE) {\n            <p-datepicker\n              [(ngModel)]=\"input.value\"\n              selectionMode=\"range\"\n              [dateFormat]=\"'dd/mm/yy'\"\n              class=\"full-width-input\"\n              [showIcon]=\"true\"\n              (ngModelChange)=\"input.value = $event\"\n            ></p-datepicker>\n          }\n\n          @case (SearchCriteriaTypeEnum.DATE) {\n            <p-datepicker\n              [ngModel]=\"input.value\"\n              (ngModelChange)=\"input.value = $event\"\n              [dateFormat]=\"'dd/mm/yy'\"\n              [showIcon]=\"true\"\n              class=\"full-width-input\"\n            ></p-datepicker>\n          }\n\n          @case (SearchCriteriaTypeEnum.STRING) {\n            <input\n              type=\"text\"\n              pInputText\n              [(ngModel)]=\"input.value\"\n              class=\"full-width-input\"\n            />\n          }\n\n          @case (SearchCriteriaTypeEnum.AMOUNT) {\n            <p-inputNumber\n              type=\"number\"\n              [(ngModel)]=\"input.value\"\n              mode=\"decimal\"\n              [minFractionDigits]=\"getMinFractionDigits(input)\"\n              [maxFractionDigits]=\"getMaxFractionDigits(input)\"\n              [step]=\"getStepValue(input)\"\n              [placeholder]=\"getCurrencySymbol(input)\"\n              [locale]=\"getDecimalSeparator(input)\"\n              class=\"full-width-input\"\n            ></p-inputNumber>\n          }\n\n          @case (SearchCriteriaTypeEnum.NUMBER) {\n            <p-inputNumber\n              [(ngModel)]=\"input.value\"\n              mode=\"decimal\"\n              [minFractionDigits]=\"getMinFractionDigits(input)\"\n              [maxFractionDigits]=\"getMaxFractionDigits(input)\"\n              [step]=\"getStepValue(input)\"\n              [useGrouping]=\"false\"\n              [locale]=\"getDecimalSeparator(input)\"\n              class=\"full-width-input\"\n            ></p-inputNumber>\n          }\n\n          @case (SearchCriteriaTypeEnum.MULTISELECT) {\n            <p-multiSelect\n              [options]=\"input.filterOptions\"\n              [display]=\"'chip'\"\n              placeholder=\"Select\"\n              [selectAll]=\"selectAll\"\n              [(ngModel)]=\"input.value\"\n              optionLabel=\"label\"\n              (onSelectAllChange)=\"onSelectAllChange($event, input)\"\n              class=\"custom-multiselect full-width-input\"\n            ></p-multiSelect>\n          }\n        }\n      </div>\n    }\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"footer-buttons\">\n      <p-button\n        label=\"Effacer\"\n        icon=\"pi pi-times\"\n        (click)=\"clear()\"\n        class=\"footer-button\"\n      ></p-button>\n\n      <p-button\n        label=\"Rechercher\"\n        icon=\"pi pi-search\"\n        (click)=\"search()\"\n        class=\"footer-button\"\n      ></p-button>\n    </div>\n  </ng-template>\n</p-panel>\n", styles: [".multi-search-criteria ::ng-deep .p-element .p-hidden-accessible input{display:none}.multi-search-criteria ::ng-deep .bsc-label{display:block;margin-bottom:5px;font-weight:700}.multi-search-criteria ::ng-deep .custom-multiselect{width:100%}.multi-search-criteria ::ng-deep .p-multiselect .p-multiselect-label{font-size:14px;color:#333}.multi-search-criteria ::ng-deep .p-inputtext{width:100%}.multi-search-criteria ::ng-deep .p-calendar .p-inputtext{width:100%}.multi-search-criteria ::ng-deep .p-inputnumber{width:100%}.multi-search-criteria .criteria-container{display:grid;gap:10px}.multi-search-criteria .criteria-item{margin-bottom:10px;box-sizing:border-box}.multi-search-criteria .full-width-input,::ng-deep .p-calendar,::ng-deep .p-multiselect{width:100%}.multi-search-criteria ::ng-deep .p-calendar .p-inputtext,::ng-deep .p-multiselect .p-multiselect-label{width:100%}.multi-search-criteria .footer-buttons{display:flex;justify-content:flex-end;gap:10px}.multi-search-criteria ::ng-deep .footer-button button{width:140px;cursor:pointer}.multi-search-criteria ::ng-deep .p-panel .p-panel-footer{background:#f8f9fa}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { 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: i6.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { 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: i8$1.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i9$1.Panel, selector: "p-panel", inputs: ["id", "toggleable", "header", "collapsed", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps", "motionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: MultiSearchCriteriaComponent, isStandalone: false, selector: "multi-search-criteria", inputs: { title: "title", criteria: "criteria", inputsPerRow: "inputsPerRow", data: "data", mode: "mode" }, outputs: { filteredData: "filteredData", searchCriteria: "searchCriteria" }, ngImport: i0, template: "<p-panel\n  header=\"{{ title }}\"\n  [toggleable]=\"true\"\n  [collapsed]=\"true\"\n  class=\"multi-search-criteria\"\n>\n  <div\n    class=\"criteria-container\"\n    [ngStyle]=\"{ 'grid-template-columns': 'repeat(' + inputsPerRow + ', 1fr)' }\"\n  >\n    @for (input of criteria; track input.title) {\n      <div class=\"criteria-item\">\n        <label class=\"bsc-label\">{{ input.title }}</label>\n\n        @switch (input.type) {\n          @case (SearchCriteriaTypeEnum.DATERANGE) {\n            <p-datepicker\n              [(ngModel)]=\"input.value\"\n              selectionMode=\"range\"\n              [dateFormat]=\"'dd/mm/yy'\"\n              class=\"full-width-input\"\n              [showIcon]=\"true\"\n              (ngModelChange)=\"input.value = $event\"\n            ></p-datepicker>\n          }\n\n          @case (SearchCriteriaTypeEnum.DATE) {\n            <p-datepicker\n              [ngModel]=\"input.value\"\n              (ngModelChange)=\"input.value = $event\"\n              [dateFormat]=\"'dd/mm/yy'\"\n              [showIcon]=\"true\"\n              class=\"full-width-input\"\n            ></p-datepicker>\n          }\n\n          @case (SearchCriteriaTypeEnum.STRING) {\n            <input\n              type=\"text\"\n              pInputText\n              [(ngModel)]=\"input.value\"\n              class=\"full-width-input\"\n            />\n          }\n\n          @case (SearchCriteriaTypeEnum.AMOUNT) {\n            <p-inputNumber\n              type=\"number\"\n              [(ngModel)]=\"input.value\"\n              mode=\"decimal\"\n              [minFractionDigits]=\"getMinFractionDigits(input)\"\n              [maxFractionDigits]=\"getMaxFractionDigits(input)\"\n              [step]=\"getStepValue(input)\"\n              [placeholder]=\"getCurrencySymbol(input)\"\n              [locale]=\"getDecimalSeparator(input)\"\n              class=\"full-width-input\"\n            ></p-inputNumber>\n          }\n\n          @case (SearchCriteriaTypeEnum.NUMBER) {\n            <p-inputNumber\n              [(ngModel)]=\"input.value\"\n              mode=\"decimal\"\n              [minFractionDigits]=\"getMinFractionDigits(input)\"\n              [maxFractionDigits]=\"getMaxFractionDigits(input)\"\n              [step]=\"getStepValue(input)\"\n              [useGrouping]=\"false\"\n              [locale]=\"getDecimalSeparator(input)\"\n              class=\"full-width-input\"\n            ></p-inputNumber>\n          }\n\n          @case (SearchCriteriaTypeEnum.MULTISELECT) {\n            <p-multiSelect\n              [options]=\"input.filterOptions\"\n              [display]=\"'chip'\"\n              placeholder=\"Select\"\n              [selectAll]=\"selectAll\"\n              [(ngModel)]=\"input.value\"\n              optionLabel=\"label\"\n              (onSelectAllChange)=\"onSelectAllChange($event, input)\"\n              class=\"custom-multiselect full-width-input\"\n            ></p-multiSelect>\n          }\n        }\n      </div>\n    }\n  </div>\n\n  <ng-template pTemplate=\"footer\">\n    <div class=\"footer-buttons\">\n      <p-button\n        label=\"Effacer\"\n        icon=\"pi pi-times\"\n        (click)=\"clear()\"\n        class=\"footer-button\"\n      ></p-button>\n\n      <p-button\n        label=\"Rechercher\"\n        icon=\"pi pi-search\"\n        (click)=\"search()\"\n        class=\"footer-button\"\n      ></p-button>\n    </div>\n  </ng-template>\n</p-panel>\n", styles: [".multi-search-criteria ::ng-deep .p-element .p-hidden-accessible input{display:none}.multi-search-criteria ::ng-deep .bsc-label{display:block;margin-bottom:5px;font-weight:700}.multi-search-criteria ::ng-deep .custom-multiselect{width:100%}.multi-search-criteria ::ng-deep .p-multiselect .p-multiselect-label{font-size:14px;color:#333}.multi-search-criteria ::ng-deep .p-inputtext{width:100%}.multi-search-criteria ::ng-deep .p-calendar .p-inputtext{width:100%}.multi-search-criteria ::ng-deep .p-inputnumber{width:100%}.multi-search-criteria .criteria-container{display:grid;gap:10px}.multi-search-criteria .criteria-item{margin-bottom:10px;box-sizing:border-box}.multi-search-criteria .full-width-input,::ng-deep .p-calendar,::ng-deep .p-multiselect{width:100%}.multi-search-criteria ::ng-deep .p-calendar .p-inputtext,::ng-deep .p-multiselect .p-multiselect-label{width:100%}.multi-search-criteria .footer-buttons{display:flex;justify-content:flex-end;gap:10px}.multi-search-criteria ::ng-deep .footer-button button{width:140px;cursor:pointer}.multi-search-criteria ::ng-deep .p-panel .p-panel-footer{background:#f8f9fa}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i8.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i9.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i6.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { 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: i8$1.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i9$1.Panel, selector: "p-panel", inputs: ["id", "toggleable", "header", "collapsed", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps", "motionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MultiSearchCriteriaComponent, decorators: [{
             type: Component,
@@ -2915,7 +3040,7 @@ class PTDateInputComponent {
         return Boolean(hidden);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDateInputComponent, deps: [{ token: PTDateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTDateInputComponent, isStandalone: false, selector: "pt-date-input", inputs: { formGroup: "formGroup", formField: "formField", config: "config", value: "value" }, outputs: { valueChange: "valueChange", dateChange: "dateChange" }, usesOnChanges: true, ngImport: i0, template: "@if (!resolvedHidden) {\n  <div\n    class=\"form-field\"\n    [formGroup]=\"activeFormGroup\"\n    [ngClass]=\"{\n      'form-field-invalid':\n        activeFormGroup.get(controlName)?.invalid &&\n        (activeFormGroup.get(controlName)?.touched ||\n          activeFormGroup.get(controlName)?.dirty),\n    }\"\n    [ngStyle]=\"{\n      width: resolvedWidth,\n      'max-width': resolvedWidth,\n    }\"\n  >\n    @if (resolvedLabel) {\n      <label class=\"field-label\" [id]=\"labelId\" [for]=\"inputId\">\n        {{ resolvedLabel }}\n\n        @if (resolvedRequired) {\n          <span class=\"required-indicator\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n\n    <p-datepicker\n      class=\"date-input\"\n      styleClass=\"date-input-control\"\n      [inputId]=\"inputId\"\n      [name]=\"controlName\"\n      [formControlName]=\"controlName\"\n      [placeholder]=\"resolvedPlaceholder\"\n      [dateFormat]=\"resolvedDateFormat\"\n      [showIcon]=\"resolvedShowIcon\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [showTime]=\"\n        resolvedDateInputType === 'datetime' || resolvedDateInputType === 'time'\n      \"\n      [timeOnly]=\"resolvedDateInputType === 'time'\"\n      [hourFormat]=\"resolvedHourFormat\"\n      [selectionMode]=\"resolvedDateInputType === 'range' ? 'range' : 'single'\"\n      [readonlyInput]=\"false\"\n      [showButtonBar]=\"true\"\n      [appendTo]=\"'body'\"\n      [panelStyle]=\"{\n        'z-index': 99999,\n      }\"\n      [attr.aria-labelledby]=\"resolvedLabel ? labelId : null\"\n      [attr.aria-describedby]=\"\n        activeFormGroup.get(controlName)?.invalid\n          ? controlName + '-error'\n          : null\n      \"\n      [attr.aria-invalid]=\"\n        activeFormGroup.get(controlName)?.invalid ? 'true' : 'false'\n      \"\n    ></p-datepicker>\n\n    @if (\n      activeFormGroup.get(controlName)?.invalid &&\n      (activeFormGroup.get(controlName)?.touched ||\n        activeFormGroup.get(controlName)?.dirty)\n    ) {\n      <div class=\"error-container\" role=\"alert\" [id]=\"controlName + '-error'\">\n        <i class=\"pi pi-exclamation-circle\"></i>\n\n        <small class=\"field-error\">\n          {{ getErrorMessage() }}\n        </small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem;overflow:visible}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.error-container{margin-top:.35rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-datepicker.ng-invalid.ng-touched .p-inputtext,.form-field ::ng-deep .p-datepicker.ng-invalid.ng-dirty .p-inputtext{border-color:#dc2626}.form-field ::ng-deep .p-datepicker-input.ng-invalid.ng-touched,.form-field ::ng-deep .p-datepicker-input.ng-invalid.ng-dirty{border-color:#dc2626}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTDateInputComponent, isStandalone: false, selector: "pt-date-input", inputs: { formGroup: "formGroup", formField: "formField", config: "config", value: "value" }, outputs: { valueChange: "valueChange", dateChange: "dateChange" }, usesOnChanges: true, ngImport: i0, template: "@if (!resolvedHidden) {\n  <div\n    class=\"form-field\"\n    [formGroup]=\"activeFormGroup\"\n    [ngClass]=\"{\n      'form-field-invalid':\n        activeFormGroup.get(controlName)?.invalid &&\n        (activeFormGroup.get(controlName)?.touched ||\n          activeFormGroup.get(controlName)?.dirty),\n    }\"\n    [ngStyle]=\"{\n      width: resolvedWidth,\n      'max-width': resolvedWidth,\n    }\"\n  >\n    @if (resolvedLabel) {\n      <label class=\"field-label\" [id]=\"labelId\" [for]=\"inputId\">\n        {{ resolvedLabel }}\n\n        @if (resolvedRequired) {\n          <span class=\"required-indicator\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n\n    <p-datepicker\n      class=\"date-input\"\n      styleClass=\"date-input-control\"\n      [inputId]=\"inputId\"\n      [name]=\"controlName\"\n      [formControlName]=\"controlName\"\n      [placeholder]=\"resolvedPlaceholder\"\n      [dateFormat]=\"resolvedDateFormat\"\n      [showIcon]=\"resolvedShowIcon\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [showTime]=\"\n        resolvedDateInputType === 'datetime' || resolvedDateInputType === 'time'\n      \"\n      [timeOnly]=\"resolvedDateInputType === 'time'\"\n      [hourFormat]=\"resolvedHourFormat\"\n      [selectionMode]=\"resolvedDateInputType === 'range' ? 'range' : 'single'\"\n      [readonlyInput]=\"false\"\n      [showButtonBar]=\"true\"\n      [appendTo]=\"'body'\"\n      [panelStyle]=\"{\n        'z-index': 99999,\n      }\"\n      [attr.aria-labelledby]=\"resolvedLabel ? labelId : null\"\n      [attr.aria-describedby]=\"\n        activeFormGroup.get(controlName)?.invalid\n          ? controlName + '-error'\n          : null\n      \"\n      [attr.aria-invalid]=\"\n        activeFormGroup.get(controlName)?.invalid ? 'true' : 'false'\n      \"\n    ></p-datepicker>\n\n    @if (\n      activeFormGroup.get(controlName)?.invalid &&\n      (activeFormGroup.get(controlName)?.touched ||\n        activeFormGroup.get(controlName)?.dirty)\n    ) {\n      <div class=\"error-container\" role=\"alert\" [id]=\"controlName + '-error'\">\n        <i class=\"pi pi-exclamation-circle\"></i>\n\n        <small class=\"field-error\">\n          {{ getErrorMessage() }}\n        </small>\n      </div>\n    }\n  </div>\n}\n", styles: [".form-field{margin-bottom:1rem;overflow:visible}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.error-container{margin-top:.35rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-datepicker.ng-invalid.ng-touched .p-inputtext,.form-field ::ng-deep .p-datepicker.ng-invalid.ng-dirty .p-inputtext{border-color:#dc2626}.form-field ::ng-deep .p-datepicker-input.ng-invalid.ng-touched,.form-field ::ng-deep .p-datepicker-input.ng-invalid.ng-dirty{border-color:#dc2626}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDateInputComponent, decorators: [{
             type: Component,
@@ -3566,7 +3691,7 @@ class PTTextInputComponent {
             Object.keys(errors)[0]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTTextInputComponent, isStandalone: false, selector: "pt-text-input", inputs: { formGroup: "formGroup", formField: "formField" }, usesOnChanges: true, ngImport: i0, template: "<!-- projects/ng-prime-tools/src/lib/pt-text-input/pt-text-input.component.html -->\n\n<div\n  class=\"form-field\"\n  [formGroup]=\"formGroup\"\n  [ngClass]=\"{\n    'form-field-invalid': isInvalid,\n  }\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto',\n    margin: formField.margin || null,\n  }\"\n>\n  @if (formField.label) {\n    <label class=\"field-label\" [for]=\"inputId\">\n      {{ formField.label }}\n\n      @if (formField.required) {\n        <span class=\"required-indicator\" aria-hidden=\"true\"> * </span>\n      }\n    </label>\n  }\n\n  @if (formField.iconClass) {\n    <p-iconField\n      class=\"text-icon-field\"\n      [iconPosition]=\"formField.iconPosition || 'left'\"\n    >\n      <p-inputIcon [styleClass]=\"formField.iconClass\"></p-inputIcon>\n\n      @if (isPasswordInput()) {\n        <p-password\n          [inputId]=\"inputId\"\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [toggleMask]=\"getPasswordToggleMask()\"\n          [feedback]=\"getPasswordFeedback()\"\n          [attr.name]=\"formField.name\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n          [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n          [inputStyle]=\"{\n            width: '100%',\n            height: formField.height || 'auto',\n          }\"\n          styleClass=\"pt-password-input\"\n        ></p-password>\n      } @else {\n        <input\n          pInputText\n          class=\"pt-text-input\"\n          [id]=\"inputId\"\n          [attr.name]=\"formField.name\"\n          [type]=\"getInputType()\"\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [attr.minlength]=\"formField.minLength\"\n          [attr.maxlength]=\"formField.maxLength\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n          [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n          [ngStyle]=\"{\n            width: '100%',\n            height: formField.height || 'auto',\n          }\"\n        />\n      }\n    </p-iconField>\n  } @else {\n    @if (isPasswordInput()) {\n      <p-password\n        [inputId]=\"inputId\"\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [toggleMask]=\"getPasswordToggleMask()\"\n        [feedback]=\"getPasswordFeedback()\"\n        [attr.name]=\"formField.name\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n        [inputStyle]=\"{\n          width: '100%',\n          height: formField.height || 'auto',\n        }\"\n        styleClass=\"pt-password-input\"\n      ></p-password>\n    } @else {\n      <input\n        pInputText\n        class=\"pt-text-input\"\n        [id]=\"inputId\"\n        [attr.name]=\"formField.name\"\n        [type]=\"getInputType()\"\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n        [ngStyle]=\"{\n          width: '100%',\n          height: formField.height || 'auto',\n        }\"\n      />\n    }\n  }\n\n  @if (hasInfoRow()) {\n    <div class=\"form-info-row\">\n      @if (isInvalid) {\n        <small class=\"field-error\" role=\"alert\" [id]=\"errorId\">\n          {{ getErrorMessage() }}\n        </small>\n      }\n\n      <div class=\"spacer\"></div>\n\n      @if (hasCharacterCounter()) {\n        <div class=\"character-counter\">\n          {{ characterCount }}/{{ formField.maxLength }} characters\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}.form-field{width:100%;min-width:0}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.required-indicator{margin-left:.2rem;color:#dc2626}.text-icon-field{display:block;width:100%;min-width:0}.pt-text-input{width:100%;min-width:0;box-sizing:border-box}.form-info-row{display:flex;align-items:center;gap:.5rem;min-height:1.25rem;margin-top:.35rem}.spacer{flex:1 1 auto}.field-error{display:block;min-width:0;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2;overflow-wrap:anywhere}.character-counter{flex:0 0 auto;color:#64748b;font-size:.8rem;font-weight:500;white-space:nowrap}.form-field-invalid .pt-text-input{border-color:#dc2626}:host ::ng-deep .text-icon-field.p-iconfield,:host ::ng-deep .text-icon-field .p-iconfield{display:block;width:100%;min-width:0}:host ::ng-deep .pt-password-input{display:block;width:100%;min-width:0}:host ::ng-deep .pt-password-input.p-password,:host ::ng-deep .pt-password-input .p-password{display:block;width:100%;min-width:0}:host ::ng-deep .pt-password-input .p-password-input,:host ::ng-deep .pt-password-input input{width:100%;min-width:0;box-sizing:border-box}.form-field-invalid ::ng-deep .pt-password-input .p-password-input{border-color:#dc2626}:host ::ng-deep .pt-password-input .p-password-toggle-mask-icon,:host ::ng-deep .pt-password-input .p-password-toggle-mask{right:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { 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: "component", type: i6$1.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTTextInputComponent, isStandalone: false, selector: "pt-text-input", inputs: { formGroup: "formGroup", formField: "formField" }, usesOnChanges: true, ngImport: i0, template: "<!-- projects/ng-prime-tools/src/lib/pt-text-input/pt-text-input.component.html -->\n\n<div\n  class=\"form-field\"\n  [formGroup]=\"formGroup\"\n  [ngClass]=\"{\n    'form-field-invalid': isInvalid,\n  }\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto',\n    margin: formField.margin || null,\n  }\"\n>\n  @if (formField.label) {\n    <label class=\"field-label\" [for]=\"inputId\">\n      {{ formField.label }}\n\n      @if (formField.required) {\n        <span class=\"required-indicator\" aria-hidden=\"true\"> * </span>\n      }\n    </label>\n  }\n\n  @if (formField.iconClass) {\n    <p-iconField\n      class=\"text-icon-field\"\n      [iconPosition]=\"formField.iconPosition || 'left'\"\n    >\n      <p-inputIcon [styleClass]=\"formField.iconClass\"></p-inputIcon>\n\n      @if (isPasswordInput()) {\n        <p-password\n          [inputId]=\"inputId\"\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [toggleMask]=\"getPasswordToggleMask()\"\n          [feedback]=\"getPasswordFeedback()\"\n          [attr.name]=\"formField.name\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n          [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n          [inputStyle]=\"{\n            width: '100%',\n            height: formField.height || 'auto',\n          }\"\n          styleClass=\"pt-password-input\"\n        ></p-password>\n      } @else {\n        <input\n          pInputText\n          class=\"pt-text-input\"\n          [id]=\"inputId\"\n          [attr.name]=\"formField.name\"\n          [type]=\"getInputType()\"\n          [formControlName]=\"formField.name\"\n          [placeholder]=\"formField.placeholder ?? ''\"\n          [attr.minlength]=\"formField.minLength\"\n          [attr.maxlength]=\"formField.maxLength\"\n          [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n          [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n          [ngStyle]=\"{\n            width: '100%',\n            height: formField.height || 'auto',\n          }\"\n        />\n      }\n    </p-iconField>\n  } @else {\n    @if (isPasswordInput()) {\n      <p-password\n        [inputId]=\"inputId\"\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [toggleMask]=\"getPasswordToggleMask()\"\n        [feedback]=\"getPasswordFeedback()\"\n        [attr.name]=\"formField.name\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n        [inputStyle]=\"{\n          width: '100%',\n          height: formField.height || 'auto',\n        }\"\n        styleClass=\"pt-password-input\"\n      ></p-password>\n    } @else {\n      <input\n        pInputText\n        class=\"pt-text-input\"\n        [id]=\"inputId\"\n        [attr.name]=\"formField.name\"\n        [type]=\"getInputType()\"\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [attr.minlength]=\"formField.minLength\"\n        [attr.maxlength]=\"formField.maxLength\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n        [ngStyle]=\"{\n          width: '100%',\n          height: formField.height || 'auto',\n        }\"\n      />\n    }\n  }\n\n  @if (hasInfoRow()) {\n    <div class=\"form-info-row\">\n      @if (isInvalid) {\n        <small class=\"field-error\" role=\"alert\" [id]=\"errorId\">\n          {{ getErrorMessage() }}\n        </small>\n      }\n\n      <div class=\"spacer\"></div>\n\n      @if (hasCharacterCounter()) {\n        <div class=\"character-counter\">\n          {{ characterCount }}/{{ formField.maxLength }} characters\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}.form-field{width:100%;min-width:0}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.required-indicator{margin-left:.2rem;color:#dc2626}.text-icon-field{display:block;width:100%;min-width:0}.pt-text-input{width:100%;min-width:0;box-sizing:border-box}.form-info-row{display:flex;align-items:center;gap:.5rem;min-height:1.25rem;margin-top:.35rem}.spacer{flex:1 1 auto}.field-error{display:block;min-width:0;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2;overflow-wrap:anywhere}.character-counter{flex:0 0 auto;color:#64748b;font-size:.8rem;font-weight:500;white-space:nowrap}.form-field-invalid .pt-text-input{border-color:#dc2626}:host ::ng-deep .text-icon-field.p-iconfield,:host ::ng-deep .text-icon-field .p-iconfield{display:block;width:100%;min-width:0}:host ::ng-deep .pt-password-input{display:block;width:100%;min-width:0}:host ::ng-deep .pt-password-input.p-password,:host ::ng-deep .pt-password-input .p-password{display:block;width:100%;min-width:0}:host ::ng-deep .pt-password-input .p-password-input,:host ::ng-deep .pt-password-input input{width:100%;min-width:0;box-sizing:border-box}.form-field-invalid ::ng-deep .pt-password-input .p-password-input{border-color:#dc2626}:host ::ng-deep .pt-password-input .p-password-toggle-mask-icon,:host ::ng-deep .pt-password-input .p-password-toggle-mask{right:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i11.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i12.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i6$1.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTTextInputComponent, decorators: [{
             type: Component,
@@ -4117,7 +4242,7 @@ class PTPasswordInputComponent {
             Object.keys(errors)[0]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTPasswordInputComponent, isStandalone: false, selector: "pt-password-input", inputs: { formGroup: "formGroup", formField: "formField" }, usesOnChanges: true, ngImport: i0, template: "<!-- projects/ng-prime-tools/src/lib/pt-password-input/pt-password-input.component.html -->\n\n<div\n  class=\"form-field\"\n  [formGroup]=\"formGroup\"\n  [ngClass]=\"{\n    'form-field-invalid': isInvalid,\n  }\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto',\n    margin: formField.margin || null,\n  }\"\n>\n  @if (formField.label) {\n    <label class=\"field-label\" [for]=\"inputId\">\n      {{ formField.label }}\n\n      @if (formField.required) {\n        <span class=\"required-indicator\" aria-hidden=\"true\"> * </span>\n      }\n    </label>\n  }\n\n  @if (formField.iconClass) {\n    <p-iconField\n      class=\"password-icon-field\"\n      [iconPosition]=\"formField.iconPosition || 'left'\"\n    >\n      <p-inputIcon [styleClass]=\"formField.iconClass\"></p-inputIcon>\n\n      <p-password\n        [inputId]=\"inputId\"\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [toggleMask]=\"getPasswordToggleMask()\"\n        [feedback]=\"getPasswordFeedback()\"\n        [attr.name]=\"formField.name\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n        [inputStyle]=\"{\n          width: '100%',\n          height: formField.height || 'auto',\n        }\"\n        styleClass=\"pt-password-input\"\n      ></p-password>\n    </p-iconField>\n  } @else {\n    <p-password\n      [inputId]=\"inputId\"\n      [formControlName]=\"formField.name\"\n      [placeholder]=\"formField.placeholder ?? ''\"\n      [toggleMask]=\"getPasswordToggleMask()\"\n      [feedback]=\"getPasswordFeedback()\"\n      [attr.name]=\"formField.name\"\n      [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n      [inputStyle]=\"{\n        width: '100%',\n        height: formField.height || 'auto',\n      }\"\n      styleClass=\"pt-password-input\"\n    ></p-password>\n  }\n\n  @if (hasInfoRow()) {\n    <div class=\"form-info-row\">\n      @if (isInvalid) {\n        <small class=\"field-error\" role=\"alert\" [id]=\"errorId\">\n          {{ getErrorMessage() }}\n        </small>\n      }\n\n      <div class=\"spacer\"></div>\n\n      @if (hasCharacterCounter()) {\n        <div class=\"character-counter\">\n          {{ characterCount }}/{{ formField.maxLength }} characters\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.form-field{width:100%}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.form-info-row{display:flex;align-items:center;gap:.5rem;min-height:1.25rem;margin-top:.35rem}.spacer{flex:1 1 auto}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.character-counter{font-size:.8rem;font-weight:500;color:#64748b;white-space:nowrap}::ng-deep .pt-password-input{display:block!important;width:100%!important}::ng-deep .pt-password-input .p-password{display:block!important;width:100%!important}::ng-deep .pt-password-input .p-password-input{width:100%!important}::ng-deep .pt-password-input input{box-sizing:border-box;width:100%!important}::ng-deep .pt-password-input.ng-invalid.ng-touched input,::ng-deep .pt-password-input.ng-invalid.ng-dirty input,::ng-deep .pt-password-input input.ng-invalid.ng-touched,::ng-deep .pt-password-input input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input .p-password-toggle-mask-icon,::ng-deep .pt-password-input .p-password-toggle-mask{right:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: "component", type: i6$1.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTPasswordInputComponent, isStandalone: false, selector: "pt-password-input", inputs: { formGroup: "formGroup", formField: "formField" }, usesOnChanges: true, ngImport: i0, template: "<!-- projects/ng-prime-tools/src/lib/pt-password-input/pt-password-input.component.html -->\n\n<div\n  class=\"form-field\"\n  [formGroup]=\"formGroup\"\n  [ngClass]=\"{\n    'form-field-invalid': isInvalid,\n  }\"\n  [ngStyle]=\"{\n    width: formField.width || '100%',\n    height: formField.height || 'auto',\n    margin: formField.margin || null,\n  }\"\n>\n  @if (formField.label) {\n    <label class=\"field-label\" [for]=\"inputId\">\n      {{ formField.label }}\n\n      @if (formField.required) {\n        <span class=\"required-indicator\" aria-hidden=\"true\"> * </span>\n      }\n    </label>\n  }\n\n  @if (formField.iconClass) {\n    <p-iconField\n      class=\"password-icon-field\"\n      [iconPosition]=\"formField.iconPosition || 'left'\"\n    >\n      <p-inputIcon [styleClass]=\"formField.iconClass\"></p-inputIcon>\n\n      <p-password\n        [inputId]=\"inputId\"\n        [formControlName]=\"formField.name\"\n        [placeholder]=\"formField.placeholder ?? ''\"\n        [toggleMask]=\"getPasswordToggleMask()\"\n        [feedback]=\"getPasswordFeedback()\"\n        [attr.name]=\"formField.name\"\n        [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n        [inputStyle]=\"{\n          width: '100%',\n          height: formField.height || 'auto',\n        }\"\n        styleClass=\"pt-password-input\"\n      ></p-password>\n    </p-iconField>\n  } @else {\n    <p-password\n      [inputId]=\"inputId\"\n      [formControlName]=\"formField.name\"\n      [placeholder]=\"formField.placeholder ?? ''\"\n      [toggleMask]=\"getPasswordToggleMask()\"\n      [feedback]=\"getPasswordFeedback()\"\n      [attr.name]=\"formField.name\"\n      [attr.aria-invalid]=\"isInvalid ? 'true' : 'false'\"\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\n      [inputStyle]=\"{\n        width: '100%',\n        height: formField.height || 'auto',\n      }\"\n      styleClass=\"pt-password-input\"\n    ></p-password>\n  }\n\n  @if (hasInfoRow()) {\n    <div class=\"form-info-row\">\n      @if (isInvalid) {\n        <small class=\"field-error\" role=\"alert\" [id]=\"errorId\">\n          {{ getErrorMessage() }}\n        </small>\n      }\n\n      <div class=\"spacer\"></div>\n\n      @if (hasCharacterCounter()) {\n        <div class=\"character-counter\">\n          {{ characterCount }}/{{ formField.maxLength }} characters\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.form-field{width:100%}.field-label{display:block;margin-bottom:.5rem;font-weight:700}.form-info-row{display:flex;align-items:center;gap:.5rem;min-height:1.25rem;margin-top:.35rem}.spacer{flex:1 1 auto}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.character-counter{font-size:.8rem;font-weight:500;color:#64748b;white-space:nowrap}::ng-deep .pt-password-input{display:block!important;width:100%!important}::ng-deep .pt-password-input .p-password{display:block!important;width:100%!important}::ng-deep .pt-password-input .p-password-input{width:100%!important}::ng-deep .pt-password-input input{box-sizing:border-box;width:100%!important}::ng-deep .pt-password-input.ng-invalid.ng-touched input,::ng-deep .pt-password-input.ng-invalid.ng-dirty input,::ng-deep .pt-password-input input.ng-invalid.ng-touched,::ng-deep .pt-password-input input.ng-invalid.ng-dirty{border-color:#dc2626}::ng-deep .pt-password-input .p-password-toggle-mask-icon,::ng-deep .pt-password-input .p-password-toggle-mask{right:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i12.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i6$1.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPasswordInputComponent, decorators: [{
             type: Component,
@@ -8697,7 +8822,7 @@ class PTAccordionComponent {
             .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 }); }
+    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: i10.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,
@@ -9210,7 +9335,7 @@ class PTMetricPanelComponent {
         this.actionMenuItems = [...items, ...this.menuItems];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMetricPanelComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTMetricPanelComponent, isStandalone: false, selector: "pt-metric-panel", inputs: { panelData: "panelData", cardConfig: "cardConfig", showRefresh: "showRefresh", showMenu: "showMenu", menuItems: "menuItems", loading: "loading" }, outputs: { refresh: "refresh" }, viewQueries: [{ propertyName: "actionMenu", first: true, predicate: ["actionMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<pt-card [config]=\"cardConfig\">\n  <div class=\"panel-header\">\n    <div class=\"panel-title-container\" [ngStyle]=\"getTitleStyles()\">\n      @if (getTitleIcon()) {\n        <i\n          class=\"panel-title-icon\"\n          [ngClass]=\"getIconClass(getTitleIcon())\"\n          [ngStyle]=\"getTitleIconStyles()\"\n        ></i>\n      }\n\n      <span class=\"panel-title-text\">\n        {{ getTitleText() }}\n      </span>\n    </div>\n\n    @if (showRefresh || shouldShowMenu) {\n      <div class=\"panel-actions\">\n        @if (showRefresh) {\n          <button\n            type=\"button\"\n            class=\"panel-action-button\"\n            [class.panel-action-button-loading]=\"isLoading\"\n            [disabled]=\"isLoading\"\n            aria-label=\"Actualiser\"\n            title=\"Actualiser\"\n            (click)=\"onRefreshClick($event)\"\n          >\n            <i\n              class=\"pi\"\n              [ngClass]=\"isLoading ? 'pi-spin pi-spinner' : 'pi-refresh'\"\n            ></i>\n          </button>\n        }\n\n        @if (shouldShowMenu) {\n          <button\n            type=\"button\"\n            class=\"panel-action-button\"\n            [disabled]=\"isLoading\"\n            aria-label=\"Plus d\u2019actions\"\n            title=\"Plus d\u2019actions\"\n            (click)=\"toggleMenu($event)\"\n          >\n            <i class=\"pi pi-ellipsis-v\"></i>\n          </button>\n\n          <p-menu\n            #actionMenu\n            [model]=\"actionMenuItems\"\n            [popup]=\"true\"\n            appendTo=\"body\"\n          ></p-menu>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"panel-separator\"></div>\n\n  <div class=\"metric-content\">\n    @if (isLoading) {\n      <div\n        class=\"metric-loading-overlay\"\n        aria-live=\"polite\"\n        aria-label=\"Chargement des donn\u00E9es\"\n      >\n        <i class=\"pi pi-spinner pi-spin metric-loading-spinner\"></i>\n        <span>Chargement des donn\u00E9es...</span>\n      </div>\n    }\n\n    <div\n      class=\"metric-list\"\n      [class.metric-list-loading]=\"isLoading\"\n      [attr.aria-busy]=\"isLoading\"\n    >\n      @for (item of panelData.indicators; track $index) {\n        <div\n          class=\"metric-item\"\n          [class.metric-item-clickable]=\"!!item.url && !isLoading\"\n          [pTooltip]=\"item.tooltip || ''\"\n          tooltipPosition=\"top\"\n          [tooltipDisabled]=\"!item.tooltip || isLoading\"\n          (click)=\"!isLoading && handleClick(item.url)\"\n        >\n          <div class=\"metric-left\">\n            @if (item.icon) {\n              <span class=\"metric-icon-wrapper\">\n                <i\n                  [ngClass]=\"getIconClass(item.icon.code)\"\n                  [ngStyle]=\"getIconStyles(item.icon)\"\n                ></i>\n              </span>\n            }\n\n            <span class=\"metric-title\">\n              {{ isTitleStyle(item.title) ? item.title.text : item.title }}\n            </span>\n          </div>\n\n          <span\n            class=\"metric-value\"\n            [class.metric-value-highlighted]=\"item.highlighted && !isLoading\"\n            [ngStyle]=\"getValueStyles(item.value)\"\n          >\n            {{ isTitleStyle(item.value) ? item.value.text : item.value }}\n          </span>\n        </div>\n      }\n    </div>\n  </div>\n</pt-card>\n", styles: [":host{display:block}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.panel-title-container{display:flex;align-items:center;min-width:0;gap:12px;font-weight:800;line-height:1.2}.panel-title-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:38px;min-height:38px;padding:10px;color:#6734c9;background:#f0e7ff;border-radius:12px;font-size:1.05rem}.panel-title-text{overflow:hidden;color:inherit;text-overflow:ellipsis;white-space:nowrap}.panel-actions{display:flex;align-items:center;flex:0 0 auto;gap:4px}.panel-action-button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;cursor:pointer;border:1px solid transparent;border-radius:10px;color:#667085;background:transparent;transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}.panel-action-button:hover:not(:disabled){border-color:#e3d8fb;color:#6734c9;background:#f7f3ff}.panel-action-button:active:not(:disabled){transform:scale(.95)}.panel-action-button:disabled{cursor:wait;opacity:.65}.panel-action-button-loading{color:#6734c9}.panel-action-button:focus-visible{outline:2px solid #8b5cf6;outline-offset:2px}.panel-separator{width:100%;height:1px;margin:0 0 16px;background:#e7eaf0}.metric-list{display:flex;flex-direction:column;gap:12px}.metric-item{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:12px 14px;background:#fff;border:1px solid #edf0f5;border-radius:14px;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.metric-item:hover{border-color:#ddd2f8;box-shadow:0 5px 14px #4a209014}.metric-item-clickable{cursor:pointer}.metric-item-clickable:hover{transform:translateY(-1px)}.metric-left{display:flex;align-items:center;min-width:0;gap:12px}.metric-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.metric-icon-wrapper i{display:inline-flex!important;align-items:center;justify-content:center;min-width:40px;min-height:40px;box-sizing:border-box}.metric-title{overflow:hidden;color:#344054;font-size:1rem;font-weight:700;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.metric-value{flex:0 0 auto;padding:7px 11px;color:#1f2937;background:#f8f9fc;border:1px solid #e8ebf1;border-radius:10px;font-size:.95rem;font-weight:800;line-height:1;text-align:right;white-space:nowrap}.metric-value-highlighted{color:#15803d!important;background:#dcfce7!important;border-color:#86efac!important;animation:metric-value-flash 1.8s ease-out}@keyframes metric-value-flash{0%{color:#166534;background:#bbf7d0;border-color:#4ade80;transform:scale(1.08)}to{color:#15803d;background:#dcfce7;border-color:#86efac;transform:scale(1)}}@media(max-width:576px){.panel-header,.panel-title-container{gap:8px}.panel-title-icon{min-width:34px;min-height:34px;padding:8px}.panel-action-button{width:32px;height:32px}.metric-item{min-height:60px;padding:10px}.metric-title{font-size:.92rem}.metric-value{padding:6px 8px;font-size:.85rem}}.metric-content{position:relative;min-height:120px}.metric-loading-overlay{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;min-height:120px;border-radius:14px;color:#6734c9;background:#ffffffd1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);font-size:.9rem;font-weight:700}.metric-loading-spinner{font-size:1.5rem}.metric-list-loading{pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.42;filter:blur(.4px)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { 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: i5$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTMetricPanelComponent, isStandalone: false, selector: "pt-metric-panel", inputs: { panelData: "panelData", cardConfig: "cardConfig", showRefresh: "showRefresh", showMenu: "showMenu", menuItems: "menuItems", loading: "loading" }, outputs: { refresh: "refresh" }, viewQueries: [{ propertyName: "actionMenu", first: true, predicate: ["actionMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<pt-card [config]=\"cardConfig\">\n  <div class=\"panel-header\">\n    <div class=\"panel-title-container\" [ngStyle]=\"getTitleStyles()\">\n      @if (getTitleIcon()) {\n        <i\n          class=\"panel-title-icon\"\n          [ngClass]=\"getIconClass(getTitleIcon())\"\n          [ngStyle]=\"getTitleIconStyles()\"\n        ></i>\n      }\n\n      <span class=\"panel-title-text\">\n        {{ getTitleText() }}\n      </span>\n    </div>\n\n    @if (showRefresh || shouldShowMenu) {\n      <div class=\"panel-actions\">\n        @if (showRefresh) {\n          <button\n            type=\"button\"\n            class=\"panel-action-button\"\n            [class.panel-action-button-loading]=\"isLoading\"\n            [disabled]=\"isLoading\"\n            aria-label=\"Actualiser\"\n            title=\"Actualiser\"\n            (click)=\"onRefreshClick($event)\"\n          >\n            <i\n              class=\"pi\"\n              [ngClass]=\"isLoading ? 'pi-spin pi-spinner' : 'pi-refresh'\"\n            ></i>\n          </button>\n        }\n\n        @if (shouldShowMenu) {\n          <button\n            type=\"button\"\n            class=\"panel-action-button\"\n            [disabled]=\"isLoading\"\n            aria-label=\"Plus d\u2019actions\"\n            title=\"Plus d\u2019actions\"\n            (click)=\"toggleMenu($event)\"\n          >\n            <i class=\"pi pi-ellipsis-v\"></i>\n          </button>\n\n          <p-menu\n            #actionMenu\n            [model]=\"actionMenuItems\"\n            [popup]=\"true\"\n            appendTo=\"body\"\n          ></p-menu>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"panel-separator\"></div>\n\n  <div class=\"metric-content\">\n    @if (isLoading) {\n      <div\n        class=\"metric-loading-overlay\"\n        aria-live=\"polite\"\n        aria-label=\"Chargement des donn\u00E9es\"\n      >\n        <i class=\"pi pi-spinner pi-spin metric-loading-spinner\"></i>\n        <span>Chargement des donn\u00E9es...</span>\n      </div>\n    }\n\n    <div\n      class=\"metric-list\"\n      [class.metric-list-loading]=\"isLoading\"\n      [attr.aria-busy]=\"isLoading\"\n    >\n      @for (item of panelData.indicators; track $index) {\n        <div\n          class=\"metric-item\"\n          [class.metric-item-clickable]=\"!!item.url && !isLoading\"\n          [pTooltip]=\"item.tooltip || ''\"\n          tooltipPosition=\"top\"\n          [tooltipDisabled]=\"!item.tooltip || isLoading\"\n          (click)=\"!isLoading && handleClick(item.url)\"\n        >\n          <div class=\"metric-left\">\n            @if (item.icon) {\n              <span class=\"metric-icon-wrapper\">\n                <i\n                  [ngClass]=\"getIconClass(item.icon.code)\"\n                  [ngStyle]=\"getIconStyles(item.icon)\"\n                ></i>\n              </span>\n            }\n\n            <span class=\"metric-title\">\n              {{ isTitleStyle(item.title) ? item.title.text : item.title }}\n            </span>\n          </div>\n\n          <span\n            class=\"metric-value\"\n            [class.metric-value-highlighted]=\"item.highlighted && !isLoading\"\n            [ngStyle]=\"getValueStyles(item.value)\"\n          >\n            {{ isTitleStyle(item.value) ? item.value.text : item.value }}\n          </span>\n        </div>\n      }\n    </div>\n  </div>\n</pt-card>\n", styles: [":host{display:block}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.panel-title-container{display:flex;align-items:center;min-width:0;gap:12px;font-weight:800;line-height:1.2}.panel-title-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:38px;min-height:38px;padding:10px;color:#6734c9;background:#f0e7ff;border-radius:12px;font-size:1.05rem}.panel-title-text{overflow:hidden;color:inherit;text-overflow:ellipsis;white-space:nowrap}.panel-actions{display:flex;align-items:center;flex:0 0 auto;gap:4px}.panel-action-button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;cursor:pointer;border:1px solid transparent;border-radius:10px;color:#667085;background:transparent;transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}.panel-action-button:hover:not(:disabled){border-color:#e3d8fb;color:#6734c9;background:#f7f3ff}.panel-action-button:active:not(:disabled){transform:scale(.95)}.panel-action-button:disabled{cursor:wait;opacity:.65}.panel-action-button-loading{color:#6734c9}.panel-action-button:focus-visible{outline:2px solid #8b5cf6;outline-offset:2px}.panel-separator{width:100%;height:1px;margin:0 0 16px;background:#e7eaf0}.metric-list{display:flex;flex-direction:column;gap:12px}.metric-item{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:12px 14px;background:#fff;border:1px solid #edf0f5;border-radius:14px;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.metric-item:hover{border-color:#ddd2f8;box-shadow:0 5px 14px #4a209014}.metric-item-clickable{cursor:pointer}.metric-item-clickable:hover{transform:translateY(-1px)}.metric-left{display:flex;align-items:center;min-width:0;gap:12px}.metric-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.metric-icon-wrapper i{display:inline-flex!important;align-items:center;justify-content:center;min-width:40px;min-height:40px;box-sizing:border-box}.metric-title{overflow:hidden;color:#344054;font-size:1rem;font-weight:700;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.metric-value{flex:0 0 auto;padding:7px 11px;color:#1f2937;background:#f8f9fc;border:1px solid #e8ebf1;border-radius:10px;font-size:.95rem;font-weight:800;line-height:1;text-align:right;white-space:nowrap}.metric-value-highlighted{color:#15803d!important;background:#dcfce7!important;border-color:#86efac!important;animation:metric-value-flash 1.8s ease-out}@keyframes metric-value-flash{0%{color:#166534;background:#bbf7d0;border-color:#4ade80;transform:scale(1.08)}to{color:#15803d;background:#dcfce7;border-color:#86efac;transform:scale(1)}}@media(max-width:576px){.panel-header,.panel-title-container{gap:8px}.panel-title-icon{min-width:34px;min-height:34px;padding:8px}.panel-action-button{width:32px;height:32px}.metric-item{min-height:60px;padding:10px}.metric-title{font-size:.92rem}.metric-value{padding:6px 8px;font-size:.85rem}}.metric-content{position:relative;min-height:120px}.metric-loading-overlay{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;min-height:120px;border-radius:14px;color:#6734c9;background:#ffffffd1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);font-size:.9rem;font-weight:700}.metric-loading-spinner{font-size:1.5rem}.metric-list-loading{pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.42;filter:blur(.4px)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "directive", type: i13.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i5$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo", "motionOptions"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMetricPanelComponent, decorators: [{
             type: Component,
@@ -9646,6 +9771,773 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
+var PTNewsTickerDirection;
+(function (PTNewsTickerDirection) {
+    PTNewsTickerDirection["LEFT"] = "left";
+    PTNewsTickerDirection["RIGHT"] = "right";
+})(PTNewsTickerDirection || (PTNewsTickerDirection = {}));
+var PTNewsTickerType;
+(function (PTNewsTickerType) {
+    PTNewsTickerType["DEFAULT"] = "DEFAULT";
+    PTNewsTickerType["INFO"] = "INFO";
+    PTNewsTickerType["SUCCESS"] = "SUCCESS";
+    PTNewsTickerType["WARNING"] = "WARNING";
+    PTNewsTickerType["DANGER"] = "DANGER";
+    PTNewsTickerType["FLASH"] = "FLASH";
+})(PTNewsTickerType || (PTNewsTickerType = {}));
+var PTNewsTickerTrend;
+(function (PTNewsTickerTrend) {
+    PTNewsTickerTrend["UP"] = "UP";
+    PTNewsTickerTrend["DOWN"] = "DOWN";
+    PTNewsTickerTrend["STABLE"] = "STABLE";
+})(PTNewsTickerTrend || (PTNewsTickerTrend = {}));
+
+class PTNewsTickerComponent {
+    constructor(changeDetectorRef, zone) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.zone = zone;
+        this.news = [];
+        this.speed = 30;
+        this.defaultSpeed = 30;
+        this.speedStep = 10;
+        this.minSpeed = 5;
+        this.maxSpeed = 200;
+        this.direction = PTNewsTickerDirection.LEFT;
+        this.autoplay = true;
+        this.loop = true;
+        this.pauseOnHover = true;
+        this.showControls = false;
+        this.showPlayPauseControl = true;
+        this.showSpeedControls = true;
+        this.showResetSpeedControl = true;
+        this.showRemoveButton = true;
+        this.showSpeedValue = false;
+        this.showNewBadge = true;
+        this.newBadgeText = 'Nouveau';
+        this.newBadgeDuration = 20_000;
+        this.height = '3.25rem';
+        this.gap = '2rem';
+        this.itemGap = '0.5rem';
+        this.containerBackgroundColor = '#ffffff';
+        this.containerTextColor = '#0f172a';
+        this.borderColor = '#e2e8f0';
+        this.borderWidth = '1px';
+        this.borderRadius = '8px';
+        this.controlsBackgroundColor = '#f8fafc';
+        this.controlsBorderColor = '#e2e8f0';
+        this.emptyMessage = 'Aucune actualité disponible';
+        this.emptyIcon = 'pi pi-info-circle';
+        this.ariaLabel = 'Ruban d’actualités';
+        this.newsClick = new EventEmitter();
+        this.newsRemove = new EventEmitter();
+        this.newsChange = new EventEmitter();
+        this.playStateChange = new EventEmitter();
+        this.speedChange = new EventEmitter();
+        this.PTNewsTickerType = PTNewsTickerType;
+        this.PTNewsTickerTrend = PTNewsTickerTrend;
+        this.internalNews = [];
+        this.animationDurationSeconds = 20;
+        this.playing = true;
+        this.hovered = false;
+        this.pendingNews = null;
+        this.animationFrameId = null;
+        this.viewInitialized = false;
+        this.newBadgeTimeouts = new Map();
+        this.expiredNewBadgeIds = new Set();
+    }
+    ngOnChanges(changes) {
+        if (changes['news']) {
+            const normalizedNews = this.normalizeNews(changes['news'].currentValue ?? []);
+            this.queueOrApplyNews(normalizedNews);
+        }
+        if (changes['speed'] || changes['minSpeed'] || changes['maxSpeed']) {
+            this.speed = this.normalizeSpeed(this.speed);
+            this.scheduleAnimationRefresh();
+        }
+        if (changes['defaultSpeed']) {
+            this.defaultSpeed = this.normalizeSpeed(this.defaultSpeed);
+        }
+        if (changes['newBadgeDuration']) {
+            this.newBadgeDuration = this.normalizeNewBadgeDuration(this.newBadgeDuration);
+        }
+        if (changes['autoplay']) {
+            this.playing = this.autoplay;
+            this.emitPlayStateChange();
+        }
+        if (changes['gap'] ||
+            changes['height'] ||
+            changes['direction'] ||
+            changes['loop']) {
+            this.scheduleAnimationRefresh();
+        }
+    }
+    ngAfterViewInit() {
+        this.viewInitialized = true;
+        this.playing = this.autoplay;
+        this.initializeResizeObserver();
+        this.scheduleAnimationRefresh();
+        this.changeDetectorRef.detectChanges();
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+        }
+        this.clearNewBadgeTimeouts();
+        this.pendingNews = null;
+    }
+    addNews(item) {
+        if (!item || item.id === null || item.id === undefined) {
+            return;
+        }
+        const normalizedItem = this.normalizeItem(item);
+        const sourceNews = this.pendingNews ?? this.internalNews;
+        const existingIndex = sourceNews.findIndex((newsItem) => String(newsItem.id) === String(normalizedItem.id));
+        const updatedNews = existingIndex >= 0
+            ? sourceNews.map((newsItem, index) => index === existingIndex ? normalizedItem : newsItem)
+            : [...sourceNews, normalizedItem];
+        this.queueOrApplyNews(updatedNews);
+        this.emitNewsChange({
+            news: [...updatedNews],
+            addedItem: normalizedItem,
+        });
+    }
+    removeNews(itemOrId) {
+        const id = typeof itemOrId === 'object' ? itemOrId?.id : itemOrId;
+        const sourceNews = this.pendingNews ?? this.internalNews;
+        const removedItem = sourceNews.find((item) => String(item.id) === String(id));
+        if (!removedItem) {
+            return;
+        }
+        const updatedNews = sourceNews.filter((item) => String(item.id) !== String(id));
+        this.clearNewBadgeTimeout(removedItem);
+        this.queueOrApplyNews(updatedNews);
+        this.newsRemove.emit(removedItem);
+        this.emitNewsChange({
+            news: [...updatedNews],
+            removedItem,
+        });
+    }
+    clearNews() {
+        this.pendingNews = null;
+        this.internalNews = [];
+        this.clearNewBadgeTimeouts();
+        this.expiredNewBadgeIds.clear();
+        this.emitNewsChange({
+            news: [],
+        });
+        this.scheduleAnimationRefresh();
+    }
+    replaceNews(news) {
+        const normalizedNews = this.normalizeNews(news);
+        this.queueOrApplyNews(normalizedNews);
+        this.emitNewsChange({
+            news: [...normalizedNews],
+        });
+    }
+    play() {
+        if (this.playing) {
+            return;
+        }
+        this.playing = true;
+        this.emitPlayStateChange();
+    }
+    pause() {
+        if (!this.playing) {
+            return;
+        }
+        this.playing = false;
+        this.emitPlayStateChange();
+        this.applyPendingNewsImmediately();
+    }
+    togglePlayState() {
+        this.playing = !this.playing;
+        this.emitPlayStateChange();
+        if (!this.playing) {
+            this.applyPendingNewsImmediately();
+        }
+    }
+    increaseSpeed() {
+        this.setSpeed(this.speed + this.normalizeSpeedStep());
+    }
+    decreaseSpeed() {
+        this.setSpeed(this.speed - this.normalizeSpeedStep());
+    }
+    resetSpeed() {
+        this.setSpeed(this.defaultSpeed);
+    }
+    setSpeed(speed) {
+        const previousSpeed = this.speed;
+        const nextSpeed = this.normalizeSpeed(speed);
+        if (nextSpeed === previousSpeed) {
+            return;
+        }
+        this.speed = nextSpeed;
+        this.speedChange.emit({
+            previousSpeed,
+            speed: nextSpeed,
+        });
+        this.emitPlayStateChange();
+        this.scheduleAnimationRefresh();
+    }
+    onMouseEnter() {
+        if (!this.pauseOnHover) {
+            return;
+        }
+        this.hovered = true;
+    }
+    onMouseLeave() {
+        this.hovered = false;
+    }
+    onTrackAnimationIteration() {
+        this.applyPendingNews();
+    }
+    onTrackAnimationEnd() {
+        this.applyPendingNews();
+    }
+    onItemClick(event, item) {
+        if (item.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.newsClick.emit(item);
+        const link = item.link?.trim();
+        if (!link) {
+            return;
+        }
+        event.preventDefault();
+        const target = item.target ?? '_self';
+        if (target === '_blank') {
+            window.open(link, '_blank', 'noopener,noreferrer');
+            return;
+        }
+        window.location.assign(link);
+    }
+    onRemoveClick(event, item) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (item.disabled || item.removable === false) {
+            return;
+        }
+        this.removeNews(item);
+    }
+    hasItemLink(item) {
+        return !!item.link?.trim() && !item.disabled;
+    }
+    hasSegments(item) {
+        return Array.isArray(item.segments) && item.segments.length > 0;
+    }
+    isItemRemovable(item) {
+        return this.showRemoveButton && item.removable !== false && !item.disabled;
+    }
+    isItemFlash(item) {
+        return item.flash === true || item.type === PTNewsTickerType.FLASH;
+    }
+    shouldShowNewBadge(item) {
+        if (!this.showNewBadge || item.showNewBadge === false) {
+            return false;
+        }
+        const key = this.getItemKey(item);
+        if (this.expiredNewBadgeIds.has(key)) {
+            return false;
+        }
+        const createdAt = this.resolveCreatedAt(item);
+        if (createdAt === null) {
+            return true;
+        }
+        return Date.now() - createdAt < this.getNewBadgeDuration(item);
+    }
+    getNewBadgeText(item) {
+        return item.newBadgeText?.trim() || this.newBadgeText;
+    }
+    getSegmentSeparator(item) {
+        return item.segmentSeparator?.trim() || '•';
+    }
+    getSegmentIcon(segment) {
+        if (segment.icon?.trim()) {
+            return segment.icon.trim();
+        }
+        switch (segment.trend) {
+            case PTNewsTickerTrend.UP:
+                return 'pi pi-arrow-up';
+            case PTNewsTickerTrend.DOWN:
+                return 'pi pi-arrow-down';
+            case PTNewsTickerTrend.STABLE:
+                return 'pi pi-minus';
+            default:
+                return null;
+        }
+    }
+    getSegmentStyle(segment) {
+        const trendColor = this.getSegmentTrendColor(segment.trend);
+        return {
+            '--pt-news-segment-color': segment.textColor ?? trendColor ?? 'currentColor',
+            '--pt-news-segment-icon-color': segment.iconColor ?? segment.textColor ?? trendColor ?? 'currentColor',
+        };
+    }
+    getTrackStyle() {
+        return {
+            '--pt-news-ticker-duration': `${this.animationDurationSeconds}s`,
+            '--pt-news-ticker-gap': this.gap,
+            animationDirection: this.direction === PTNewsTickerDirection.RIGHT ? 'reverse' : 'normal',
+            animationPlayState: this.getAnimationPlayState(),
+        };
+    }
+    getContainerStyle() {
+        return {
+            '--pt-news-ticker-height': this.height,
+            '--pt-news-ticker-background': this.containerBackgroundColor,
+            '--pt-news-ticker-text-color': this.containerTextColor,
+            '--pt-news-ticker-border-color': this.borderColor,
+            '--pt-news-ticker-border-width': this.borderWidth,
+            '--pt-news-ticker-border-radius': this.borderRadius,
+            '--pt-news-ticker-controls-background': this.controlsBackgroundColor,
+            '--pt-news-ticker-controls-border-color': this.controlsBorderColor,
+        };
+    }
+    getItemStyle(item) {
+        const typeStyles = this.getTypeStyles(item.type);
+        const backgroundColor = item.backgroundColor ?? typeStyles.backgroundColor;
+        const textColor = item.textColor ?? typeStyles.textColor;
+        const iconColor = item.iconColor ?? textColor ?? this.containerTextColor;
+        const borderColor = item.borderColor ?? typeStyles.borderColor ?? 'transparent';
+        const flashBackgroundColor = item.flashBackgroundColor ??
+            item.backgroundColor ??
+            typeStyles.backgroundColor ??
+            '#dc2626';
+        const flashAlternateBackgroundColor = item.flashAlternateBackgroundColor ?? '#7f1d1d';
+        const flashTextColor = item.flashTextColor ?? item.textColor ?? '#ffffff';
+        return {
+            '--pt-news-item-background': backgroundColor ?? 'transparent',
+            '--pt-news-item-text-color': textColor ?? this.containerTextColor,
+            '--pt-news-item-icon-color': iconColor,
+            '--pt-news-item-border-color': borderColor,
+            '--pt-news-item-gap': this.itemGap,
+            '--pt-news-flash-background': flashBackgroundColor,
+            '--pt-news-flash-alternate-background': flashAlternateBackgroundColor,
+            '--pt-news-flash-text-color': flashTextColor,
+            '--pt-news-flash-duration': `${Math.max(100, Number(item.flashDuration ?? 700))}ms`,
+        };
+    }
+    getItemClasses(item) {
+        const classes = {
+            'pt-news-ticker__item--flash': this.isItemFlash(item),
+            'pt-news-ticker__item--disabled': item.disabled === true,
+            'pt-news-ticker__item--clickable': !item.disabled &&
+                (this.hasItemLink(item) || this.newsClick.observers.length > 0),
+            'pt-news-ticker__item--link': this.hasItemLink(item),
+        };
+        if (item.styleClass?.trim()) {
+            classes[item.styleClass.trim()] = true;
+        }
+        return classes;
+    }
+    getDuplicateItemClasses(item) {
+        const classes = {
+            'pt-news-ticker__item--flash': this.isItemFlash(item),
+            'pt-news-ticker__item--disabled': item.disabled === true,
+        };
+        if (item.styleClass?.trim()) {
+            classes[item.styleClass.trim()] = true;
+        }
+        return classes;
+    }
+    getTrackById(index, item) {
+        return `${item.id}-${index}`;
+    }
+    getDuplicateTrackById(index, item) {
+        return `duplicate-${item.id}-${index}`;
+    }
+    getItemRole(item) {
+        return this.hasItemLink(item) ? 'link' : null;
+    }
+    getItemTabIndex(item) {
+        if (item.disabled) {
+            return -1;
+        }
+        return this.hasItemLink(item) || this.newsClick.observers.length > 0
+            ? 0
+            : -1;
+    }
+    queueOrApplyNews(news) {
+        this.scheduleNewBadges(news);
+        if (this.shouldApplyNewsImmediately()) {
+            this.pendingNews = null;
+            this.internalNews = [...news];
+            this.scheduleAnimationRefresh();
+            return;
+        }
+        this.pendingNews = [...news];
+    }
+    shouldApplyNewsImmediately() {
+        return (!this.viewInitialized ||
+            !this.loop ||
+            !this.playing ||
+            this.internalNews.length === 0 ||
+            this.prefersReducedMotion());
+    }
+    applyPendingNews() {
+        if (!this.pendingNews) {
+            return;
+        }
+        const nextNews = [...this.pendingNews];
+        this.pendingNews = null;
+        this.internalNews = nextNews;
+        this.changeDetectorRef.detectChanges();
+        this.scheduleAnimationRefresh();
+    }
+    applyPendingNewsImmediately() {
+        if (!this.pendingNews) {
+            return;
+        }
+        this.applyPendingNews();
+    }
+    scheduleNewBadges(news) {
+        news.forEach((item) => {
+            this.scheduleNewBadgeExpiration(item);
+        });
+    }
+    scheduleNewBadgeExpiration(item) {
+        if (!this.showNewBadge || item.showNewBadge === false) {
+            return;
+        }
+        const key = this.getItemKey(item);
+        if (this.expiredNewBadgeIds.has(key) || this.newBadgeTimeouts.has(key)) {
+            return;
+        }
+        const duration = this.getNewBadgeDuration(item);
+        const createdAt = this.resolveCreatedAt(item) ?? Date.now();
+        const elapsed = Date.now() - createdAt;
+        const remainingDuration = Math.max(0, duration - elapsed);
+        if (remainingDuration === 0) {
+            this.expiredNewBadgeIds.add(key);
+            return;
+        }
+        const timeout = setTimeout(() => {
+            this.newBadgeTimeouts.delete(key);
+            this.expiredNewBadgeIds.add(key);
+            this.changeDetectorRef.markForCheck();
+        }, remainingDuration);
+        this.newBadgeTimeouts.set(key, timeout);
+    }
+    getNewBadgeDuration(item) {
+        return this.normalizeNewBadgeDuration(item.newBadgeDuration ?? this.newBadgeDuration);
+    }
+    normalizeNewBadgeDuration(duration) {
+        const numericDuration = Number(duration);
+        if (!Number.isFinite(numericDuration) || numericDuration <= 0) {
+            return 20_000;
+        }
+        return Math.max(1_000, numericDuration);
+    }
+    clearNewBadgeTimeout(item) {
+        const key = this.getItemKey(item);
+        const timeout = this.newBadgeTimeouts.get(key);
+        if (timeout) {
+            clearTimeout(timeout);
+            this.newBadgeTimeouts.delete(key);
+        }
+        this.expiredNewBadgeIds.delete(key);
+    }
+    clearNewBadgeTimeouts() {
+        this.newBadgeTimeouts.forEach((timeout) => {
+            clearTimeout(timeout);
+        });
+        this.newBadgeTimeouts.clear();
+    }
+    resolveCreatedAt(item) {
+        if (!item.createdAt) {
+            return null;
+        }
+        if (item.createdAt instanceof Date) {
+            const timestamp = item.createdAt.getTime();
+            return Number.isFinite(timestamp) ? timestamp : null;
+        }
+        const timestamp = new Date(item.createdAt).getTime();
+        return Number.isFinite(timestamp) ? timestamp : null;
+    }
+    getItemKey(item) {
+        return String(item.id);
+    }
+    getSegmentTrendColor(trend) {
+        switch (trend) {
+            case PTNewsTickerTrend.UP:
+                return '#15803d';
+            case PTNewsTickerTrend.DOWN:
+                return '#dc2626';
+            case PTNewsTickerTrend.STABLE:
+                return '#64748b';
+            default:
+                return null;
+        }
+    }
+    prefersReducedMotion() {
+        return (typeof window !== 'undefined' &&
+            typeof window.matchMedia === 'function' &&
+            window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+    }
+    getAnimationPlayState() {
+        if (!this.playing) {
+            return 'paused';
+        }
+        if (this.pauseOnHover && this.hovered) {
+            return 'paused';
+        }
+        return 'running';
+    }
+    initializeResizeObserver() {
+        if (typeof ResizeObserver === 'undefined' ||
+            !this.tickerGroup?.nativeElement) {
+            return;
+        }
+        this.zone.runOutsideAngular(() => {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.zone.run(() => {
+                    this.calculateAnimationDuration();
+                });
+            });
+            this.resizeObserver.observe(this.tickerGroup.nativeElement);
+            if (this.tickerViewport?.nativeElement) {
+                this.resizeObserver.observe(this.tickerViewport.nativeElement);
+            }
+        });
+    }
+    scheduleAnimationRefresh() {
+        if (!this.viewInitialized) {
+            return;
+        }
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
+        }
+        this.animationFrameId = requestAnimationFrame(() => {
+            this.animationFrameId = null;
+            this.calculateAnimationDuration();
+        });
+    }
+    calculateAnimationDuration() {
+        const groupElement = this.tickerGroup?.nativeElement;
+        if (!groupElement || this.internalNews.length === 0) {
+            this.animationDurationSeconds = 1;
+            return;
+        }
+        const contentWidth = Math.max(groupElement.scrollWidth, groupElement.getBoundingClientRect().width, 1);
+        const normalizedSpeed = this.normalizeSpeed(this.speed);
+        this.animationDurationSeconds = Math.max(1, contentWidth / normalizedSpeed);
+        this.changeDetectorRef.markForCheck();
+    }
+    normalizeNews(news) {
+        if (!Array.isArray(news)) {
+            return [];
+        }
+        return news
+            .filter((item) => item &&
+            item.id !== null &&
+            item.id !== undefined &&
+            String(item.text ?? '').trim().length > 0)
+            .map((item) => this.normalizeItem(item));
+    }
+    normalizeItem(item) {
+        return {
+            ...item,
+            text: String(item.text ?? '').trim(),
+            type: item.type ?? PTNewsTickerType.DEFAULT,
+            target: item.target ?? '_self',
+            removable: item.removable ?? true,
+            disabled: item.disabled ?? false,
+            flashDuration: Math.max(100, Number(item.flashDuration ?? 700)),
+            showNewBadge: item.showNewBadge ?? true,
+            newBadgeDuration: this.normalizeNewBadgeDuration(item.newBadgeDuration ?? this.newBadgeDuration),
+            newBadgeText: item.newBadgeText?.trim() || this.newBadgeText,
+            segmentSeparator: item.segmentSeparator?.trim() || '•',
+            segments: this.normalizeSegments(item.segments),
+        };
+    }
+    normalizeSegments(segments) {
+        if (!Array.isArray(segments)) {
+            return [];
+        }
+        return segments
+            .filter((segment) => !!segment &&
+            (String(segment.label ?? '').trim().length > 0 ||
+                String(segment.value ?? '').trim().length > 0))
+            .map((segment) => ({
+            ...segment,
+            label: String(segment.label ?? '').trim(),
+            value: segment.value === undefined || segment.value === null
+                ? undefined
+                : String(segment.value).trim(),
+        }));
+    }
+    normalizeSpeed(speed) {
+        const numericSpeed = Number(speed);
+        const safeMinSpeed = Math.max(1, Number(this.minSpeed) || 1);
+        const safeMaxSpeed = Math.max(safeMinSpeed, Number(this.maxSpeed) || safeMinSpeed);
+        if (!Number.isFinite(numericSpeed)) {
+            return safeMinSpeed;
+        }
+        return Math.min(safeMaxSpeed, Math.max(safeMinSpeed, numericSpeed));
+    }
+    normalizeSpeedStep() {
+        const step = Number(this.speedStep);
+        if (!Number.isFinite(step) || step <= 0) {
+            return 5;
+        }
+        return step;
+    }
+    emitNewsChange(event) {
+        this.newsChange.emit(event);
+    }
+    emitPlayStateChange() {
+        this.playStateChange.emit({
+            playing: this.playing,
+            speed: this.speed,
+        });
+    }
+    getTypeStyles(type) {
+        switch (type) {
+            case PTNewsTickerType.INFO:
+                return {
+                    backgroundColor: '#dbeafe',
+                    textColor: '#1e3a8a',
+                    borderColor: '#93c5fd',
+                };
+            case PTNewsTickerType.SUCCESS:
+                return {
+                    backgroundColor: '#dcfce7',
+                    textColor: '#14532d',
+                    borderColor: '#86efac',
+                };
+            case PTNewsTickerType.WARNING:
+                return {
+                    backgroundColor: '#fef3c7',
+                    textColor: '#78350f',
+                    borderColor: '#fcd34d',
+                };
+            case PTNewsTickerType.DANGER:
+                return {
+                    backgroundColor: '#fee2e2',
+                    textColor: '#7f1d1d',
+                    borderColor: '#fca5a5',
+                };
+            case PTNewsTickerType.FLASH:
+                return {
+                    backgroundColor: '#dc2626',
+                    textColor: '#ffffff',
+                    borderColor: '#991b1b',
+                };
+            default:
+                return {
+                    backgroundColor: '#f8fafc',
+                    textColor: '#0f172a',
+                    borderColor: '#e2e8f0',
+                };
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNewsTickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTNewsTickerComponent, isStandalone: false, selector: "pt-news-ticker", inputs: { news: "news", speed: "speed", defaultSpeed: "defaultSpeed", speedStep: "speedStep", minSpeed: "minSpeed", maxSpeed: "maxSpeed", direction: "direction", autoplay: "autoplay", loop: "loop", pauseOnHover: "pauseOnHover", showControls: "showControls", showPlayPauseControl: "showPlayPauseControl", showSpeedControls: "showSpeedControls", showResetSpeedControl: "showResetSpeedControl", showRemoveButton: "showRemoveButton", showSpeedValue: "showSpeedValue", showNewBadge: "showNewBadge", newBadgeText: "newBadgeText", newBadgeDuration: "newBadgeDuration", height: "height", gap: "gap", itemGap: "itemGap", containerBackgroundColor: "containerBackgroundColor", containerTextColor: "containerTextColor", borderColor: "borderColor", borderWidth: "borderWidth", borderRadius: "borderRadius", controlsBackgroundColor: "controlsBackgroundColor", controlsBorderColor: "controlsBorderColor", emptyMessage: "emptyMessage", emptyIcon: "emptyIcon", ariaLabel: "ariaLabel" }, outputs: { newsClick: "newsClick", newsRemove: "newsRemove", newsChange: "newsChange", playStateChange: "playStateChange", speedChange: "speedChange" }, viewQueries: [{ propertyName: "tickerViewport", first: true, predicate: ["tickerViewport"], descendants: true }, { propertyName: "tickerGroup", first: true, predicate: ["tickerGroup"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"pt-news-ticker\"\n  [ngStyle]=\"getContainerStyle()\"\n  [attr.aria-label]=\"ariaLabel\"\n  role=\"region\"\n>\n  @if (showControls) {\n    <div class=\"pt-news-ticker__controls\">\n      @if (showPlayPauseControl) {\n        <button\n          pButton\n          pRipple\n          type=\"button\"\n          class=\"p-button-rounded p-button-text p-button-sm\"\n          [icon]=\"playing ? 'pi pi-pause' : 'pi pi-play'\"\n          [pTooltip]=\"playing ? 'Mettre en pause' : 'Reprendre'\"\n          tooltipPosition=\"top\"\n          appendTo=\"body\"\n          [attr.aria-label]=\"\n            playing ? 'Mettre le ruban en pause' : 'Reprendre le ruban'\n          \"\n          (click)=\"togglePlayState()\"\n        ></button>\n      }\n\n      @if (showSpeedControls) {\n        <button\n          pButton\n          pRipple\n          type=\"button\"\n          icon=\"pi pi-minus\"\n          class=\"p-button-rounded p-button-text p-button-sm\"\n          pTooltip=\"Ralentir\"\n          tooltipPosition=\"top\"\n          appendTo=\"body\"\n          aria-label=\"Ralentir le ruban\"\n          [disabled]=\"speed <= minSpeed\"\n          (click)=\"decreaseSpeed()\"\n        ></button>\n\n        <button\n          pButton\n          pRipple\n          type=\"button\"\n          icon=\"pi pi-plus\"\n          class=\"p-button-rounded p-button-text p-button-sm\"\n          pTooltip=\"Acc\u00E9l\u00E9rer\"\n          tooltipPosition=\"top\"\n          appendTo=\"body\"\n          aria-label=\"Acc\u00E9l\u00E9rer le ruban\"\n          [disabled]=\"speed >= maxSpeed\"\n          (click)=\"increaseSpeed()\"\n        ></button>\n      }\n\n      @if (showResetSpeedControl) {\n        <button\n          pButton\n          pRipple\n          type=\"button\"\n          icon=\"pi pi-refresh\"\n          class=\"p-button-rounded p-button-text p-button-sm\"\n          pTooltip=\"R\u00E9initialiser la vitesse\"\n          tooltipPosition=\"top\"\n          appendTo=\"body\"\n          aria-label=\"R\u00E9initialiser la vitesse\"\n          [disabled]=\"speed === defaultSpeed\"\n          (click)=\"resetSpeed()\"\n        ></button>\n      }\n\n      @if (showSpeedValue) {\n        <span\n          class=\"pt-news-ticker__speed\"\n          [attr.aria-label]=\"'Vitesse ' + speed + ' pixels par seconde'\"\n        >\n          {{ speed }} px/s\n        </span>\n      }\n    </div>\n  }\n\n  <div\n    #tickerViewport\n    class=\"pt-news-ticker__viewport\"\n    (mouseenter)=\"onMouseEnter()\"\n    (mouseleave)=\"onMouseLeave()\"\n  >\n    @if (internalNews.length > 0) {\n      <div\n        class=\"pt-news-ticker__track\"\n        [class.pt-news-ticker__track--single]=\"!loop\"\n        [ngStyle]=\"getTrackStyle()\"\n        (animationiteration)=\"onTrackAnimationIteration()\"\n        (animationend)=\"onTrackAnimationEnd()\"\n      >\n        <div\n          #tickerGroup\n          class=\"pt-news-ticker__group\"\n          [attr.aria-hidden]=\"false\"\n        >\n          @for (item of internalNews; track getTrackById($index, item)) {\n            <article\n              class=\"pt-news-ticker__item\"\n              [ngClass]=\"getItemClasses(item)\"\n              [ngStyle]=\"getItemStyle(item)\"\n              [pTooltip]=\"item.tooltip || ''\"\n              tooltipPosition=\"top\"\n              appendTo=\"body\"\n              [attr.aria-disabled]=\"item.disabled\"\n              [attr.aria-label]=\"\n                hasItemLink(item) ? item.text + ', ouvrir le lien' : item.text\n              \"\n              [attr.role]=\"getItemRole(item)\"\n              [attr.tabindex]=\"getItemTabIndex(item)\"\n              (click)=\"onItemClick($event, item)\"\n              (keydown.enter)=\"onItemClick($event, item)\"\n              (keydown.space)=\"onItemClick($event, item)\"\n            >\n              @if (item.icon) {\n                <i\n                  class=\"pt-news-ticker__item-icon\"\n                  [ngClass]=\"item.icon\"\n                  aria-hidden=\"true\"\n                ></i>\n              }\n\n              <div class=\"pt-news-ticker__content\">\n                <span class=\"pt-news-ticker__item-title\">\n                  {{ item.text }}\n                </span>\n\n                @if (hasSegments(item)) {\n                  <span class=\"pt-news-ticker__segments\">\n                    @for (segment of item.segments; track $index) {\n                      @if ($index > 0) {\n                        <span\n                          class=\"pt-news-ticker__segment-separator\"\n                          aria-hidden=\"true\"\n                        >\n                          {{ getSegmentSeparator(item) }}\n                        </span>\n                      }\n\n                      <span\n                        class=\"pt-news-ticker__segment\"\n                        [ngStyle]=\"getSegmentStyle(segment)\"\n                        [pTooltip]=\"segment.tooltip || ''\"\n                        tooltipPosition=\"top\"\n                        appendTo=\"body\"\n                      >\n                        @if (segment.label) {\n                          <span class=\"pt-news-ticker__segment-label\">\n                            {{ segment.label }}\n                          </span>\n                        }\n\n                        @if (getSegmentIcon(segment); as segmentIcon) {\n                          <i\n                            class=\"pt-news-ticker__segment-icon\"\n                            [ngClass]=\"segmentIcon\"\n                            aria-hidden=\"true\"\n                          ></i>\n                        }\n\n                        @if (segment.value) {\n                          <span class=\"pt-news-ticker__segment-value\">\n                            {{ segment.value }}\n                          </span>\n                        }\n                      </span>\n                    }\n                  </span>\n                }\n              </div>\n\n              @if (shouldShowNewBadge(item)) {\n                <span class=\"pt-news-ticker__new-badge\">\n                  {{ getNewBadgeText(item) }}\n                </span>\n              }\n\n              @if (hasItemLink(item)) {\n                <i\n                  class=\"pt-news-ticker__link-icon pi pi-external-link\"\n                  aria-hidden=\"true\"\n                ></i>\n              }\n\n              @if (isItemRemovable(item)) {\n                <button\n                  pButton\n                  pRipple\n                  type=\"button\"\n                  icon=\"pi pi-times\"\n                  class=\"pt-news-ticker__remove-button p-button-rounded p-button-text p-button-sm\"\n                  pTooltip=\"Supprimer l\u2019actualit\u00E9\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\"\n                  [attr.aria-label]=\"'Supprimer : ' + item.text\"\n                  (click)=\"onRemoveClick($event, item)\"\n                ></button>\n              }\n            </article>\n          }\n        </div>\n\n        @if (loop) {\n          <div class=\"pt-news-ticker__group\" aria-hidden=\"true\">\n            @for (\n              item of internalNews;\n              track getDuplicateTrackById($index, item)\n            ) {\n              <article\n                class=\"pt-news-ticker__item\"\n                [ngClass]=\"getDuplicateItemClasses(item)\"\n                [ngStyle]=\"getItemStyle(item)\"\n              >\n                @if (item.icon) {\n                  <i\n                    class=\"pt-news-ticker__item-icon\"\n                    [ngClass]=\"item.icon\"\n                    aria-hidden=\"true\"\n                  ></i>\n                }\n\n                <div class=\"pt-news-ticker__content\">\n                  <span class=\"pt-news-ticker__item-title\">\n                    {{ item.text }}\n                  </span>\n\n                  @if (hasSegments(item)) {\n                    <span class=\"pt-news-ticker__segments\">\n                      @for (segment of item.segments; track $index) {\n                        @if ($index > 0) {\n                          <span\n                            class=\"pt-news-ticker__segment-separator\"\n                            aria-hidden=\"true\"\n                          >\n                            {{ getSegmentSeparator(item) }}\n                          </span>\n                        }\n\n                        <span\n                          class=\"pt-news-ticker__segment\"\n                          [ngStyle]=\"getSegmentStyle(segment)\"\n                        >\n                          @if (segment.label) {\n                            <span class=\"pt-news-ticker__segment-label\">\n                              {{ segment.label }}\n                            </span>\n                          }\n\n                          @if (getSegmentIcon(segment); as segmentIcon) {\n                            <i\n                              class=\"pt-news-ticker__segment-icon\"\n                              [ngClass]=\"segmentIcon\"\n                              aria-hidden=\"true\"\n                            ></i>\n                          }\n\n                          @if (segment.value) {\n                            <span class=\"pt-news-ticker__segment-value\">\n                              {{ segment.value }}\n                            </span>\n                          }\n                        </span>\n                      }\n                    </span>\n                  }\n                </div>\n\n                @if (shouldShowNewBadge(item)) {\n                  <span class=\"pt-news-ticker__new-badge\">\n                    {{ getNewBadgeText(item) }}\n                  </span>\n                }\n\n                @if (hasItemLink(item)) {\n                  <i\n                    class=\"pt-news-ticker__link-icon pi pi-external-link\"\n                    aria-hidden=\"true\"\n                  ></i>\n                }\n\n                @if (isItemRemovable(item)) {\n                  <span\n                    class=\"pt-news-ticker__duplicate-remove-placeholder\"\n                    aria-hidden=\"true\"\n                  >\n                    <i class=\"pi pi-times\"></i>\n                  </span>\n                }\n              </article>\n            }\n          </div>\n        }\n      </div>\n    } @else {\n      <div class=\"pt-news-ticker__empty\">\n        @if (emptyIcon) {\n          <i [ngClass]=\"emptyIcon\" aria-hidden=\"true\"></i>\n        }\n\n        <span>{{ emptyMessage }}</span>\n      </div>\n    }\n  </div>\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-news-ticker{display:flex;align-items:stretch;width:100%;min-width:0;max-width:100%;min-height:var(--pt-news-ticker-height, 3.25rem);overflow:hidden;border:var(--pt-news-ticker-border-width, 1px) solid var(--pt-news-ticker-border-color, #e2e8f0);border-radius:var(--pt-news-ticker-border-radius, 8px);background:var(--pt-news-ticker-background, #ffffff);color:var(--pt-news-ticker-text-color, #0f172a)}.pt-news-ticker__controls{position:relative;z-index:4;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;gap:.1rem;min-height:var(--pt-news-ticker-height, 3.25rem);padding:.25rem .4rem;border-right:1px solid var(--pt-news-ticker-controls-border-color, #e2e8f0);background:var(--pt-news-ticker-controls-background, #f8fafc)}.pt-news-ticker__controls ::ng-deep .p-button.p-button-rounded.p-button-text{width:1.9rem;min-width:1.9rem;height:1.9rem;padding:0}.pt-news-ticker__controls ::ng-deep .p-button .p-button-icon{font-size:.78rem}.pt-news-ticker__speed{min-width:3.5rem;padding:0 .35rem;color:#475569;font-size:.7rem;font-weight:700;text-align:center;white-space:nowrap}.pt-news-ticker__viewport{position:relative;display:flex;align-items:center;flex:1 1 auto;width:100%;min-width:0;min-height:var(--pt-news-ticker-height, 3.25rem);overflow:hidden}.pt-news-ticker__viewport:before,.pt-news-ticker__viewport:after{position:absolute;z-index:3;top:0;bottom:0;width:2.5rem;content:\"\";pointer-events:none}.pt-news-ticker__viewport:before{left:0;background:linear-gradient(to right,var(--pt-news-ticker-background, #ffffff),transparent)}.pt-news-ticker__viewport:after{right:0;background:linear-gradient(to left,var(--pt-news-ticker-background, #ffffff),transparent)}.pt-news-ticker__track{display:flex;align-items:center;flex:0 0 auto;width:max-content;min-width:max-content;animation-name:pt-news-ticker-scroll;animation-duration:var(--pt-news-ticker-duration, 20s);animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform}.pt-news-ticker__track--single{animation-iteration-count:1;animation-fill-mode:forwards}.pt-news-ticker__group{display:inline-flex;align-items:center;flex:0 0 auto;gap:var(--pt-news-ticker-gap, 2rem);min-width:max-content;padding-right:var(--pt-news-ticker-gap, 2rem)}.pt-news-ticker__item{display:inline-flex;align-items:center;flex:0 0 auto;gap:var(--pt-news-item-gap, .5rem);min-height:2.25rem;max-width:48rem;padding:.35rem .65rem;overflow:hidden;border:1px solid var(--pt-news-item-border-color, transparent);border-radius:999px;outline:none;background:var(--pt-news-item-background, transparent);color:var( --pt-news-item-text-color, var(--pt-news-ticker-text-color, #0f172a) );line-height:1.25;white-space:nowrap;transition:box-shadow .15s ease,opacity .15s ease,transform .15s ease}.pt-news-ticker__item--clickable,.pt-news-ticker__item--link{cursor:pointer}.pt-news-ticker__item--clickable:hover,.pt-news-ticker__item--link:hover{box-shadow:0 3px 10px #0f172a1f;transform:translateY(-1px)}.pt-news-ticker__item:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--primary-color, #3b82f6)}.pt-news-ticker__item--disabled{cursor:not-allowed;opacity:.5}.pt-news-ticker__item-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--pt-news-item-icon-color, currentColor);font-size:.95rem}.pt-news-ticker__content{display:inline-flex;align-items:center;flex:0 0 auto;gap:.55rem;min-width:0}.pt-news-ticker__item-title{display:inline-block;flex:0 0 auto;overflow:hidden;font-size:.85rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.pt-news-ticker__item-text{display:block;flex:1 1 auto;min-width:0;overflow:hidden;font-size:.85rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.pt-news-ticker__segments{display:inline-flex;align-items:center;flex:0 0 auto;gap:.45rem;white-space:nowrap}.pt-news-ticker__segment{display:inline-flex;align-items:center;flex:0 0 auto;gap:.22rem;color:var(--pt-news-segment-color, currentColor);font-size:.82rem;font-weight:700;white-space:nowrap}.pt-news-ticker__segment-label{color:inherit;font-weight:700}.pt-news-ticker__segment-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--pt-news-segment-icon-color, currentColor);font-size:.68rem;font-weight:700}.pt-news-ticker__segment-value{color:inherit;font-variant-numeric:tabular-nums;font-weight:800}.pt-news-ticker__segment-separator{color:#94a3b8;font-size:.75rem;font-weight:700}.pt-news-ticker__new-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:1.15rem;padding:.12rem .42rem;border:1px solid #93c5fd;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:.62rem;font-weight:800;line-height:1;letter-spacing:.025em;text-transform:uppercase;white-space:nowrap;animation:pt-news-ticker-new-badge-pulse 1.5s ease-in-out infinite}.pt-news-ticker__item--flash .pt-news-ticker__new-badge{border-color:#ffffffb3;background:#fff;color:#b91c1c}.pt-news-ticker__link-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:currentColor;font-size:.72rem;opacity:.75}.pt-news-ticker__item--link:hover .pt-news-ticker__link-icon{opacity:1}.pt-news-ticker__remove-button{flex:0 0 auto}.pt-news-ticker__item ::ng-deep .pt-news-ticker__remove-button.p-button{width:1.45rem;min-width:1.45rem;height:1.45rem;padding:0;color:currentColor}.pt-news-ticker__item ::ng-deep .pt-news-ticker__remove-button.p-button .p-button-icon{font-size:.65rem}.pt-news-ticker__item ::ng-deep .pt-news-ticker__remove-button.p-button:not(:disabled):hover{background:#0f172a1a}.pt-news-ticker__duplicate-remove-placeholder{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:1.45rem;min-width:1.45rem;height:1.45rem;opacity:0;pointer-events:none}.pt-news-ticker__duplicate-remove-placeholder .pi{font-size:.65rem}.pt-news-ticker__item--flash{border-color:var(--pt-news-item-border-color, #991b1b);color:var(--pt-news-flash-text-color, #ffffff);animation-name:pt-news-ticker-flash;animation-duration:var(--pt-news-flash-duration, .7s);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}.pt-news-ticker__item--flash .pt-news-ticker__item-icon{color:var(--pt-news-item-icon-color, #ffffff)}.pt-news-ticker__empty{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:var(--pt-news-ticker-height, 3.25rem);padding:.75rem 1rem;color:#64748b;font-size:.85rem;font-weight:500;text-align:center}.pt-news-ticker__empty .pi{font-size:1rem}@keyframes pt-news-ticker-scroll{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes pt-news-ticker-flash{0%{background-color:var(--pt-news-flash-background, #dc2626)}to{background-color:var(--pt-news-flash-alternate-background, #7f1d1d)}}@keyframes pt-news-ticker-new-badge-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.75;transform:scale(.96)}}@media(max-width:768px){.pt-news-ticker{min-height:3rem}.pt-news-ticker__controls{padding-right:.25rem;padding-left:.25rem}.pt-news-ticker__speed{display:none}.pt-news-ticker__item{max-width:34rem}.pt-news-ticker__viewport:before,.pt-news-ticker__viewport:after{width:1.25rem}}@media(max-width:480px){.pt-news-ticker__item{max-width:24rem}.pt-news-ticker__item-title,.pt-news-ticker__item-text{font-size:.78rem}.pt-news-ticker__segment{font-size:.75rem}.pt-news-ticker__new-badge{font-size:.56rem}}@media(prefers-reduced-motion:reduce){.pt-news-ticker__track{animation:none!important;transform:none!important}.pt-news-ticker__item--flash{animation:none!important;background-color:var(--pt-news-flash-background, #dc2626)!important}.pt-news-ticker__new-badge{animation:none!important}.pt-news-ticker__viewport{overflow-x:auto}.pt-news-ticker__viewport:before,.pt-news-ticker__viewport:after{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "directive", type: i13.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNewsTickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-news-ticker', standalone: false, template: "<div\n  class=\"pt-news-ticker\"\n  [ngStyle]=\"getContainerStyle()\"\n  [attr.aria-label]=\"ariaLabel\"\n  role=\"region\"\n>\n  @if (showControls) {\n    <div class=\"pt-news-ticker__controls\">\n      @if (showPlayPauseControl) {\n        <button\n          pButton\n          pRipple\n          type=\"button\"\n          class=\"p-button-rounded p-button-text p-button-sm\"\n          [icon]=\"playing ? 'pi pi-pause' : 'pi pi-play'\"\n          [pTooltip]=\"playing ? 'Mettre en pause' : 'Reprendre'\"\n          tooltipPosition=\"top\"\n          appendTo=\"body\"\n          [attr.aria-label]=\"\n            playing ? 'Mettre le ruban en pause' : 'Reprendre le ruban'\n          \"\n          (click)=\"togglePlayState()\"\n        ></button>\n      }\n\n      @if (showSpeedControls) {\n        <button\n          pButton\n          pRipple\n          type=\"button\"\n          icon=\"pi pi-minus\"\n          class=\"p-button-rounded p-button-text p-button-sm\"\n          pTooltip=\"Ralentir\"\n          tooltipPosition=\"top\"\n          appendTo=\"body\"\n          aria-label=\"Ralentir le ruban\"\n          [disabled]=\"speed <= minSpeed\"\n          (click)=\"decreaseSpeed()\"\n        ></button>\n\n        <button\n          pButton\n          pRipple\n          type=\"button\"\n          icon=\"pi pi-plus\"\n          class=\"p-button-rounded p-button-text p-button-sm\"\n          pTooltip=\"Acc\u00E9l\u00E9rer\"\n          tooltipPosition=\"top\"\n          appendTo=\"body\"\n          aria-label=\"Acc\u00E9l\u00E9rer le ruban\"\n          [disabled]=\"speed >= maxSpeed\"\n          (click)=\"increaseSpeed()\"\n        ></button>\n      }\n\n      @if (showResetSpeedControl) {\n        <button\n          pButton\n          pRipple\n          type=\"button\"\n          icon=\"pi pi-refresh\"\n          class=\"p-button-rounded p-button-text p-button-sm\"\n          pTooltip=\"R\u00E9initialiser la vitesse\"\n          tooltipPosition=\"top\"\n          appendTo=\"body\"\n          aria-label=\"R\u00E9initialiser la vitesse\"\n          [disabled]=\"speed === defaultSpeed\"\n          (click)=\"resetSpeed()\"\n        ></button>\n      }\n\n      @if (showSpeedValue) {\n        <span\n          class=\"pt-news-ticker__speed\"\n          [attr.aria-label]=\"'Vitesse ' + speed + ' pixels par seconde'\"\n        >\n          {{ speed }} px/s\n        </span>\n      }\n    </div>\n  }\n\n  <div\n    #tickerViewport\n    class=\"pt-news-ticker__viewport\"\n    (mouseenter)=\"onMouseEnter()\"\n    (mouseleave)=\"onMouseLeave()\"\n  >\n    @if (internalNews.length > 0) {\n      <div\n        class=\"pt-news-ticker__track\"\n        [class.pt-news-ticker__track--single]=\"!loop\"\n        [ngStyle]=\"getTrackStyle()\"\n        (animationiteration)=\"onTrackAnimationIteration()\"\n        (animationend)=\"onTrackAnimationEnd()\"\n      >\n        <div\n          #tickerGroup\n          class=\"pt-news-ticker__group\"\n          [attr.aria-hidden]=\"false\"\n        >\n          @for (item of internalNews; track getTrackById($index, item)) {\n            <article\n              class=\"pt-news-ticker__item\"\n              [ngClass]=\"getItemClasses(item)\"\n              [ngStyle]=\"getItemStyle(item)\"\n              [pTooltip]=\"item.tooltip || ''\"\n              tooltipPosition=\"top\"\n              appendTo=\"body\"\n              [attr.aria-disabled]=\"item.disabled\"\n              [attr.aria-label]=\"\n                hasItemLink(item) ? item.text + ', ouvrir le lien' : item.text\n              \"\n              [attr.role]=\"getItemRole(item)\"\n              [attr.tabindex]=\"getItemTabIndex(item)\"\n              (click)=\"onItemClick($event, item)\"\n              (keydown.enter)=\"onItemClick($event, item)\"\n              (keydown.space)=\"onItemClick($event, item)\"\n            >\n              @if (item.icon) {\n                <i\n                  class=\"pt-news-ticker__item-icon\"\n                  [ngClass]=\"item.icon\"\n                  aria-hidden=\"true\"\n                ></i>\n              }\n\n              <div class=\"pt-news-ticker__content\">\n                <span class=\"pt-news-ticker__item-title\">\n                  {{ item.text }}\n                </span>\n\n                @if (hasSegments(item)) {\n                  <span class=\"pt-news-ticker__segments\">\n                    @for (segment of item.segments; track $index) {\n                      @if ($index > 0) {\n                        <span\n                          class=\"pt-news-ticker__segment-separator\"\n                          aria-hidden=\"true\"\n                        >\n                          {{ getSegmentSeparator(item) }}\n                        </span>\n                      }\n\n                      <span\n                        class=\"pt-news-ticker__segment\"\n                        [ngStyle]=\"getSegmentStyle(segment)\"\n                        [pTooltip]=\"segment.tooltip || ''\"\n                        tooltipPosition=\"top\"\n                        appendTo=\"body\"\n                      >\n                        @if (segment.label) {\n                          <span class=\"pt-news-ticker__segment-label\">\n                            {{ segment.label }}\n                          </span>\n                        }\n\n                        @if (getSegmentIcon(segment); as segmentIcon) {\n                          <i\n                            class=\"pt-news-ticker__segment-icon\"\n                            [ngClass]=\"segmentIcon\"\n                            aria-hidden=\"true\"\n                          ></i>\n                        }\n\n                        @if (segment.value) {\n                          <span class=\"pt-news-ticker__segment-value\">\n                            {{ segment.value }}\n                          </span>\n                        }\n                      </span>\n                    }\n                  </span>\n                }\n              </div>\n\n              @if (shouldShowNewBadge(item)) {\n                <span class=\"pt-news-ticker__new-badge\">\n                  {{ getNewBadgeText(item) }}\n                </span>\n              }\n\n              @if (hasItemLink(item)) {\n                <i\n                  class=\"pt-news-ticker__link-icon pi pi-external-link\"\n                  aria-hidden=\"true\"\n                ></i>\n              }\n\n              @if (isItemRemovable(item)) {\n                <button\n                  pButton\n                  pRipple\n                  type=\"button\"\n                  icon=\"pi pi-times\"\n                  class=\"pt-news-ticker__remove-button p-button-rounded p-button-text p-button-sm\"\n                  pTooltip=\"Supprimer l\u2019actualit\u00E9\"\n                  tooltipPosition=\"top\"\n                  appendTo=\"body\"\n                  [attr.aria-label]=\"'Supprimer : ' + item.text\"\n                  (click)=\"onRemoveClick($event, item)\"\n                ></button>\n              }\n            </article>\n          }\n        </div>\n\n        @if (loop) {\n          <div class=\"pt-news-ticker__group\" aria-hidden=\"true\">\n            @for (\n              item of internalNews;\n              track getDuplicateTrackById($index, item)\n            ) {\n              <article\n                class=\"pt-news-ticker__item\"\n                [ngClass]=\"getDuplicateItemClasses(item)\"\n                [ngStyle]=\"getItemStyle(item)\"\n              >\n                @if (item.icon) {\n                  <i\n                    class=\"pt-news-ticker__item-icon\"\n                    [ngClass]=\"item.icon\"\n                    aria-hidden=\"true\"\n                  ></i>\n                }\n\n                <div class=\"pt-news-ticker__content\">\n                  <span class=\"pt-news-ticker__item-title\">\n                    {{ item.text }}\n                  </span>\n\n                  @if (hasSegments(item)) {\n                    <span class=\"pt-news-ticker__segments\">\n                      @for (segment of item.segments; track $index) {\n                        @if ($index > 0) {\n                          <span\n                            class=\"pt-news-ticker__segment-separator\"\n                            aria-hidden=\"true\"\n                          >\n                            {{ getSegmentSeparator(item) }}\n                          </span>\n                        }\n\n                        <span\n                          class=\"pt-news-ticker__segment\"\n                          [ngStyle]=\"getSegmentStyle(segment)\"\n                        >\n                          @if (segment.label) {\n                            <span class=\"pt-news-ticker__segment-label\">\n                              {{ segment.label }}\n                            </span>\n                          }\n\n                          @if (getSegmentIcon(segment); as segmentIcon) {\n                            <i\n                              class=\"pt-news-ticker__segment-icon\"\n                              [ngClass]=\"segmentIcon\"\n                              aria-hidden=\"true\"\n                            ></i>\n                          }\n\n                          @if (segment.value) {\n                            <span class=\"pt-news-ticker__segment-value\">\n                              {{ segment.value }}\n                            </span>\n                          }\n                        </span>\n                      }\n                    </span>\n                  }\n                </div>\n\n                @if (shouldShowNewBadge(item)) {\n                  <span class=\"pt-news-ticker__new-badge\">\n                    {{ getNewBadgeText(item) }}\n                  </span>\n                }\n\n                @if (hasItemLink(item)) {\n                  <i\n                    class=\"pt-news-ticker__link-icon pi pi-external-link\"\n                    aria-hidden=\"true\"\n                  ></i>\n                }\n\n                @if (isItemRemovable(item)) {\n                  <span\n                    class=\"pt-news-ticker__duplicate-remove-placeholder\"\n                    aria-hidden=\"true\"\n                  >\n                    <i class=\"pi pi-times\"></i>\n                  </span>\n                }\n              </article>\n            }\n          </div>\n        }\n      </div>\n    } @else {\n      <div class=\"pt-news-ticker__empty\">\n        @if (emptyIcon) {\n          <i [ngClass]=\"emptyIcon\" aria-hidden=\"true\"></i>\n        }\n\n        <span>{{ emptyMessage }}</span>\n      </div>\n    }\n  </div>\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-news-ticker{display:flex;align-items:stretch;width:100%;min-width:0;max-width:100%;min-height:var(--pt-news-ticker-height, 3.25rem);overflow:hidden;border:var(--pt-news-ticker-border-width, 1px) solid var(--pt-news-ticker-border-color, #e2e8f0);border-radius:var(--pt-news-ticker-border-radius, 8px);background:var(--pt-news-ticker-background, #ffffff);color:var(--pt-news-ticker-text-color, #0f172a)}.pt-news-ticker__controls{position:relative;z-index:4;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;gap:.1rem;min-height:var(--pt-news-ticker-height, 3.25rem);padding:.25rem .4rem;border-right:1px solid var(--pt-news-ticker-controls-border-color, #e2e8f0);background:var(--pt-news-ticker-controls-background, #f8fafc)}.pt-news-ticker__controls ::ng-deep .p-button.p-button-rounded.p-button-text{width:1.9rem;min-width:1.9rem;height:1.9rem;padding:0}.pt-news-ticker__controls ::ng-deep .p-button .p-button-icon{font-size:.78rem}.pt-news-ticker__speed{min-width:3.5rem;padding:0 .35rem;color:#475569;font-size:.7rem;font-weight:700;text-align:center;white-space:nowrap}.pt-news-ticker__viewport{position:relative;display:flex;align-items:center;flex:1 1 auto;width:100%;min-width:0;min-height:var(--pt-news-ticker-height, 3.25rem);overflow:hidden}.pt-news-ticker__viewport:before,.pt-news-ticker__viewport:after{position:absolute;z-index:3;top:0;bottom:0;width:2.5rem;content:\"\";pointer-events:none}.pt-news-ticker__viewport:before{left:0;background:linear-gradient(to right,var(--pt-news-ticker-background, #ffffff),transparent)}.pt-news-ticker__viewport:after{right:0;background:linear-gradient(to left,var(--pt-news-ticker-background, #ffffff),transparent)}.pt-news-ticker__track{display:flex;align-items:center;flex:0 0 auto;width:max-content;min-width:max-content;animation-name:pt-news-ticker-scroll;animation-duration:var(--pt-news-ticker-duration, 20s);animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform}.pt-news-ticker__track--single{animation-iteration-count:1;animation-fill-mode:forwards}.pt-news-ticker__group{display:inline-flex;align-items:center;flex:0 0 auto;gap:var(--pt-news-ticker-gap, 2rem);min-width:max-content;padding-right:var(--pt-news-ticker-gap, 2rem)}.pt-news-ticker__item{display:inline-flex;align-items:center;flex:0 0 auto;gap:var(--pt-news-item-gap, .5rem);min-height:2.25rem;max-width:48rem;padding:.35rem .65rem;overflow:hidden;border:1px solid var(--pt-news-item-border-color, transparent);border-radius:999px;outline:none;background:var(--pt-news-item-background, transparent);color:var( --pt-news-item-text-color, var(--pt-news-ticker-text-color, #0f172a) );line-height:1.25;white-space:nowrap;transition:box-shadow .15s ease,opacity .15s ease,transform .15s ease}.pt-news-ticker__item--clickable,.pt-news-ticker__item--link{cursor:pointer}.pt-news-ticker__item--clickable:hover,.pt-news-ticker__item--link:hover{box-shadow:0 3px 10px #0f172a1f;transform:translateY(-1px)}.pt-news-ticker__item:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--primary-color, #3b82f6)}.pt-news-ticker__item--disabled{cursor:not-allowed;opacity:.5}.pt-news-ticker__item-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--pt-news-item-icon-color, currentColor);font-size:.95rem}.pt-news-ticker__content{display:inline-flex;align-items:center;flex:0 0 auto;gap:.55rem;min-width:0}.pt-news-ticker__item-title{display:inline-block;flex:0 0 auto;overflow:hidden;font-size:.85rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.pt-news-ticker__item-text{display:block;flex:1 1 auto;min-width:0;overflow:hidden;font-size:.85rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.pt-news-ticker__segments{display:inline-flex;align-items:center;flex:0 0 auto;gap:.45rem;white-space:nowrap}.pt-news-ticker__segment{display:inline-flex;align-items:center;flex:0 0 auto;gap:.22rem;color:var(--pt-news-segment-color, currentColor);font-size:.82rem;font-weight:700;white-space:nowrap}.pt-news-ticker__segment-label{color:inherit;font-weight:700}.pt-news-ticker__segment-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--pt-news-segment-icon-color, currentColor);font-size:.68rem;font-weight:700}.pt-news-ticker__segment-value{color:inherit;font-variant-numeric:tabular-nums;font-weight:800}.pt-news-ticker__segment-separator{color:#94a3b8;font-size:.75rem;font-weight:700}.pt-news-ticker__new-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:1.15rem;padding:.12rem .42rem;border:1px solid #93c5fd;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:.62rem;font-weight:800;line-height:1;letter-spacing:.025em;text-transform:uppercase;white-space:nowrap;animation:pt-news-ticker-new-badge-pulse 1.5s ease-in-out infinite}.pt-news-ticker__item--flash .pt-news-ticker__new-badge{border-color:#ffffffb3;background:#fff;color:#b91c1c}.pt-news-ticker__link-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:currentColor;font-size:.72rem;opacity:.75}.pt-news-ticker__item--link:hover .pt-news-ticker__link-icon{opacity:1}.pt-news-ticker__remove-button{flex:0 0 auto}.pt-news-ticker__item ::ng-deep .pt-news-ticker__remove-button.p-button{width:1.45rem;min-width:1.45rem;height:1.45rem;padding:0;color:currentColor}.pt-news-ticker__item ::ng-deep .pt-news-ticker__remove-button.p-button .p-button-icon{font-size:.65rem}.pt-news-ticker__item ::ng-deep .pt-news-ticker__remove-button.p-button:not(:disabled):hover{background:#0f172a1a}.pt-news-ticker__duplicate-remove-placeholder{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:1.45rem;min-width:1.45rem;height:1.45rem;opacity:0;pointer-events:none}.pt-news-ticker__duplicate-remove-placeholder .pi{font-size:.65rem}.pt-news-ticker__item--flash{border-color:var(--pt-news-item-border-color, #991b1b);color:var(--pt-news-flash-text-color, #ffffff);animation-name:pt-news-ticker-flash;animation-duration:var(--pt-news-flash-duration, .7s);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}.pt-news-ticker__item--flash .pt-news-ticker__item-icon{color:var(--pt-news-item-icon-color, #ffffff)}.pt-news-ticker__empty{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:var(--pt-news-ticker-height, 3.25rem);padding:.75rem 1rem;color:#64748b;font-size:.85rem;font-weight:500;text-align:center}.pt-news-ticker__empty .pi{font-size:1rem}@keyframes pt-news-ticker-scroll{0%{transform:translateZ(0)}to{transform:translate3d(-50%,0,0)}}@keyframes pt-news-ticker-flash{0%{background-color:var(--pt-news-flash-background, #dc2626)}to{background-color:var(--pt-news-flash-alternate-background, #7f1d1d)}}@keyframes pt-news-ticker-new-badge-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.75;transform:scale(.96)}}@media(max-width:768px){.pt-news-ticker{min-height:3rem}.pt-news-ticker__controls{padding-right:.25rem;padding-left:.25rem}.pt-news-ticker__speed{display:none}.pt-news-ticker__item{max-width:34rem}.pt-news-ticker__viewport:before,.pt-news-ticker__viewport:after{width:1.25rem}}@media(max-width:480px){.pt-news-ticker__item{max-width:24rem}.pt-news-ticker__item-title,.pt-news-ticker__item-text{font-size:.78rem}.pt-news-ticker__segment{font-size:.75rem}.pt-news-ticker__new-badge{font-size:.56rem}}@media(prefers-reduced-motion:reduce){.pt-news-ticker__track{animation:none!important;transform:none!important}.pt-news-ticker__item--flash{animation:none!important;background-color:var(--pt-news-flash-background, #dc2626)!important}.pt-news-ticker__new-badge{animation:none!important}.pt-news-ticker__viewport{overflow-x:auto}.pt-news-ticker__viewport:before,.pt-news-ticker__viewport:after{display:none}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { news: [{
+                type: Input
+            }], speed: [{
+                type: Input
+            }], defaultSpeed: [{
+                type: Input
+            }], speedStep: [{
+                type: Input
+            }], minSpeed: [{
+                type: Input
+            }], maxSpeed: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], autoplay: [{
+                type: Input
+            }], loop: [{
+                type: Input
+            }], pauseOnHover: [{
+                type: Input
+            }], showControls: [{
+                type: Input
+            }], showPlayPauseControl: [{
+                type: Input
+            }], showSpeedControls: [{
+                type: Input
+            }], showResetSpeedControl: [{
+                type: Input
+            }], showRemoveButton: [{
+                type: Input
+            }], showSpeedValue: [{
+                type: Input
+            }], showNewBadge: [{
+                type: Input
+            }], newBadgeText: [{
+                type: Input
+            }], newBadgeDuration: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], gap: [{
+                type: Input
+            }], itemGap: [{
+                type: Input
+            }], containerBackgroundColor: [{
+                type: Input
+            }], containerTextColor: [{
+                type: Input
+            }], borderColor: [{
+                type: Input
+            }], borderWidth: [{
+                type: Input
+            }], borderRadius: [{
+                type: Input
+            }], controlsBackgroundColor: [{
+                type: Input
+            }], controlsBorderColor: [{
+                type: Input
+            }], emptyMessage: [{
+                type: Input
+            }], emptyIcon: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], newsClick: [{
+                type: Output
+            }], newsRemove: [{
+                type: Output
+            }], newsChange: [{
+                type: Output
+            }], playStateChange: [{
+                type: Output
+            }], speedChange: [{
+                type: Output
+            }], tickerViewport: [{
+                type: ViewChild,
+                args: ['tickerViewport', { static: false }]
+            }], tickerGroup: [{
+                type: ViewChild,
+                args: ['tickerGroup', { static: false }]
+            }] } });
+
+class PTNewsTickerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNewsTickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: PTNewsTickerModule, declarations: [PTNewsTickerComponent], imports: [CommonModule, ButtonModule, TooltipModule], exports: [PTNewsTickerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNewsTickerModule, imports: [CommonModule, ButtonModule, TooltipModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNewsTickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTNewsTickerComponent],
+                    imports: [CommonModule, ButtonModule, TooltipModule],
+                    exports: [PTNewsTickerComponent],
+                }]
+        }] });
+
 const applyChangePasswordCardDefaults = (config) => {
     config.title = {
         text: 'Changer le mot de passe',
@@ -9876,7 +10768,7 @@ class PTChangePasswordCardComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTChangePasswordCardComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTChangePasswordCardComponent, isStandalone: true, selector: "pt-change-password-card", inputs: { changePasswordPageConfig: "changePasswordPageConfig", changePasswordErrorMessage: "changePasswordErrorMessage" }, outputs: { passwordValueChange: "passwordValueChange", changePasswordSubmit: "changePasswordSubmit" }, usesOnChanges: true, ngImport: i0, template: "<pt-card [config]=\"changePasswordPageConfig.changePasswordCardConfig!\">\n  @if (changePasswordPageConfig.logoUrl; as logoUrl) {\n    @if (logoUrl.imageUrl) {\n      <div class=\"logo-container\">\n        <img\n          [src]=\"logoUrl.imageUrl\"\n          [alt]=\"logoUrl.altText || 'Logo'\"\n          [style.width]=\"logoUrl.width || '100px'\"\n          [style.height]=\"logoUrl.height || 'auto'\"\n        />\n      </div>\n    }\n  }\n\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: changePasswordPageConfig.title?.color || '#333',\n        'font-size': changePasswordPageConfig.title?.fontSize || '24px',\n      }\"\n    >\n      {{ changePasswordPageConfig.title?.text || \"Changer le mot de passe\" }}\n    </h1>\n  </div>\n\n  @if (changePasswordErrorMessage) {\n    <div class=\"error-message\" role=\"alert\">\n      {{ changePasswordErrorMessage }}\n    </div>\n  }\n\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (changePasswordPageConfig.errorMessage) {\n      <div class=\"error-message\" role=\"alert\">\n        {{ changePasswordPageConfig.errorMessage }}\n      </div>\n    }\n\n    @if (changePasswordPageConfig.showCurrentPasswordField) {\n      <div class=\"field\">\n        <pt-text-input\n          [formGroup]=\"formGroup\"\n          [formField]=\"changePasswordPageConfig.currentPasswordField!\"\n        ></pt-text-input>\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"changePasswordPageConfig.newPasswordField!\"\n      ></pt-text-input>\n    </div>\n\n    @if (changePasswordPageConfig.showPasswordStrength) {\n      <div class=\"password-strength-section\">\n        <div class=\"password-strength-header\">\n          <span>\n            {{\n              changePasswordPageConfig.passwordStrengthLabel ||\n                \"Robustesse du mot de passe\"\n            }}\n          </span>\n\n          <span\n            class=\"strength-label\"\n            [ngClass]=\"\n              'strength-' +\n              (changePasswordPageConfig.passwordStrengthSeverity || 'neutral')\n            \"\n          >\n            {{\n              changePasswordPageConfig.passwordStrengthText || \"Non renseign\u00E9\"\n            }}\n          </span>\n        </div>\n\n        <p-progressbar\n          [value]=\"changePasswordPageConfig.passwordStrengthPercentage || 0\"\n          [showValue]=\"false\"\n          [ngClass]=\"\n            'password-progressbar strength-' +\n            (changePasswordPageConfig.passwordStrengthSeverity || 'neutral')\n          \"\n        ></p-progressbar>\n      </div>\n    }\n\n    @if (visiblePasswordPolicyRules.length > 0) {\n      <div class=\"password-policy-section\">\n        <strong class=\"password-policy-title\">\n          {{\n            changePasswordPageConfig.passwordPolicyTitle || \"R\u00E8gles de s\u00E9curit\u00E9\"\n          }}\n        </strong>\n\n        <ul class=\"password-policy-list\">\n          @for (rule of visiblePasswordPolicyRules; track rule.code) {\n            <li\n              [class.valid]=\"rule.valid\"\n              [class.invalid]=\"!rule.valid && !rule.backendOnly\"\n              [class.backend-only]=\"rule.backendOnly\"\n            >\n              @if (rule.backendOnly) {\n                <i class=\"pi pi-shield\"></i>\n              } @else if (rule.valid) {\n                <i class=\"pi pi-check-circle\"></i>\n              } @else {\n                <i class=\"pi pi-times-circle\"></i>\n              }\n\n              <span>{{ rule.label }}</span>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"changePasswordPageConfig.confirmationPasswordField!\"\n      ></pt-text-input>\n\n      @if (\n        confirmationPasswordControl?.touched &&\n        formGroup.hasError(\"passwordMismatch\")\n      ) {\n        <small class=\"field-error\">\n          {{\n            changePasswordPageConfig.passwordMismatchErrorMessage ||\n              \"Les deux mots de passe ne correspondent pas.\"\n          }}\n        </small>\n      }\n    </div>\n\n    <div class=\"submit-btn\">\n      <pt-button\n        [buttonConfig]=\"changePasswordPageConfig.buttonConfig!\"\n      ></pt-button>\n    </div>\n\n    @if (visibleAdditionalContent.length > 0) {\n      <div class=\"additional-content-list\">\n        @for (item of visibleAdditionalContent; track item.id || $index) {\n          <div\n            class=\"additional-content-item\"\n            [ngClass]=\"getAdditionalContentClass(item)\"\n            [ngStyle]=\"item.style\"\n          >\n            @if (item.text) {\n              <span class=\"additional-content-text\">\n                {{ item.text }}\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n  </form>\n\n  <div class=\"change-password-footer\">\n    {{ changePasswordPageConfig.footer?.version }}\n\n    <span>\n      {{ changePasswordPageConfig.footer?.copyright }}\n    </span>\n  </div>\n</pt-card>\n", styles: [":host{display:block;width:100%;min-width:0}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.logo-container img{display:block;max-width:100%;object-fit:contain}.title-container{margin-bottom:1.25rem;text-align:center}.title-container h1{margin:0;line-height:1.25}.form-container{width:100%}.field{display:flex;flex-direction:column;width:100%;margin-bottom:1.25rem}.error-message{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.75rem .875rem;color:var(--p-message-error-color, #b91c1c);background:var(--p-message-error-background, #fef2f2);border:1px solid var(--p-message-error-border-color, #fecaca);border-radius:var(--p-content-border-radius, .5rem);font-size:.875rem;line-height:1.4;text-align:center}.password-strength-section{width:100%;margin-top:-.25rem;margin-bottom:1.25rem}.password-strength-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem;color:var(--p-text-color, #1e293b);font-size:.875rem;font-weight:600}.strength-label{font-size:.82rem;font-weight:700;white-space:nowrap}.strength-neutral{color:var(--p-text-muted-color, #64748b)}.strength-danger{color:var(--p-red-500, #ef4444)}.strength-warn{color:var(--p-orange-500, #f97316)}.strength-success{color:var(--p-green-500, #22c55e)}:host ::ng-deep .password-progressbar{height:.65rem;overflow:hidden;border-radius:999px}:host ::ng-deep .password-progressbar .p-progressbar-value{transition:width .22s ease,background-color .22s ease}:host ::ng-deep .password-progressbar.strength-neutral .p-progressbar-value{background:var(--p-surface-400, #94a3b8)}:host ::ng-deep .password-progressbar.strength-danger .p-progressbar-value{background:var(--p-red-500, #ef4444)}:host ::ng-deep .password-progressbar.strength-warn .p-progressbar-value{background:var(--p-orange-500, #f97316)}:host ::ng-deep .password-progressbar.strength-success .p-progressbar-value{background:var(--p-green-500, #22c55e)}.password-policy-section{width:100%;box-sizing:border-box;margin-bottom:1.25rem;padding:1rem;background:var(--p-content-background, rgba(255, 255, 255, .12));border:1px solid var(--p-content-border-color, rgba(255, 255, 255, .25));border-radius:var(--p-content-border-radius, .5rem)}.password-policy-title{display:block;margin-bottom:.75rem;color:var(--p-text-color, #1e293b);font-size:.9rem;font-weight:700}.password-policy-list{display:flex;flex-direction:column;margin:0;padding:0;gap:.55rem;list-style:none}.password-policy-list li{display:flex;align-items:flex-start;gap:.6rem;color:var(--p-text-muted-color, #64748b);font-size:.84rem;line-height:1.35}.password-policy-list li i{width:1rem;margin-top:.1rem;text-align:center}.password-policy-list li.valid{color:var(--p-green-600, #16a34a)}.password-policy-list li.invalid{color:var(--p-red-500, #ef4444)}.password-policy-list li.backend-only{color:var(--p-text-muted-color, #64748b)}.password-policy-list li.backend-only i{color:var(--p-primary-color, #3b82f6)}.field-error{display:block;margin-top:.45rem;color:var(--p-message-error-color, #b91c1c);font-size:.78rem;line-height:1.35}.submit-btn{display:flex;justify-content:center;width:100%}:host ::ng-deep .submit-btn pt-button{display:block;width:100%}:host ::ng-deep .submit-btn p-button,:host ::ng-deep .submit-btn p-button button{width:100%}.additional-content-list{display:flex;flex-direction:column;width:100%;margin-top:1rem;gap:.55rem}.additional-content-item{display:flex;flex-wrap:wrap;align-items:baseline;width:100%;box-sizing:border-box;gap:.3rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.875rem;line-height:1.45}.additional-content-left{justify-content:flex-start;text-align:left}.additional-content-center{justify-content:center;text-align:center}.additional-content-right{justify-content:flex-end;text-align:right}.additional-content-text{color:inherit}.change-password-footer{margin-top:1.25rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.8rem;line-height:1.4;text-align:center}.change-password-footer span{display:block;margin-top:.25rem}:host-context(.p-dark) .error-message,:host-context(.app-dark) .error-message,:host-context(.dark) .error-message,:host-context(.dark-mode) .error-message,:host-context([data-theme=\"dark\"]) .error-message{color:var(--p-message-error-color, #fca5a5);background:var(--p-message-error-background, rgba(127, 29, 29, .25));border-color:var(--p-message-error-border-color, rgba(248, 113, 113, .4))}:host-context(.p-dark) .password-strength-header,:host-context(.app-dark) .password-strength-header,:host-context(.dark) .password-strength-header,:host-context(.dark-mode) .password-strength-header,:host-context([data-theme=\"dark\"]) .password-strength-header,:host-context(.p-dark) .password-policy-title,:host-context(.app-dark) .password-policy-title,:host-context(.dark) .password-policy-title,:host-context(.dark-mode) .password-policy-title,:host-context([data-theme=\"dark\"]) .password-policy-title{color:var(--p-text-color, #f8fafc)}:host-context(.p-dark) .password-policy-section,:host-context(.app-dark) .password-policy-section,:host-context(.dark) .password-policy-section,:host-context(.dark-mode) .password-policy-section,:host-context([data-theme=\"dark\"]) .password-policy-section{background:#0f172a59;border-color:#94a3b84d}:host-context(.p-dark) .additional-content-item,:host-context(.app-dark) .additional-content-item,:host-context(.dark) .additional-content-item,:host-context(.dark-mode) .additional-content-item,:host-context([data-theme=\"dark\"]) .additional-content-item,:host-context(.p-dark) .change-password-footer,:host-context(.app-dark) .change-password-footer,:host-context(.dark) .change-password-footer,:host-context(.dark-mode) .change-password-footer,:host-context([data-theme=\"dark\"]) .change-password-footer{color:var(--p-text-muted-color, var(--text-color-secondary, #cbd5e1))}@media(max-width:768px){:host ::ng-deep pt-card{width:100%;max-width:100%}.submit-btn{min-width:100%}.password-strength-header{align-items:flex-start;flex-direction:column;gap:.25rem}}@media(max-width:480px){.logo-container,.title-container,.field{margin-bottom:1rem}.additional-content-item{font-size:.82rem}.additional-content-list{gap:.5rem}.password-policy-section{padding:.85rem}.password-policy-list li{font-size:.8rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PTCardModule }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "ngmodule", type: PTButtonModule }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }, { kind: "ngmodule", type: PTTextInputModule }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i13.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTChangePasswordCardComponent, isStandalone: true, selector: "pt-change-password-card", inputs: { changePasswordPageConfig: "changePasswordPageConfig", changePasswordErrorMessage: "changePasswordErrorMessage" }, outputs: { passwordValueChange: "passwordValueChange", changePasswordSubmit: "changePasswordSubmit" }, usesOnChanges: true, ngImport: i0, template: "<pt-card [config]=\"changePasswordPageConfig.changePasswordCardConfig!\">\n  @if (changePasswordPageConfig.logoUrl; as logoUrl) {\n    @if (logoUrl.imageUrl) {\n      <div class=\"logo-container\">\n        <img\n          [src]=\"logoUrl.imageUrl\"\n          [alt]=\"logoUrl.altText || 'Logo'\"\n          [style.width]=\"logoUrl.width || '100px'\"\n          [style.height]=\"logoUrl.height || 'auto'\"\n        />\n      </div>\n    }\n  }\n\n  <div class=\"title-container\">\n    <h1\n      [ngStyle]=\"{\n        color: changePasswordPageConfig.title?.color || '#333',\n        'font-size': changePasswordPageConfig.title?.fontSize || '24px',\n      }\"\n    >\n      {{ changePasswordPageConfig.title?.text || \"Changer le mot de passe\" }}\n    </h1>\n  </div>\n\n  @if (changePasswordErrorMessage) {\n    <div class=\"error-message\" role=\"alert\">\n      {{ changePasswordErrorMessage }}\n    </div>\n  }\n\n  <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n    @if (changePasswordPageConfig.errorMessage) {\n      <div class=\"error-message\" role=\"alert\">\n        {{ changePasswordPageConfig.errorMessage }}\n      </div>\n    }\n\n    @if (changePasswordPageConfig.showCurrentPasswordField) {\n      <div class=\"field\">\n        <pt-text-input\n          [formGroup]=\"formGroup\"\n          [formField]=\"changePasswordPageConfig.currentPasswordField!\"\n        ></pt-text-input>\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"changePasswordPageConfig.newPasswordField!\"\n      ></pt-text-input>\n    </div>\n\n    @if (changePasswordPageConfig.showPasswordStrength) {\n      <div class=\"password-strength-section\">\n        <div class=\"password-strength-header\">\n          <span>\n            {{\n              changePasswordPageConfig.passwordStrengthLabel ||\n                \"Robustesse du mot de passe\"\n            }}\n          </span>\n\n          <span\n            class=\"strength-label\"\n            [ngClass]=\"\n              'strength-' +\n              (changePasswordPageConfig.passwordStrengthSeverity || 'neutral')\n            \"\n          >\n            {{\n              changePasswordPageConfig.passwordStrengthText || \"Non renseign\u00E9\"\n            }}\n          </span>\n        </div>\n\n        <p-progressbar\n          [value]=\"changePasswordPageConfig.passwordStrengthPercentage || 0\"\n          [showValue]=\"false\"\n          [ngClass]=\"\n            'password-progressbar strength-' +\n            (changePasswordPageConfig.passwordStrengthSeverity || 'neutral')\n          \"\n        ></p-progressbar>\n      </div>\n    }\n\n    @if (visiblePasswordPolicyRules.length > 0) {\n      <div class=\"password-policy-section\">\n        <strong class=\"password-policy-title\">\n          {{\n            changePasswordPageConfig.passwordPolicyTitle || \"R\u00E8gles de s\u00E9curit\u00E9\"\n          }}\n        </strong>\n\n        <ul class=\"password-policy-list\">\n          @for (rule of visiblePasswordPolicyRules; track rule.code) {\n            <li\n              [class.valid]=\"rule.valid\"\n              [class.invalid]=\"!rule.valid && !rule.backendOnly\"\n              [class.backend-only]=\"rule.backendOnly\"\n            >\n              @if (rule.backendOnly) {\n                <i class=\"pi pi-shield\"></i>\n              } @else if (rule.valid) {\n                <i class=\"pi pi-check-circle\"></i>\n              } @else {\n                <i class=\"pi pi-times-circle\"></i>\n              }\n\n              <span>{{ rule.label }}</span>\n            </li>\n          }\n        </ul>\n      </div>\n    }\n\n    <div class=\"field\">\n      <pt-text-input\n        [formGroup]=\"formGroup\"\n        [formField]=\"changePasswordPageConfig.confirmationPasswordField!\"\n      ></pt-text-input>\n\n      @if (\n        confirmationPasswordControl?.touched &&\n        formGroup.hasError(\"passwordMismatch\")\n      ) {\n        <small class=\"field-error\">\n          {{\n            changePasswordPageConfig.passwordMismatchErrorMessage ||\n              \"Les deux mots de passe ne correspondent pas.\"\n          }}\n        </small>\n      }\n    </div>\n\n    <div class=\"submit-btn\">\n      <pt-button\n        [buttonConfig]=\"changePasswordPageConfig.buttonConfig!\"\n      ></pt-button>\n    </div>\n\n    @if (visibleAdditionalContent.length > 0) {\n      <div class=\"additional-content-list\">\n        @for (item of visibleAdditionalContent; track item.id || $index) {\n          <div\n            class=\"additional-content-item\"\n            [ngClass]=\"getAdditionalContentClass(item)\"\n            [ngStyle]=\"item.style\"\n          >\n            @if (item.text) {\n              <span class=\"additional-content-text\">\n                {{ item.text }}\n              </span>\n            }\n          </div>\n        }\n      </div>\n    }\n  </form>\n\n  <div class=\"change-password-footer\">\n    {{ changePasswordPageConfig.footer?.version }}\n\n    <span>\n      {{ changePasswordPageConfig.footer?.copyright }}\n    </span>\n  </div>\n</pt-card>\n", styles: [":host{display:block;width:100%;min-width:0}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.logo-container img{display:block;max-width:100%;object-fit:contain}.title-container{margin-bottom:1.25rem;text-align:center}.title-container h1{margin:0;line-height:1.25}.form-container{width:100%}.field{display:flex;flex-direction:column;width:100%;margin-bottom:1.25rem}.error-message{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.75rem .875rem;color:var(--p-message-error-color, #b91c1c);background:var(--p-message-error-background, #fef2f2);border:1px solid var(--p-message-error-border-color, #fecaca);border-radius:var(--p-content-border-radius, .5rem);font-size:.875rem;line-height:1.4;text-align:center}.password-strength-section{width:100%;margin-top:-.25rem;margin-bottom:1.25rem}.password-strength-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem;color:var(--p-text-color, #1e293b);font-size:.875rem;font-weight:600}.strength-label{font-size:.82rem;font-weight:700;white-space:nowrap}.strength-neutral{color:var(--p-text-muted-color, #64748b)}.strength-danger{color:var(--p-red-500, #ef4444)}.strength-warn{color:var(--p-orange-500, #f97316)}.strength-success{color:var(--p-green-500, #22c55e)}:host ::ng-deep .password-progressbar{height:.65rem;overflow:hidden;border-radius:999px}:host ::ng-deep .password-progressbar .p-progressbar-value{transition:width .22s ease,background-color .22s ease}:host ::ng-deep .password-progressbar.strength-neutral .p-progressbar-value{background:var(--p-surface-400, #94a3b8)}:host ::ng-deep .password-progressbar.strength-danger .p-progressbar-value{background:var(--p-red-500, #ef4444)}:host ::ng-deep .password-progressbar.strength-warn .p-progressbar-value{background:var(--p-orange-500, #f97316)}:host ::ng-deep .password-progressbar.strength-success .p-progressbar-value{background:var(--p-green-500, #22c55e)}.password-policy-section{width:100%;box-sizing:border-box;margin-bottom:1.25rem;padding:1rem;background:var(--p-content-background, rgba(255, 255, 255, .12));border:1px solid var(--p-content-border-color, rgba(255, 255, 255, .25));border-radius:var(--p-content-border-radius, .5rem)}.password-policy-title{display:block;margin-bottom:.75rem;color:var(--p-text-color, #1e293b);font-size:.9rem;font-weight:700}.password-policy-list{display:flex;flex-direction:column;margin:0;padding:0;gap:.55rem;list-style:none}.password-policy-list li{display:flex;align-items:flex-start;gap:.6rem;color:var(--p-text-muted-color, #64748b);font-size:.84rem;line-height:1.35}.password-policy-list li i{width:1rem;margin-top:.1rem;text-align:center}.password-policy-list li.valid{color:var(--p-green-600, #16a34a)}.password-policy-list li.invalid{color:var(--p-red-500, #ef4444)}.password-policy-list li.backend-only{color:var(--p-text-muted-color, #64748b)}.password-policy-list li.backend-only i{color:var(--p-primary-color, #3b82f6)}.field-error{display:block;margin-top:.45rem;color:var(--p-message-error-color, #b91c1c);font-size:.78rem;line-height:1.35}.submit-btn{display:flex;justify-content:center;width:100%}:host ::ng-deep .submit-btn pt-button{display:block;width:100%}:host ::ng-deep .submit-btn p-button,:host ::ng-deep .submit-btn p-button button{width:100%}.additional-content-list{display:flex;flex-direction:column;width:100%;margin-top:1rem;gap:.55rem}.additional-content-item{display:flex;flex-wrap:wrap;align-items:baseline;width:100%;box-sizing:border-box;gap:.3rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.875rem;line-height:1.45}.additional-content-left{justify-content:flex-start;text-align:left}.additional-content-center{justify-content:center;text-align:center}.additional-content-right{justify-content:flex-end;text-align:right}.additional-content-text{color:inherit}.change-password-footer{margin-top:1.25rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.8rem;line-height:1.4;text-align:center}.change-password-footer span{display:block;margin-top:.25rem}:host-context(.p-dark) .error-message,:host-context(.app-dark) .error-message,:host-context(.dark) .error-message,:host-context(.dark-mode) .error-message,:host-context([data-theme=\"dark\"]) .error-message{color:var(--p-message-error-color, #fca5a5);background:var(--p-message-error-background, rgba(127, 29, 29, .25));border-color:var(--p-message-error-border-color, rgba(248, 113, 113, .4))}:host-context(.p-dark) .password-strength-header,:host-context(.app-dark) .password-strength-header,:host-context(.dark) .password-strength-header,:host-context(.dark-mode) .password-strength-header,:host-context([data-theme=\"dark\"]) .password-strength-header,:host-context(.p-dark) .password-policy-title,:host-context(.app-dark) .password-policy-title,:host-context(.dark) .password-policy-title,:host-context(.dark-mode) .password-policy-title,:host-context([data-theme=\"dark\"]) .password-policy-title{color:var(--p-text-color, #f8fafc)}:host-context(.p-dark) .password-policy-section,:host-context(.app-dark) .password-policy-section,:host-context(.dark) .password-policy-section,:host-context(.dark-mode) .password-policy-section,:host-context([data-theme=\"dark\"]) .password-policy-section{background:#0f172a59;border-color:#94a3b84d}:host-context(.p-dark) .additional-content-item,:host-context(.app-dark) .additional-content-item,:host-context(.dark) .additional-content-item,:host-context(.dark-mode) .additional-content-item,:host-context([data-theme=\"dark\"]) .additional-content-item,:host-context(.p-dark) .change-password-footer,:host-context(.app-dark) .change-password-footer,:host-context(.dark) .change-password-footer,:host-context(.dark-mode) .change-password-footer,:host-context([data-theme=\"dark\"]) .change-password-footer{color:var(--p-text-muted-color, var(--text-color-secondary, #cbd5e1))}@media(max-width:768px){:host ::ng-deep pt-card{width:100%;max-width:100%}.submit-btn{min-width:100%}.password-strength-header{align-items:flex-start;flex-direction:column;gap:.25rem}}@media(max-width:480px){.logo-container,.title-container,.field{margin-bottom:1rem}.additional-content-item{font-size:.82rem}.additional-content-list{gap:.5rem}.password-policy-section{padding:.85rem}.password-policy-list li{font-size:.8rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PTCardModule }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "ngmodule", type: PTButtonModule }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }, { kind: "ngmodule", type: PTTextInputModule }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i14.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTChangePasswordCardComponent, decorators: [{
             type: Component,
@@ -10054,5 +10946,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, 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 };
+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, PTNewsTickerComponent, PTNewsTickerDirection, PTNewsTickerModule, PTNewsTickerTrend, PTNewsTickerType, 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