ng-prime-tools 1.0.77 → 1.0.79

package/fesm2022/ng-prime-tools.mjs

@@ -190,6 +190,7 @@ class PTAdvancedPrimeTableComponent {
         this.selectionDataKey = 'id';
         this.selectionMode = null;
         this.selection = null;
+        this.cellHeight = null;
         this.selectionChange = new EventEmitter();
         this.rowSelect = new EventEmitter();
         this.rowUnselect = new EventEmitter();
@@ -998,16 +999,6 @@ class PTAdvancedPrimeTableComponent {
             return false;
         return typeof d === 'function' ? !!d(row) : !!d;
     }
-    getCellStyle(col, row) {
-        const extendedCol = col;
-        const styleConfig = extendedCol?.cellStyle;
-        if (!styleConfig) {
-            return {};
-        }
-        return typeof styleConfig === 'function'
-            ? (styleConfig(row) ?? {})
-            : styleConfig;
-    }
     getComposedCellStyle(col, composedName, row) {
         const extendedCol = col;
         const styleConfig = extendedCol?.composedCellStyles?.[composedName];
@@ -1126,12 +1117,72 @@ class PTAdvancedPrimeTableComponent {
         }
         return [value];
     }
+    getCellHeight() {
+        return this.cellHeight?.trim() || null;
+    }
+    getColumnCellPadding(col) {
+        return col.cellPadding?.trim() || '0px';
+    }
+    getColumnCellMargin(col) {
+        return col.cellMargin?.trim() || '0px';
+    }
+    getCellInnerStyle(col, defaultMargin = '0px') {
+        return {
+            margin: col.cellMargin?.trim() || defaultMargin,
+            minHeight: '0',
+            boxSizing: 'border-box',
+        };
+    }
+    getCellStyle(col, row) {
+        const styles = {};
+        if (col.cellStyle) {
+            const customStyle = typeof col.cellStyle === 'function'
+                ? col.cellStyle(row)
+                : col.cellStyle;
+            Object.assign(styles, customStyle);
+        }
+        const height = this.getCellHeight();
+        if (height) {
+            styles['height'] = height;
+            styles['max-height'] = height;
+            styles['line-height'] = height;
+        }
+        styles['padding'] = this.getColumnCellPadding(col);
+        styles['box-sizing'] = 'border-box';
+        return styles;
+    }
+    getHeaderCellStyle(col) {
+        const styles = {
+            padding: this.getColumnCellPadding(col),
+            boxSizing: 'border-box',
+        };
+        const height = this.getCellHeight();
+        if (height) {
+            styles['height'] = height;
+            styles['max-height'] = height;
+            styles['line-height'] = height;
+        }
+        return styles;
+    }
+    getStaticCellStyle() {
+        const styles = {
+            padding: '0px',
+            boxSizing: 'border-box',
+        };
+        const height = this.getCellHeight();
+        if (height) {
+            styles['height'] = height;
+            styles['max-height'] = height;
+            styles['line-height'] = height;
+        }
+        return styles;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTAdvancedPrimeTableComponent, deps: [], 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", isPaginated: "isPaginated", isLazy: "isLazy", actions: "actions", isSortable: "isSortable", loading: "loading", maxHeight: "maxHeight", isRowReorderable: "isRowReorderable", rowReorderIdField: "rowReorderIdField", rowOrderStartAt: "rowOrderStartAt", selectionDataKey: "selectionDataKey", selectionMode: "selectionMode", selection: "selection" }, outputs: { selectionChange: "selectionChange", rowSelect: "rowSelect", rowUnselect: "rowUnselect", lazyLoad: "lazyLoad", search: "search", exportExcelEvent: "exportExcelEvent", exportPdfEvent: "exportPdfEvent", onPageChange: "onPageChange", onSortColumn: "onSortColumn", onFilterColumn: "onFilterColumn", rowReorderChange: "rowReorderChange" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-advanced-prime-table table-container\">\n  <p-table\n    #dt\n    [value]=\"data\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"isLazy\"\n    [filterDelay]=\"0\"\n    [dataKey]=\"selectionDataKey || rowReorderIdField || 'id'\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onRowReorder)=\"onRowReorder($event)\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (selectionChange)=\"selectionChange.emit($event)\"\n    (onRowSelect)=\"rowSelect.emit($event.data)\"\n    (onRowUnselect)=\"rowUnselect.emit($event.data)\"\n    >\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n      @if (canUseRowReorder()) {\n        <col style=\"width: 3rem\" />\n      }\n      @for (col of columns; track col) {\n        <col\n          [style.width]=\"col.width || getHeaderWidth(col)\"\n          />\n      }\n    </colgroup>\n  </ng-template>\n\n  <ng-template pTemplate=\"caption\">\n    <div class=\"flex\">\n      <div>\n        <h3>Total: {{ totalRecords }}</h3>\n      </div>\n\n      <div>\n        @if (hasSearchFilter) {\n          <button\n            pButton\n            icon=\"pi pi-filter-slash\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"clear(dt)\"\n            title=\"Clear filters\"\n          ></button>\n        }\n\n        @if (hasExportExcel) {\n          <button\n            pButton\n            icon=\"pi pi-file-excel\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportExcel()\"\n            title=\"Export to Excel\"\n          ></button>\n        }\n\n        @if (hasExportPDF) {\n          <button\n            pButton\n            icon=\"pi pi-file-pdf\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportPdf()\"\n            title=\"Export to PDF\"\n          ></button>\n        }\n      </div>\n\n      @if (hasSearchFilter) {\n        <div class=\"ml-auto\">\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n              />\n          </p-iconField>\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\">\n    <tr class=\"sticky-header\">\n      @if (canUseRowReorder()) {\n        <th style=\"width: 3rem\"></th>\n      }\n\n      @for (col of columns; track col) {\n        @if (!col.children) {\n          <th\n            [pSortableColumn]=\"col.code\"\n            [style.width]=\"col.width || getHeaderWidth(col)\"\n            [style.padding]=\"'0px'\"\n            [ngClass]=\"[\n              getHeaderAlignClass(col),\n              col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n            ]\"\n            colspan=\"1\"\n            >\n            @if (isSortable && col.isSortable !== false) {\n              <div\n                class=\"header-container d-flex align-items-center justify-content-between\"\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [style.padding]=\"'0px'\"\n                [style.margin]=\"'10px'\"\n                >\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n                <div\n                  class=\"icons d-flex align-items-center\"\n                  [style.width]=\"'77px'\"\n                  >\n                  <p-sortIcon [field]=\"col.code\" />\n                  @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 (composedName of col.composedNames; track composedName) {\n                            <div>\n                              @if (\n                                getComposedFieldType(col, composedName) ===\n                                TableTypeEnum.STRING\n                                ) {\n                                <p-multiSelect\n                                  [options]=\"filters[composedName]?.options\"\n                                  optionLabel=\"label\"\n                                  optionValue=\"value\"\n                                  [ngModel]=\"filters[composedName]?.value ?? []\"\n                              (ngModelChange)=\"\n                                onComposedFilterValueChange(\n                                  col,\n                                  composedName,\n                                  $event\n                                );\n                                filter($event ?? [])\n                              \"\n                                  [placeholder]=\"filters[composedName]?.placeholder\"\n                                  display=\"chip\"\n                                  >\n                                  <ng-template let-item pTemplate=\"item\">\n                                    <div class=\"custom-multiselect-item\">\n                                      @if (item.image) {\n                                        <img\n                                          [src]=\"item.image\"\n                                          alt=\"icon\"\n                                          class=\"filter-image\"\n                                          />\n                                      }\n                                      <span>{{ item.label }}</span>\n                                    </div>\n                                  </ng-template>\n                                </p-multiSelect>\n                              }\n                            </div>\n                          }\n                        </ng-template>\n                      </p-columnFilter>\n                    }\n                    @if (col.type !== TableTypeEnum.COMPOSED) {\n                      <p-columnFilter\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        [type]=\"getColumnFilterType(col)\"\n                        [showApplyButton]=\"true\"\n                        [showClearButton]=\"true\"\n                        [showMatchModes]=\"col.type !== TableTypeEnum.MULTISELECT\"\n                        [showOperator]=\"col.type !== TableTypeEnum.MULTISELECT\"\n                      [matchMode]=\"\n                        col.type === TableTypeEnum.MULTISELECT\n                          ? 'in'\n                          : undefined\n                      \"\n                        (onClear)=\"onFilterClear(col.code!)\"\n                        >\n                        @if (\n                          col.type === TableTypeEnum.NUMBER ||\n                          col.type === TableTypeEnum.AMOUNT\n                          ; as value) {\n                          <ng-template\n                            pTemplate=\"filter\"\n                            let-value\n                            >\n                            <input\n                              pInputText\n                              type=\"text\"\n                              inputmode=\"decimal\"\n                              [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                          (ngModelChange)=\"\n                            onNumberFilterChange(col.code!, $event)\n                          \"\n                              placeholder=\"Enter a number\"\n                              />\n                          </ng-template>\n                        }\n                        <ng-template\n                          pTemplate=\"filter\"\n                          *ngIf=\"col.type === TableTypeEnum.DATE\"\n                          let-filter=\"filterCallback\"\n                          let-value\n                          >\n                          <p-datepicker\n                            [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event)\n                          \"\n                            dateFormat=\"dd/mm/yy\"\n                            placeholder=\"Choose a date\"\n                          ></p-datepicker>\n                        </ng-template>\n                        <ng-template\n                          pTemplate=\"filter\"\n                        *ngIf=\"\n                          col.type === TableTypeEnum.MULTISELECT &&\n                          col.filterOptions &&\n                          col.filterOptions.length > 0\n                        \"\n                          let-filter=\"filterCallback\"\n                          let-value\n                          >\n                          <p-multiSelect\n                            [options]=\"col.filterOptions\"\n                            optionLabel=\"label\"\n                            optionValue=\"value\"\n                          [ngModel]=\"\n                            latestFilterValues[col.code!] ?? value ?? []\n                          \"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event ?? [])\n                          \"\n                            display=\"chip\"\n                            placeholder=\"Choose option\"\n                            class=\"custom-multiselect\"\n                          ></p-multiSelect>\n                        </ng-template>\n                      </p-columnFilter>\n                    }\n                  }\n                </div>\n              </div>\n            } @else {\n              <div\n                class=\"header-container d-flex align-items-center justify-content-between\"\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [style.padding]=\"'0px'\"\n                [style.margin]=\"'10px'\"\n                >\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n                @if (hasColumnFilter && col.isFilter !== false) {\n                  <p-columnFilter\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    [type]=\"getColumnFilterType(col)\"\n                    [currency]=\"getCurrencySymbol(col)\"\n                    [showApplyButton]=\"true\"\n                    [showClearButton]=\"true\"\n                    [showMatchModes]=\"\n                      getColumnFilterType(col) !== 'multiSelect'\n                    \"\n                    [showOperator]=\"getColumnFilterType(col) !== 'multiSelect'\"\n                    [matchMode]=\"\n                      getColumnFilterType(col) === 'multiSelect'\n                        ? 'in'\n                        : undefined\n                    \"\n                    (onClear)=\"onFilterClear(col.code!)\"\n                    >\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-filter=\"filterCallback\"\n                      let-value\n                      *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                      <p-datepicker\n                        [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                        (ngModelChange)=\"\n                          onFilterValueChange(col.code!, null, $event);\n                          filter($event)\n                        \"\n                        dateFormat=\"dd/mm/yy\"\n                      ></p-datepicker>\n                    </ng-template>\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-filter=\"filterCallback\"\n                      let-value\n                      *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                      <p-multiSelect\n                        [options]=\"col.filterOptions\"\n                        optionLabel=\"label\"\n                        optionValue=\"value\"\n                        [ngModel]=\"latestFilterValues[col.code!] ?? value ?? []\"\n                        (ngModelChange)=\"\n                          onFilterValueChange(col.code!, null, $event);\n                          filter($event ?? [])\n                        \"\n                        display=\"chip\"\n                        placeholder=\"Select\"\n                        class=\"custom-multiselect\"\n                      ></p-multiSelect>\n                    </ng-template>\n                  </p-columnFilter>\n                }\n              </div>\n            }\n          </th>\n        } @else {\n          <th\n            [attr.colspan]=\"col.children?.length\"\n            [style.width]=\"col.width || getHeaderWidth(col)\"\n            [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 style=\"width: 3rem\"></th>\n        }\n        @for (col of columns; track col) {\n          @if (col.children) {\n            @for (child of col.children; track child) {\n              <th\n                [style.width]=\"child.width || getHeaderWidth(child)\"\n                [style.padding]=\"'0px'\"\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\n    pTemplate=\"body\"\n    let-data\n    let-editing=\"editing\"\n    let-ri=\"rowIndex\"\n    >\n    @if (!loading) {\n      <tr\n        [pEditableRow]=\"isEdit ? data : null\"\n        [pReorderableRow]=\"canUseRowReorder() ? ri : null\"\n        [pSelectableRow]=\"selectionMode ? data : null\"\n        >\n        @if (canUseRowReorder()) {\n          <td style=\"width: 3rem; text-align: center\">\n            <span\n              pReorderableRowHandle\n              style=\"cursor: move; display: inline-flex; align-items: center\"\n              title=\"D\u00E9placer la ligne\"\n              >\n              <i class=\"pi pi-bars\"></i>\n            </span>\n          </td>\n        }\n        @for (col of columns; track col) {\n          @if (!col.children) {\n            @if (\n              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 [ngClass]=\"getCellInnerAlignClass(col)\">\n                  @if (isMultiSelect(col.code)) {\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-multiSelect\n                          appendTo=\"body\"\n                          [ngModel]=\"data[col.code!]\"\n                          [style]=\"{ width: '100%' }\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                          [options]=\"optionValues\"\n                        ></p-multiSelect>\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        <div class=\"multi-select-container\">\n                          @for (\n                            rec of getMultiSelectValues(data[col.code!])\n                            ; track\n                            rec) {\n                            <p-tag [value]=\"rec\"></p-tag>\n                          }\n                        </div>\n                      </ng-template>\n                    </p-cellEditor>\n                  } @else {\n                    @if (isDatePicker(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-datepicker\n                            [inputId]=\"data[col.code!]\"\n                            [ngModel]=\"data[col.code!]\"\n                          (ngModelChange)=\"\n                            changeHandler(data.id, col.code, $event)\n                          \"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                          ></p-datepicker>\n                        </ng-template>\n                        <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                        <ng-template pTemplate=\"output\">\n                          @if (\n                            col.type === TableTypeEnum.AMOUNT) {\n                            {{\n                            data[col.code!]\n                            | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                            }}\n                          } @else {\n                            {{ data[col.code!] }}\n                          }\n                        </ng-template>\n                      </p-cellEditor>\n                    }\n                  }\n                </div>\n              </td>\n            } @else {\n              <td\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [ngClass]=\"[\n                  getDataAlignClass(col),\n                  col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n                ]\"\n                [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                @if (col.type === TableTypeEnum.ACTION) {\n                  <div class=\"action-buttons-container\">\n                    @if (isDelete) {\n                      <button\n                        pButton\n                        pRipple\n                        pTooltip=\"Supprimer\"\n                        tooltipPosition=\"top\"\n                        appendTo=\"body\"\n                        type=\"button\"\n                        icon=\"pi pi-trash\"\n                        (click)=\"Delete(data)\"\n                        class=\"p-button-rounded p-button-text\"\n                      ></button>\n                    }\n                    @if (isEdit) {\n                      <div>\n                        @if (!editing) {\n                          <button\n                            pInitEditableRow\n                            pButton\n                            pRipple\n                            pTooltip=\"Modifier\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            type=\"button\"\n                            icon=\"pi pi-pencil\"\n                            (click)=\"initEditableRow(data)\"\n                            class=\"p-button-rounded p-button-text\"\n                          ></button>\n                        }\n                        @if (editing) {\n                          <button\n                            pSaveEditableRow\n                            pButton\n                            pRipple\n                            pTooltip=\"Enregistrer\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            type=\"button\"\n                            icon=\"pi pi-check\"\n                            (click)=\"saveEditableRow(data)\"\n                            class=\"p-button-rounded p-button-text\"\n                          ></button>\n                        }\n                        @if (editing) {\n                          <button\n                            pCancelEditableRow\n                            pButton\n                            pRipple\n                            pTooltip=\"Annuler\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            type=\"button\"\n                            icon=\"pi pi-times\"\n                            (click)=\"cancelEditableRow(data)\"\n                            class=\"p-button-rounded p-button-text\"\n                          ></button>\n                        }\n                      </div>\n                    }\n                    @for (act of customActions; track act) {\n                      @if (isActionVisible(act, data)) {\n                        <button\n                          pButton\n                          pRipple\n                          [pTooltip]=\"act.tooltip || ''\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          type=\"button\"\n                          class=\"p-button-rounded p-button-text\"\n                          [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                          [ngClass]=\"act.styleClass\"\n                          [disabled]=\"isActionDisabled(act, data)\"\n                          (click)=\"onCustomActionClick(act, data)\"\n                        ></button>\n                      }\n                    }\n                  </div>\n                } @else {\n                  <div [ngClass]=\"getCellInnerAlignClass(col)\">\n                    @if (\n                      col.type === TableTypeEnum.COMPOSED) {\n                      <div class=\"composed-cell\">\n                        @for (\n                          composedName of col.composedNames; track\n                          composedName; let i = $index) {\n                          @if (\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.IMAGE\n                            ) {\n                            <img\n                              [src]=\"data[col.code!]?.[composedName]\"\n                              alt=\"composed-img\"\n                              class=\"composed-image\"\n                              [ngStyle]=\"\n                                getMergedComposedImageStyle(\n                                  col,\n                                  composedName,\n                                  data\n                                )\n                              \"\n                              />\n                          }\n                          @if (\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.STRING\n                            ) {\n                            <span\n                              class=\"composed-text\"\n                              [ngStyle]=\"\n                                getMergedComposedTextStyle(\n                                  col,\n                                  composedName,\n                                  data\n                                )\n                              \"\n                              >\n                              {{ data[col.code!]?.[composedName] }}\n                            </span>\n                          }\n                        }\n                      </div>\n                    } @else {\n                      @if (\n                        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                          @if (isProgressShowValue(col)) {\n                            <span\n                              class=\"progress-cell-value\"\n                              >\n                              {{ getProgressValue(col, data)\n                              }}{{ getProgressUnit(col) }}\n                            </span>\n                          }\n                        </div>\n                      } @else {\n                        @if (col.type === TableTypeEnum.TAG) {\n                          <p-tag\n                            [value]=\"getTagValue(col, data)\"\n                            [severity]=\"$any(getTagSeverity(col, data))\"\n                            [icon]=\"getTagIcon(col, data)\"\n                            [rounded]=\"isTagRounded(col)\"\n                          ></p-tag>\n                        } @else {\n                          @if (\n                            col.type === TableTypeEnum.AMOUNT) {\n                            {{\n                            data[col.code!]\n                            | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                            }}\n                          } @else {\n                            @if (\n                              col.type === TableTypeEnum.NUMBER) {\n                              {{\n                              formatNumber(\n                              data[col.code!],\n                              col.decimalPlaces,\n                              col.thousandSeparator,\n                              col.decimalSeparator\n                              )\n                              }}\n                            } @else {\n                              @if (\n                                col.type === TableTypeEnum.DATE ||\n                                col.type === TableTypeEnum.DATETIME) {\n                                @if (col.type === TableTypeEnum.DATE) {\n                                  {{\n                                  formatDateWithColumn(\n                                  parseAnyDate(data[col.code!]),\n                                  col\n                                  )\n                                  }}\n                                }\n                                @if (col.type === TableTypeEnum.DATETIME) {\n                                  {{\n                                  formatDateTimeWithColumn(\n                                  parseAnyDate(data[col.code!]),\n                                  col\n                                  )\n                                  }}\n                                }\n                              } @else {\n                                @if (\n                                  [\n                                  TableTypeEnum.STRING,\n                                  TableTypeEnum.MULTISELECT,\n                                  ].includes(col.type!)\n                                  ) {\n                                  {{ data[col.code!] }}\n                                }\n                              }\n                            }\n                          }\n                        }\n                      }\n                    }\n                  </div>\n                }\n              </td>\n            }\n          } @else {\n            @for (child of col.children; track child) {\n              <td\n                [style.width]=\"child.width || getHeaderWidth(child)\"\n                [ngClass]=\"getDataAlignClass(child)\"\n                [ngStyle]=\"getCellStyle(child, data)\"\n                >\n                <div [ngClass]=\"getCellInnerAlignClass(child)\">\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                      <ng-template pTemplate=\"output\">\n                        {{ child.code ? data[child.code] : \"\" }}\n                      </ng-template>\n                    </p-cellEditor>\n                  } @else {\n                    @if (\n                      child.type === TableTypeEnum.TAG) {\n                      <p-tag\n                        [value]=\"getTagValue(child, data)\"\n                        [severity]=\"$any(getTagSeverity(child, data))\"\n                        [icon]=\"getTagIcon(child, data)\"\n                        [rounded]=\"isTagRounded(child)\"\n                      ></p-tag>\n                    } @else {\n                      {{ child.code ? data[child.code] : \"\" }}\n                    }\n                  }\n                </div>\n              </td>\n            }\n          }\n        }\n      </tr>\n    }\n  </ng-template>\n</p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{flex:1}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-.8rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:block;width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{width:100%;height:100%;min-height:180px;display:flex;align-items:center;justify-content:center}.pt-advanced-prime-table .empty-message{text-align:center;color:#888;font-size:1.2rem}.pt-advanced-prime-table .empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}.pt-advanced-prime-table th{white-space:normal;word-wrap:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right{width:100%;display:flex;align-items:center}.pt-advanced-prime-table .cell-inner-left{justify-content:flex-start;text-align:left}.pt-advanced-prime-table .cell-inner-center{justify-content:center;text-align:center}.pt-advanced-prime-table .cell-inner-right{justify-content:flex-end;text-align:right}.pt-advanced-prime-table ::ng-deep .p-tag{font-size:.72rem;font-weight:800;padding:.2rem .55rem;line-height:1.2;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .p-tag .p-tag-icon{margin-right:.25rem}.pt-advanced-prime-table .progress-cell{width:100%;min-width:160px;display:flex;align-items:center;gap:.5rem}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1;width:100%;min-width:120px;height:.75rem!important;background:#e5e7eb!important;border-radius:999px;overflow:hidden}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar-value{display:block!important;height:100%!important;border-radius:999px}.pt-advanced-prime-table .progress-cell-value{min-width:38px;font-size:.72rem;font-weight:800;color:#334155;text-align:right}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{text-align:center!important;justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;padding:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container{width:100%;display:flex;justify-content:center!important;align-items:center!important;gap:.35rem}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{padding:.25rem!important;min-width:22px!important;height:22px!important}.pt-advanced-prime-table ::ng-deep .pt-progress-success .p-progressbar-value{background:#22c55e!important}.pt-advanced-prime-table ::ng-deep .pt-progress-warning .p-progressbar-value{background:#f59e0b!important}.pt-advanced-prime-table ::ng-deep .pt-progress-danger .p-progressbar-value{background:#ef4444!important}.pt-advanced-prime-table ::ng-deep .pt-progress-info .p-progressbar-value{background:#3b82f6!important}\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.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i3.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { 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", isPaginated: "isPaginated", isLazy: "isLazy", actions: "actions", isSortable: "isSortable", loading: "loading", maxHeight: "maxHeight", isRowReorderable: "isRowReorderable", 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" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-advanced-prime-table table-container\">\n  <p-table\n    #dt\n    [value]=\"data\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"isLazy\"\n    [filterDelay]=\"0\"\n    [dataKey]=\"selectionDataKey || rowReorderIdField || 'id'\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onRowReorder)=\"onRowReorder($event)\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (selectionChange)=\"selectionChange.emit($event)\"\n    (onRowSelect)=\"rowSelect.emit($event.data)\"\n    (onRowUnselect)=\"rowUnselect.emit($event.data)\"\n  >\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        @if (canUseRowReorder()) {\n          <col style=\"width: 3rem\" />\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              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"clear(dt)\"\n              title=\"Clear filters\"\n            ></button>\n          }\n\n          @if (hasExportExcel) {\n            <button\n              pButton\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"exportExcel()\"\n              title=\"Export to Excel\"\n            ></button>\n          }\n\n          @if (hasExportPDF) {\n            <button\n              pButton\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"exportPdf()\"\n              title=\"Export to PDF\"\n            ></button>\n          }\n        </div>\n\n        @if (hasSearchFilter) {\n          <div class=\"ml-auto\">\n            <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n              <p-inputIcon>\n                <i class=\"pi pi-search\"></i>\n              </p-inputIcon>\n\n              <input\n                pInputText\n                type=\"text\"\n                [(ngModel)]=\"searchValue\"\n                (input)=\"filterGlobal($event)\"\n                placeholder=\"Search keyword\"\n              />\n            </p-iconField>\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        @if (canUseRowReorder()) {\n          <th [style.width]=\"'3rem'\" [ngStyle]=\"getStaticCellStyle()\"></th>\n        }\n\n        @for (col of columns; track col) {\n          @if (!col.children) {\n            <th\n              [pSortableColumn]=\"col.code\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"[\n                getHeaderAlignClass(col),\n                col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n              ]\"\n              colspan=\"1\"\n            >\n              @if (isSortable && col.isSortable !== false) {\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngStyle]=\"getCellInnerStyle(col, '10px')\"\n                >\n                  <span [ngClass]=\"getHeaderTitleClass(col)\">\n                    {{ col.title }}\n                  </span>\n\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon [field]=\"col.code\" />\n\n                    @if (hasColumnFilter && col.isFilter !== false) {\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          type=\"text\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"false\"\n                          [showOperator]=\"false\"\n                          (onClear)=\"onComposedColumnClear(col)\"\n                        >\n                          <ng-template\n                            pTemplate=\"filter\"\n                            let-filter=\"filterCallback\"\n                          >\n                            @for (\n                              composedName of col.composedNames;\n                              track composedName\n                            ) {\n                              <div>\n                                @if (\n                                  getComposedFieldType(col, composedName) ===\n                                  TableTypeEnum.STRING\n                                ) {\n                                  <p-multiSelect\n                                    [options]=\"filters[composedName]?.options\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [ngModel]=\"\n                                      filters[composedName]?.value ?? []\n                                    \"\n                                    (ngModelChange)=\"\n                                      onComposedFilterValueChange(\n                                        col,\n                                        composedName,\n                                        $event\n                                      );\n                                      filter($event ?? [])\n                                    \"\n                                    [placeholder]=\"\n                                      filters[composedName]?.placeholder\n                                    \"\n                                    display=\"chip\"\n                                  >\n                                    <ng-template let-item pTemplate=\"item\">\n                                      <div class=\"custom-multiselect-item\">\n                                        @if (item.image) {\n                                          <img\n                                            [src]=\"item.image\"\n                                            alt=\"icon\"\n                                            class=\"filter-image\"\n                                          />\n                                        }\n\n                                        <span>{{ item.label }}</span>\n                                      </div>\n                                    </ng-template>\n                                  </p-multiSelect>\n                                }\n                              </div>\n                            }\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n\n                      @if (col.type !== TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          [type]=\"getColumnFilterType(col)\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [showOperator]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [matchMode]=\"\n                            col.type === TableTypeEnum.MULTISELECT\n                              ? 'in'\n                              : undefined\n                          \"\n                          (onClear)=\"onFilterClear(col.code!)\"\n                        >\n                          @if (\n                            col.type === TableTypeEnum.NUMBER ||\n                              col.type === TableTypeEnum.AMOUNT;\n                            as value\n                          ) {\n                            <ng-template pTemplate=\"filter\" let-value>\n                              <input\n                                pInputText\n                                type=\"text\"\n                                inputmode=\"decimal\"\n                                [ngModel]=\"\n                                  latestFilterValues[col.code!] ?? value\n                                \"\n                                (ngModelChange)=\"\n                                  onNumberFilterChange(col.code!, $event)\n                                \"\n                                placeholder=\"Enter a number\"\n                              />\n                            </ng-template>\n                          }\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"col.type === TableTypeEnum.DATE\"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-datepicker\n                              [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event)\n                              \"\n                              dateFormat=\"dd/mm/yy\"\n                              placeholder=\"Choose a date\"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"\n                              col.type === TableTypeEnum.MULTISELECT &&\n                              col.filterOptions &&\n                              col.filterOptions.length > 0\n                            \"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-multiSelect\n                              [options]=\"col.filterOptions\"\n                              optionLabel=\"label\"\n                              optionValue=\"value\"\n                              [ngModel]=\"\n                                latestFilterValues[col.code!] ?? value ?? []\n                              \"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event ?? [])\n                              \"\n                              display=\"chip\"\n                              placeholder=\"Choose option\"\n                              class=\"custom-multiselect\"\n                            ></p-multiSelect>\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                    }\n                  </div>\n                </div>\n              } @else {\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngStyle]=\"getCellInnerStyle(col, '10px')\"\n                >\n                  <span [ngClass]=\"getHeaderTitleClass(col)\">\n                    {{ col.title }}\n                  </span>\n\n                  @if (hasColumnFilter && col.isFilter !== false) {\n                    <p-columnFilter\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                      [showApplyButton]=\"true\"\n                      [showClearButton]=\"true\"\n                      [showMatchModes]=\"\n                        getColumnFilterType(col) !== 'multiSelect'\n                      \"\n                      [showOperator]=\"\n                        getColumnFilterType(col) !== 'multiSelect'\n                      \"\n                      [matchMode]=\"\n                        getColumnFilterType(col) === 'multiSelect'\n                          ? 'in'\n                          : undefined\n                      \"\n                      (onClear)=\"onFilterClear(col.code!)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-value\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-datepicker\n                          [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event)\n                          \"\n                          dateFormat=\"dd/mm/yy\"\n                        ></p-datepicker>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-value\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          optionLabel=\"label\"\n                          optionValue=\"value\"\n                          [ngModel]=\"\n                            latestFilterValues[col.code!] ?? value ?? []\n                          \"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event ?? [])\n                          \"\n                          display=\"chip\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  }\n                </div>\n              }\n            </th>\n          } @else {\n            <th\n              [attr.colspan]=\"col?.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          }\n        }\n      </tr>\n\n      @if (hasGroupedColumns) {\n        <tr>\n          @if (canUseRowReorder()) {\n            <th [style.width]=\"'3rem'\" [ngStyle]=\"getStaticCellStyle()\"></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                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngStyle]=\"getHeaderCellStyle(child)\"\n                ></th>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"p-datatable-emptymessage\">\n        <td\n          class=\"empty-message-cell\"\n          [attr.colspan]=\"columns.length + (canUseRowReorder() ? 1 : 0)\"\n        >\n          <div class=\"empty-message-wrapper\">\n            <div class=\"empty-message\">\n              <i class=\"pi pi-info-circle\"></i>\n              <p>No records available to display.</p>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template\n      pTemplate=\"body\"\n      let-data\n      let-editing=\"editing\"\n      let-ri=\"rowIndex\"\n    >\n      @if (!loading) {\n        <tr\n          [pEditableRow]=\"isEdit ? data : null\"\n          [pReorderableRow]=\"canUseRowReorder() ? ri : null\"\n          [pSelectableRow]=\"selectionMode ? data : null\"\n        >\n          @if (canUseRowReorder()) {\n            <td\n              [style.width]=\"'3rem'\"\n              [style.text-align]=\"'center'\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            >\n              <span\n                pReorderableRowHandle\n                style=\"cursor: move; display: inline-flex; align-items: center\"\n                title=\"D\u00E9placer la ligne\"\n              >\n                <i class=\"pi pi-bars\"></i>\n              </span>\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                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                            [options]=\"optionValues\"\n                          ></p-multiSelect>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          <div class=\"multi-select-container\">\n                            @for (\n                              rec of getMultiSelectValues(data[col.code!]);\n                              track rec\n                            ) {\n                              <p-tag [value]=\"rec\"></p-tag>\n                            }\n                          </div>\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      @if (isDatePicker(col.code)) {\n                        <p-cellEditor>\n                          <ng-template pTemplate=\"input\">\n                            <p-datepicker\n                              [inputId]=\"data[col.code!]\"\n                              [ngModel]=\"data[col.code!]\"\n                              (ngModelChange)=\"\n                                changeHandler(data.id, col.code, $event)\n                              \"\n                              [dateFormat]=\"'dd/mm/yy'\"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template pTemplate=\"output\">\n                            {{ data[col.code!] | customDate }}\n                          </ng-template>\n                        </p-cellEditor>\n                      } @else {\n                        <p-cellEditor>\n                          <ng-template pTemplate=\"input\">\n                            <input\n                              pInputText\n                              type=\"text\"\n                              [ngModel]=\"data[col.code!]\"\n                              (change)=\"onChange($event, data.id, col.code)\"\n                            />\n                          </ng-template>\n\n                          <ng-template pTemplate=\"output\">\n                            @if (col.type === TableTypeEnum.AMOUNT) {\n                              {{\n                                data[col.code!]\n                                  | customCurrency\n                                    : getCurrencySymbol(col)\n                                    : col.decimalPlaces\n                                    : col.thousandSeparator\n                                    : col.decimalSeparator\n                              }}\n                            } @else {\n                              {{ data[col.code!] }}\n                            }\n                          </ng-template>\n                        </p-cellEditor>\n                      }\n                    }\n                  </div>\n                </td>\n              } @else {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"[\n                    getDataAlignClass(col),\n                    col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n                  ]\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  @if (col.type === TableTypeEnum.ACTION) {\n                    <div\n                      class=\"action-buttons-container\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (isDelete) {\n                        <button\n                          pButton\n                          pRipple\n                          pTooltip=\"Supprimer\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          type=\"button\"\n                          icon=\"pi pi-trash\"\n                          (click)=\"Delete(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                      }\n\n                      @if (isEdit) {\n                        <div>\n                          @if (!editing) {\n                            <button\n                              pInitEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Modifier\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-pencil\"\n                              (click)=\"initEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n\n                          @if (editing) {\n                            <button\n                              pSaveEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Enregistrer\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-check\"\n                              (click)=\"saveEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n\n                          @if (editing) {\n                            <button\n                              pCancelEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Annuler\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-times\"\n                              (click)=\"cancelEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                        </div>\n                      }\n\n                      @for (act of customActions; track act) {\n                        @if (isActionVisible(act, data)) {\n                          <button\n                            pButton\n                            pRipple\n                            [pTooltip]=\"act.tooltip || ''\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            type=\"button\"\n                            class=\"p-button-rounded p-button-text\"\n                            [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                            [ngClass]=\"act.styleClass\"\n                            [disabled]=\"isActionDisabled(act, data)\"\n                            (click)=\"onCustomActionClick(act, data)\"\n                          ></button>\n                        }\n                      }\n                    </div>\n                  } @else {\n                    <div\n                      [ngClass]=\"getCellInnerAlignClass(col)\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <div class=\"composed-cell\">\n                          @for (\n                            composedName of col.composedNames;\n                            track composedName;\n                            let i = $index\n                          ) {\n                            @if (\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.IMAGE\n                            ) {\n                              <img\n                                [src]=\"data[col.code!]?.[composedName]\"\n                                alt=\"composed-img\"\n                                class=\"composed-image\"\n                                [ngStyle]=\"\n                                  getMergedComposedImageStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              />\n                            }\n\n                            @if (\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.STRING\n                            ) {\n                              <span\n                                class=\"composed-text\"\n                                [ngStyle]=\"\n                                  getMergedComposedTextStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              >\n                                {{ data[col.code!]?.[composedName] }}\n                              </span>\n                            }\n                          }\n                        </div>\n                      } @else {\n                        @if (col.type === TableTypeEnum.PROGRESS) {\n                          <div class=\"progress-cell\">\n                            <p-progressBar\n                              [value]=\"getProgressValue(col, data)\"\n                              [showValue]=\"false\"\n                              [ngClass]=\"\n                                'pt-progress-' + getProgressSeverity(col, data)\n                              \"\n                            ></p-progressBar>\n\n                            @if (isProgressShowValue(col)) {\n                              <span class=\"progress-cell-value\">\n                                {{ getProgressValue(col, data)\n                                }}{{ getProgressUnit(col) }}\n                              </span>\n                            }\n                          </div>\n                        } @else {\n                          @if (col.type === TableTypeEnum.TAG) {\n                            <p-tag\n                              [value]=\"getTagValue(col, data)\"\n                              [severity]=\"$any(getTagSeverity(col, data))\"\n                              [icon]=\"getTagIcon(col, data)\"\n                              [rounded]=\"isTagRounded(col)\"\n                            ></p-tag>\n                          } @else {\n                            @if (col.type === TableTypeEnum.AMOUNT) {\n                              {{\n                                data[col.code!]\n                                  | customCurrency\n                                    : getCurrencySymbol(col)\n                                    : col.decimalPlaces\n                                    : col.thousandSeparator\n                                    : col.decimalSeparator\n                              }}\n                            } @else {\n                              @if (col.type === TableTypeEnum.NUMBER) {\n                                {{\n                                  formatNumber(\n                                    data[col.code!],\n                                    col.decimalPlaces,\n                                    col.thousandSeparator,\n                                    col.decimalSeparator\n                                  )\n                                }}\n                              } @else {\n                                @if (\n                                  col.type === TableTypeEnum.DATE ||\n                                  col.type === TableTypeEnum.DATETIME\n                                ) {\n                                  @if (col.type === TableTypeEnum.DATE) {\n                                    {{\n                                      formatDateWithColumn(\n                                        parseAnyDate(data[col.code!]),\n                                        col\n                                      )\n                                    }}\n                                  }\n\n                                  @if (col.type === TableTypeEnum.DATETIME) {\n                                    {{\n                                      formatDateTimeWithColumn(\n                                        parseAnyDate(data[col.code!]),\n                                        col\n                                      )\n                                    }}\n                                  }\n                                } @else {\n                                  @if (\n                                    [\n                                      TableTypeEnum.STRING,\n                                      TableTypeEnum.MULTISELECT,\n                                    ].includes(col.type!)\n                                  ) {\n                                    {{ data[col.code!] }}\n                                  }\n                                }\n                              }\n                            }\n                          }\n                        }\n                      }\n                    </div>\n                  }\n                </td>\n              }\n            } @else {\n              @for (child of col.children; track child) {\n                <td\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngClass]=\"getDataAlignClass(child)\"\n                  [ngStyle]=\"getCellStyle(child, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(child)\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    @if (isEditable(child.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"child.code ? data[child.code] : null\"\n                            (change)=\"onChange($event, data.id, child.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ child.code ? data[child.code] : \"\" }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      @if (child.type === TableTypeEnum.TAG) {\n                        <p-tag\n                          [value]=\"getTagValue(child, data)\"\n                          [severity]=\"$any(getTagSeverity(child, data))\"\n                          [icon]=\"getTagIcon(child, data)\"\n                          [rounded]=\"isTagRounded(child)\"\n                        ></p-tag>\n                      } @else {\n                        {{ child.code ? data[child.code] : \"\" }}\n                      }\n                    }\n                  </div>\n                </td>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{flex:1}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-.8rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:block;width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{width:100%;height:100%;min-height:180px;display:flex;align-items:center;justify-content:center}.pt-advanced-prime-table .empty-message{text-align:center;color:#888;font-size:1.2rem}.pt-advanced-prime-table .empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}.pt-advanced-prime-table th{white-space:normal;word-wrap:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right{width:100%;display:flex;align-items:center}.pt-advanced-prime-table .cell-inner-left{justify-content:flex-start;text-align:left}.pt-advanced-prime-table .cell-inner-center{justify-content:center;text-align:center}.pt-advanced-prime-table .cell-inner-right{justify-content:flex-end;text-align:right}.pt-advanced-prime-table ::ng-deep .p-tag{font-size:.72rem;font-weight:800;padding:.2rem .55rem;line-height:1.2;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .p-tag .p-tag-icon{margin-right:.25rem}.pt-advanced-prime-table .progress-cell{width:100%;min-width:160px;display:flex;align-items:center;gap:.5rem}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1;width:100%;min-width:120px;height:.75rem!important;background:#e5e7eb!important;border-radius:999px;overflow:hidden}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar-value{display:block!important;height:100%!important;border-radius:999px}.pt-advanced-prime-table .progress-cell-value{min-width:38px;font-size:.72rem;font-weight:800;color:#334155;text-align:right}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{text-align:center!important;justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;padding:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container{width:100%;display:flex;justify-content:center!important;align-items:center!important;gap:.35rem}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{padding:.25rem!important;min-width:22px!important;height:22px!important}.pt-advanced-prime-table ::ng-deep .pt-progress-success .p-progressbar-value{background:#22c55e!important}.pt-advanced-prime-table ::ng-deep .pt-progress-warning .p-progressbar-value{background:#f59e0b!important}.pt-advanced-prime-table ::ng-deep .pt-progress-danger .p-progressbar-value{background:#ef4444!important}.pt-advanced-prime-table ::ng-deep .pt-progress-info .p-progressbar-value{background:#3b82f6!important}\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.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i3.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: i3.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i3.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: i3.SaveEditableRow, selector: "[pSaveEditableRow]" }, { kind: "directive", type: i3.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i3.ColumnFilter, selector: "p-columnFilter, p-column-filter, p-columnfilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "filterOn", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i7.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i8.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i9.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: i10.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i11.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i12.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i13.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }, { kind: "pipe", type: CustomCurrencyPipe, name: "customCurrency" }, { kind: "pipe", type: CustomDatePipe, name: "customDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTAdvancedPrimeTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-advanced-prime-table', standalone: false, template: "<div class=\"pt-advanced-prime-table table-container\">\n  <p-table\n    #dt\n    [value]=\"data\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"isLazy\"\n    [filterDelay]=\"0\"\n    [dataKey]=\"selectionDataKey || rowReorderIdField || 'id'\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onRowReorder)=\"onRowReorder($event)\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (selectionChange)=\"selectionChange.emit($event)\"\n    (onRowSelect)=\"rowSelect.emit($event.data)\"\n    (onRowUnselect)=\"rowUnselect.emit($event.data)\"\n    >\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n      @if (canUseRowReorder()) {\n        <col style=\"width: 3rem\" />\n      }\n      @for (col of columns; track col) {\n        <col\n          [style.width]=\"col.width || getHeaderWidth(col)\"\n          />\n      }\n    </colgroup>\n  </ng-template>\n\n  <ng-template pTemplate=\"caption\">\n    <div class=\"flex\">\n      <div>\n        <h3>Total: {{ totalRecords }}</h3>\n      </div>\n\n      <div>\n        @if (hasSearchFilter) {\n          <button\n            pButton\n            icon=\"pi pi-filter-slash\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"clear(dt)\"\n            title=\"Clear filters\"\n          ></button>\n        }\n\n        @if (hasExportExcel) {\n          <button\n            pButton\n            icon=\"pi pi-file-excel\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportExcel()\"\n            title=\"Export to Excel\"\n          ></button>\n        }\n\n        @if (hasExportPDF) {\n          <button\n            pButton\n            icon=\"pi pi-file-pdf\"\n            class=\"p-button-rounded p-button-text\"\n            (click)=\"exportPdf()\"\n            title=\"Export to PDF\"\n          ></button>\n        }\n      </div>\n\n      @if (hasSearchFilter) {\n        <div class=\"ml-auto\">\n          <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n            <p-inputIcon>\n              <i class=\"pi pi-search\"></i>\n            </p-inputIcon>\n            <input\n              pInputText\n              type=\"text\"\n              [(ngModel)]=\"searchValue\"\n              (input)=\"filterGlobal($event)\"\n              placeholder=\"Search keyword\"\n              />\n          </p-iconField>\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"header\">\n    <tr class=\"sticky-header\">\n      @if (canUseRowReorder()) {\n        <th style=\"width: 3rem\"></th>\n      }\n\n      @for (col of columns; track col) {\n        @if (!col.children) {\n          <th\n            [pSortableColumn]=\"col.code\"\n            [style.width]=\"col.width || getHeaderWidth(col)\"\n            [style.padding]=\"'0px'\"\n            [ngClass]=\"[\n              getHeaderAlignClass(col),\n              col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n            ]\"\n            colspan=\"1\"\n            >\n            @if (isSortable && col.isSortable !== false) {\n              <div\n                class=\"header-container d-flex align-items-center justify-content-between\"\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [style.padding]=\"'0px'\"\n                [style.margin]=\"'10px'\"\n                >\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n                <div\n                  class=\"icons d-flex align-items-center\"\n                  [style.width]=\"'77px'\"\n                  >\n                  <p-sortIcon [field]=\"col.code\" />\n                  @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 (composedName of col.composedNames; track composedName) {\n                            <div>\n                              @if (\n                                getComposedFieldType(col, composedName) ===\n                                TableTypeEnum.STRING\n                                ) {\n                                <p-multiSelect\n                                  [options]=\"filters[composedName]?.options\"\n                                  optionLabel=\"label\"\n                                  optionValue=\"value\"\n                                  [ngModel]=\"filters[composedName]?.value ?? []\"\n                              (ngModelChange)=\"\n                                onComposedFilterValueChange(\n                                  col,\n                                  composedName,\n                                  $event\n                                );\n                                filter($event ?? [])\n                              \"\n                                  [placeholder]=\"filters[composedName]?.placeholder\"\n                                  display=\"chip\"\n                                  >\n                                  <ng-template let-item pTemplate=\"item\">\n                                    <div class=\"custom-multiselect-item\">\n                                      @if (item.image) {\n                                        <img\n                                          [src]=\"item.image\"\n                                          alt=\"icon\"\n                                          class=\"filter-image\"\n                                          />\n                                      }\n                                      <span>{{ item.label }}</span>\n                                    </div>\n                                  </ng-template>\n                                </p-multiSelect>\n                              }\n                            </div>\n                          }\n                        </ng-template>\n                      </p-columnFilter>\n                    }\n                    @if (col.type !== TableTypeEnum.COMPOSED) {\n                      <p-columnFilter\n                        display=\"menu\"\n                        [field]=\"col.code\"\n                        [type]=\"getColumnFilterType(col)\"\n                        [showApplyButton]=\"true\"\n                        [showClearButton]=\"true\"\n                        [showMatchModes]=\"col.type !== TableTypeEnum.MULTISELECT\"\n                        [showOperator]=\"col.type !== TableTypeEnum.MULTISELECT\"\n                      [matchMode]=\"\n                        col.type === TableTypeEnum.MULTISELECT\n                          ? 'in'\n                          : undefined\n                      \"\n                        (onClear)=\"onFilterClear(col.code!)\"\n                        >\n                        @if (\n                          col.type === TableTypeEnum.NUMBER ||\n                          col.type === TableTypeEnum.AMOUNT\n                          ; as value) {\n                          <ng-template\n                            pTemplate=\"filter\"\n                            let-value\n                            >\n                            <input\n                              pInputText\n                              type=\"text\"\n                              inputmode=\"decimal\"\n                              [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                          (ngModelChange)=\"\n                            onNumberFilterChange(col.code!, $event)\n                          \"\n                              placeholder=\"Enter a number\"\n                              />\n                          </ng-template>\n                        }\n                        <ng-template\n                          pTemplate=\"filter\"\n                          *ngIf=\"col.type === TableTypeEnum.DATE\"\n                          let-filter=\"filterCallback\"\n                          let-value\n                          >\n                          <p-datepicker\n                            [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event)\n                          \"\n                            dateFormat=\"dd/mm/yy\"\n                            placeholder=\"Choose a date\"\n                          ></p-datepicker>\n                        </ng-template>\n                        <ng-template\n                          pTemplate=\"filter\"\n                        *ngIf=\"\n                          col.type === TableTypeEnum.MULTISELECT &&\n                          col.filterOptions &&\n                          col.filterOptions.length > 0\n                        \"\n                          let-filter=\"filterCallback\"\n                          let-value\n                          >\n                          <p-multiSelect\n                            [options]=\"col.filterOptions\"\n                            optionLabel=\"label\"\n                            optionValue=\"value\"\n                          [ngModel]=\"\n                            latestFilterValues[col.code!] ?? value ?? []\n                          \"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event ?? [])\n                          \"\n                            display=\"chip\"\n                            placeholder=\"Choose option\"\n                            class=\"custom-multiselect\"\n                          ></p-multiSelect>\n                        </ng-template>\n                      </p-columnFilter>\n                    }\n                  }\n                </div>\n              </div>\n            } @else {\n              <div\n                class=\"header-container d-flex align-items-center justify-content-between\"\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [style.padding]=\"'0px'\"\n                [style.margin]=\"'10px'\"\n                >\n                <span [ngClass]=\"getHeaderTitleClass(col)\">\n                  {{ col.title }}\n                </span>\n                @if (hasColumnFilter && col.isFilter !== false) {\n                  <p-columnFilter\n                    display=\"menu\"\n                    [field]=\"col.code\"\n                    [type]=\"getColumnFilterType(col)\"\n                    [currency]=\"getCurrencySymbol(col)\"\n                    [showApplyButton]=\"true\"\n                    [showClearButton]=\"true\"\n                    [showMatchModes]=\"\n                      getColumnFilterType(col) !== 'multiSelect'\n                    \"\n                    [showOperator]=\"getColumnFilterType(col) !== 'multiSelect'\"\n                    [matchMode]=\"\n                      getColumnFilterType(col) === 'multiSelect'\n                        ? 'in'\n                        : undefined\n                    \"\n                    (onClear)=\"onFilterClear(col.code!)\"\n                    >\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-filter=\"filterCallback\"\n                      let-value\n                      *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                      <p-datepicker\n                        [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                        (ngModelChange)=\"\n                          onFilterValueChange(col.code!, null, $event);\n                          filter($event)\n                        \"\n                        dateFormat=\"dd/mm/yy\"\n                      ></p-datepicker>\n                    </ng-template>\n                    <ng-template\n                      pTemplate=\"filter\"\n                      let-filter=\"filterCallback\"\n                      let-value\n                      *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                      <p-multiSelect\n                        [options]=\"col.filterOptions\"\n                        optionLabel=\"label\"\n                        optionValue=\"value\"\n                        [ngModel]=\"latestFilterValues[col.code!] ?? value ?? []\"\n                        (ngModelChange)=\"\n                          onFilterValueChange(col.code!, null, $event);\n                          filter($event ?? [])\n                        \"\n                        display=\"chip\"\n                        placeholder=\"Select\"\n                        class=\"custom-multiselect\"\n                      ></p-multiSelect>\n                    </ng-template>\n                  </p-columnFilter>\n                }\n              </div>\n            }\n          </th>\n        } @else {\n          <th\n            [attr.colspan]=\"col.children?.length\"\n            [style.width]=\"col.width || getHeaderWidth(col)\"\n            [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 style=\"width: 3rem\"></th>\n        }\n        @for (col of columns; track col) {\n          @if (col.children) {\n            @for (child of col.children; track child) {\n              <th\n                [style.width]=\"child.width || getHeaderWidth(child)\"\n                [style.padding]=\"'0px'\"\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\n    pTemplate=\"body\"\n    let-data\n    let-editing=\"editing\"\n    let-ri=\"rowIndex\"\n    >\n    @if (!loading) {\n      <tr\n        [pEditableRow]=\"isEdit ? data : null\"\n        [pReorderableRow]=\"canUseRowReorder() ? ri : null\"\n        [pSelectableRow]=\"selectionMode ? data : null\"\n        >\n        @if (canUseRowReorder()) {\n          <td style=\"width: 3rem; text-align: center\">\n            <span\n              pReorderableRowHandle\n              style=\"cursor: move; display: inline-flex; align-items: center\"\n              title=\"D\u00E9placer la ligne\"\n              >\n              <i class=\"pi pi-bars\"></i>\n            </span>\n          </td>\n        }\n        @for (col of columns; track col) {\n          @if (!col.children) {\n            @if (\n              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 [ngClass]=\"getCellInnerAlignClass(col)\">\n                  @if (isMultiSelect(col.code)) {\n                    <p-cellEditor>\n                      <ng-template pTemplate=\"input\">\n                        <p-multiSelect\n                          appendTo=\"body\"\n                          [ngModel]=\"data[col.code!]\"\n                          [style]=\"{ width: '100%' }\"\n                        (ngModelChange)=\"\n                          changeHandler(data.id, col.code, $event)\n                        \"\n                          [options]=\"optionValues\"\n                        ></p-multiSelect>\n                      </ng-template>\n                      <ng-template pTemplate=\"output\">\n                        <div class=\"multi-select-container\">\n                          @for (\n                            rec of getMultiSelectValues(data[col.code!])\n                            ; track\n                            rec) {\n                            <p-tag [value]=\"rec\"></p-tag>\n                          }\n                        </div>\n                      </ng-template>\n                    </p-cellEditor>\n                  } @else {\n                    @if (isDatePicker(col.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <p-datepicker\n                            [inputId]=\"data[col.code!]\"\n                            [ngModel]=\"data[col.code!]\"\n                          (ngModelChange)=\"\n                            changeHandler(data.id, col.code, $event)\n                          \"\n                            [dateFormat]=\"'dd/mm/yy'\"\n                          ></p-datepicker>\n                        </ng-template>\n                        <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                        <ng-template pTemplate=\"output\">\n                          @if (\n                            col.type === TableTypeEnum.AMOUNT) {\n                            {{\n                            data[col.code!]\n                            | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                            }}\n                          } @else {\n                            {{ data[col.code!] }}\n                          }\n                        </ng-template>\n                      </p-cellEditor>\n                    }\n                  }\n                </div>\n              </td>\n            } @else {\n              <td\n                [style.width]=\"col.width || getHeaderWidth(col)\"\n                [ngClass]=\"[\n                  getDataAlignClass(col),\n                  col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n                ]\"\n                [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                @if (col.type === TableTypeEnum.ACTION) {\n                  <div class=\"action-buttons-container\">\n                    @if (isDelete) {\n                      <button\n                        pButton\n                        pRipple\n                        pTooltip=\"Supprimer\"\n                        tooltipPosition=\"top\"\n                        appendTo=\"body\"\n                        type=\"button\"\n                        icon=\"pi pi-trash\"\n                        (click)=\"Delete(data)\"\n                        class=\"p-button-rounded p-button-text\"\n                      ></button>\n                    }\n                    @if (isEdit) {\n                      <div>\n                        @if (!editing) {\n                          <button\n                            pInitEditableRow\n                            pButton\n                            pRipple\n                            pTooltip=\"Modifier\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            type=\"button\"\n                            icon=\"pi pi-pencil\"\n                            (click)=\"initEditableRow(data)\"\n                            class=\"p-button-rounded p-button-text\"\n                          ></button>\n                        }\n                        @if (editing) {\n                          <button\n                            pSaveEditableRow\n                            pButton\n                            pRipple\n                            pTooltip=\"Enregistrer\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            type=\"button\"\n                            icon=\"pi pi-check\"\n                            (click)=\"saveEditableRow(data)\"\n                            class=\"p-button-rounded p-button-text\"\n                          ></button>\n                        }\n                        @if (editing) {\n                          <button\n                            pCancelEditableRow\n                            pButton\n                            pRipple\n                            pTooltip=\"Annuler\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            type=\"button\"\n                            icon=\"pi pi-times\"\n                            (click)=\"cancelEditableRow(data)\"\n                            class=\"p-button-rounded p-button-text\"\n                          ></button>\n                        }\n                      </div>\n                    }\n                    @for (act of customActions; track act) {\n                      @if (isActionVisible(act, data)) {\n                        <button\n                          pButton\n                          pRipple\n                          [pTooltip]=\"act.tooltip || ''\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          type=\"button\"\n                          class=\"p-button-rounded p-button-text\"\n                          [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                          [ngClass]=\"act.styleClass\"\n                          [disabled]=\"isActionDisabled(act, data)\"\n                          (click)=\"onCustomActionClick(act, data)\"\n                        ></button>\n                      }\n                    }\n                  </div>\n                } @else {\n                  <div [ngClass]=\"getCellInnerAlignClass(col)\">\n                    @if (\n                      col.type === TableTypeEnum.COMPOSED) {\n                      <div class=\"composed-cell\">\n                        @for (\n                          composedName of col.composedNames; track\n                          composedName; let i = $index) {\n                          @if (\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.IMAGE\n                            ) {\n                            <img\n                              [src]=\"data[col.code!]?.[composedName]\"\n                              alt=\"composed-img\"\n                              class=\"composed-image\"\n                              [ngStyle]=\"\n                                getMergedComposedImageStyle(\n                                  col,\n                                  composedName,\n                                  data\n                                )\n                              \"\n                              />\n                          }\n                          @if (\n                            col.composedTypes &&\n                            col.composedTypes[i] === TableTypeEnum.STRING\n                            ) {\n                            <span\n                              class=\"composed-text\"\n                              [ngStyle]=\"\n                                getMergedComposedTextStyle(\n                                  col,\n                                  composedName,\n                                  data\n                                )\n                              \"\n                              >\n                              {{ data[col.code!]?.[composedName] }}\n                            </span>\n                          }\n                        }\n                      </div>\n                    } @else {\n                      @if (\n                        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                          @if (isProgressShowValue(col)) {\n                            <span\n                              class=\"progress-cell-value\"\n                              >\n                              {{ getProgressValue(col, data)\n                              }}{{ getProgressUnit(col) }}\n                            </span>\n                          }\n                        </div>\n                      } @else {\n                        @if (col.type === TableTypeEnum.TAG) {\n                          <p-tag\n                            [value]=\"getTagValue(col, data)\"\n                            [severity]=\"$any(getTagSeverity(col, data))\"\n                            [icon]=\"getTagIcon(col, data)\"\n                            [rounded]=\"isTagRounded(col)\"\n                          ></p-tag>\n                        } @else {\n                          @if (\n                            col.type === TableTypeEnum.AMOUNT) {\n                            {{\n                            data[col.code!]\n                            | customCurrency\n                            : getCurrencySymbol(col)\n                            : col.decimalPlaces\n                            : col.thousandSeparator\n                            : col.decimalSeparator\n                            }}\n                          } @else {\n                            @if (\n                              col.type === TableTypeEnum.NUMBER) {\n                              {{\n                              formatNumber(\n                              data[col.code!],\n                              col.decimalPlaces,\n                              col.thousandSeparator,\n                              col.decimalSeparator\n                              )\n                              }}\n                            } @else {\n                              @if (\n                                col.type === TableTypeEnum.DATE ||\n                                col.type === TableTypeEnum.DATETIME) {\n                                @if (col.type === TableTypeEnum.DATE) {\n                                  {{\n                                  formatDateWithColumn(\n                                  parseAnyDate(data[col.code!]),\n                                  col\n                                  )\n                                  }}\n                                }\n                                @if (col.type === TableTypeEnum.DATETIME) {\n                                  {{\n                                  formatDateTimeWithColumn(\n                                  parseAnyDate(data[col.code!]),\n                                  col\n                                  )\n                                  }}\n                                }\n                              } @else {\n                                @if (\n                                  [\n                                  TableTypeEnum.STRING,\n                                  TableTypeEnum.MULTISELECT,\n                                  ].includes(col.type!)\n                                  ) {\n                                  {{ data[col.code!] }}\n                                }\n                              }\n                            }\n                          }\n                        }\n                      }\n                    }\n                  </div>\n                }\n              </td>\n            }\n          } @else {\n            @for (child of col.children; track child) {\n              <td\n                [style.width]=\"child.width || getHeaderWidth(child)\"\n                [ngClass]=\"getDataAlignClass(child)\"\n                [ngStyle]=\"getCellStyle(child, data)\"\n                >\n                <div [ngClass]=\"getCellInnerAlignClass(child)\">\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                      <ng-template pTemplate=\"output\">\n                        {{ child.code ? data[child.code] : \"\" }}\n                      </ng-template>\n                    </p-cellEditor>\n                  } @else {\n                    @if (\n                      child.type === TableTypeEnum.TAG) {\n                      <p-tag\n                        [value]=\"getTagValue(child, data)\"\n                        [severity]=\"$any(getTagSeverity(child, data))\"\n                        [icon]=\"getTagIcon(child, data)\"\n                        [rounded]=\"isTagRounded(child)\"\n                      ></p-tag>\n                    } @else {\n                      {{ child.code ? data[child.code] : \"\" }}\n                    }\n                  }\n                </div>\n              </td>\n            }\n          }\n        }\n      </tr>\n    }\n  </ng-template>\n</p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{flex:1}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-.8rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:block;width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{width:100%;height:100%;min-height:180px;display:flex;align-items:center;justify-content:center}.pt-advanced-prime-table .empty-message{text-align:center;color:#888;font-size:1.2rem}.pt-advanced-prime-table .empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}.pt-advanced-prime-table th{white-space:normal;word-wrap:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right{width:100%;display:flex;align-items:center}.pt-advanced-prime-table .cell-inner-left{justify-content:flex-start;text-align:left}.pt-advanced-prime-table .cell-inner-center{justify-content:center;text-align:center}.pt-advanced-prime-table .cell-inner-right{justify-content:flex-end;text-align:right}.pt-advanced-prime-table ::ng-deep .p-tag{font-size:.72rem;font-weight:800;padding:.2rem .55rem;line-height:1.2;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .p-tag .p-tag-icon{margin-right:.25rem}.pt-advanced-prime-table .progress-cell{width:100%;min-width:160px;display:flex;align-items:center;gap:.5rem}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1;width:100%;min-width:120px;height:.75rem!important;background:#e5e7eb!important;border-radius:999px;overflow:hidden}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar-value{display:block!important;height:100%!important;border-radius:999px}.pt-advanced-prime-table .progress-cell-value{min-width:38px;font-size:.72rem;font-weight:800;color:#334155;text-align:right}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{text-align:center!important;justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;padding:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container{width:100%;display:flex;justify-content:center!important;align-items:center!important;gap:.35rem}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{padding:.25rem!important;min-width:22px!important;height:22px!important}.pt-advanced-prime-table ::ng-deep .pt-progress-success .p-progressbar-value{background:#22c55e!important}.pt-advanced-prime-table ::ng-deep .pt-progress-warning .p-progressbar-value{background:#f59e0b!important}.pt-advanced-prime-table ::ng-deep .pt-progress-danger .p-progressbar-value{background:#ef4444!important}.pt-advanced-prime-table ::ng-deep .pt-progress-info .p-progressbar-value{background:#3b82f6!important}\n"] }]
+            args: [{ selector: 'pt-advanced-prime-table', standalone: false, template: "<div class=\"pt-advanced-prime-table table-container\">\n  <p-table\n    #dt\n    [value]=\"data\"\n    [loading]=\"loading\"\n    [rows]=\"rows\"\n    [paginator]=\"isPaginated\"\n    [globalFilterFields]=\"globalFilterFields\"\n    [rowsPerPageOptions]=\"rowsPerPage\"\n    [totalRecords]=\"totalRecords\"\n    [lazy]=\"isLazy\"\n    [filterDelay]=\"0\"\n    [dataKey]=\"selectionDataKey || rowReorderIdField || 'id'\"\n    styleClass=\"p-datatable-gridlines p-datatable-striped\"\n    [scrollable]=\"true\"\n    [scrollHeight]=\"maxHeight !== null ? maxHeight : undefined\"\n    (onRowReorder)=\"onRowReorder($event)\"\n    (onPage)=\"changePage($event)\"\n    (onSort)=\"sortColumn($event)\"\n    (onFilter)=\"filterColumn($event)\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (selectionChange)=\"selectionChange.emit($event)\"\n    (onRowSelect)=\"rowSelect.emit($event.data)\"\n    (onRowUnselect)=\"rowUnselect.emit($event.data)\"\n  >\n    <ng-template pTemplate=\"colgroup\" let-columns>\n      <colgroup>\n        @if (canUseRowReorder()) {\n          <col style=\"width: 3rem\" />\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              icon=\"pi pi-filter-slash\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"clear(dt)\"\n              title=\"Clear filters\"\n            ></button>\n          }\n\n          @if (hasExportExcel) {\n            <button\n              pButton\n              icon=\"pi pi-file-excel\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"exportExcel()\"\n              title=\"Export to Excel\"\n            ></button>\n          }\n\n          @if (hasExportPDF) {\n            <button\n              pButton\n              icon=\"pi pi-file-pdf\"\n              class=\"p-button-rounded p-button-text\"\n              (click)=\"exportPdf()\"\n              title=\"Export to PDF\"\n            ></button>\n          }\n        </div>\n\n        @if (hasSearchFilter) {\n          <div class=\"ml-auto\">\n            <p-iconField iconPosition=\"left\" class=\"ml-auto\">\n              <p-inputIcon>\n                <i class=\"pi pi-search\"></i>\n              </p-inputIcon>\n\n              <input\n                pInputText\n                type=\"text\"\n                [(ngModel)]=\"searchValue\"\n                (input)=\"filterGlobal($event)\"\n                placeholder=\"Search keyword\"\n              />\n            </p-iconField>\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <ng-template pTemplate=\"header\">\n      <tr class=\"sticky-header\">\n        @if (canUseRowReorder()) {\n          <th [style.width]=\"'3rem'\" [ngStyle]=\"getStaticCellStyle()\"></th>\n        }\n\n        @for (col of columns; track col) {\n          @if (!col.children) {\n            <th\n              [pSortableColumn]=\"col.code\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"[\n                getHeaderAlignClass(col),\n                col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n              ]\"\n              colspan=\"1\"\n            >\n              @if (isSortable && col.isSortable !== false) {\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngStyle]=\"getCellInnerStyle(col, '10px')\"\n                >\n                  <span [ngClass]=\"getHeaderTitleClass(col)\">\n                    {{ col.title }}\n                  </span>\n\n                  <div\n                    class=\"icons d-flex align-items-center\"\n                    [style.width]=\"'77px'\"\n                  >\n                    <p-sortIcon [field]=\"col.code\" />\n\n                    @if (hasColumnFilter && col.isFilter !== false) {\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          type=\"text\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"false\"\n                          [showOperator]=\"false\"\n                          (onClear)=\"onComposedColumnClear(col)\"\n                        >\n                          <ng-template\n                            pTemplate=\"filter\"\n                            let-filter=\"filterCallback\"\n                          >\n                            @for (\n                              composedName of col.composedNames;\n                              track composedName\n                            ) {\n                              <div>\n                                @if (\n                                  getComposedFieldType(col, composedName) ===\n                                  TableTypeEnum.STRING\n                                ) {\n                                  <p-multiSelect\n                                    [options]=\"filters[composedName]?.options\"\n                                    optionLabel=\"label\"\n                                    optionValue=\"value\"\n                                    [ngModel]=\"\n                                      filters[composedName]?.value ?? []\n                                    \"\n                                    (ngModelChange)=\"\n                                      onComposedFilterValueChange(\n                                        col,\n                                        composedName,\n                                        $event\n                                      );\n                                      filter($event ?? [])\n                                    \"\n                                    [placeholder]=\"\n                                      filters[composedName]?.placeholder\n                                    \"\n                                    display=\"chip\"\n                                  >\n                                    <ng-template let-item pTemplate=\"item\">\n                                      <div class=\"custom-multiselect-item\">\n                                        @if (item.image) {\n                                          <img\n                                            [src]=\"item.image\"\n                                            alt=\"icon\"\n                                            class=\"filter-image\"\n                                          />\n                                        }\n\n                                        <span>{{ item.label }}</span>\n                                      </div>\n                                    </ng-template>\n                                  </p-multiSelect>\n                                }\n                              </div>\n                            }\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n\n                      @if (col.type !== TableTypeEnum.COMPOSED) {\n                        <p-columnFilter\n                          display=\"menu\"\n                          [field]=\"col.code\"\n                          [type]=\"getColumnFilterType(col)\"\n                          [showApplyButton]=\"true\"\n                          [showClearButton]=\"true\"\n                          [showMatchModes]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [showOperator]=\"\n                            col.type !== TableTypeEnum.MULTISELECT\n                          \"\n                          [matchMode]=\"\n                            col.type === TableTypeEnum.MULTISELECT\n                              ? 'in'\n                              : undefined\n                          \"\n                          (onClear)=\"onFilterClear(col.code!)\"\n                        >\n                          @if (\n                            col.type === TableTypeEnum.NUMBER ||\n                              col.type === TableTypeEnum.AMOUNT;\n                            as value\n                          ) {\n                            <ng-template pTemplate=\"filter\" let-value>\n                              <input\n                                pInputText\n                                type=\"text\"\n                                inputmode=\"decimal\"\n                                [ngModel]=\"\n                                  latestFilterValues[col.code!] ?? value\n                                \"\n                                (ngModelChange)=\"\n                                  onNumberFilterChange(col.code!, $event)\n                                \"\n                                placeholder=\"Enter a number\"\n                              />\n                            </ng-template>\n                          }\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"col.type === TableTypeEnum.DATE\"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-datepicker\n                              [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event)\n                              \"\n                              dateFormat=\"dd/mm/yy\"\n                              placeholder=\"Choose a date\"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template\n                            pTemplate=\"filter\"\n                            *ngIf=\"\n                              col.type === TableTypeEnum.MULTISELECT &&\n                              col.filterOptions &&\n                              col.filterOptions.length > 0\n                            \"\n                            let-filter=\"filterCallback\"\n                            let-value\n                          >\n                            <p-multiSelect\n                              [options]=\"col.filterOptions\"\n                              optionLabel=\"label\"\n                              optionValue=\"value\"\n                              [ngModel]=\"\n                                latestFilterValues[col.code!] ?? value ?? []\n                              \"\n                              (ngModelChange)=\"\n                                onFilterValueChange(col.code!, null, $event);\n                                filter($event ?? [])\n                              \"\n                              display=\"chip\"\n                              placeholder=\"Choose option\"\n                              class=\"custom-multiselect\"\n                            ></p-multiSelect>\n                          </ng-template>\n                        </p-columnFilter>\n                      }\n                    }\n                  </div>\n                </div>\n              } @else {\n                <div\n                  class=\"header-container d-flex align-items-center justify-content-between\"\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngStyle]=\"getCellInnerStyle(col, '10px')\"\n                >\n                  <span [ngClass]=\"getHeaderTitleClass(col)\">\n                    {{ col.title }}\n                  </span>\n\n                  @if (hasColumnFilter && col.isFilter !== false) {\n                    <p-columnFilter\n                      display=\"menu\"\n                      [field]=\"col.code\"\n                      [type]=\"getColumnFilterType(col)\"\n                      [currency]=\"getCurrencySymbol(col)\"\n                      [showApplyButton]=\"true\"\n                      [showClearButton]=\"true\"\n                      [showMatchModes]=\"\n                        getColumnFilterType(col) !== 'multiSelect'\n                      \"\n                      [showOperator]=\"\n                        getColumnFilterType(col) !== 'multiSelect'\n                      \"\n                      [matchMode]=\"\n                        getColumnFilterType(col) === 'multiSelect'\n                          ? 'in'\n                          : undefined\n                      \"\n                      (onClear)=\"onFilterClear(col.code!)\"\n                    >\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-value\n                        *ngIf=\"getColumnFilterType(col) === 'date'\"\n                      >\n                        <p-datepicker\n                          [ngModel]=\"latestFilterValues[col.code!] ?? value\"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event)\n                          \"\n                          dateFormat=\"dd/mm/yy\"\n                        ></p-datepicker>\n                      </ng-template>\n\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-filter=\"filterCallback\"\n                        let-value\n                        *ngIf=\"getColumnFilterType(col) === 'multiSelect'\"\n                      >\n                        <p-multiSelect\n                          [options]=\"col.filterOptions\"\n                          optionLabel=\"label\"\n                          optionValue=\"value\"\n                          [ngModel]=\"\n                            latestFilterValues[col.code!] ?? value ?? []\n                          \"\n                          (ngModelChange)=\"\n                            onFilterValueChange(col.code!, null, $event);\n                            filter($event ?? [])\n                          \"\n                          display=\"chip\"\n                          placeholder=\"Select\"\n                          class=\"custom-multiselect\"\n                        ></p-multiSelect>\n                      </ng-template>\n                    </p-columnFilter>\n                  }\n                </div>\n              }\n            </th>\n          } @else {\n            <th\n              [attr.colspan]=\"col?.children?.length\"\n              [style.width]=\"col.width || getHeaderWidth(col)\"\n              [ngStyle]=\"getHeaderCellStyle(col)\"\n              [ngClass]=\"getHeaderAlignClass(col)\"\n            >\n              <span>{{ col.title }}</span>\n            </th>\n          }\n        }\n      </tr>\n\n      @if (hasGroupedColumns) {\n        <tr>\n          @if (canUseRowReorder()) {\n            <th [style.width]=\"'3rem'\" [ngStyle]=\"getStaticCellStyle()\"></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                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngStyle]=\"getHeaderCellStyle(child)\"\n                ></th>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n\n    <ng-template pTemplate=\"emptymessage\">\n      <tr class=\"p-datatable-emptymessage\">\n        <td\n          class=\"empty-message-cell\"\n          [attr.colspan]=\"columns.length + (canUseRowReorder() ? 1 : 0)\"\n        >\n          <div class=\"empty-message-wrapper\">\n            <div class=\"empty-message\">\n              <i class=\"pi pi-info-circle\"></i>\n              <p>No records available to display.</p>\n            </div>\n          </div>\n        </td>\n      </tr>\n    </ng-template>\n\n    <ng-template\n      pTemplate=\"body\"\n      let-data\n      let-editing=\"editing\"\n      let-ri=\"rowIndex\"\n    >\n      @if (!loading) {\n        <tr\n          [pEditableRow]=\"isEdit ? data : null\"\n          [pReorderableRow]=\"canUseRowReorder() ? ri : null\"\n          [pSelectableRow]=\"selectionMode ? data : null\"\n        >\n          @if (canUseRowReorder()) {\n            <td\n              [style.width]=\"'3rem'\"\n              [style.text-align]=\"'center'\"\n              [ngStyle]=\"getStaticCellStyle()\"\n            >\n              <span\n                pReorderableRowHandle\n                style=\"cursor: move; display: inline-flex; align-items: center\"\n                title=\"D\u00E9placer la ligne\"\n              >\n                <i class=\"pi pi-bars\"></i>\n              </span>\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                            (ngModelChange)=\"\n                              changeHandler(data.id, col.code, $event)\n                            \"\n                            [options]=\"optionValues\"\n                          ></p-multiSelect>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          <div class=\"multi-select-container\">\n                            @for (\n                              rec of getMultiSelectValues(data[col.code!]);\n                              track rec\n                            ) {\n                              <p-tag [value]=\"rec\"></p-tag>\n                            }\n                          </div>\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      @if (isDatePicker(col.code)) {\n                        <p-cellEditor>\n                          <ng-template pTemplate=\"input\">\n                            <p-datepicker\n                              [inputId]=\"data[col.code!]\"\n                              [ngModel]=\"data[col.code!]\"\n                              (ngModelChange)=\"\n                                changeHandler(data.id, col.code, $event)\n                              \"\n                              [dateFormat]=\"'dd/mm/yy'\"\n                            ></p-datepicker>\n                          </ng-template>\n\n                          <ng-template pTemplate=\"output\">\n                            {{ data[col.code!] | customDate }}\n                          </ng-template>\n                        </p-cellEditor>\n                      } @else {\n                        <p-cellEditor>\n                          <ng-template pTemplate=\"input\">\n                            <input\n                              pInputText\n                              type=\"text\"\n                              [ngModel]=\"data[col.code!]\"\n                              (change)=\"onChange($event, data.id, col.code)\"\n                            />\n                          </ng-template>\n\n                          <ng-template pTemplate=\"output\">\n                            @if (col.type === TableTypeEnum.AMOUNT) {\n                              {{\n                                data[col.code!]\n                                  | customCurrency\n                                    : getCurrencySymbol(col)\n                                    : col.decimalPlaces\n                                    : col.thousandSeparator\n                                    : col.decimalSeparator\n                              }}\n                            } @else {\n                              {{ data[col.code!] }}\n                            }\n                          </ng-template>\n                        </p-cellEditor>\n                      }\n                    }\n                  </div>\n                </td>\n              } @else {\n                <td\n                  [style.width]=\"col.width || getHeaderWidth(col)\"\n                  [ngClass]=\"[\n                    getDataAlignClass(col),\n                    col.type === TableTypeEnum.ACTION ? 'action-column' : '',\n                  ]\"\n                  [ngStyle]=\"getCellStyle(col, data)\"\n                >\n                  @if (col.type === TableTypeEnum.ACTION) {\n                    <div\n                      class=\"action-buttons-container\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (isDelete) {\n                        <button\n                          pButton\n                          pRipple\n                          pTooltip=\"Supprimer\"\n                          tooltipPosition=\"top\"\n                          appendTo=\"body\"\n                          type=\"button\"\n                          icon=\"pi pi-trash\"\n                          (click)=\"Delete(data)\"\n                          class=\"p-button-rounded p-button-text\"\n                        ></button>\n                      }\n\n                      @if (isEdit) {\n                        <div>\n                          @if (!editing) {\n                            <button\n                              pInitEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Modifier\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-pencil\"\n                              (click)=\"initEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n\n                          @if (editing) {\n                            <button\n                              pSaveEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Enregistrer\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-check\"\n                              (click)=\"saveEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n\n                          @if (editing) {\n                            <button\n                              pCancelEditableRow\n                              pButton\n                              pRipple\n                              pTooltip=\"Annuler\"\n                              tooltipPosition=\"top\"\n                              appendTo=\"body\"\n                              type=\"button\"\n                              icon=\"pi pi-times\"\n                              (click)=\"cancelEditableRow(data)\"\n                              class=\"p-button-rounded p-button-text\"\n                            ></button>\n                          }\n                        </div>\n                      }\n\n                      @for (act of customActions; track act) {\n                        @if (isActionVisible(act, data)) {\n                          <button\n                            pButton\n                            pRipple\n                            [pTooltip]=\"act.tooltip || ''\"\n                            tooltipPosition=\"top\"\n                            appendTo=\"body\"\n                            type=\"button\"\n                            class=\"p-button-rounded p-button-text\"\n                            [icon]=\"act.icon || 'pi pi-ellipsis-h'\"\n                            [ngClass]=\"act.styleClass\"\n                            [disabled]=\"isActionDisabled(act, data)\"\n                            (click)=\"onCustomActionClick(act, data)\"\n                          ></button>\n                        }\n                      }\n                    </div>\n                  } @else {\n                    <div\n                      [ngClass]=\"getCellInnerAlignClass(col)\"\n                      [ngStyle]=\"getCellInnerStyle(col)\"\n                    >\n                      @if (col.type === TableTypeEnum.COMPOSED) {\n                        <div class=\"composed-cell\">\n                          @for (\n                            composedName of col.composedNames;\n                            track composedName;\n                            let i = $index\n                          ) {\n                            @if (\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.IMAGE\n                            ) {\n                              <img\n                                [src]=\"data[col.code!]?.[composedName]\"\n                                alt=\"composed-img\"\n                                class=\"composed-image\"\n                                [ngStyle]=\"\n                                  getMergedComposedImageStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              />\n                            }\n\n                            @if (\n                              col.composedTypes &&\n                              col.composedTypes[i] === TableTypeEnum.STRING\n                            ) {\n                              <span\n                                class=\"composed-text\"\n                                [ngStyle]=\"\n                                  getMergedComposedTextStyle(\n                                    col,\n                                    composedName,\n                                    data\n                                  )\n                                \"\n                              >\n                                {{ data[col.code!]?.[composedName] }}\n                              </span>\n                            }\n                          }\n                        </div>\n                      } @else {\n                        @if (col.type === TableTypeEnum.PROGRESS) {\n                          <div class=\"progress-cell\">\n                            <p-progressBar\n                              [value]=\"getProgressValue(col, data)\"\n                              [showValue]=\"false\"\n                              [ngClass]=\"\n                                'pt-progress-' + getProgressSeverity(col, data)\n                              \"\n                            ></p-progressBar>\n\n                            @if (isProgressShowValue(col)) {\n                              <span class=\"progress-cell-value\">\n                                {{ getProgressValue(col, data)\n                                }}{{ getProgressUnit(col) }}\n                              </span>\n                            }\n                          </div>\n                        } @else {\n                          @if (col.type === TableTypeEnum.TAG) {\n                            <p-tag\n                              [value]=\"getTagValue(col, data)\"\n                              [severity]=\"$any(getTagSeverity(col, data))\"\n                              [icon]=\"getTagIcon(col, data)\"\n                              [rounded]=\"isTagRounded(col)\"\n                            ></p-tag>\n                          } @else {\n                            @if (col.type === TableTypeEnum.AMOUNT) {\n                              {{\n                                data[col.code!]\n                                  | customCurrency\n                                    : getCurrencySymbol(col)\n                                    : col.decimalPlaces\n                                    : col.thousandSeparator\n                                    : col.decimalSeparator\n                              }}\n                            } @else {\n                              @if (col.type === TableTypeEnum.NUMBER) {\n                                {{\n                                  formatNumber(\n                                    data[col.code!],\n                                    col.decimalPlaces,\n                                    col.thousandSeparator,\n                                    col.decimalSeparator\n                                  )\n                                }}\n                              } @else {\n                                @if (\n                                  col.type === TableTypeEnum.DATE ||\n                                  col.type === TableTypeEnum.DATETIME\n                                ) {\n                                  @if (col.type === TableTypeEnum.DATE) {\n                                    {{\n                                      formatDateWithColumn(\n                                        parseAnyDate(data[col.code!]),\n                                        col\n                                      )\n                                    }}\n                                  }\n\n                                  @if (col.type === TableTypeEnum.DATETIME) {\n                                    {{\n                                      formatDateTimeWithColumn(\n                                        parseAnyDate(data[col.code!]),\n                                        col\n                                      )\n                                    }}\n                                  }\n                                } @else {\n                                  @if (\n                                    [\n                                      TableTypeEnum.STRING,\n                                      TableTypeEnum.MULTISELECT,\n                                    ].includes(col.type!)\n                                  ) {\n                                    {{ data[col.code!] }}\n                                  }\n                                }\n                              }\n                            }\n                          }\n                        }\n                      }\n                    </div>\n                  }\n                </td>\n              }\n            } @else {\n              @for (child of col.children; track child) {\n                <td\n                  [style.width]=\"child.width || getHeaderWidth(child)\"\n                  [ngClass]=\"getDataAlignClass(child)\"\n                  [ngStyle]=\"getCellStyle(child, data)\"\n                >\n                  <div\n                    [ngClass]=\"getCellInnerAlignClass(child)\"\n                    [ngStyle]=\"getCellInnerStyle(child)\"\n                  >\n                    @if (isEditable(child.code)) {\n                      <p-cellEditor>\n                        <ng-template pTemplate=\"input\">\n                          <input\n                            pInputText\n                            type=\"text\"\n                            [ngModel]=\"child.code ? data[child.code] : null\"\n                            (change)=\"onChange($event, data.id, child.code)\"\n                          />\n                        </ng-template>\n\n                        <ng-template pTemplate=\"output\">\n                          {{ child.code ? data[child.code] : \"\" }}\n                        </ng-template>\n                      </p-cellEditor>\n                    } @else {\n                      @if (child.type === TableTypeEnum.TAG) {\n                        <p-tag\n                          [value]=\"getTagValue(child, data)\"\n                          [severity]=\"$any(getTagSeverity(child, data))\"\n                          [icon]=\"getTagIcon(child, data)\"\n                          [rounded]=\"isTagRounded(child)\"\n                        ></p-tag>\n                      } @else {\n                        {{ child.code ? data[child.code] : \"\" }}\n                      }\n                    }\n                  </div>\n                </td>\n              }\n            }\n          }\n        </tr>\n      }\n    </ng-template>\n  </p-table>\n</div>\n", styles: [".pt-advanced-prime-table .bread-crumb{margin-bottom:15px}.pt-advanced-prime-table .date{width:100%;height:5rem;display:grid;justify-items:start;align-items:center}.pt-advanced-prime-table .filter-container{width:100%;display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .settings{display:flex;gap:1rem}.pt-advanced-prime-table .multi-select-container{display:flex;align-items:center;gap:.3rem}.pt-advanced-prime-table ::ng-deep p-table{min-width:50rem}.pt-advanced-prime-table ::ng-deep .custom-multiselect .p-hidden-accessible input{display:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column.p-highlight:hover{background:none}.pt-advanced-prime-table ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}.pt-advanced-prime-table ::ng-deep .header-container{display:flex;justify-content:space-between;align-items:center;width:100%}.pt-advanced-prime-table ::ng-deep .header-title-left,.pt-advanced-prime-table ::ng-deep .header-title-center,.pt-advanced-prime-table ::ng-deep .header-title-right{flex:1}.pt-advanced-prime-table ::ng-deep .header-title-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-title-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-title-right{text-align:right}.pt-advanced-prime-table ::ng-deep .header-align-left{text-align:left}.pt-advanced-prime-table ::ng-deep .header-align-center{text-align:center}.pt-advanced-prime-table ::ng-deep .header-align-right{text-align:right}.pt-advanced-prime-table ::ng-deep p-columnfilter.p-element.ng-star-inserted{margin-top:4px}.pt-advanced-prime-table .flex{display:flex;justify-content:space-between;align-items:center}.pt-advanced-prime-table .ml-auto{margin-left:auto}.pt-advanced-prime-table ::ng-deep p-inputicon{margin-right:-.8rem;z-index:2;position:relative}.pt-advanced-prime-table ::ng-deep .p-inputtext{padding-left:1.7rem}.pt-advanced-prime-table ::ng-deep .bt-filter-btn button{cursor:pointer;margin-left:1rem}.pt-advanced-prime-table ::ng-deep .p-icon-field-left .p-input-icon:first-of-type{left:-1rem}.pt-advanced-prime-table .table-row{text-align:center;display:flex;gap:1rem;justify-content:center}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-excel{font-size:1.25em;color:green}.pt-advanced-prime-table ::ng-deep span.p-button-icon.pi.pi-file-pdf{font-size:1.25em;color:red}.pt-advanced-prime-table .table-container{display:block;width:100%}.pt-advanced-prime-table ::ng-deep .p-datatable-emptymessage>td.empty-message-cell{padding:0!important}.pt-advanced-prime-table .empty-message-wrapper{width:100%;height:100%;min-height:180px;display:flex;align-items:center;justify-content:center}.pt-advanced-prime-table .empty-message{text-align:center;color:#888;font-size:1.2rem}.pt-advanced-prime-table .empty-message i{display:block;font-size:2rem;margin-bottom:.5rem}.pt-advanced-prime-table th{white-space:normal;word-wrap:break-word}.filter-image{width:22px;height:14px;margin-right:5px}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-left{text-align:left!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-center{text-align:center!important}.pt-advanced-prime-table ::ng-deep .p-datatable-tbody>tr>td.cell-align-right{text-align:right!important}.pt-advanced-prime-table .cell-inner-left,.pt-advanced-prime-table .cell-inner-center,.pt-advanced-prime-table .cell-inner-right{width:100%;display:flex;align-items:center}.pt-advanced-prime-table .cell-inner-left{justify-content:flex-start;text-align:left}.pt-advanced-prime-table .cell-inner-center{justify-content:center;text-align:center}.pt-advanced-prime-table .cell-inner-right{justify-content:flex-end;text-align:right}.pt-advanced-prime-table ::ng-deep .p-tag{font-size:.72rem;font-weight:800;padding:.2rem .55rem;line-height:1.2;white-space:nowrap}.pt-advanced-prime-table ::ng-deep .p-tag .p-tag-icon{margin-right:.25rem}.pt-advanced-prime-table .progress-cell{width:100%;min-width:160px;display:flex;align-items:center;gap:.5rem}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar{flex:1;width:100%;min-width:120px;height:.75rem!important;background:#e5e7eb!important;border-radius:999px;overflow:hidden}.pt-advanced-prime-table ::ng-deep .progress-cell .p-progressbar-value{display:block!important;height:100%!important;border-radius:999px}.pt-advanced-prime-table .progress-cell-value{min-width:38px;font-size:.72rem;font-weight:800;color:#334155;text-align:right}.pt-advanced-prime-table ::ng-deep th.action-column,.pt-advanced-prime-table ::ng-deep td.action-column{text-align:center!important;justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;padding:0}.pt-advanced-prime-table ::ng-deep .action-buttons-container{width:100%;display:flex;justify-content:center!important;align-items:center!important;gap:.35rem}.pt-advanced-prime-table ::ng-deep .action-buttons-container .p-button.p-button-rounded.p-button-text{padding:.25rem!important;min-width:22px!important;height:22px!important}.pt-advanced-prime-table ::ng-deep .pt-progress-success .p-progressbar-value{background:#22c55e!important}.pt-advanced-prime-table ::ng-deep .pt-progress-warning .p-progressbar-value{background:#f59e0b!important}.pt-advanced-prime-table ::ng-deep .pt-progress-danger .p-progressbar-value{background:#ef4444!important}.pt-advanced-prime-table ::ng-deep .pt-progress-info .p-progressbar-value{background:#3b82f6!important}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -1172,6 +1223,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 type: Input
             }], selection: [{
                 type: Input
+            }], cellHeight: [{
+                type: Input
             }], selectionChange: [{
                 type: Output
             }], rowSelect: [{
@@ -3827,22 +3880,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             }] } });
 
 class PTCardComponent {
-    // Default values as readonly variables
     static { this.DEFAULT_TITLE_COLOR = '#333'; }
     static { this.DEFAULT_TITLE_FONT_SIZE = '1.5em'; }
     static { this.DEFAULT_ICON_COLOR = '#333'; }
     static { this.DEFAULT_ICON_FONT_SIZE = '1em'; }
     static { this.DEFAULT_ICON_POSITION = 'left'; }
-    static { this.DEFAULT_BACKGROUND_COLOR = '#fff'; }
-    static { this.DEFAULT_WIDTH = '100%'; }
-    static { this.DEFAULT_HEIGHT = 'auto'; }
     static { this.DEFAULT_TITLE_POSITION = 'left'; }
     static { this.DEFAULT_MENU_POSITION = 'right'; }
     static { this.DEFAULT_BORDER_COLOR = '#ddd'; }
     static { this.DEFAULT_BORDER_WIDTH = '1px'; }
-    static { this.DEFAULT_TRANSPARENCY = '100'; }
+    static { this.DEFAULT_WIDTH = '100%'; }
+    static { this.DEFAULT_HEIGHT = 'auto'; }
+    /**
+     * Padding for the outer card container.
+     */
     static { this.DEFAULT_PADDING = '16px'; }
+    /**
+     * Padding for the projected content area.
+     * Keep it 0 by default to avoid double spacing:
+     * card padding + body padding.
+     */
+    static { this.DEFAULT_BODY_PADDING = '0'; }
     static { this.DEFAULT_MARGIN = '16px 0'; }
+    static { this.DEFAULT_BORDER_RADIUS = '8px'; }
+    static { this.DEFAULT_BOX_SHADOW = '0 2px 4px rgba(0, 0, 0, 0.1)'; }
+    constructor(cd) {
+        this.cd = cd;
+        this.config = {};
+    }
     ngAfterViewInit() {
         this.logPatternUrl();
     }
@@ -3851,6 +3916,10 @@ class PTCardComponent {
             console.log(`[PTCardComponent] Identifier: ${this.config.identifier}, Pattern URL: ${this.config.pattern.imageUrl}`);
         }
     }
+    updateStyles() {
+        this.getCardStyles();
+        this.cd.detectChanges();
+    }
     isTitleObject() {
         return typeof this.config.title === 'object';
     }
@@ -3875,15 +3944,6 @@ class PTCardComponent {
             '--text-align': alignMap[title?.position || PTCardComponent.DEFAULT_TITLE_POSITION],
         };
     }
-    constructor(cd) {
-        this.cd = cd;
-        this.config = {};
-    }
-    updateStyles() {
-        // After data is fetched or updated
-        this.getCardStyles();
-        this.cd.detectChanges(); // Force Angular to detect the changes
-    }
     getIconClass() {
         const icon = this.config.title?.icon;
         return typeof icon === 'string' ? icon : icon?.code || null;
@@ -3912,45 +3972,35 @@ class PTCardComponent {
         return this.config.menuPosition || PTCardComponent.DEFAULT_MENU_POSITION;
     }
     getCardStyles() {
-        // Transparency for the background color
         const backgroundTransparency = this.config.transparencyPercentage
             ? parseFloat(this.config.transparencyPercentage) / 100
             : 1;
-        // Transparency for the pattern image
         const patternTransparency = this.config.pattern?.transparencyPercentage
             ? parseFloat(this.config.pattern.transparencyPercentage) / 100
             : 1;
-        // Background color with transparency
         const backgroundColor = this.config.backgroundColor && this.config.transparencyPercentage !== '0'
             ? this.hexToRgba(this.config.backgroundColor, backgroundTransparency)
             : 'transparent';
-        // Pattern image with transparency applied via linear-gradient
         const backgroundImage = this.config.pattern?.imageUrl &&
             this.config.pattern.transparencyPercentage !== '0'
             ? `linear-gradient(rgba(255, 255, 255, ${1 - patternTransparency}), rgba(255, 255, 255, ${1 - patternTransparency})), url('${this.config.pattern.imageUrl}')`
             : '';
         const patternWidth = this.config.pattern?.width || '100%';
         const patternHeight = this.config.pattern?.height || 'auto';
-        // Determine background-repeat value
         const repeatX = this.config.pattern?.repeatX ? 'repeat' : 'no-repeat';
         const repeatY = this.config.pattern?.repeatY ? 'repeat' : 'no-repeat';
         const backgroundRepeat = `${repeatX} ${repeatY}`;
-        // Adjust background-size based on repeatCount if provided
-        const repeatCount = this.config.pattern?.repeatCount || 1;
-        const backgroundSize = repeatCount > 1
-            ? `${patternWidth} ${patternHeight}`
-            : `${patternWidth} ${patternHeight}`;
-        // Determine background-position based on the position parameter
+        const backgroundSize = `${patternWidth} ${patternHeight}`;
         const backgroundPosition = this.config.pattern?.position || 'center';
         const justifyContent = this.config.alignContent === 'center' ? 'center' : 'flex-start';
         const alignItems = this.config.alignContent === 'center' ? 'center' : 'stretch';
         return {
             display: 'flex',
             flexDirection: 'column',
-            justifyContent, // Apply conditional vertical alignment
-            alignItems, // Apply conditional horizontal alignment
-            backgroundColor, // Background color with transparency
-            backgroundImage, // Pattern image with transparency
+            justifyContent,
+            alignItems,
+            backgroundColor,
+            backgroundImage,
             backgroundSize,
             backgroundPosition,
             backgroundRepeat,
@@ -3959,23 +4009,14 @@ class PTCardComponent {
             border: this.config.noBorder
                 ? 'none'
                 : `solid ${this.config.borderWidth || PTCardComponent.DEFAULT_BORDER_WIDTH} ${this.config.borderColor || PTCardComponent.DEFAULT_BORDER_COLOR}`,
-            padding: this.config.padding || PTCardComponent.DEFAULT_PADDING,
+            padding: this.config.padding ?? PTCardComponent.DEFAULT_PADDING,
             margin: this.config.margin || PTCardComponent.DEFAULT_MARGIN,
-            borderRadius: this.config.borderRadius || '8px',
-            boxShadow: this.config.boxShadow || '0 2px 4px rgba(0, 0, 0, 0.1)',
+            borderRadius: this.config.borderRadius || PTCardComponent.DEFAULT_BORDER_RADIUS,
+            boxShadow: this.config.boxShadow || PTCardComponent.DEFAULT_BOX_SHADOW,
             position: 'relative',
             zIndex: this.config.zIndex !== undefined ? this.config.zIndex : 'auto',
         };
     }
-    // Utility function to convert hex color to rgba
-    hexToRgba(hex, alpha) {
-        const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-        hex = hex.replace(shorthandRegex, (_, r, g, b) => r + r + g + g + b + b);
-        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-        return result
-            ? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`
-            : hex;
-    }
     getBodyStyles() {
         const justifyContent = this.config.alignBodyContent === 'center' ? 'center' : 'flex-start';
         const alignItems = this.config.alignBodyContent === 'center' ? 'center' : 'stretch';
@@ -3986,7 +4027,7 @@ class PTCardComponent {
             alignItems,
             flexGrow: 1,
             maxWidth: '100%',
-            padding: '16px', // Default padding for body
+            padding: this.config.bodyPadding ?? PTCardComponent.DEFAULT_BODY_PADDING,
             boxSizing: 'border-box',
             overflowX: this.isScrollableHorizontal() ? 'auto' : 'hidden',
             overflowY: this.isScrollableVertical() ? 'auto' : 'hidden',
@@ -3999,7 +4040,7 @@ class PTCardComponent {
             display: 'flex',
             justifyContent,
             alignItems,
-            marginBottom: '16px', // Default margin for header
+            marginBottom: '16px',
             position: 'relative',
         };
     }
@@ -4018,12 +4059,20 @@ class PTCardComponent {
     getHeaderClass() {
         return this.config.alignHeaderContent === 'center' ? 'center-align' : '';
     }
+    hexToRgba(hex, alpha) {
+        const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+        hex = hex.replace(shorthandRegex, (_, r, g, b) => r + r + g + g + b + b);
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result
+            ? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`
+            : hex;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTCardComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTCardComponent, isStandalone: false, selector: "pt-card", inputs: { config: "config" }, ngImport: i0, template: "<div\n  class=\"pt-card card\"\n  [ngClass]=\"getCardClass()\"\n  [attr.id]=\"config.identifier\"\n  [ngStyle]=\"getCardStyles()\"\n  >\n  <!-- Card Header -->\n  @if (hasTitle()) {\n    <div\n      class=\"card-header\"\n      [ngClass]=\"getHeaderClass()\"\n      [ngStyle]=\"getHeaderStyles()\"\n      >\n      @if (getIconClass() && getIconPosition() === 'left') {\n        <i\n          [ngClass]=\"getIconClass()\"\n          [ngStyle]=\"getIconStyles()\"\n          class=\"card-header-icon-left\"\n        ></i>\n      }\n      <span>{{ getTitleText() }}</span>\n      @if (getIconClass() && getIconPosition() === 'right') {\n        <i\n          [ngClass]=\"getIconClass()\"\n          [ngStyle]=\"getIconStyles()\"\n          class=\"card-header-icon-right\"\n        ></i>\n      }\n      @if (config.menu) {\n        <pt-menu\n          [config]=\"config.menu\"\n      [ngClass]=\"{\n        'menu-left': getMenuPosition() === 'left',\n        'menu-right': getMenuPosition() === 'right'\n      }\"\n        ></pt-menu>\n      }\n    </div>\n  }\n\n  <!-- Card Body -->\n  <div class=\"card-body\" [ngClass]=\"getBodyClass()\" [ngStyle]=\"getBodyStyles()\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".pt-card .card{display:flex;flex-direction:column;padding:16px;margin:0 auto;max-height:100vh;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;justify-content:flex-start;align-items:stretch;background-color:transparent}.pt-card .card.center-align{justify-content:center;align-items:center}.pt-card .card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;pointer-events:none;background-color:var( --background-color, rgba(255, 255, 255, 0) );background-image:var( --background-image-url, none );opacity:var(--image-opacity, 1);z-index:-1}.pt-card .card-body{display:flex;flex-direction:column;flex-grow:1;max-width:100%;z-index:1;padding:0;box-sizing:border-box;justify-content:flex-start;align-items:stretch}.pt-card .card-body.center-align{justify-content:center;align-items:center}.pt-card .card-header{margin-bottom:16px;display:flex;position:relative;justify-content:flex-start;align-items:stretch}.pt-card .card-header.center-align{justify-content:center;align-items:center}.pt-card .card-header-icon-left{margin-right:6px}.pt-card .card-header-icon-right{margin-left:6px}.pt-card .menu-left{position:absolute;left:0;top:0}.pt-card .menu-right{position:absolute;right:0;top:-2px}.pt-card .card-menu{margin-left:auto;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTMenuComponent, selector: "pt-menu", inputs: ["config"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTCardComponent, isStandalone: false, selector: "pt-card", inputs: { config: "config" }, ngImport: i0, template: "<div\n  class=\"pt-card card\"\n  [ngClass]=\"getCardClass()\"\n  [attr.id]=\"config.identifier\"\n  [ngStyle]=\"getCardStyles()\"\n>\n  <!-- Card Header -->\n  @if (hasTitle()) {\n    <div\n      class=\"card-header\"\n      [ngClass]=\"getHeaderClass()\"\n      [ngStyle]=\"getHeaderStyles()\"\n    >\n      @if (getIconClass() && getIconPosition() === \"left\") {\n        <i\n          class=\"card-header-icon-left\"\n          [ngClass]=\"getIconClass()\"\n          [ngStyle]=\"getIconStyles()\"\n        ></i>\n      }\n\n      <span class=\"card-title\">\n        {{ getTitleText() }}\n      </span>\n\n      @if (getIconClass() && getIconPosition() === \"right\") {\n        <i\n          class=\"card-header-icon-right\"\n          [ngClass]=\"getIconClass()\"\n          [ngStyle]=\"getIconStyles()\"\n        ></i>\n      }\n\n      @if (config.menu) {\n        <pt-menu\n          class=\"card-menu\"\n          [config]=\"config.menu\"\n          [ngClass]=\"{\n            'menu-left': getMenuPosition() === 'left',\n            'menu-right': getMenuPosition() === 'right',\n          }\"\n        ></pt-menu>\n      }\n    </div>\n  }\n\n  <!-- Card Body -->\n  <div class=\"card-body\" [ngClass]=\"getBodyClass()\" [ngStyle]=\"getBodyStyles()\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".pt-card .card{display:flex;flex-direction:column;padding:16px;margin:0 auto;max-height:100vh;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;justify-content:flex-start;align-items:stretch;background-color:transparent}.pt-card .card.center-align{justify-content:center;align-items:center}.pt-card .card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;pointer-events:none;background-color:var( --background-color, rgba(255, 255, 255, 0) );background-image:var( --background-image-url, none );opacity:var(--image-opacity, 1);z-index:-1}.pt-card .card-body{display:flex;flex-direction:column;flex-grow:1;max-width:100%;z-index:1;padding:0;box-sizing:border-box;justify-content:flex-start;align-items:stretch}.pt-card .card-body.center-align{justify-content:center;align-items:center}.pt-card .card-header{margin-bottom:16px;display:flex;position:relative;justify-content:flex-start;align-items:stretch}.pt-card .card-header.center-align{justify-content:center;align-items:center}.pt-card .card-header-icon-left{margin-right:6px}.pt-card .card-header-icon-right{margin-left:6px}.pt-card .menu-left{position:absolute;left:0;top:0}.pt-card .menu-right{position:absolute;right:0;top:-2px}.pt-card .card-menu{margin-left:auto;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTMenuComponent, selector: "pt-menu", inputs: ["config"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-card', standalone: false, template: "<div\n  class=\"pt-card card\"\n  [ngClass]=\"getCardClass()\"\n  [attr.id]=\"config.identifier\"\n  [ngStyle]=\"getCardStyles()\"\n  >\n  <!-- Card Header -->\n  @if (hasTitle()) {\n    <div\n      class=\"card-header\"\n      [ngClass]=\"getHeaderClass()\"\n      [ngStyle]=\"getHeaderStyles()\"\n      >\n      @if (getIconClass() && getIconPosition() === 'left') {\n        <i\n          [ngClass]=\"getIconClass()\"\n          [ngStyle]=\"getIconStyles()\"\n          class=\"card-header-icon-left\"\n        ></i>\n      }\n      <span>{{ getTitleText() }}</span>\n      @if (getIconClass() && getIconPosition() === 'right') {\n        <i\n          [ngClass]=\"getIconClass()\"\n          [ngStyle]=\"getIconStyles()\"\n          class=\"card-header-icon-right\"\n        ></i>\n      }\n      @if (config.menu) {\n        <pt-menu\n          [config]=\"config.menu\"\n      [ngClass]=\"{\n        'menu-left': getMenuPosition() === 'left',\n        'menu-right': getMenuPosition() === 'right'\n      }\"\n        ></pt-menu>\n      }\n    </div>\n  }\n\n  <!-- Card Body -->\n  <div class=\"card-body\" [ngClass]=\"getBodyClass()\" [ngStyle]=\"getBodyStyles()\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".pt-card .card{display:flex;flex-direction:column;padding:16px;margin:0 auto;max-height:100vh;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;justify-content:flex-start;align-items:stretch;background-color:transparent}.pt-card .card.center-align{justify-content:center;align-items:center}.pt-card .card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;pointer-events:none;background-color:var( --background-color, rgba(255, 255, 255, 0) );background-image:var( --background-image-url, none );opacity:var(--image-opacity, 1);z-index:-1}.pt-card .card-body{display:flex;flex-direction:column;flex-grow:1;max-width:100%;z-index:1;padding:0;box-sizing:border-box;justify-content:flex-start;align-items:stretch}.pt-card .card-body.center-align{justify-content:center;align-items:center}.pt-card .card-header{margin-bottom:16px;display:flex;position:relative;justify-content:flex-start;align-items:stretch}.pt-card .card-header.center-align{justify-content:center;align-items:center}.pt-card .card-header-icon-left{margin-right:6px}.pt-card .card-header-icon-right{margin-left:6px}.pt-card .menu-left{position:absolute;left:0;top:0}.pt-card .menu-right{position:absolute;right:0;top:-2px}.pt-card .card-menu{margin-left:auto;cursor:pointer}\n"] }]
+            args: [{ selector: 'pt-card', standalone: false, template: "<div\n  class=\"pt-card card\"\n  [ngClass]=\"getCardClass()\"\n  [attr.id]=\"config.identifier\"\n  [ngStyle]=\"getCardStyles()\"\n>\n  <!-- Card Header -->\n  @if (hasTitle()) {\n    <div\n      class=\"card-header\"\n      [ngClass]=\"getHeaderClass()\"\n      [ngStyle]=\"getHeaderStyles()\"\n    >\n      @if (getIconClass() && getIconPosition() === \"left\") {\n        <i\n          class=\"card-header-icon-left\"\n          [ngClass]=\"getIconClass()\"\n          [ngStyle]=\"getIconStyles()\"\n        ></i>\n      }\n\n      <span class=\"card-title\">\n        {{ getTitleText() }}\n      </span>\n\n      @if (getIconClass() && getIconPosition() === \"right\") {\n        <i\n          class=\"card-header-icon-right\"\n          [ngClass]=\"getIconClass()\"\n          [ngStyle]=\"getIconStyles()\"\n        ></i>\n      }\n\n      @if (config.menu) {\n        <pt-menu\n          class=\"card-menu\"\n          [config]=\"config.menu\"\n          [ngClass]=\"{\n            'menu-left': getMenuPosition() === 'left',\n            'menu-right': getMenuPosition() === 'right',\n          }\"\n        ></pt-menu>\n      }\n    </div>\n  }\n\n  <!-- Card Body -->\n  <div class=\"card-body\" [ngClass]=\"getBodyClass()\" [ngStyle]=\"getBodyStyles()\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".pt-card .card{display:flex;flex-direction:column;padding:16px;margin:0 auto;max-height:100vh;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;justify-content:flex-start;align-items:stretch;background-color:transparent}.pt-card .card.center-align{justify-content:center;align-items:center}.pt-card .card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;pointer-events:none;background-color:var( --background-color, rgba(255, 255, 255, 0) );background-image:var( --background-image-url, none );opacity:var(--image-opacity, 1);z-index:-1}.pt-card .card-body{display:flex;flex-direction:column;flex-grow:1;max-width:100%;z-index:1;padding:0;box-sizing:border-box;justify-content:flex-start;align-items:stretch}.pt-card .card-body.center-align{justify-content:center;align-items:center}.pt-card .card-header{margin-bottom:16px;display:flex;position:relative;justify-content:flex-start;align-items:stretch}.pt-card .card-header.center-align{justify-content:center;align-items:center}.pt-card .card-header-icon-left{margin-right:6px}.pt-card .card-header-icon-right{margin-left:6px}.pt-card .menu-left{position:absolute;left:0;top:0}.pt-card .menu-right{position:absolute;right:0;top:-2px}.pt-card .card-menu{margin-left:auto;cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }] } });
@@ -4161,20 +4210,23 @@ class PTNavbarMenuComponent {
     constructor() {
         this.navBarMenuConfig = {};
         this.toggleSidebar = new EventEmitter();
+        /**
+         * Emitted when the user clicks the Profile item from the user menu.
+         */
+        this.userClick = new EventEmitter();
+        /**
+         * Emitted when the user clicks the Logout item from the user menu.
+         */
+        this.logoutClick = new EventEmitter();
         this.destroy$ = new Subject();
         this.dateTimeText = '';
-        /** formats are taken from config (or defaults) */
+        this.isUserMenuOpen = false;
         this.dateFormat = 'dd/MM/YYYY';
         this.timeFormat = 'HH:mm:ss';
-        /** FIXED mode base */
         this.fixedStart = new Date();
         this.fixedSetAt = new Date();
-        /** used only in FIXED mode */
         this.manualDateTimeLocal = this.toDateTimeLocalValue(new Date());
     }
-    // =========================
-    // Defaults (existing)
-    // =========================
     static { this.DEFAULT_LOGO_URL = ''; }
     static { this.DEFAULT_LOGO_ALT_TEXT = 'Logo'; }
     static { this.DEFAULT_LOGO_WIDTH = '40px'; }
@@ -4186,9 +4238,6 @@ class PTNavbarMenuComponent {
     static { this.DEFAULT_ICON_COLOR = '#333'; }
     static { this.DEFAULT_TOGGLE_BUTTON_ICON = 'pi pi-bars'; }
     static { this.DEFAULT_TOGGLE_BUTTON_COLOR = '#333'; }
-    // =========================
-    // Lifecycle
-    // =========================
     ngOnInit() {
         this.applyConfigFormatsAndFixedBase();
         interval(1000)
@@ -4197,11 +4246,9 @@ class PTNavbarMenuComponent {
         this.refreshDateTime();
     }
     ngOnChanges(changes) {
-        // If config changes: update formats and fixed base if needed.
         if (changes['navBarMenuConfig']) {
             this.applyConfigFormatsAndFixedBase();
         }
-        // If serverDateTime changes: just refresh display
         if (changes['serverDateTime'] || changes['navBarMenuConfig']) {
             this.refreshDateTime();
         }
@@ -4210,17 +4257,21 @@ class PTNavbarMenuComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
+    closeUserMenu() {
+        this.isUserMenuOpen = false;
+    }
     applyConfigFormatsAndFixedBase() {
-        if (!this.hasDateTime())
+        if (!this.hasDateTime()) {
             return;
+        }
         const dtCfg = this.navBarMenuConfig.dateTime;
         this.dateFormat = (dtCfg?.dateFormat ?? 'dd/MM/YYYY');
         this.timeFormat = (dtCfg?.timeFormat ?? 'HH:mm:ss');
-        // If fixed mode: re-init base from config (only once per config change)
         if (this.isFixedMode()) {
             const base = this.buildFixedBaseDateFromConfig();
-            if (base)
+            if (base) {
                 this.setFixedDateTime(base);
+            }
         }
     }
     // =========================
@@ -4239,8 +4290,9 @@ class PTNavbarMenuComponent {
     onManualDateTimeChange(value) {
         this.manualDateTimeLocal = value;
         const dt = this.fromDateTimeLocalValue(value);
-        if (dt)
+        if (dt) {
             this.setFixedDateTime(dt);
+        }
         this.refreshDateTime();
     }
     getDateTimePositionClass() {
@@ -4249,38 +4301,34 @@ class PTNavbarMenuComponent {
     }
     refreshDateTime() {
         const now = new Date();
-        // 1) FIXED mode (client computed)
         if (this.isFixedMode()) {
             const displayDate = new Date(this.fixedStart.getTime() + (now.getTime() - this.fixedSetAt.getTime()));
             this.dateTimeText = this.formatDateTime(displayDate, this.dateFormat, this.timeFormat);
             return;
         }
-        // 2) SERVER mode (strict): if not provided => placeholders (no client fallback)
         if (this.isServerMode()) {
             const formatted = this.normalizeServerDateTime(this.serverDateTime);
             this.dateTimeText = formatted ?? this.getServerPlaceholder();
             return;
         }
-        // 3) CLIENT mode
         this.dateTimeText = this.formatDateTime(now, this.dateFormat, this.timeFormat);
     }
     normalizeServerDateTime(v) {
-        if (!v)
+        if (!v) {
             return null;
+        }
         if (typeof v === 'string') {
             const s = v.trim();
             return s ? s : null;
         }
         const date = (v.date ?? '').trim();
         const time = (v.time ?? '').trim();
-        if (!date || !time)
+        if (!date || !time) {
             return null;
+        }
         return `${date} ${time}`.trim();
     }
-    /** ✅ NEW: placeholder that respects selected timeFormat */
     getServerPlaceholder() {
-        // You asked explicitly: "--/--/-- --:--:--"
-        // We'll keep date placeholder fixed as --/--/-- and adapt time to HH:mm vs HH:mm:ss
         const datePh = '--/--/--';
         const timePh = this.timeFormat === 'HH:mm' ? '--:--' : '--:--:--';
         return `${datePh} ${timePh}`.trim();
@@ -4292,12 +4340,14 @@ class PTNavbarMenuComponent {
     }
     buildFixedBaseDateFromConfig() {
         const dateValue = this.navBarMenuConfig.dateTime?.dateValue;
-        if (!dateValue)
+        if (!dateValue) {
             return null;
+        }
         const timeSource = this.fromDateTimeLocalValue(this.manualDateTimeLocal) ?? new Date();
         const parsedDate = this.parseDateByFormat(dateValue, this.dateFormat);
-        if (!parsedDate)
+        if (!parsedDate) {
             return null;
+        }
         parsedDate.setHours(timeSource.getHours(), timeSource.getMinutes(), timeSource.getSeconds(), 0);
         return parsedDate;
     }
@@ -4305,20 +4355,23 @@ class PTNavbarMenuComponent {
         try {
             if (fmt === 'dd/MM/YYYY') {
                 const [dd, MM, YYYY] = value.split('/').map(Number);
-                if (!dd || !MM || !YYYY)
+                if (!dd || !MM || !YYYY) {
                     return null;
+                }
                 return new Date(YYYY, MM - 1, dd);
             }
             if (fmt === 'MM/dd/YYYY') {
                 const [MM, dd, YYYY] = value.split('/').map(Number);
-                if (!dd || !MM || !YYYY)
+                if (!dd || !MM || !YYYY) {
                     return null;
+                }
                 return new Date(YYYY, MM - 1, dd);
             }
             if (fmt === 'YYYY-MM-dd') {
                 const [YYYY, MM, dd] = value.split('-').map(Number);
-                if (!dd || !MM || !YYYY)
+                if (!dd || !MM || !YYYY) {
                     return null;
+                }
                 return new Date(YYYY, MM - 1, dd);
             }
             return null;
@@ -4328,7 +4381,83 @@ class PTNavbarMenuComponent {
         }
     }
     // =========================
-    // Formatting utils (client/fixed only)
+    // User profile helpers
+    // =========================
+    hasUser() {
+        return !!this.navBarMenuConfig.user;
+    }
+    toggleUserMenu() {
+        this.isUserMenuOpen = !this.isUserMenuOpen;
+    }
+    isInitialsAvatar() {
+        return this.navBarMenuConfig.user?.avatarMode === 'INITIALS';
+    }
+    showProfileInMenu() {
+        return this.navBarMenuConfig.user?.showProfileInMenu !== false;
+    }
+    showProfileLeftOfAvatar() {
+        return this.navBarMenuConfig.user?.profilePosition === 'LEFT_OF_AVATAR';
+    }
+    getUsername() {
+        return this.navBarMenuConfig.user?.username?.trim() || '-';
+    }
+    getUserFullName() {
+        const configuredFullName = this.navBarMenuConfig.user?.fullName?.trim();
+        if (configuredFullName) {
+            return configuredFullName;
+        }
+        const firstName = this.navBarMenuConfig.user?.firstName?.trim() || '';
+        const lastName = this.navBarMenuConfig.user?.lastName?.trim() || '';
+        const fullName = `${firstName} ${lastName}`.trim();
+        return fullName || this.getUsername();
+    }
+    getUserInitials() {
+        const firstName = this.navBarMenuConfig.user?.firstName?.trim() || '';
+        const lastName = this.navBarMenuConfig.user?.lastName?.trim() || '';
+        const firstInitial = firstName.charAt(0);
+        const lastInitial = lastName.charAt(0);
+        const initials = `${firstInitial}${lastInitial}`.toUpperCase();
+        if (initials) {
+            return initials;
+        }
+        const fullNameParts = this.getUserFullName()
+            .split(' ')
+            .map((item) => item.trim())
+            .filter(Boolean);
+        if (fullNameParts.length >= 2) {
+            return `${fullNameParts[0].charAt(0)}${fullNameParts[1].charAt(0)}`.toUpperCase();
+        }
+        const usernameInitial = this.getUsername().charAt(0).toUpperCase();
+        return usernameInitial || '?';
+    }
+    getUserProfile() {
+        return this.navBarMenuConfig.user?.profile?.trim() || '-';
+    }
+    getUserAvatarStyles() {
+        return {
+            backgroundColor: this.navBarMenuConfig.user?.avatarBackgroundColor ?? '#eff6ff',
+            color: this.navBarMenuConfig.user?.avatarTextColor ?? '#2563eb',
+            borderColor: this.navBarMenuConfig.user?.avatarBorderColor ?? '#bfdbfe',
+        };
+    }
+    getUserProfileTextStyles() {
+        const style = this.navBarMenuConfig.user?.profileTextStyle;
+        return {
+            color: style?.color ?? '#2563eb',
+            fontSize: style?.fontSize ?? '0.8rem',
+            fontWeight: style?.fontWeight ?? '700',
+        };
+    }
+    onUserProfileClick() {
+        this.isUserMenuOpen = false;
+        this.userClick.emit();
+    }
+    onUserLogoutClick() {
+        this.isUserMenuOpen = false;
+        this.logoutClick.emit();
+    }
+    // =========================
+    // Formatting utils
     // =========================
     pad2(n) {
         return String(n).padStart(2, '0');
@@ -4363,13 +4492,14 @@ class PTNavbarMenuComponent {
         return `${yyyy}-${MM}-${dd}T${HH}:${mm}:${ss}`;
     }
     fromDateTimeLocalValue(value) {
-        if (!value)
+        if (!value) {
             return null;
+        }
         const dt = new Date(value);
         return isNaN(dt.getTime()) ? null : dt;
     }
     // =========================
-    // Existing logic (unchanged)
+    // Existing navbar helpers
     // =========================
     isImageStyle(object) {
         return typeof object === 'object' && 'imageUrl' in object;
@@ -4468,17 +4598,24 @@ class PTNavbarMenuComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTNavbarMenuComponent, isStandalone: false, selector: "pt-nav-bar-menu", inputs: { navBarMenuConfig: "navBarMenuConfig", serverDateTime: "serverDateTime" }, outputs: { toggleSidebar: "toggleSidebar" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n  <!-- LEFT -->\n  <div class=\"navbar-left\">\n    <a\n      [routerLink]=\"\n        isImageStyle(navBarMenuConfig.logo)\n          ? navBarMenuConfig.logo.routerLink\n          : '/'\n      \"\n      class=\"logo-link\"\n      >\n      <img\n        [src]=\"getLogoUrl()\"\n        [alt]=\"getLogoAltText()\"\n        [ngStyle]=\"getLogoStyles()\"\n        class=\"navbar-logo\"\n        />\n      <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n        {{ getAppName() }}\n      </span>\n    </a>\n\n    <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n      <i\n        [class]=\"getToggleButtonIcon()\"\n        [ngStyle]=\"getToggleButtonStyles()\"\n      ></i>\n    </a>\n  </div>\n\n  <!-- \u2705 MIDDLE (DateTime) -->\n  <!-- Always visible when enabled, even if server value missing (will show placeholders). -->\n  @if (hasDateTime()) {\n    <div\n      class=\"navbar-middle\"\n      [ngClass]=\"getDateTimePositionClass()\"\n      >\n      <div class=\"navbar-datetime\">\n        <span class=\"dt-value\" [ngStyle]=\"getDateTimeTextStyles()\">\n          {{ dateTimeText }}\n        </span>\n        <!-- Manual fixed datetime (only if config has dateValue => FIXED mode) -->\n        @if (isFixedMode()) {\n          <input\n            class=\"dt-input\"\n            type=\"datetime-local\"\n            step=\"1\"\n            [value]=\"manualDateTimeLocal\"\n            (input)=\"onManualDateTimeChange($any($event.target).value)\"\n            />\n        }\n      </div>\n    </div>\n  }\n\n  <!-- RIGHT -->\n  <div class=\"navbar-actions\">\n    <div class=\"navbar-right\">\n      @for (menuConfig of navBarMenuConfig.menus; track menuConfig) {\n        <pt-menu-fancy\n          [config]=\"menuConfig\"\n        ></pt-menu-fancy>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;align-items:center;justify-content:space-between;padding:10px;border-bottom:1px solid #ddd;background-color:#fff;background-size:cover;background-position:center;gap:12px;min-width:0}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;text-decoration:none;color:inherit;min-width:0}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-middle{flex:1 1 auto;display:flex;align-items:center;min-width:0;padding:0 12px}.pt-nav-bar-menu .navbar-middle.dt-pos-left{justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-center{justify-content:center}.pt-nav-bar-menu .navbar-middle.dt-pos-right{justify-content:flex-end}.pt-nav-bar-menu .navbar-datetime{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap;max-width:100%}.pt-nav-bar-menu .navbar-datetime .dt-value{white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-input{height:32px;padding:0 8px;border:1px solid rgba(0,0,0,.18);border-radius:6px;background:#fff;font-size:12px;color:#333;outline:none}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:#034c83b3;box-shadow:0 0 0 3px #034c831f}.pt-nav-bar-menu .navbar-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:#333;text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:#000}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px;border-radius:6px}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:#333}.pt-nav-bar-menu .toggle-btn:hover{background-color:#f1f1f1}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px}.pt-nav-bar-menu .navbar-left{width:100%;justify-content:space-between}.pt-nav-bar-menu .navbar-middle{width:100%;padding:0;justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-right .navbar-datetime,.pt-nav-bar-menu .navbar-middle.dt-pos-center .navbar-datetime{padding-left:0;border-left:none}.pt-nav-bar-menu .navbar-actions{width:100%;justify-content:flex-end}}@media(max-width:520px){.pt-nav-bar-menu .navbar-datetime .dt-value{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: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PTMenuFancyComponent, selector: "pt-menu-fancy", inputs: ["config"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTNavbarMenuComponent, isStandalone: false, selector: "pt-nav-bar-menu", inputs: { navBarMenuConfig: "navBarMenuConfig", serverDateTime: "serverDateTime" }, outputs: { toggleSidebar: "toggleSidebar", userClick: "userClick", logoutClick: "logoutClick" }, host: { listeners: { "document:click": "closeUserMenu()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n  <!-- LEFT -->\n  <div class=\"navbar-left\">\n    <a\n      [routerLink]=\"\n        isImageStyle(navBarMenuConfig.logo)\n          ? navBarMenuConfig.logo.routerLink\n          : '/'\n      \"\n      class=\"logo-link\"\n    >\n      <img\n        [src]=\"getLogoUrl()\"\n        [alt]=\"getLogoAltText()\"\n        [ngStyle]=\"getLogoStyles()\"\n        class=\"navbar-logo\"\n      />\n\n      <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n        {{ getAppName() }}\n      </span>\n    </a>\n\n    <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n      <i\n        [class]=\"getToggleButtonIcon()\"\n        [ngStyle]=\"getToggleButtonStyles()\"\n      ></i>\n    </a>\n  </div>\n\n  <!-- MIDDLE DateTime -->\n  @if (hasDateTime()) {\n    <div class=\"navbar-middle\" [ngClass]=\"getDateTimePositionClass()\">\n      <div class=\"navbar-datetime\">\n        <span class=\"dt-value\" [ngStyle]=\"getDateTimeTextStyles()\">\n          {{ dateTimeText }}\n        </span>\n\n        @if (isFixedMode()) {\n          <input\n            class=\"dt-input\"\n            type=\"datetime-local\"\n            step=\"1\"\n            [value]=\"manualDateTimeLocal\"\n            (input)=\"onManualDateTimeChange($any($event.target).value)\"\n          />\n        }\n      </div>\n    </div>\n  }\n\n  <!-- RIGHT -->\n  <div class=\"navbar-actions\">\n    <div class=\"navbar-right\">\n      @for (menuConfig of navBarMenuConfig.menus; track menuConfig) {\n        <pt-menu-fancy [config]=\"menuConfig\"></pt-menu-fancy>\n      }\n    </div>\n\n    @if (hasUser()) {\n      <div class=\"navbar-user\" (click)=\"$event.stopPropagation()\">\n        @if (showProfileLeftOfAvatar()) {\n          <div\n            class=\"navbar-user-profile-left\"\n            [ngStyle]=\"getUserProfileTextStyles()\"\n          >\n            {{ getUserProfile() }}\n          </div>\n        }\n\n        <button\n          type=\"button\"\n          class=\"navbar-user-trigger\"\n          (click)=\"toggleUserMenu()\"\n        >\n          <div class=\"navbar-user-avatar\" [ngStyle]=\"getUserAvatarStyles()\">\n            @if (isInitialsAvatar()) {\n              <span>{{ getUserInitials() }}</span>\n            } @else {\n              <i class=\"fa fa-user\"></i>\n            }\n          </div>\n        </button>\n\n        @if (isUserMenuOpen) {\n          <div class=\"navbar-user-menu\">\n            <div class=\"navbar-user-menu-header\">\n              <div\n                class=\"navbar-user-menu-avatar\"\n                [ngStyle]=\"getUserAvatarStyles()\"\n              >\n                @if (isInitialsAvatar()) {\n                  <span>{{ getUserInitials() }}</span>\n                } @else {\n                  <i class=\"fa fa-user\"></i>\n                }\n              </div>\n\n              <div class=\"navbar-user-menu-identity\">\n                <div class=\"navbar-user-menu-name\">\n                  {{ getUserFullName() }}\n                </div>\n\n                @if (showProfileInMenu()) {\n                  <div\n                    class=\"navbar-user-menu-profile\"\n                    [ngStyle]=\"getUserProfileTextStyles()\"\n                  >\n                    {{ getUserProfile() }}\n                  </div>\n                }\n\n                <div class=\"navbar-user-menu-username\">\n                  {{ getUsername() }}\n                </div>\n              </div>\n            </div>\n\n            <div class=\"navbar-user-menu-separator\"></div>\n\n            <button\n              type=\"button\"\n              class=\"navbar-user-menu-item\"\n              (click)=\"onUserProfileClick()\"\n            >\n              <i class=\"fa fa-user\"></i>\n              <span>Profil</span>\n            </button>\n\n            <button\n              type=\"button\"\n              class=\"navbar-user-menu-item danger\"\n              (click)=\"onUserLogoutClick()\"\n            >\n              <i class=\"fa fa-sign-out-alt\"></i>\n              <span>D\u00E9connexion</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;align-items:center;justify-content:space-between;padding-right:10px;padding-left:10px;border-bottom:1px solid #ddd;background-color:#fff;background-size:cover;background-position:center;gap:12px;min-width:0;width:100%;box-sizing:border-box}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;text-decoration:none;color:inherit;min-width:0}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-middle{flex:1 1 auto;display:flex;align-items:center;min-width:0;padding:0 12px}.pt-nav-bar-menu .navbar-middle.dt-pos-left{justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-center{justify-content:center}.pt-nav-bar-menu .navbar-middle.dt-pos-right{justify-content:flex-end}.pt-nav-bar-menu .navbar-datetime{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap;max-width:100%}.pt-nav-bar-menu .navbar-datetime .dt-value{white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-input{height:32px;padding:0 8px;border:1px solid rgba(0,0,0,.18);border-radius:6px;background:#fff;font-size:12px;color:#333;outline:none}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:#034c83b3;box-shadow:0 0 0 3px #034c831f}.pt-nav-bar-menu .navbar-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:#333;text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:#000}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:#333}.pt-nav-bar-menu .toggle-btn:hover{background-color:#f1f1f1}.pt-nav-bar-menu .navbar-user{position:relative;display:flex;align-items:center;gap:.65rem;flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{max-width:170px;color:#334155;font-size:.82rem;font-weight:700;background:#eff6ff;border:1px solid #bfdbfe;border-radius:999px;padding:.28rem .65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-trigger{border:none;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center}.pt-nav-bar-menu .navbar-user-avatar,.pt-nav-bar-menu .navbar-user-menu-avatar{width:38px;height:38px;min-width:38px;border-radius:999px;background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-avatar i,.pt-nav-bar-menu .navbar-user-menu-avatar i{font-size:1rem}.pt-nav-bar-menu .navbar-user-menu{position:absolute;top:calc(100% + 10px);right:0;width:260px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 18px 45px #0f172a29;z-index:9999;padding:.75rem;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-header{display:flex;align-items:center;gap:.75rem;padding:.35rem .25rem .65rem}.pt-nav-bar-menu .navbar-user-menu-avatar{width:46px;height:46px;min-width:46px;font-size:1.05rem}.pt-nav-bar-menu .navbar-user-menu-identity{min-width:0}.pt-nav-bar-menu .navbar-user-menu-name{color:#0f172a;font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-profile{margin-top:.15rem;color:#2563eb;font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-username{margin-top:.15rem;color:#64748b;font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-separator{height:1px;background:#e5e7eb;margin:.4rem 0}.pt-nav-bar-menu .navbar-user-menu-item{width:100%;min-height:36px;border:none;background:transparent;border-radius:9px;color:#334155;display:flex;align-items:center;gap:.55rem;padding:.5rem .55rem;font-size:.86rem;font-weight:600;cursor:pointer;text-align:left;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-item:hover{background:#f1f5f9;color:#0f172a}.pt-nav-bar-menu .navbar-user-menu-item.danger{color:#dc2626}.pt-nav-bar-menu .navbar-user-menu-item.danger:hover{background:#fef2f2;color:#b91c1c}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px}.pt-nav-bar-menu .navbar-left{width:100%;justify-content:space-between}.pt-nav-bar-menu .navbar-middle{width:100%;padding:0;justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-right .navbar-datetime,.pt-nav-bar-menu .navbar-middle.dt-pos-center .navbar-datetime{padding-left:0;border-left:none}.pt-nav-bar-menu .navbar-actions{width:100%;justify-content:flex-end}.pt-nav-bar-menu .navbar-user-menu{right:0}.pt-nav-bar-menu .navbar-user-profile-left{max-width:130px}}@media(max-width:520px){.pt-nav-bar-menu .navbar-datetime .dt-value,.pt-nav-bar-menu .navbar-user-profile-left{display:none}.pt-nav-bar-menu .navbar-user-menu{width:240px}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PTMenuFancyComponent, selector: "pt-menu-fancy", inputs: ["config"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-nav-bar-menu', standalone: false, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n  <!-- LEFT -->\n  <div class=\"navbar-left\">\n    <a\n      [routerLink]=\"\n        isImageStyle(navBarMenuConfig.logo)\n          ? navBarMenuConfig.logo.routerLink\n          : '/'\n      \"\n      class=\"logo-link\"\n      >\n      <img\n        [src]=\"getLogoUrl()\"\n        [alt]=\"getLogoAltText()\"\n        [ngStyle]=\"getLogoStyles()\"\n        class=\"navbar-logo\"\n        />\n      <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n        {{ getAppName() }}\n      </span>\n    </a>\n\n    <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n      <i\n        [class]=\"getToggleButtonIcon()\"\n        [ngStyle]=\"getToggleButtonStyles()\"\n      ></i>\n    </a>\n  </div>\n\n  <!-- \u2705 MIDDLE (DateTime) -->\n  <!-- Always visible when enabled, even if server value missing (will show placeholders). -->\n  @if (hasDateTime()) {\n    <div\n      class=\"navbar-middle\"\n      [ngClass]=\"getDateTimePositionClass()\"\n      >\n      <div class=\"navbar-datetime\">\n        <span class=\"dt-value\" [ngStyle]=\"getDateTimeTextStyles()\">\n          {{ dateTimeText }}\n        </span>\n        <!-- Manual fixed datetime (only if config has dateValue => FIXED mode) -->\n        @if (isFixedMode()) {\n          <input\n            class=\"dt-input\"\n            type=\"datetime-local\"\n            step=\"1\"\n            [value]=\"manualDateTimeLocal\"\n            (input)=\"onManualDateTimeChange($any($event.target).value)\"\n            />\n        }\n      </div>\n    </div>\n  }\n\n  <!-- RIGHT -->\n  <div class=\"navbar-actions\">\n    <div class=\"navbar-right\">\n      @for (menuConfig of navBarMenuConfig.menus; track menuConfig) {\n        <pt-menu-fancy\n          [config]=\"menuConfig\"\n        ></pt-menu-fancy>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;align-items:center;justify-content:space-between;padding:10px;border-bottom:1px solid #ddd;background-color:#fff;background-size:cover;background-position:center;gap:12px;min-width:0}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;text-decoration:none;color:inherit;min-width:0}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-middle{flex:1 1 auto;display:flex;align-items:center;min-width:0;padding:0 12px}.pt-nav-bar-menu .navbar-middle.dt-pos-left{justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-center{justify-content:center}.pt-nav-bar-menu .navbar-middle.dt-pos-right{justify-content:flex-end}.pt-nav-bar-menu .navbar-datetime{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap;max-width:100%}.pt-nav-bar-menu .navbar-datetime .dt-value{white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-input{height:32px;padding:0 8px;border:1px solid rgba(0,0,0,.18);border-radius:6px;background:#fff;font-size:12px;color:#333;outline:none}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:#034c83b3;box-shadow:0 0 0 3px #034c831f}.pt-nav-bar-menu .navbar-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:#333;text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:#000}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px;border-radius:6px}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:#333}.pt-nav-bar-menu .toggle-btn:hover{background-color:#f1f1f1}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px}.pt-nav-bar-menu .navbar-left{width:100%;justify-content:space-between}.pt-nav-bar-menu .navbar-middle{width:100%;padding:0;justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-right .navbar-datetime,.pt-nav-bar-menu .navbar-middle.dt-pos-center .navbar-datetime{padding-left:0;border-left:none}.pt-nav-bar-menu .navbar-actions{width:100%;justify-content:flex-end}}@media(max-width:520px){.pt-nav-bar-menu .navbar-datetime .dt-value{display:none}}\n"] }]
+            args: [{ selector: 'pt-nav-bar-menu', standalone: false, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n  <!-- LEFT -->\n  <div class=\"navbar-left\">\n    <a\n      [routerLink]=\"\n        isImageStyle(navBarMenuConfig.logo)\n          ? navBarMenuConfig.logo.routerLink\n          : '/'\n      \"\n      class=\"logo-link\"\n    >\n      <img\n        [src]=\"getLogoUrl()\"\n        [alt]=\"getLogoAltText()\"\n        [ngStyle]=\"getLogoStyles()\"\n        class=\"navbar-logo\"\n      />\n\n      <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n        {{ getAppName() }}\n      </span>\n    </a>\n\n    <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n      <i\n        [class]=\"getToggleButtonIcon()\"\n        [ngStyle]=\"getToggleButtonStyles()\"\n      ></i>\n    </a>\n  </div>\n\n  <!-- MIDDLE DateTime -->\n  @if (hasDateTime()) {\n    <div class=\"navbar-middle\" [ngClass]=\"getDateTimePositionClass()\">\n      <div class=\"navbar-datetime\">\n        <span class=\"dt-value\" [ngStyle]=\"getDateTimeTextStyles()\">\n          {{ dateTimeText }}\n        </span>\n\n        @if (isFixedMode()) {\n          <input\n            class=\"dt-input\"\n            type=\"datetime-local\"\n            step=\"1\"\n            [value]=\"manualDateTimeLocal\"\n            (input)=\"onManualDateTimeChange($any($event.target).value)\"\n          />\n        }\n      </div>\n    </div>\n  }\n\n  <!-- RIGHT -->\n  <div class=\"navbar-actions\">\n    <div class=\"navbar-right\">\n      @for (menuConfig of navBarMenuConfig.menus; track menuConfig) {\n        <pt-menu-fancy [config]=\"menuConfig\"></pt-menu-fancy>\n      }\n    </div>\n\n    @if (hasUser()) {\n      <div class=\"navbar-user\" (click)=\"$event.stopPropagation()\">\n        @if (showProfileLeftOfAvatar()) {\n          <div\n            class=\"navbar-user-profile-left\"\n            [ngStyle]=\"getUserProfileTextStyles()\"\n          >\n            {{ getUserProfile() }}\n          </div>\n        }\n\n        <button\n          type=\"button\"\n          class=\"navbar-user-trigger\"\n          (click)=\"toggleUserMenu()\"\n        >\n          <div class=\"navbar-user-avatar\" [ngStyle]=\"getUserAvatarStyles()\">\n            @if (isInitialsAvatar()) {\n              <span>{{ getUserInitials() }}</span>\n            } @else {\n              <i class=\"fa fa-user\"></i>\n            }\n          </div>\n        </button>\n\n        @if (isUserMenuOpen) {\n          <div class=\"navbar-user-menu\">\n            <div class=\"navbar-user-menu-header\">\n              <div\n                class=\"navbar-user-menu-avatar\"\n                [ngStyle]=\"getUserAvatarStyles()\"\n              >\n                @if (isInitialsAvatar()) {\n                  <span>{{ getUserInitials() }}</span>\n                } @else {\n                  <i class=\"fa fa-user\"></i>\n                }\n              </div>\n\n              <div class=\"navbar-user-menu-identity\">\n                <div class=\"navbar-user-menu-name\">\n                  {{ getUserFullName() }}\n                </div>\n\n                @if (showProfileInMenu()) {\n                  <div\n                    class=\"navbar-user-menu-profile\"\n                    [ngStyle]=\"getUserProfileTextStyles()\"\n                  >\n                    {{ getUserProfile() }}\n                  </div>\n                }\n\n                <div class=\"navbar-user-menu-username\">\n                  {{ getUsername() }}\n                </div>\n              </div>\n            </div>\n\n            <div class=\"navbar-user-menu-separator\"></div>\n\n            <button\n              type=\"button\"\n              class=\"navbar-user-menu-item\"\n              (click)=\"onUserProfileClick()\"\n            >\n              <i class=\"fa fa-user\"></i>\n              <span>Profil</span>\n            </button>\n\n            <button\n              type=\"button\"\n              class=\"navbar-user-menu-item danger\"\n              (click)=\"onUserLogoutClick()\"\n            >\n              <i class=\"fa fa-sign-out-alt\"></i>\n              <span>D\u00E9connexion</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;align-items:center;justify-content:space-between;padding-right:10px;padding-left:10px;border-bottom:1px solid #ddd;background-color:#fff;background-size:cover;background-position:center;gap:12px;min-width:0;width:100%;box-sizing:border-box}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;text-decoration:none;color:inherit;min-width:0}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-middle{flex:1 1 auto;display:flex;align-items:center;min-width:0;padding:0 12px}.pt-nav-bar-menu .navbar-middle.dt-pos-left{justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-center{justify-content:center}.pt-nav-bar-menu .navbar-middle.dt-pos-right{justify-content:flex-end}.pt-nav-bar-menu .navbar-datetime{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap;max-width:100%}.pt-nav-bar-menu .navbar-datetime .dt-value{white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-input{height:32px;padding:0 8px;border:1px solid rgba(0,0,0,.18);border-radius:6px;background:#fff;font-size:12px;color:#333;outline:none}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:#034c83b3;box-shadow:0 0 0 3px #034c831f}.pt-nav-bar-menu .navbar-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:#333;text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:#000}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:#333}.pt-nav-bar-menu .toggle-btn:hover{background-color:#f1f1f1}.pt-nav-bar-menu .navbar-user{position:relative;display:flex;align-items:center;gap:.65rem;flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{max-width:170px;color:#334155;font-size:.82rem;font-weight:700;background:#eff6ff;border:1px solid #bfdbfe;border-radius:999px;padding:.28rem .65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-trigger{border:none;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center}.pt-nav-bar-menu .navbar-user-avatar,.pt-nav-bar-menu .navbar-user-menu-avatar{width:38px;height:38px;min-width:38px;border-radius:999px;background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-avatar i,.pt-nav-bar-menu .navbar-user-menu-avatar i{font-size:1rem}.pt-nav-bar-menu .navbar-user-menu{position:absolute;top:calc(100% + 10px);right:0;width:260px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 18px 45px #0f172a29;z-index:9999;padding:.75rem;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-header{display:flex;align-items:center;gap:.75rem;padding:.35rem .25rem .65rem}.pt-nav-bar-menu .navbar-user-menu-avatar{width:46px;height:46px;min-width:46px;font-size:1.05rem}.pt-nav-bar-menu .navbar-user-menu-identity{min-width:0}.pt-nav-bar-menu .navbar-user-menu-name{color:#0f172a;font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-profile{margin-top:.15rem;color:#2563eb;font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-username{margin-top:.15rem;color:#64748b;font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-separator{height:1px;background:#e5e7eb;margin:.4rem 0}.pt-nav-bar-menu .navbar-user-menu-item{width:100%;min-height:36px;border:none;background:transparent;border-radius:9px;color:#334155;display:flex;align-items:center;gap:.55rem;padding:.5rem .55rem;font-size:.86rem;font-weight:600;cursor:pointer;text-align:left;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-item:hover{background:#f1f5f9;color:#0f172a}.pt-nav-bar-menu .navbar-user-menu-item.danger{color:#dc2626}.pt-nav-bar-menu .navbar-user-menu-item.danger:hover{background:#fef2f2;color:#b91c1c}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px}.pt-nav-bar-menu .navbar-left{width:100%;justify-content:space-between}.pt-nav-bar-menu .navbar-middle{width:100%;padding:0;justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-right .navbar-datetime,.pt-nav-bar-menu .navbar-middle.dt-pos-center .navbar-datetime{padding-left:0;border-left:none}.pt-nav-bar-menu .navbar-actions{width:100%;justify-content:flex-end}.pt-nav-bar-menu .navbar-user-menu{right:0}.pt-nav-bar-menu .navbar-user-profile-left{max-width:130px}}@media(max-width:520px){.pt-nav-bar-menu .navbar-datetime .dt-value,.pt-nav-bar-menu .navbar-user-profile-left{display:none}.pt-nav-bar-menu .navbar-user-menu{width:240px}}\n"] }]
         }], propDecorators: { navBarMenuConfig: [{
                 type: Input
-            }], toggleSidebar: [{
-                type: Output
             }], serverDateTime: [{
                 type: Input
+            }], toggleSidebar: [{
+                type: Output
+            }], userClick: [{
+                type: Output
+            }], logoutClick: [{
+                type: Output
+            }], closeUserMenu: [{
+                type: HostListener,
+                args: ['document:click']
             }] } });
 
 class PTMenuFancyModule {
@@ -4531,15 +4668,22 @@ class PTSideBarMenuComponent {
             alignBodyContent: 'center',
             identifier: 'pt-side-bar-menu/search',
             backgroundColor: 'white',
+            width: '250px',
             height: '72px',
             padding: '0',
+            bodyPadding: '0',
+            margin: '6px 0px',
+            scrollableVertical: false,
         };
         this.cardConfig = {
             identifier: 'pt-side-bar-menu',
-            backgroundColor: '',
-            width: '',
-            height: '',
-            scrollableVertical: false,
+            backgroundColor: 'white',
+            padding: '10px 6px',
+            bodyPadding: '0',
+            margin: '6px 0px',
+            width: '250px',
+            height: '100vh',
+            scrollableVertical: true,
         };
         this.formGroup = new FormGroup({
             search: new FormControl(''),
@@ -4550,28 +4694,15 @@ class PTSideBarMenuComponent {
             type: FormInputTypeEnum.TEXT,
             iconClass: 'pi pi-search',
             iconPosition: 'left',
-            width: '240px',
+            width: '250px',
             height: '42px',
         };
         this.filteredMenus = [];
     }
     ngOnInit() {
-        this.cardConfig = {
-            identifier: 'pt-side-bar-menu',
-            backgroundColor: this.menuConfig.backgroundColor,
-            width: this.menuConfig.width,
-            height: this.menuConfig.height,
-            scrollableVertical: this.menuConfig.scrollable,
-            pattern: this.menuConfig.pattern,
-        };
+        this.initializeConfigs();
         this.filteredMenus = this.cloneMenus(this.menuConfig.menus);
-        const cardWidth = this.menuConfig.width
-            ? parseInt(this.menuConfig.width, 10)
-            : 250;
-        this.searchField.width = `${cardWidth - 60}px`;
-        this.searchCardConfig.width = this.menuConfig.width;
-        this.searchCardConfig.pattern = this.menuConfig.pattern;
-        if (this.menuConfig.searchable) {
+        if (this.isSearchEnabled()) {
             this.formGroup
                 .get('search')
                 ?.valueChanges.subscribe((searchTerm) => {
@@ -4582,6 +4713,42 @@ class PTSideBarMenuComponent {
     ngAfterViewInit() {
         this.applyHoverEffects();
     }
+    initializeConfigs() {
+        const sidebarWidth = this.menuConfig.width || '250px';
+        this.cardConfig = {
+            identifier: 'pt-side-bar-menu',
+            backgroundColor: this.menuConfig.backgroundColor || 'white',
+            width: sidebarWidth,
+            height: this.menuConfig.height || '100vh',
+            scrollableVertical: this.menuConfig.scrollable ?? true,
+            pattern: this.menuConfig.pattern,
+            padding: '10px 6px',
+            bodyPadding: '0',
+            margin: '0',
+        };
+        this.searchCardConfig = {
+            alignContent: 'default',
+            alignBodyContent: 'default',
+            identifier: 'pt-side-bar-menu/search',
+            backgroundColor: this.menuConfig.backgroundColor || 'white',
+            width: sidebarWidth,
+            height: 'auto',
+            padding: '10px 14px',
+            bodyPadding: '0',
+            margin: '16px 0 8px 0',
+            pattern: this.menuConfig.pattern,
+            scrollableVertical: false,
+            scrollableHorizontal: false,
+        };
+        this.searchField = {
+            ...this.searchField,
+            width: '100%',
+            height: '42px',
+        };
+    }
+    isSearchEnabled() {
+        return this.menuConfig.searchable !== false;
+    }
     toggleMenu(item, event) {
         item.isExpanded = !item.isExpanded;
         event.preventDefault();
@@ -4645,6 +4812,12 @@ class PTSideBarMenuComponent {
             }
         });
     }
+    cloneMenus(menus) {
+        return (menus || []).map((menu) => ({
+            ...menu,
+            children: menu.children ? this.cloneMenus(menu.children) : undefined,
+        }));
+    }
     getMenuItemStyles() {
         return {
             color: this.menuConfig.fontColor || '#333',
@@ -4670,6 +4843,8 @@ class PTSideBarMenuComponent {
             padding: level === 1 ? '5px 10px' : '4px 10px',
             transition: 'background-color 0.2s, color 0.2s',
             fontSize: level === 1 ? '14px' : '13px',
+            display: 'flex',
+            alignItems: 'center',
         };
     }
     applyHoverEffects() {
@@ -4678,10 +4853,10 @@ class PTSideBarMenuComponent {
         menuLinks.forEach((link) => {
             this.renderer.listen(link, 'mouseenter', () => {
                 this.renderer.setStyle(link, 'background-color', this.menuConfig.hoverColor || '#f1f1f1');
-                this.renderer.setStyle(link, 'color', this.menuConfig.hoverFontColor || 'white');
+                this.renderer.setStyle(link, 'color', this.menuConfig.hoverFontColor || '#111');
             });
             this.renderer.listen(link, 'mouseleave', () => {
-                this.renderer.removeStyle(link, 'background-color');
+                this.renderer.setStyle(link, 'background-color', 'transparent');
                 this.renderer.setStyle(link, 'color', this.menuConfig.fontColor || '#333');
             });
         });
@@ -4692,29 +4867,22 @@ class PTSideBarMenuComponent {
                     '#f1f1f1');
                 this.renderer.setStyle(link, 'color', this.menuConfig.hoverFontColorSubMenu ||
                     this.menuConfig.hoverFontColor ||
-                    '#fff');
+                    '#000');
             });
             this.renderer.listen(link, 'mouseleave', () => {
-                this.renderer.removeStyle(link, 'background-color');
+                this.renderer.setStyle(link, 'background-color', 'transparent');
                 this.renderer.setStyle(link, 'color', this.menuConfig.fontColorSubMenu ||
                     this.menuConfig.fontColor ||
                     '#666');
             });
         });
     }
-    cloneMenus(menus = []) {
-        return menus.map((menu) => ({
-            ...menu,
-            children: this.cloneMenus(menu.children || []),
-            isExpanded: menu.isExpanded ?? false,
-        }));
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTSideBarMenuComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTSideBarMenuComponent, isStandalone: false, selector: "pt-side-bar-menu", inputs: { menuConfig: "menuConfig" }, ngImport: i0, template: "<div class=\"pt-side-bar-menu\">\n  @if (menuConfig.searchable) {\n    <pt-card\n      [config]=\"searchCardConfig\"\n      [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n      >\n      <div class=\"search-input\">\n        <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n        </pt-text-input>\n      </div>\n    </pt-card>\n  }\n\n  <pt-card\n    [config]=\"cardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n    >\n    <ul class=\"menu-list\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          recursiveMenu;\n          context: { $implicit: filteredMenus, level: 0 }\n        \"\n      ></ng-container>\n    </ul>\n  </pt-card>\n</div>\n\n<ng-template #recursiveMenu let-menus let-level=\"level\">\n  @for (item of menus; track item) {\n    <li\n      class=\"menu-item\"\n      [ngClass]=\"{\n        'menu-item-expanded': item.isExpanded,\n        'submenu-level-item': level > 0,\n      }\"\n      [attr.data-level]=\"level\"\n      [ngStyle]=\"getMenuItemStyles()\"\n      >\n      <!-- item without children -->\n      @if (!hasChildren(item)) {\n        <a\n          [routerLink]=\"item.url\"\n          [class.menu-link]=\"level === 0\"\n          [class.submenu-link]=\"level > 0\"\n        [ngStyle]=\"\n          level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n        \"\n          >\n          <i [ngClass]=\"item.icon\"></i>\n          <span [class.submenu-title]=\"level > 0\">{{ item.label }}</span>\n          @if (item.badge) {\n            <span\n              [ngStyle]=\"getBadgeStyles(item.badge)\"\n              class=\"badge\"\n              >\n              {{ item.badge.count }}\n            </span>\n          }\n        </a>\n      }\n      <!-- item with children -->\n      @if (hasChildren(item)) {\n        <a\n          href=\"#\"\n          [class.menu-link]=\"level === 0\"\n          [class.submenu-link]=\"level > 0\"\n          (click)=\"toggleMenu(item, $event)\"\n        [ngStyle]=\"\n          level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n        \"\n          >\n          <i [ngClass]=\"item.icon\"></i>\n          <span [class.submenu-title]=\"level > 0\">{{ item.label }}</span>\n          @if (item.badge) {\n            <span\n              [ngStyle]=\"getBadgeStyles(item.badge)\"\n              class=\"badge\"\n              >\n              {{ item.badge.count }}\n            </span>\n          }\n          <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n        </a>\n      }\n      @if (hasChildren(item)) {\n        <div\n          class=\"submenu-wrapper\"\n          [class.expanded]=\"item.isExpanded\"\n          >\n          <ul\n            class=\"submenu-list\"\n          [ngClass]=\"{\n            'submenu-list-root': level === 0,\n            'submenu-list-nested': level > 0,\n          }\"\n            >\n            <ng-container\n            *ngTemplateOutlet=\"\n              recursiveMenu;\n              context: { $implicit: item.children, level: level + 1 }\n            \"\n            ></ng-container>\n          </ul>\n        </div>\n      }\n    </li>\n  }\n</ng-template>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:6px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0;margin:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out;width:250px}.pt-side-bar-menu .submenu-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;min-height:0}.pt-side-bar-menu .submenu-wrapper.expanded{grid-template-rows:1fr}.pt-side-bar-menu .submenu-wrapper:not(.expanded){margin:0!important;padding:0!important}.pt-side-bar-menu .submenu-list{overflow:hidden;min-height:0;list-style-type:none;margin-top:5px;margin-bottom:0;position:relative}.pt-side-bar-menu .submenu-wrapper:not(.expanded) .submenu-list{margin:0!important;padding-top:0!important;padding-bottom:0!important;border-left:none!important}.pt-side-bar-menu .submenu-list-root{border-left:1px solid #e5e7eb;margin-left:23px;padding-left:25px;padding-top:5px;padding-bottom:5px}.pt-side-bar-menu .submenu-list-root:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-list-nested{border-left:1px solid #2f3b46;margin-left:18px;padding-left:20px;padding-top:4px;padding-bottom:4px}.pt-side-bar-menu .submenu-item,.pt-side-bar-menu .submenu-level-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-level-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:22px;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-title{margin-left:5px}.pt-side-bar-menu .search-input{width:100%;display:flex;align-items:center;justify-content:center}.pt-side-bar-menu .search-input pt-text-input{display:block;width:240px}\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: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTSideBarMenuComponent, isStandalone: false, selector: "pt-side-bar-menu", inputs: { menuConfig: "menuConfig" }, ngImport: i0, template: "<div class=\"pt-side-bar-menu\">\n  @if (isSearchEnabled()) {\n    <pt-card\n      [config]=\"searchCardConfig\"\n      [ngClass]=\"{ 'sidebar-hidden': menuConfig.isVisible === false }\"\n    >\n      <div class=\"search-input\">\n        <pt-text-input\n          [formGroup]=\"formGroup\"\n          [formField]=\"searchField\"\n        ></pt-text-input>\n      </div>\n    </pt-card>\n  }\n\n  <pt-card\n    [config]=\"cardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': menuConfig.isVisible === false }\"\n  >\n    <ul class=\"menu-list\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          recursiveMenu;\n          context: { $implicit: filteredMenus, level: 0 }\n        \"\n      ></ng-container>\n    </ul>\n  </pt-card>\n</div>\n\n<ng-template #recursiveMenu let-menus let-level=\"level\">\n  @for (item of menus; track item) {\n    <li\n      class=\"menu-item\"\n      [ngClass]=\"{\n        'menu-item-expanded': item.isExpanded,\n        'submenu-level-item': level > 0,\n      }\"\n      [attr.data-level]=\"level\"\n      [ngStyle]=\"getMenuItemStyles()\"\n    >\n      @if (!hasChildren(item)) {\n        <a\n          [routerLink]=\"item.url\"\n          [class.menu-link]=\"level === 0\"\n          [class.submenu-link]=\"level > 0\"\n          [ngStyle]=\"\n            level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n          \"\n        >\n          <i [ngClass]=\"item.icon\"></i>\n\n          <span [class.submenu-title]=\"level > 0\">\n            {{ item.label }}\n          </span>\n\n          @if (item.badge) {\n            <span [ngStyle]=\"getBadgeStyles(item.badge)\" class=\"badge\">\n              {{ item.badge.count }}\n            </span>\n          }\n        </a>\n      }\n\n      @if (hasChildren(item)) {\n        <a\n          href=\"#\"\n          [class.menu-link]=\"level === 0\"\n          [class.submenu-link]=\"level > 0\"\n          (click)=\"toggleMenu(item, $event)\"\n          [ngStyle]=\"\n            level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n          \"\n        >\n          <i [ngClass]=\"item.icon\"></i>\n\n          <span [class.submenu-title]=\"level > 0\">\n            {{ item.label }}\n          </span>\n\n          @if (item.badge) {\n            <span [ngStyle]=\"getBadgeStyles(item.badge)\" class=\"badge\">\n              {{ item.badge.count }}\n            </span>\n          }\n\n          <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n        </a>\n      }\n\n      @if (hasChildren(item)) {\n        <div class=\"submenu-wrapper\" [class.expanded]=\"item.isExpanded\">\n          <ul\n            class=\"submenu-list\"\n            [ngClass]=\"{\n              'submenu-list-root': level === 0,\n              'submenu-list-nested': level > 0,\n            }\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                recursiveMenu;\n                context: { $implicit: item.children, level: level + 1 }\n              \"\n            ></ng-container>\n          </ul>\n        </div>\n      }\n    </li>\n  }\n</ng-template>\n", styles: [".pt-side-bar-menu{display:block;box-sizing:border-box}.pt-side-bar-menu *{box-sizing:border-box}.pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:6px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0;margin:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block;width:100%;box-sizing:border-box}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out}.pt-side-bar-menu .submenu-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;min-height:0}.pt-side-bar-menu .submenu-wrapper.expanded{grid-template-rows:1fr}.pt-side-bar-menu .submenu-wrapper:not(.expanded){margin:0!important;padding:0!important}.pt-side-bar-menu .submenu-list{overflow:hidden;min-height:0;list-style-type:none;margin-top:5px;margin-bottom:0;position:relative}.pt-side-bar-menu .submenu-wrapper:not(.expanded) .submenu-list{margin:0!important;padding-top:0!important;padding-bottom:0!important;border-left:none!important}.pt-side-bar-menu .submenu-list-root{border-left:1px solid #e5e7eb;margin-left:23px;padding-left:25px;padding-top:5px;padding-bottom:5px}.pt-side-bar-menu .submenu-list-root:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-list-nested{border-left:1px solid #2f3b46;margin-left:18px;padding-left:20px;padding-top:4px;padding-bottom:4px}.pt-side-bar-menu .submenu-item,.pt-side-bar-menu .submenu-level-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-level-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:22px;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-title{margin-left:5px}.pt-side-bar-menu .search-input{width:100%;max-width:100%;display:block;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input pt-text-input{display:block;width:100%;max-width:100%;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input ::ng-deep .p-iconfield,.pt-side-bar-menu .search-input ::ng-deep .p-input-icon-left,.pt-side-bar-menu .search-input ::ng-deep .p-input-icon-right,.pt-side-bar-menu .search-input ::ng-deep .p-inputgroup{width:100%;max-width:100%;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input ::ng-deep input,.pt-side-bar-menu .search-input ::ng-deep .p-inputtext{width:100%!important;max-width:100%;height:42px;box-sizing:border-box}.pt-side-bar-menu .search-input ::ng-deep input:focus,.pt-side-bar-menu .search-input ::ng-deep .p-inputtext:focus{outline-offset:0}\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: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTSideBarMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-side-bar-menu', standalone: false, template: "<div class=\"pt-side-bar-menu\">\n  @if (menuConfig.searchable) {\n    <pt-card\n      [config]=\"searchCardConfig\"\n      [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n      >\n      <div class=\"search-input\">\n        <pt-text-input [formGroup]=\"formGroup\" [formField]=\"searchField\">\n        </pt-text-input>\n      </div>\n    </pt-card>\n  }\n\n  <pt-card\n    [config]=\"cardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': !menuConfig.isVisible }\"\n    >\n    <ul class=\"menu-list\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          recursiveMenu;\n          context: { $implicit: filteredMenus, level: 0 }\n        \"\n      ></ng-container>\n    </ul>\n  </pt-card>\n</div>\n\n<ng-template #recursiveMenu let-menus let-level=\"level\">\n  @for (item of menus; track item) {\n    <li\n      class=\"menu-item\"\n      [ngClass]=\"{\n        'menu-item-expanded': item.isExpanded,\n        'submenu-level-item': level > 0,\n      }\"\n      [attr.data-level]=\"level\"\n      [ngStyle]=\"getMenuItemStyles()\"\n      >\n      <!-- item without children -->\n      @if (!hasChildren(item)) {\n        <a\n          [routerLink]=\"item.url\"\n          [class.menu-link]=\"level === 0\"\n          [class.submenu-link]=\"level > 0\"\n        [ngStyle]=\"\n          level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n        \"\n          >\n          <i [ngClass]=\"item.icon\"></i>\n          <span [class.submenu-title]=\"level > 0\">{{ item.label }}</span>\n          @if (item.badge) {\n            <span\n              [ngStyle]=\"getBadgeStyles(item.badge)\"\n              class=\"badge\"\n              >\n              {{ item.badge.count }}\n            </span>\n          }\n        </a>\n      }\n      <!-- item with children -->\n      @if (hasChildren(item)) {\n        <a\n          href=\"#\"\n          [class.menu-link]=\"level === 0\"\n          [class.submenu-link]=\"level > 0\"\n          (click)=\"toggleMenu(item, $event)\"\n        [ngStyle]=\"\n          level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n        \"\n          >\n          <i [ngClass]=\"item.icon\"></i>\n          <span [class.submenu-title]=\"level > 0\">{{ item.label }}</span>\n          @if (item.badge) {\n            <span\n              [ngStyle]=\"getBadgeStyles(item.badge)\"\n              class=\"badge\"\n              >\n              {{ item.badge.count }}\n            </span>\n          }\n          <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n        </a>\n      }\n      @if (hasChildren(item)) {\n        <div\n          class=\"submenu-wrapper\"\n          [class.expanded]=\"item.isExpanded\"\n          >\n          <ul\n            class=\"submenu-list\"\n          [ngClass]=\"{\n            'submenu-list-root': level === 0,\n            'submenu-list-nested': level > 0,\n          }\"\n            >\n            <ng-container\n            *ngTemplateOutlet=\"\n              recursiveMenu;\n              context: { $implicit: item.children, level: level + 1 }\n            \"\n            ></ng-container>\n          </ul>\n        </div>\n      }\n    </li>\n  }\n</ng-template>\n", styles: [".pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:6px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0;margin:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out;width:250px}.pt-side-bar-menu .submenu-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;min-height:0}.pt-side-bar-menu .submenu-wrapper.expanded{grid-template-rows:1fr}.pt-side-bar-menu .submenu-wrapper:not(.expanded){margin:0!important;padding:0!important}.pt-side-bar-menu .submenu-list{overflow:hidden;min-height:0;list-style-type:none;margin-top:5px;margin-bottom:0;position:relative}.pt-side-bar-menu .submenu-wrapper:not(.expanded) .submenu-list{margin:0!important;padding-top:0!important;padding-bottom:0!important;border-left:none!important}.pt-side-bar-menu .submenu-list-root{border-left:1px solid #e5e7eb;margin-left:23px;padding-left:25px;padding-top:5px;padding-bottom:5px}.pt-side-bar-menu .submenu-list-root:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-list-nested{border-left:1px solid #2f3b46;margin-left:18px;padding-left:20px;padding-top:4px;padding-bottom:4px}.pt-side-bar-menu .submenu-item,.pt-side-bar-menu .submenu-level-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-level-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:22px;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-title{margin-left:5px}.pt-side-bar-menu .search-input{width:100%;display:flex;align-items:center;justify-content:center}.pt-side-bar-menu .search-input pt-text-input{display:block;width:240px}\n"] }]
+            args: [{ selector: 'pt-side-bar-menu', standalone: false, template: "<div class=\"pt-side-bar-menu\">\n  @if (isSearchEnabled()) {\n    <pt-card\n      [config]=\"searchCardConfig\"\n      [ngClass]=\"{ 'sidebar-hidden': menuConfig.isVisible === false }\"\n    >\n      <div class=\"search-input\">\n        <pt-text-input\n          [formGroup]=\"formGroup\"\n          [formField]=\"searchField\"\n        ></pt-text-input>\n      </div>\n    </pt-card>\n  }\n\n  <pt-card\n    [config]=\"cardConfig\"\n    [ngClass]=\"{ 'sidebar-hidden': menuConfig.isVisible === false }\"\n  >\n    <ul class=\"menu-list\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          recursiveMenu;\n          context: { $implicit: filteredMenus, level: 0 }\n        \"\n      ></ng-container>\n    </ul>\n  </pt-card>\n</div>\n\n<ng-template #recursiveMenu let-menus let-level=\"level\">\n  @for (item of menus; track item) {\n    <li\n      class=\"menu-item\"\n      [ngClass]=\"{\n        'menu-item-expanded': item.isExpanded,\n        'submenu-level-item': level > 0,\n      }\"\n      [attr.data-level]=\"level\"\n      [ngStyle]=\"getMenuItemStyles()\"\n    >\n      @if (!hasChildren(item)) {\n        <a\n          [routerLink]=\"item.url\"\n          [class.menu-link]=\"level === 0\"\n          [class.submenu-link]=\"level > 0\"\n          [ngStyle]=\"\n            level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n          \"\n        >\n          <i [ngClass]=\"item.icon\"></i>\n\n          <span [class.submenu-title]=\"level > 0\">\n            {{ item.label }}\n          </span>\n\n          @if (item.badge) {\n            <span [ngStyle]=\"getBadgeStyles(item.badge)\" class=\"badge\">\n              {{ item.badge.count }}\n            </span>\n          }\n        </a>\n      }\n\n      @if (hasChildren(item)) {\n        <a\n          href=\"#\"\n          [class.menu-link]=\"level === 0\"\n          [class.submenu-link]=\"level > 0\"\n          (click)=\"toggleMenu(item, $event)\"\n          [ngStyle]=\"\n            level === 0 ? getMenuLinkStyles() : getSubMenuLinkStyles(level)\n          \"\n        >\n          <i [ngClass]=\"item.icon\"></i>\n\n          <span [class.submenu-title]=\"level > 0\">\n            {{ item.label }}\n          </span>\n\n          @if (item.badge) {\n            <span [ngStyle]=\"getBadgeStyles(item.badge)\" class=\"badge\">\n              {{ item.badge.count }}\n            </span>\n          }\n\n          <i [ngClass]=\"getChevronClass(item)\" class=\"chevron\"></i>\n        </a>\n      }\n\n      @if (hasChildren(item)) {\n        <div class=\"submenu-wrapper\" [class.expanded]=\"item.isExpanded\">\n          <ul\n            class=\"submenu-list\"\n            [ngClass]=\"{\n              'submenu-list-root': level === 0,\n              'submenu-list-nested': level > 0,\n            }\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                recursiveMenu;\n                context: { $implicit: item.children, level: level + 1 }\n              \"\n            ></ng-container>\n          </ul>\n        </div>\n      }\n    </li>\n  }\n</ng-template>\n", styles: [".pt-side-bar-menu{display:block;box-sizing:border-box}.pt-side-bar-menu *{box-sizing:border-box}.pt-side-bar-menu .badge{background-color:#38bdf8;border-radius:5px;color:#fff;font-size:12px;margin-left:auto;padding:2px 8px}.pt-side-bar-menu .chevron{color:#8c8c8c;cursor:pointer;margin-left:auto}.pt-side-bar-menu .menu-item{position:relative}.pt-side-bar-menu .menu-link{align-items:center;border-radius:8px;color:#333;cursor:pointer;display:flex;font-size:16px;margin-bottom:6px;padding:10px 15px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .menu-link:hover{background-color:#f1f1f1;color:#111}.pt-side-bar-menu .menu-link i{margin-right:10px}.pt-side-bar-menu .menu-list{list-style-type:none;padding:0;margin:0}.pt-side-bar-menu pt-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;display:block;width:100%;box-sizing:border-box}.pt-side-bar-menu .sidebar-hidden{transform:translate(-100%);opacity:0}.pt-side-bar-menu .sidebar-menu{margin:0;padding:0;transition:transform .3s ease-in-out}.pt-side-bar-menu .submenu-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;min-height:0}.pt-side-bar-menu .submenu-wrapper.expanded{grid-template-rows:1fr}.pt-side-bar-menu .submenu-wrapper:not(.expanded){margin:0!important;padding:0!important}.pt-side-bar-menu .submenu-list{overflow:hidden;min-height:0;list-style-type:none;margin-top:5px;margin-bottom:0;position:relative}.pt-side-bar-menu .submenu-wrapper:not(.expanded) .submenu-list{margin:0!important;padding-top:0!important;padding-bottom:0!important;border-left:none!important}.pt-side-bar-menu .submenu-list-root{border-left:1px solid #e5e7eb;margin-left:23px;padding-left:25px;padding-top:5px;padding-bottom:5px}.pt-side-bar-menu .submenu-list-root:after{background-color:#e5e7eb;bottom:0;content:\"\";left:-1px;position:absolute;top:0;width:1px}.pt-side-bar-menu .submenu-list-nested{border-left:1px solid #2f3b46;margin-left:18px;padding-left:20px;padding-top:4px;padding-bottom:4px}.pt-side-bar-menu .submenu-item,.pt-side-bar-menu .submenu-level-item{padding:5px 0;position:relative}.pt-side-bar-menu .submenu-level-item:before{background-color:#e5e7eb;content:\"\";height:1px;left:-25px;position:absolute;top:22px;transform:translateY(-50%);width:25px}.pt-side-bar-menu .submenu-link{align-items:center;border-radius:5px;color:#666;display:flex;font-size:14px;padding:5px 10px;text-decoration:none;transition:background-color .2s,color .2s}.pt-side-bar-menu .submenu-link:hover{background-color:#f1f1f1;color:#000}.pt-side-bar-menu .submenu-title{margin-left:5px}.pt-side-bar-menu .search-input{width:100%;max-width:100%;display:block;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input pt-text-input{display:block;width:100%;max-width:100%;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input ::ng-deep .p-iconfield,.pt-side-bar-menu .search-input ::ng-deep .p-input-icon-left,.pt-side-bar-menu .search-input ::ng-deep .p-input-icon-right,.pt-side-bar-menu .search-input ::ng-deep .p-inputgroup{width:100%;max-width:100%;box-sizing:border-box;overflow:visible}.pt-side-bar-menu .search-input ::ng-deep input,.pt-side-bar-menu .search-input ::ng-deep .p-inputtext{width:100%!important;max-width:100%;height:42px;box-sizing:border-box}.pt-side-bar-menu .search-input ::ng-deep input:focus,.pt-side-bar-menu .search-input ::ng-deep .p-inputtext:focus{outline-offset:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { menuConfig: [{
                 type: Input
             }] } });
@@ -4740,19 +4908,28 @@ class PTFooterComponent {
             version: '1.0.0',
             productionYear: new Date().getFullYear(),
         };
-    }
-    getCurrentYear() {
-        return new Date().getFullYear();
-    }
-    getCardConfig() {
-        return (this.footerConfig.cardConfig ?? {
+        this.defaultFooterCardConfig = {
             backgroundColor: '#f8f8f8',
             width: '100%',
             height: 'auto',
             scrollableVertical: false,
+            scrollableHorizontal: false,
             padding: '0',
             margin: '0',
-        });
+            bodyPadding: '0',
+        };
+    }
+    getCurrentYear() {
+        return new Date().getFullYear();
+    }
+    getCardConfig() {
+        return {
+            ...this.defaultFooterCardConfig,
+            ...(this.footerConfig.cardConfig ?? {}),
+            padding: this.footerConfig.cardConfig?.padding ?? '0',
+            margin: this.footerConfig.cardConfig?.margin ?? '0',
+            bodyPadding: this.footerConfig.cardConfig?.bodyPadding ?? '0',
+        };
     }
     displayYears() {
         const currentYear = this.getCurrentYear();
@@ -4762,11 +4939,11 @@ class PTFooterComponent {
             : `${productionYear} - ${currentYear}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: PTFooterComponent, isStandalone: false, selector: "pt-footer", inputs: { footerConfig: "footerConfig" }, ngImport: i0, template: "<pt-card [config]=\"getCardConfig()\" class=\"footer-card\">\n  <footer class=\"footer\">\n    <p>\n      {{ footerConfig.appName }} V {{ footerConfig.version }}\n      <br />\n      &copy; {{ displayYears() }} All rights reserved.\n    </p>\n  </footer>\n</pt-card>\n", styles: [".footer{text-align:center;padding:5px;font-size:14px;line-height:1.8;margin-top:0}.footer-card{width:100%;background-color:transparent;margin-top:0}\n"], dependencies: [{ kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: PTFooterComponent, isStandalone: false, selector: "pt-footer", inputs: { footerConfig: "footerConfig" }, ngImport: i0, template: "<pt-card [config]=\"getCardConfig()\" class=\"footer-card\">\n  <footer class=\"footer\">\n    <p>\n      {{ footerConfig.appName }} V {{ footerConfig.version }}\n      <br />\n      &copy; {{ displayYears() }} All rights reserved.\n    </p>\n  </footer>\n</pt-card>\n", styles: [".footer{text-align:center;padding:0;font-size:14px;line-height:1.2;margin-top:0}.footer-card{width:100%;background-color:transparent;margin-top:0}\n"], dependencies: [{ kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-footer', standalone: false, template: "<pt-card [config]=\"getCardConfig()\" class=\"footer-card\">\n  <footer class=\"footer\">\n    <p>\n      {{ footerConfig.appName }} V {{ footerConfig.version }}\n      <br />\n      &copy; {{ displayYears() }} All rights reserved.\n    </p>\n  </footer>\n</pt-card>\n", styles: [".footer{text-align:center;padding:5px;font-size:14px;line-height:1.8;margin-top:0}.footer-card{width:100%;background-color:transparent;margin-top:0}\n"] }]
+            args: [{ selector: 'pt-footer', standalone: false, template: "<pt-card [config]=\"getCardConfig()\" class=\"footer-card\">\n  <footer class=\"footer\">\n    <p>\n      {{ footerConfig.appName }} V {{ footerConfig.version }}\n      <br />\n      &copy; {{ displayYears() }} All rights reserved.\n    </p>\n  </footer>\n</pt-card>\n", styles: [".footer{text-align:center;padding:0;font-size:14px;line-height:1.2;margin-top:0}.footer-card{width:100%;background-color:transparent;margin-top:0}\n"] }]
         }], propDecorators: { footerConfig: [{
                 type: Input
             }] } });
@@ -4939,11 +5116,11 @@ class PTPageSkeletonComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPageSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTPageSkeletonComponent, isStandalone: false, selector: "pt-page-skeleton", inputs: { pageSkeletonConfig: "pageSkeletonConfig", serverDateTime: "serverDateTime" }, outputs: { toggleSidebar: "toggleSidebar" }, ngImport: i0, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n  <!-- Navbar -->\n  <pt-nav-bar-menu\n    [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n    [serverDateTime]=\"serverDateTime\"\n    (toggleSidebar)=\"onToggleSidebar()\"\n  ></pt-nav-bar-menu>\n\n  <div class=\"main-content\">\n    <!-- Sidebar (use *ngIf to toggle visibility) -->\n    @if (isSidebarVisible) {\n      <pt-side-bar-menu\n        [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n        class=\"sidebar\"\n      ></pt-side-bar-menu>\n    }\n\n    <!-- Main View Area -->\n    <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n      <!-- Content Card Wrapper -->\n      <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n        <!-- Breadcrumb -->\n        @if (pageSkeletonConfig.breadCrumbConfig) {\n          <pt-bread-crumb\n            [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n            class=\"bread-crumb\"\n          ></pt-bread-crumb>\n        }\n\n        <!-- Background Card -->\n\n        <router-outlet></router-outlet>\n      </pt-card>\n    </div>\n  </div>\n\n  <!-- Footer -->\n  @if (pageSkeletonConfig.footerConfig) {\n    <pt-footer\n      [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n      class=\"pt-footer\"\n    ></pt-footer>\n  }\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px}.app-container{display:flex;flex-direction:column;height:100vh}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden}.sidebar{width:300px;transition:all .3s ease-in-out}.content-area.full-width{margin-left:0;width:100%}:host>pt-card{width:100%;min-height:100vh;max-width:100%;overflow:hidden}.content-area>pt-card{width:100%;height:100%;max-width:100%;overflow:hidden}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{display:block;width:100%;position:relative;z-index:0;margin-top:0}:host ::ng-deep .pt-footer .footer-card,:host ::ng-deep .pt-footer pt-card{height:auto!important;overflow:visible!important}.footer-card{width:100%;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PTNavbarMenuComponent, selector: "pt-nav-bar-menu", inputs: ["navBarMenuConfig", "serverDateTime"], outputs: ["toggleSidebar"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTSideBarMenuComponent, selector: "pt-side-bar-menu", inputs: ["menuConfig"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: PTFooterComponent, selector: "pt-footer", inputs: ["footerConfig"] }, { kind: "component", type: PTBreadCrumbComponent, selector: "pt-bread-crumb", inputs: ["breadCrumbConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTPageSkeletonComponent, isStandalone: false, selector: "pt-page-skeleton", inputs: { pageSkeletonConfig: "pageSkeletonConfig", serverDateTime: "serverDateTime" }, outputs: { toggleSidebar: "toggleSidebar" }, ngImport: i0, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n  <!-- Navbar -->\n  <pt-nav-bar-menu\n    [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n    [serverDateTime]=\"serverDateTime\"\n    (toggleSidebar)=\"onToggleSidebar()\"\n  ></pt-nav-bar-menu>\n\n  <div class=\"main-content\">\n    <!-- Sidebar (use *ngIf to toggle visibility) -->\n    @if (isSidebarVisible) {\n      <pt-side-bar-menu\n        [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n        class=\"sidebar\"\n      ></pt-side-bar-menu>\n    }\n\n    <!-- Main View Area -->\n    <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n      <!-- Content Card Wrapper -->\n      <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n        <!-- Breadcrumb -->\n        @if (pageSkeletonConfig.breadCrumbConfig) {\n          <pt-bread-crumb\n            [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n            class=\"bread-crumb\"\n          ></pt-bread-crumb>\n        }\n\n        <!-- Background Card -->\n\n        <router-outlet></router-outlet>\n      </pt-card>\n    </div>\n  </div>\n\n  <!-- Footer -->\n  @if (pageSkeletonConfig.footerConfig) {\n    <pt-footer\n      [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n      class=\"pt-footer\"\n    ></pt-footer>\n  }\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px}.app-container{display:flex;flex-direction:column;height:100vh}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden}.sidebar{transition:all .3s ease-in-out}.content-area.full-width{margin-left:0;width:100%}:host>pt-card{width:100%;min-height:100vh;max-width:100%;overflow:hidden}.content-area>pt-card{width:100%;height:100%;max-width:100%;overflow:hidden}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{display:block;width:100%;position:relative;z-index:0;margin-top:0}:host ::ng-deep .pt-footer .footer-card,:host ::ng-deep .pt-footer pt-card{height:auto!important;overflow:visible!important}.footer-card{width:100%;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PTNavbarMenuComponent, selector: "pt-nav-bar-menu", inputs: ["navBarMenuConfig", "serverDateTime"], outputs: ["toggleSidebar", "userClick", "logoutClick"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTSideBarMenuComponent, selector: "pt-side-bar-menu", inputs: ["menuConfig"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: PTFooterComponent, selector: "pt-footer", inputs: ["footerConfig"] }, { kind: "component", type: PTBreadCrumbComponent, selector: "pt-bread-crumb", inputs: ["breadCrumbConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPageSkeletonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-page-skeleton', standalone: false, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n  <!-- Navbar -->\n  <pt-nav-bar-menu\n    [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n    [serverDateTime]=\"serverDateTime\"\n    (toggleSidebar)=\"onToggleSidebar()\"\n  ></pt-nav-bar-menu>\n\n  <div class=\"main-content\">\n    <!-- Sidebar (use *ngIf to toggle visibility) -->\n    @if (isSidebarVisible) {\n      <pt-side-bar-menu\n        [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n        class=\"sidebar\"\n      ></pt-side-bar-menu>\n    }\n\n    <!-- Main View Area -->\n    <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n      <!-- Content Card Wrapper -->\n      <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n        <!-- Breadcrumb -->\n        @if (pageSkeletonConfig.breadCrumbConfig) {\n          <pt-bread-crumb\n            [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n            class=\"bread-crumb\"\n          ></pt-bread-crumb>\n        }\n\n        <!-- Background Card -->\n\n        <router-outlet></router-outlet>\n      </pt-card>\n    </div>\n  </div>\n\n  <!-- Footer -->\n  @if (pageSkeletonConfig.footerConfig) {\n    <pt-footer\n      [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n      class=\"pt-footer\"\n    ></pt-footer>\n  }\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px}.app-container{display:flex;flex-direction:column;height:100vh}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden}.sidebar{width:300px;transition:all .3s ease-in-out}.content-area.full-width{margin-left:0;width:100%}:host>pt-card{width:100%;min-height:100vh;max-width:100%;overflow:hidden}.content-area>pt-card{width:100%;height:100%;max-width:100%;overflow:hidden}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{display:block;width:100%;position:relative;z-index:0;margin-top:0}:host ::ng-deep .pt-footer .footer-card,:host ::ng-deep .pt-footer pt-card{height:auto!important;overflow:visible!important}.footer-card{width:100%;background-color:transparent}\n"] }]
+            args: [{ selector: 'pt-page-skeleton', standalone: false, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n  <!-- Navbar -->\n  <pt-nav-bar-menu\n    [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n    [serverDateTime]=\"serverDateTime\"\n    (toggleSidebar)=\"onToggleSidebar()\"\n  ></pt-nav-bar-menu>\n\n  <div class=\"main-content\">\n    <!-- Sidebar (use *ngIf to toggle visibility) -->\n    @if (isSidebarVisible) {\n      <pt-side-bar-menu\n        [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n        class=\"sidebar\"\n      ></pt-side-bar-menu>\n    }\n\n    <!-- Main View Area -->\n    <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n      <!-- Content Card Wrapper -->\n      <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n        <!-- Breadcrumb -->\n        @if (pageSkeletonConfig.breadCrumbConfig) {\n          <pt-bread-crumb\n            [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n            class=\"bread-crumb\"\n          ></pt-bread-crumb>\n        }\n\n        <!-- Background Card -->\n\n        <router-outlet></router-outlet>\n      </pt-card>\n    </div>\n  </div>\n\n  <!-- Footer -->\n  @if (pageSkeletonConfig.footerConfig) {\n    <pt-footer\n      [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n      class=\"pt-footer\"\n    ></pt-footer>\n  }\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px}.app-container{display:flex;flex-direction:column;height:100vh}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden}.sidebar{transition:all .3s ease-in-out}.content-area.full-width{margin-left:0;width:100%}:host>pt-card{width:100%;min-height:100vh;max-width:100%;overflow:hidden}.content-area>pt-card{width:100%;height:100%;max-width:100%;overflow:hidden}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{display:block;width:100%;position:relative;z-index:0;margin-top:0}:host ::ng-deep .pt-footer .footer-card,:host ::ng-deep .pt-footer pt-card{height:auto!important;overflow:visible!important}.footer-card{width:100%;background-color:transparent}\n"] }]
         }], propDecorators: { pageSkeletonConfig: [{
                 type: Input
             }], serverDateTime: [{
@@ -6456,6 +6633,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
+// nav-bar-menu-config.model.ts
+
 // src/lib/models/pt-dialog-config.model.ts
 
 // Advanced table